this.maxSelections) {
+ this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
+ return false;
+ }
+ return true;
+ },
+
+ // inherit docs
+ disable: function(){
+ this.disabled = true;
+ this.hiddenField.dom.disabled = true;
+ this.fs.disable();
+ },
+
+ // inherit docs
+ enable: function(){
+ this.disabled = false;
+ this.hiddenField.dom.disabled = false;
+ this.fs.enable();
+ },
+
+ // inherit docs
+ destroy: function(){
+ Ext.destroy(this.fs, this.dragZone, this.dropZone);
+ Ext.ux.form.MultiSelect.superclass.destroy.call(this);
+ }
+});
+
+
+Ext.reg('multiselect', Ext.ux.form.MultiSelect);
+
+//backwards compat
+Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
+
+
+Ext.ux.form.MultiSelect.DragZone = function(ms, config){
+ this.ms = ms;
+ this.view = ms.view;
+ var ddGroup = config.ddGroup || 'MultiselectDD';
+ var dd;
+ if (Ext.isArray(ddGroup)){
+ dd = ddGroup.shift();
+ } else {
+ dd = ddGroup;
+ ddGroup = null;
+ }
+ Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+ this.setDraggable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
+ onInitDrag : function(x, y){
+ var el = Ext.get(this.dragData.ddel.cloneNode(true));
+ this.proxy.update(el.dom);
+ el.setWidth(el.child('em').getWidth());
+ this.onStartDrag(x, y);
+ return true;
+ },
+
+ // private
+ collectSelection: function(data) {
+ data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
+ var i = 0;
+ this.view.store.each(function(rec){
+ if (this.view.isSelected(i)) {
+ var n = this.view.getNode(i);
+ var dragNode = n.cloneNode(true);
+ dragNode.id = Ext.id();
+ data.ddel.appendChild(dragNode);
+ data.records.push(this.view.store.getAt(i));
+ data.viewNodes.push(n);
+ }
+ i++;
+ }, this);
+ },
+
+ // override
+ onEndDrag: function(data, e) {
+ var d = Ext.get(this.dragData.ddel);
+ if (d && d.hasClass("multi-proxy")) {
+ d.remove();
+ }
+ },
+
+ // override
+ getDragData: function(e){
+ var target = this.view.findItemFromChild(e.getTarget());
+ if(target) {
+ if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
+ this.view.select(target);
+ this.ms.setValue(this.ms.getValue());
+ }
+ if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
+ var dragData = {
+ sourceView: this.view,
+ viewNodes: [],
+ records: []
+ };
+ if (this.view.getSelectionCount() == 1) {
+ var i = this.view.getSelectedIndexes()[0];
+ var n = this.view.getNode(i);
+ dragData.viewNodes.push(dragData.ddel = n);
+ dragData.records.push(this.view.store.getAt(i));
+ dragData.repairXY = Ext.fly(n).getXY();
+ } else {
+ dragData.ddel = document.createElement('div');
+ dragData.ddel.className = 'multi-proxy';
+ this.collectSelection(dragData);
+ }
+ return dragData;
+ }
+ return false;
+ },
+
+ // override the default repairXY.
+ getRepairXY : function(e){
+ return this.dragData.repairXY;
+ },
+
+ // private
+ setDraggable: function(ddGroup){
+ if (!ddGroup) return;
+ if (Ext.isArray(ddGroup)) {
+ Ext.each(ddGroup, this.setDraggable, this);
+ return;
+ }
+ this.addToGroup(ddGroup);
+ }
+});
+
+Ext.ux.form.MultiSelect.DropZone = function(ms, config){
+ this.ms = ms;
+ this.view = ms.view;
+ var ddGroup = config.ddGroup || 'MultiselectDD';
+ var dd;
+ if (Ext.isArray(ddGroup)){
+ dd = ddGroup.shift();
+ } else {
+ dd = ddGroup;
+ ddGroup = null;
+ }
+ Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
+ this.setDroppable(ddGroup);
+};
+
+Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
+ /**
+ * Part of the Ext.dd.DropZone interface. If no target node is found, the
+ * whole Element becomes the target, and this causes the drop gesture to append.
+ */
+ getTargetFromEvent : function(e) {
+ var target = e.getTarget();
+ return target;
+ },
+
+ // private
+ getDropPoint : function(e, n, dd){
+ if (n == this.ms.fs.body.dom) { return "below"; }
+ var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
+ var c = t + (b - t) / 2;
+ var y = Ext.lib.Event.getPageY(e);
+ if(y <= c) {
+ return "above";
+ }else{
+ return "below";
+ }
+ },
+
+ // private
+ isValidDropPoint: function(pt, n, data) {
+ if (!data.viewNodes || (data.viewNodes.length != 1)) {
+ return true;
+ }
+ var d = data.viewNodes[0];
+ if (d == n) {
+ return false;
+ }
+ if ((pt == "below") && (n.nextSibling == d)) {
+ return false;
+ }
+ if ((pt == "above") && (n.previousSibling == d)) {
+ return false;
+ }
+ return true;
+ },
+
+ // override
+ onNodeEnter : function(n, dd, e, data){
+ return false;
+ },
+
+ // override
+ onNodeOver : function(n, dd, e, data){
+ var dragElClass = this.dropNotAllowed;
+ var pt = this.getDropPoint(e, n, dd);
+ if (this.isValidDropPoint(pt, n, data)) {
+ if (this.ms.appendOnly) {
+ return "x-tree-drop-ok-below";
+ }
+
+ // set the insert point style on the target node
+ if (pt) {
+ var targetElClass;
+ if (pt == "above"){
+ dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+ targetElClass = "x-view-drag-insert-above";
+ } else {
+ dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+ targetElClass = "x-view-drag-insert-below";
+ }
+ if (this.lastInsertClass != targetElClass){
+ Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+ this.lastInsertClass = targetElClass;
+ }
+ }
+ }
+ return dragElClass;
+ },
+
+ // private
+ onNodeOut : function(n, dd, e, data){
+ this.removeDropIndicators(n);
+ },
+
+ // private
+ onNodeDrop : function(n, dd, e, data){
+ if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
+ return false;
+ }
+ var pt = this.getDropPoint(e, n, dd);
+ if (n != this.ms.fs.body.dom)
+ n = this.view.findItemFromChild(n);
+ var insertAt = (this.ms.appendOnly || (n == this.ms.fs.body.dom)) ? this.view.store.getCount() : this.view.indexOf(n);
+ if (pt == "below") {
+ insertAt++;
+ }
+
+ var dir = false;
+
+ // Validate if dragging within the same MultiSelect
+ if (data.sourceView == this.view) {
+ // If the first element to be inserted below is the target node, remove it
+ if (pt == "below") {
+ if (data.viewNodes[0] == n) {
+ data.viewNodes.shift();
+ }
+ } else { // If the last element to be inserted above is the target node, remove it
+ if (data.viewNodes[data.viewNodes.length - 1] == n) {
+ data.viewNodes.pop();
+ }
+ }
+
+ // Nothing to drop...
+ if (!data.viewNodes.length) {
+ return false;
+ }
+
+ // If we are moving DOWN, then because a store.remove() takes place first,
+ // the insertAt must be decremented.
+ if (insertAt > this.view.store.indexOf(data.records[0])) {
+ dir = 'down';
+ insertAt--;
+ }
+ }
+
+ for (var i = 0; i < data.records.length; i++) {
+ var r = data.records[i];
+ if (data.sourceView) {
+ data.sourceView.store.remove(r);
+ }
+ this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
+ var si = this.view.store.sortInfo;
+ if(si){
+ this.view.store.sort(si.field, si.direction);
+ }
+ }
+ return true;
+ },
+
+ // private
+ removeDropIndicators : function(n){
+ if(n){
+ Ext.fly(n).removeClass([
+ "x-view-drag-insert-above",
+ "x-view-drag-insert-left",
+ "x-view-drag-insert-right",
+ "x-view-drag-insert-below"]);
+ this.lastInsertClass = "_noclass";
+ }
+ },
+
+ // private
+ setDroppable: function(ddGroup){
+ if (!ddGroup) return;
+ if (Ext.isArray(ddGroup)) {
+ Ext.each(ddGroup, this.setDroppable, this);
+ return;
+ }
+ this.addToGroup(ddGroup);
+ }
+});
+
+/* Fix for Opera, which does not seem to include the map function on Array's */
+if (!Array.prototype.map) {
+ Array.prototype.map = function(fun){
+ var len = this.length;
+ if (typeof fun != 'function') {
+ throw new TypeError();
+ }
+ var res = new Array(len);
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in this) {
+ res[i] = fun.call(thisp, this[i], i, this);
+ }
+ }
+ return res;
+ };
+}
+
+Ext.ns('Ext.ux.data');
+
+/**
+ * @class Ext.ux.data.PagingMemoryProxy
+ * @extends Ext.data.MemoryProxy
+ * Paging Memory Proxy, allows to use paging grid with in memory dataset
+ */
+Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
+ constructor : function(data){
+ Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
+ this.data = data;
+ },
+ doRequest : function(action, rs, params, reader, callback, scope, options){
+ params = params ||
+ {};
+ var result;
+ try {
+ result = reader.readRecords(this.data);
+ }
+ catch (e) {
+ this.fireEvent('loadexception', this, options, null, e);
+ callback.call(scope, null, options, false);
+ return;
+ }
+
+ // filtering
+ if (params.filter !== undefined) {
+ result.records = result.records.filter(function(el){
+ if (typeof(el) == 'object') {
+ var att = params.filterCol || 0;
+ return String(el.data[att]).match(params.filter) ? true : false;
+ }
+ else {
+ return String(el).match(params.filter) ? true : false;
+ }
+ });
+ result.totalRecords = result.records.length;
+ }
+
+ // sorting
+ if (params.sort !== undefined) {
+ // use integer as params.sort to specify column, since arrays are not named
+ // params.sort=0; would also match a array without columns
+ var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
+ var fn = function(r1, r2){
+ return r1 < r2;
+ };
+ result.records.sort(function(a, b){
+ var v = 0;
+ if (typeof(a) == 'object') {
+ v = fn(a.data[params.sort], b.data[params.sort]) * dir;
+ }
+ else {
+ v = fn(a, b) * dir;
+ }
+ if (v == 0) {
+ v = (a.index < b.index ? -1 : 1);
+ }
+ return v;
+ });
+ }
+ // paging (use undefined cause start can also be 0 (thus false))
+ if (params.start !== undefined && params.limit !== undefined) {
+ result.records = result.records.slice(params.start, params.start + params.limit);
+ }
+ callback.call(scope, result, options, true);
+ }
+});
+
+//backwards compat.
+Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
+Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
+ minHeight: 0,
+ maxHeight:10000000,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+ this.events = {};
+ Ext.ux.PanelResizer.superclass.constructor.call(this, config);
+ },
+
+ init : function(p){
+ this.panel = p;
+
+ if(this.panel.elements.indexOf('footer')==-1){
+ p.elements += ',footer';
+ }
+ p.on('render', this.onRender, this);
+ },
+
+ onRender : function(p){
+ this.handle = p.footer.createChild({cls:'x-panel-resize'});
+
+ this.tracker = new Ext.dd.DragTracker({
+ onStart: this.onDragStart.createDelegate(this),
+ onDrag: this.onDrag.createDelegate(this),
+ onEnd: this.onDragEnd.createDelegate(this),
+ tolerance: 3,
+ autoStart: 300
+ });
+ this.tracker.initEl(this.handle);
+ p.on('beforedestroy', this.tracker.destroy, this.tracker);
+ },
+
+ // private
+ onDragStart: function(e){
+ this.dragging = true;
+ this.startHeight = this.panel.el.getHeight();
+ this.fireEvent('dragstart', this, e);
+ },
+
+ // private
+ onDrag: function(e){
+ this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
+ this.fireEvent('drag', this, e);
+ },
+
+ // private
+ onDragEnd: function(e){
+ this.dragging = false;
+ this.fireEvent('dragend', this, e);
+ }
+});
+Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
+ layout : 'column',
+ autoScroll : true,
+ cls : 'x-portal',
+ defaultType : 'portalcolumn',
+
+ initComponent : function(){
+ Ext.ux.Portal.superclass.initComponent.call(this);
+ this.addEvents({
+ validatedrop:true,
+ beforedragover:true,
+ dragover:true,
+ beforedrop:true,
+ drop:true
+ });
+ },
+
+ initEvents : function(){
+ Ext.ux.Portal.superclass.initEvents.call(this);
+ this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
+ },
+
+ beforeDestroy : function() {
+ if(this.dd){
+ this.dd.unreg();
+ }
+ Ext.ux.Portal.superclass.beforeDestroy.call(this);
+ }
+});
+
+Ext.reg('portal', Ext.ux.Portal);
+
+
+Ext.ux.Portal.DropZone = function(portal, cfg){
+ this.portal = portal;
+ Ext.dd.ScrollManager.register(portal.body);
+ Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
+ portal.body.ddScrollConfig = this.ddScrollConfig;
+};
+
+Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
+ ddScrollConfig : {
+ vthresh: 50,
+ hthresh: -1,
+ animate: true,
+ increment: 200
+ },
+
+ createEvent : function(dd, e, data, col, c, pos){
+ return {
+ portal: this.portal,
+ panel: data.panel,
+ columnIndex: col,
+ column: c,
+ position: pos,
+ data: data,
+ source: dd,
+ rawEvent: e,
+ status: this.dropAllowed
+ };
+ },
+
+ notifyOver : function(dd, e, data){
+ var xy = e.getXY(), portal = this.portal, px = dd.proxy;
+
+ // case column widths
+ if(!this.grid){
+ this.grid = this.getGrid();
+ }
+
+ // handle case scroll where scrollbars appear during drag
+ var cw = portal.body.dom.clientWidth;
+ if(!this.lastCW){
+ this.lastCW = cw;
+ }else if(this.lastCW != cw){
+ this.lastCW = cw;
+ portal.doLayout();
+ this.grid = this.getGrid();
+ }
+
+ // determine column
+ var col = 0, xs = this.grid.columnX, cmatch = false;
+ for(var len = xs.length; col < len; col++){
+ if(xy[0] < (xs[col].x + xs[col].w)){
+ cmatch = true;
+ break;
+ }
+ }
+ // no match, fix last index
+ if(!cmatch){
+ col--;
+ }
+
+ // find insert position
+ var p, match = false, pos = 0,
+ c = portal.items.itemAt(col),
+ items = c.items.items, overSelf = false;
+
+ for(var len = items.length; pos < len; pos++){
+ p = items[pos];
+ var h = p.el.getHeight();
+ if(h === 0){
+ overSelf = true;
+ }
+ else if((p.el.getY()+(h/2)) > xy[1]){
+ match = true;
+ break;
+ }
+ }
+
+ pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
+ var overEvent = this.createEvent(dd, e, data, col, c, pos);
+
+ if(portal.fireEvent('validatedrop', overEvent) !== false &&
+ portal.fireEvent('beforedragover', overEvent) !== false){
+
+ // make sure proxy width is fluid
+ px.getProxy().setWidth('auto');
+
+ if(p){
+ px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
+ }else{
+ px.moveProxy(c.el.dom, null);
+ }
+
+ this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
+ this.scrollPos = portal.body.getScroll();
+
+ portal.fireEvent('dragover', overEvent);
+
+ return overEvent.status;
+ }else{
+ return overEvent.status;
+ }
+
+ },
+
+ notifyOut : function(){
+ delete this.grid;
+ },
+
+ notifyDrop : function(dd, e, data){
+ delete this.grid;
+ if(!this.lastPos){
+ return;
+ }
+ var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
+
+ var dropEvent = this.createEvent(dd, e, data, col, c,
+ pos !== false ? pos : c.items.getCount());
+
+ if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
+ this.portal.fireEvent('beforedrop', dropEvent) !== false){
+
+ dd.proxy.getProxy().remove();
+ dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
+
+ if(pos !== false){
+ if(c == dd.panel.ownerCt && (c.items.items.indexOf(dd.panel) <= pos)){
+ pos++;
+ }
+ c.insert(pos, dd.panel);
+ }else{
+ c.add(dd.panel);
+ }
+
+ c.doLayout();
+
+ this.portal.fireEvent('drop', dropEvent);
+
+ // scroll position is lost on drop, fix it
+ var st = this.scrollPos.top;
+ if(st){
+ var d = this.portal.body.dom;
+ setTimeout(function(){
+ d.scrollTop = st;
+ }, 10);
+ }
+
+ }
+ delete this.lastPos;
+ },
+
+ // internal cache of body and column coords
+ getGrid : function(){
+ var box = this.portal.bwrap.getBox();
+ box.columnX = [];
+ this.portal.items.each(function(c){
+ box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
+ });
+ return box;
+ },
+
+ // unregister the dropzone from ScrollManager
+ unreg: function() {
+ //Ext.dd.ScrollManager.unregister(this.portal.body);
+ Ext.ux.Portal.DropZone.superclass.unreg.call(this);
+ }
+});
+Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
+ layout : 'anchor',
+ //autoEl : 'div',//already defined by Ext.Component
+ defaultType : 'portlet',
+ cls : 'x-portal-column'
+});
+
+Ext.reg('portalcolumn', Ext.ux.PortalColumn);
+Ext.ux.Portlet = Ext.extend(Ext.Panel, {
+ anchor : '100%',
+ frame : true,
+ collapsible : true,
+ draggable : true,
+ cls : 'x-portlet'
+});
+
+Ext.reg('portlet', Ext.ux.Portlet);
+/**
+* @class Ext.ux.ProgressBarPager
+* @extends Object
+* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
+*
+* @ptype progressbarpager
+* @constructor
+* Create a new ItemSelector
+* @param {Object} config Configuration options
+* @xtype itemselector
+*/
+Ext.ux.ProgressBarPager = Ext.extend(Object, {
+ /**
+ * @cfg {Integer} progBarWidth
+ * The default progress bar width. Default is 225.
+ */
+ progBarWidth : 225,
+ /**
+ * @cfg {String} defaultText
+ * The text to display while the store is loading. Default is 'Loading...'
+ */
+ defaultText : 'Loading...',
+ /**
+ * @cfg {Object} defaultAnimCfg
+ * A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.
+ */
+ defaultAnimCfg : {
+ duration : 1,
+ easing : 'bounceOut'
+ },
+ constructor : function(config) {
+ if (config) {
+ Ext.apply(this, config);
+ }
+ },
+ //public
+ init : function (parent) {
+
+ if(parent.displayInfo){
+ this.parent = parent;
+ var ind = parent.items.indexOf(parent.displayItem);
+ parent.remove(parent.displayItem, true);
+ this.progressBar = new Ext.ProgressBar({
+ text : this.defaultText,
+ width : this.progBarWidth,
+ animate : this.defaultAnimCfg
+ });
+
+ parent.displayItem = this.progressBar;
+
+ parent.add(parent.displayItem);
+ parent.doLayout();
+ Ext.apply(parent, this.parentOverrides);
+
+ this.progressBar.on('render', function(pb) {
+ pb.el.applyStyles('cursor:pointer');
+
+ pb.el.on('click', this.handleProgressBarClick, this);
+ }, this);
+
+
+ // Remove the click handler from the
+ this.progressBar.on({
+ scope : this,
+ beforeDestroy : function() {
+ this.progressBar.el.un('click', this.handleProgressBarClick, this);
+ }
+ });
+
+ }
+
+ },
+ // private
+ // This method handles the click for the progress bar
+ handleProgressBarClick : function(e){
+ var parent = this.parent;
+ var displayItem = parent.displayItem;
+
+ var box = this.progressBar.getBox();
+ var xy = e.getXY();
+ var position = xy[0]-box.x;
+ var pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize);
+
+ var newpage = Math.ceil(position/(displayItem.width/pages));
+ parent.changePage(newpage);
+ },
+
+ // private, overriddes
+ parentOverrides : {
+ // private
+ // This method updates the information via the progress bar.
+ updateInfo : function(){
+ if(this.displayItem){
+ var count = this.store.getCount();
+ var pgData = this.getPageData();
+ var pageNum = this.readPage(pgData);
+
+ var msg = count == 0 ?
+ this.emptyMsg :
+ String.format(
+ this.displayMsg,
+ this.cursor+1, this.cursor+count, this.store.getTotalCount()
+ );
+
+ pageNum = pgData.activePage; ;
+
+ var pct = pageNum / pgData.pages;
+
+ this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
+ }
+ }
+ }
+});
+Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
+
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.RowEditor
+ * @extends Ext.Panel
+ * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
+ * A validation mode may be enabled which uses AnchorTips to notify the user of all
+ * validation errors at once.
+ *
+ * @ptype roweditor
+ */
+Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
+ floating: true,
+ shadow: false,
+ layout: 'hbox',
+ cls: 'x-small-editor',
+ buttonAlign: 'center',
+ baseCls: 'x-row-editor',
+ elements: 'header,footer,body',
+ frameWidth: 5,
+ buttonPad: 3,
+ clicksToEdit: 'auto',
+ monitorValid: true,
+ focusDelay: 250,
+ errorSummary: true,
+
+ defaults: {
+ normalWidth: true
+ },
+
+ initComponent: function(){
+ Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
+ this.addEvents(
+ /**
+ * @event beforeedit
+ * Fired before the row editor is activated.
+ * If the listener returns false the editor will not be activated.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'beforeedit',
+ /**
+ * @event validateedit
+ * Fired after a row is edited and passes validation.
+ * If the listener returns false changes to the record will not be set.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Object} changes Object with changes made to the record.
+ * @param {Ext.data.Record} r The Record that was edited.
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'validateedit',
+ /**
+ * @event afteredit
+ * Fired after a row is edited and passes validation. This event is fired
+ * after the store's update event is fired with this edit.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Object} changes Object with changes made to the record.
+ * @param {Ext.data.Record} r The Record that was edited.
+ * @param {Number} rowIndex The rowIndex of the row just edited
+ */
+ 'afteredit'
+ );
+ },
+
+ init: function(grid){
+ this.grid = grid;
+ this.ownerCt = grid;
+ if(this.clicksToEdit === 2){
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }else{
+ grid.on('rowclick', this.onRowClick, this);
+ if(Ext.isIE){
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }
+ }
+
+ // stopEditing without saving when a record is removed from Store.
+ grid.getStore().on('remove', function() {
+ this.stopEditing(false);
+ },this);
+
+ grid.on({
+ scope: this,
+ keydown: this.onGridKey,
+ columnresize: this.verifyLayout,
+ columnmove: this.refreshFields,
+ reconfigure: this.refreshFields,
+ destroy : this.destroy,
+ bodyscroll: {
+ buffer: 250,
+ fn: this.positionButtons
+ }
+ });
+ grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
+ grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
+ },
+
+ refreshFields: function(){
+ this.initFields();
+ this.verifyLayout();
+ },
+
+ isDirty: function(){
+ var dirty;
+ this.items.each(function(f){
+ if(String(this.values[f.id]) !== String(f.getValue())){
+ dirty = true;
+ return false;
+ }
+ }, this);
+ return dirty;
+ },
+
+ startEditing: function(rowIndex, doFocus){
+ if(this.editing && this.isDirty()){
+ this.showTooltip('You need to commit or cancel your changes');
+ return;
+ }
+ this.editing = true;
+ if(typeof rowIndex == 'object'){
+ rowIndex = this.grid.getStore().indexOf(rowIndex);
+ }
+ if(this.fireEvent('beforeedit', this, rowIndex) !== false){
+ var g = this.grid, view = g.getView();
+ var row = view.getRow(rowIndex);
+ var record = g.store.getAt(rowIndex);
+ this.record = record;
+ this.rowIndex = rowIndex;
+ this.values = {};
+ if(!this.rendered){
+ this.render(view.getEditorParent());
+ }
+ var w = Ext.fly(row).getWidth();
+ this.setSize(w);
+ if(!this.initialized){
+ this.initFields();
+ }
+ var cm = g.getColumnModel(), fields = this.items.items, f, val;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ val = this.preEditValue(record, cm.getDataIndex(i));
+ f = fields[i];
+ f.setValue(val);
+ this.values[f.id] = val || '';
+ }
+ this.verifyLayout(true);
+ if(!this.isVisible()){
+ this.setPagePosition(Ext.fly(row).getXY());
+ } else{
+ this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
+ }
+ if(!this.isVisible()){
+ this.show().doLayout();
+ }
+ if(doFocus !== false){
+ this.doFocus.defer(this.focusDelay, this);
+ }
+ }
+ },
+
+ stopEditing : function(saveChanges){
+ this.editing = false;
+ if(!this.isVisible()){
+ return;
+ }
+ if(saveChanges === false || !this.isValid()){
+ this.hide();
+ return;
+ }
+ var changes = {}, r = this.record, hasChange = false;
+ var cm = this.grid.colModel, fields = this.items.items;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(!cm.isHidden(i)){
+ var dindex = cm.getDataIndex(i);
+ if(!Ext.isEmpty(dindex)){
+ var oldValue = r.data[dindex];
+ var value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
+ if(String(oldValue) !== String(value)){
+ changes[dindex] = value;
+ hasChange = true;
+ }
+ }
+ }
+ }
+ if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
+ r.beginEdit();
+ for(var k in changes){
+ if(changes.hasOwnProperty(k)){
+ r.set(k, changes[k]);
+ }
+ }
+ r.endEdit();
+ this.fireEvent('afteredit', this, changes, r, this.rowIndex);
+ }
+ this.hide();
+ },
+
+ verifyLayout: function(force){
+ if(this.el && (this.isVisible() || force === true)){
+ var row = this.grid.getView().getRow(this.rowIndex);
+ this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + (Ext.isBorderBox ? 9 : 0) : undefined);
+ var cm = this.grid.colModel, fields = this.items.items;
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ if(!cm.isHidden(i)){
+ var adjust = 0;
+ if(i === 0){
+ adjust += 0; // outer padding
+ }
+ if(i === (len - 1)){
+ adjust += 3; // outer padding
+ } else{
+ adjust += 1;
+ }
+ fields[i].show();
+ fields[i].setWidth(cm.getColumnWidth(i) - adjust);
+ } else{
+ fields[i].hide();
+ }
+ }
+ this.doLayout();
+ this.positionButtons();
+ }
+ },
+
+ slideHide : function(){
+ this.hide();
+ },
+
+ initFields: function(){
+ var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
+ this.removeAll(false);
+ for(var i = 0, len = cm.getColumnCount(); i < len; i++){
+ var c = cm.getColumnAt(i);
+ var ed = c.getEditor();
+ if(!ed){
+ ed = c.displayEditor || new Ext.form.DisplayField();
+ }
+ if(i == 0){
+ ed.margins = pm('0 1 2 1');
+ } else if(i == len - 1){
+ ed.margins = pm('0 0 2 1');
+ } else{
+ ed.margins = pm('0 1 2');
+ }
+ ed.setWidth(cm.getColumnWidth(i));
+ ed.column = c;
+ if(ed.ownerCt !== this){
+ ed.on('focus', this.ensureVisible, this);
+ ed.on('specialkey', this.onKey, this);
+ }
+ this.insert(i, ed);
+ }
+ this.initialized = true;
+ },
+
+ onKey: function(f, e){
+ if(e.getKey() === e.ENTER){
+ this.stopEditing(true);
+ e.stopPropagation();
+ }
+ },
+
+ onGridKey: function(e){
+ if(e.getKey() === e.ENTER && !this.isVisible()){
+ var r = this.grid.getSelectionModel().getSelected();
+ if(r){
+ var index = this.grid.store.indexOf(r);
+ this.startEditing(index);
+ e.stopPropagation();
+ }
+ }
+ },
+
+ ensureVisible: function(editor){
+ if(this.isVisible()){
+ this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
+ }
+ },
+
+ onRowClick: function(g, rowIndex, e){
+ if(this.clicksToEdit == 'auto'){
+ var li = this.lastClickIndex;
+ this.lastClickIndex = rowIndex;
+ if(li != rowIndex && !this.isVisible()){
+ return;
+ }
+ }
+ this.startEditing(rowIndex, false);
+ this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
+ },
+
+ onRowDblClick: function(g, rowIndex, e){
+ this.startEditing(rowIndex, false);
+ this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
+ },
+
+ onRender: function(){
+ Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
+ this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
+ this.btns = new Ext.Panel({
+ baseCls: 'x-plain',
+ cls: 'x-btns',
+ elements:'body',
+ layout: 'table',
+ width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
+ items: [{
+ ref: 'saveBtn',
+ itemId: 'saveBtn',
+ xtype: 'button',
+ text: this.saveText || 'Save',
+ width: this.minButtonWidth,
+ handler: this.stopEditing.createDelegate(this, [true])
+ }, {
+ xtype: 'button',
+ text: this.cancelText || 'Cancel',
+ width: this.minButtonWidth,
+ handler: this.stopEditing.createDelegate(this, [false])
+ }]
+ });
+ this.btns.render(this.bwrap);
+ },
+
+ afterRender: function(){
+ Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
+ this.positionButtons();
+ if(this.monitorValid){
+ this.startMonitoring();
+ }
+ },
+
+ onShow: function(){
+ if(this.monitorValid){
+ this.startMonitoring();
+ }
+ Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
+ },
+
+ onHide: function(){
+ Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
+ this.stopMonitoring();
+ this.grid.getView().focusRow(this.rowIndex);
+ },
+
+ positionButtons: function(){
+ if(this.btns){
+ var h = this.el.dom.clientHeight;
+ var view = this.grid.getView();
+ var scroll = view.scroller.dom.scrollLeft;
+ var width = view.mainBody.getWidth();
+ var bw = this.btns.getWidth();
+ this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
+ }
+ },
+
+ // private
+ preEditValue : function(r, field){
+ var value = r.data[field];
+ return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
+ },
+
+ // private
+ postEditValue : function(value, originalValue, r, field){
+ return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
+ },
+
+ doFocus: function(pt){
+ if(this.isVisible()){
+ var index = 0;
+ if(pt){
+ index = this.getTargetColumnIndex(pt);
+ }
+ var cm = this.grid.getColumnModel();
+ for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
+ var c = cm.getColumnAt(i);
+ if(!c.hidden && c.getEditor()){
+ c.getEditor().focus();
+ break;
+ }
+ }
+ }
+ },
+
+ getTargetColumnIndex: function(pt){
+ var grid = this.grid, v = grid.view;
+ var x = pt.left;
+ var cms = grid.colModel.config;
+ var i = 0, match = false;
+ for(var len = cms.length, c; c = cms[i]; i++){
+ if(!c.hidden){
+ if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
+ match = i;
+ break;
+ }
+ }
+ }
+ return match;
+ },
+
+ startMonitoring : function(){
+ if(!this.bound && this.monitorValid){
+ this.bound = true;
+ Ext.TaskMgr.start({
+ run : this.bindHandler,
+ interval : this.monitorPoll || 200,
+ scope: this
+ });
+ }
+ },
+
+ stopMonitoring : function(){
+ this.bound = false;
+ if(this.tooltip){
+ this.tooltip.hide();
+ }
+ },
+
+ isValid: function(){
+ var valid = true;
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ valid = false;
+ return false;
+ }
+ });
+ return valid;
+ },
+
+ // private
+ bindHandler : function(){
+ if(!this.bound){
+ return false; // stops binding
+ }
+ var valid = this.isValid();
+ if(!valid && this.errorSummary){
+ this.showTooltip(this.getErrorText().join(''));
+ }
+ this.btns.saveBtn.setDisabled(!valid);
+ this.fireEvent('validation', this, valid);
+ },
+
+ showTooltip: function(msg){
+ var t = this.tooltip;
+ if(!t){
+ t = this.tooltip = new Ext.ToolTip({
+ maxWidth: 600,
+ cls: 'errorTip',
+ width: 300,
+ title: 'Errors',
+ autoHide: false,
+ anchor: 'left',
+ anchorToTarget: true,
+ mouseOffset: [40,0]
+ });
+ }
+ t.initTarget(this.items.last().getEl());
+ if(!t.rendered){
+ t.show();
+ t.hide();
+ }
+ t.body.update(msg);
+ t.doAutoWidth();
+ t.show();
+ },
+
+ getErrorText: function(){
+ var data = [''];
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ data.push('- ', f.activeError, '
');
+ }
+ });
+ data.push('
');
+ return data;
+ }
+});
+Ext.preg('roweditor', Ext.ux.grid.RowEditor);
+
+Ext.override(Ext.form.Field, {
+ markInvalid : function(msg){
+ if(!this.rendered || this.preventMark){ // not rendered
+ return;
+ }
+ msg = msg || this.invalidText;
+
+ var mt = this.getMessageHandler();
+ if(mt){
+ mt.mark(this, msg);
+ }else if(this.msgTarget){
+ this.el.addClass(this.invalidClass);
+ var t = Ext.getDom(this.msgTarget);
+ if(t){
+ t.innerHTML = msg;
+ t.style.display = this.msgDisplay;
+ }
+ }
+ this.activeError = msg;
+ this.fireEvent('invalid', this, msg);
+ }
+});
+
+Ext.override(Ext.ToolTip, {
+ doAutoWidth : function(){
+ var bw = this.body.getTextWidth();
+ if(this.title){
+ bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
+ }
+ bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + 20;
+ this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
+
+ // IE7 repaint bug on initial show
+ if(Ext.isIE7 && !this.repainted){
+ this.el.repaint();
+ this.repainted = true;
+ }
+ }
+});
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.RowExpander
+ * @extends Ext.util.Observable
+ * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
+ * a second row body which expands/contracts. The expand/contract behavior is configurable to react
+ * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
+ *
+ * @ptype rowexpander
+ */
+Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Boolean} expandOnEnter
+ * true to toggle selected row(s) between expanded/collapsed when the enter
+ * key is pressed (defaults to true).
+ */
+ expandOnEnter : true,
+ /**
+ * @cfg {Boolean} expandOnDblClick
+ * true to toggle a row between expanded/collapsed when double clicked
+ * (defaults to true).
+ */
+ expandOnDblClick : true,
+
+ header : '',
+ width : 20,
+ sortable : false,
+ fixed : true,
+ menuDisabled : true,
+ dataIndex : '',
+ id : 'expander',
+ lazyRender : true,
+ enableCaching : true,
+
+ constructor: function(config){
+ Ext.apply(this, config);
+
+ this.addEvents({
+ /**
+ * @event beforeexpand
+ * Fires before the row expands. Have the listener return false to prevent the row from expanding.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ beforeexpand: true,
+ /**
+ * @event expand
+ * Fires after the row expands.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ expand: true,
+ /**
+ * @event beforecollapse
+ * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ beforecollapse: true,
+ /**
+ * @event collapse
+ * Fires after the row collapses.
+ * @param {Object} this RowExpander object.
+ * @param {Object} Ext.data.Record Record for the selected row.
+ * @param {Object} body body element for the secondary row.
+ * @param {Number} rowIndex The current row index.
+ */
+ collapse: true
+ });
+
+ Ext.ux.grid.RowExpander.superclass.constructor.call(this);
+
+ if(this.tpl){
+ if(typeof this.tpl == 'string'){
+ this.tpl = new Ext.Template(this.tpl);
+ }
+ this.tpl.compile();
+ }
+
+ this.state = {};
+ this.bodyContent = {};
+ },
+
+ getRowClass : function(record, rowIndex, p, ds){
+ p.cols = p.cols-1;
+ var content = this.bodyContent[record.id];
+ if(!content && !this.lazyRender){
+ content = this.getBodyContent(record, rowIndex);
+ }
+ if(content){
+ p.body = content;
+ }
+ return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
+ },
+
+ init : function(grid){
+ this.grid = grid;
+
+ var view = grid.getView();
+ view.getRowClass = this.getRowClass.createDelegate(this);
+
+ view.enableRowBody = true;
+
+
+ grid.on('render', this.onRender, this);
+ grid.on('destroy', this.onDestroy, this);
+ },
+
+ // @private
+ onRender: function() {
+ var grid = this.grid;
+ var mainBody = grid.getView().mainBody;
+ mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
+ if (this.expandOnEnter) {
+ this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
+ 'enter' : this.onEnter,
+ scope: this
+ });
+ }
+ if (this.expandOnDblClick) {
+ grid.on('rowdblclick', this.onRowDblClick, this);
+ }
+ },
+
+ // @private
+ onDestroy: function() {
+ this.keyNav.disable();
+ delete this.keyNav;
+ var mainBody = this.grid.getView().mainBody;
+ mainBody.un('mousedown', this.onMouseDown, this);
+ },
+ // @private
+ onRowDblClick: function(grid, rowIdx, e) {
+ this.toggleRow(rowIdx);
+ },
+
+ onEnter: function(e) {
+ var g = this.grid;
+ var sm = g.getSelectionModel();
+ var sels = sm.getSelections();
+ for (var i = 0, len = sels.length; i < len; i++) {
+ var rowIdx = g.getStore().indexOf(sels[i]);
+ this.toggleRow(rowIdx);
+ }
+ },
+
+ getBodyContent : function(record, index){
+ if(!this.enableCaching){
+ return this.tpl.apply(record.data);
+ }
+ var content = this.bodyContent[record.id];
+ if(!content){
+ content = this.tpl.apply(record.data);
+ this.bodyContent[record.id] = content;
+ }
+ return content;
+ },
+
+ onMouseDown : function(e, t){
+ e.stopEvent();
+ var row = e.getTarget('.x-grid3-row');
+ this.toggleRow(row);
+ },
+
+ renderer : function(v, p, record){
+ p.cellAttr = 'rowspan="2"';
+ return '
';
+ },
+
+ beforeExpand : function(record, body, rowIndex){
+ if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
+ if(this.tpl && this.lazyRender){
+ body.innerHTML = this.getBodyContent(record, rowIndex);
+ }
+ return true;
+ }else{
+ return false;
+ }
+ },
+
+ toggleRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
+ },
+
+ expandRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
+ if(this.beforeExpand(record, body, row.rowIndex)){
+ this.state[record.id] = true;
+ Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
+ this.fireEvent('expand', this, record, body, row.rowIndex);
+ }
+ },
+
+ collapseRow : function(row){
+ if(typeof row == 'number'){
+ row = this.grid.view.getRow(row);
+ }
+ var record = this.grid.store.getAt(row.rowIndex);
+ var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
+ if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
+ this.state[record.id] = false;
+ Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
+ this.fireEvent('collapse', this, record, body, row.rowIndex);
+ }
+ }
+});
+
+Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
+
+//backwards compat
+Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
+// exist by default in Ext, so we have to add the namespace first:
+Ext.ns('Ext.ux.layout');
+
+/**
+ * @class Ext.ux.layout.RowLayout
+ * @extends Ext.layout.ContainerLayout
+ * This is the layout style of choice for creating structural layouts in a multi-row format where the height of
+ * each row can be specified as a percentage or fixed height. Row widths can also be fixed, percentage or auto.
+ * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
+ * and should generally not need to be created directly via the new keyword.
+ * RowLayout does not have any direct config options (other than inherited ones), but it does support a
+ * specific config property of rowHeight that can be included in the config of any panel added to it. The
+ * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
+ * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).
+ * The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
+ * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
+ * less than 1 (e.g., .25).
+ * The basic rules for specifying row heights are pretty simple. The logic makes two passes through the
+ * set of contained panels. During the first layout pass, all panels that either have a fixed height or none
+ * specified (auto) are skipped, but their heights are subtracted from the overall container height. During the second
+ * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
+ * the total remaining container height. In other words, percentage height panels are designed to fill the space
+ * left over by all the fixed-height and/or auto-height panels. Because of this, while you can specify any number of rows
+ * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
+ * layout may not render as expected. Example usage:
+ *
+// All rows are percentages -- they must add up to 1
+var p = new Ext.Panel({
+ title: 'Row Layout - Percentage Only',
+ layout:'ux.row',
+ items: [{
+ title: 'Row 1',
+ rowHeight: .25
+ },{
+ title: 'Row 2',
+ rowHeight: .6
+ },{
+ title: 'Row 3',
+ rowHeight: .15
+ }]
+});
+
+// Mix of height and rowHeight -- all rowHeight values must add
+// up to 1. The first row will take up exactly 120px, and the last two
+// rows will fill the remaining container height.
+var p = new Ext.Panel({
+ title: 'Row Layout - Mixed',
+ layout:'ux.row',
+ items: [{
+ title: 'Row 1',
+ height: 120,
+ // standard panel widths are still supported too:
+ width: '50%' // or 200
+ },{
+ title: 'Row 2',
+ rowHeight: .8,
+ width: 300
+ },{
+ title: 'Row 3',
+ rowHeight: .2
+ }]
+});
+
+ */
+Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
+ // private
+ monitorResize:true,
+
+ // private
+ isValidParent : function(c, target){
+ return c.getEl().dom.parentNode == this.innerCt.dom;
+ },
+
+ // private
+ onLayout : function(ct, target){
+ var rs = ct.items.items, len = rs.length, r, i;
+
+ if(!this.innerCt){
+ target.addClass('ux-row-layout-ct');
+ this.innerCt = target.createChild({cls:'x-row-inner'});
+ }
+ this.renderAll(ct, this.innerCt);
+
+ var size = target.getViewSize();
+
+ if(size.width < 1 && size.height < 1){ // display none?
+ return;
+ }
+
+ var h = size.height - target.getPadding('tb'),
+ ph = h;
+
+ this.innerCt.setSize({height:h});
+
+ // some rows can be percentages while others are fixed
+ // so we need to make 2 passes
+
+ for(i = 0; i < len; i++){
+ r = rs[i];
+ if(!r.rowHeight){
+ ph -= (r.getSize().height + r.getEl().getMargins('tb'));
+ }
+ }
+
+ ph = ph < 0 ? 0 : ph;
+
+ for(i = 0; i < len; i++){
+ r = rs[i];
+ if(r.rowHeight){
+ r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
+ }
+ }
+ }
+
+ /**
+ * @property activeItem
+ * @hide
+ */
+});
+
+Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
+Ext.ns('Ext.ux.form');
+
+Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
+ initComponent : function(){
+ Ext.ux.form.SearchField.superclass.initComponent.call(this);
+ this.on('specialkey', function(f, e){
+ if(e.getKey() == e.ENTER){
+ this.onTrigger2Click();
+ }
+ }, this);
+ },
+
+ validationEvent:false,
+ validateOnBlur:false,
+ trigger1Class:'x-form-clear-trigger',
+ trigger2Class:'x-form-search-trigger',
+ hideTrigger1:true,
+ width:180,
+ hasSearch : false,
+ paramName : 'query',
+
+ onTrigger1Click : function(){
+ if(this.hasSearch){
+ this.el.dom.value = '';
+ var o = {start: 0};
+ this.store.baseParams = this.store.baseParams || {};
+ this.store.baseParams[this.paramName] = '';
+ this.store.reload({params:o});
+ this.triggers[0].hide();
+ this.hasSearch = false;
+ }
+ },
+
+ onTrigger2Click : function(){
+ var v = this.getRawValue();
+ if(v.length < 1){
+ this.onTrigger1Click();
+ return;
+ }
+ var o = {start: 0};
+ this.store.baseParams = this.store.baseParams || {};
+ this.store.baseParams[this.paramName] = v;
+ this.store.reload({params:o});
+ this.hasSearch = true;
+ this.triggers[0].show();
+ }
+});Ext.ns('Ext.ux.form');
+
+/**
+ * @class Ext.ux.form.SelectBox
+ * @extends Ext.form.ComboBox
+ * Makes a ComboBox more closely mimic an HTML SELECT. Supports clicking and dragging
+ * through the list, with item selection occurring when the mouse button is released.
+ * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
+ * on inner elements. Re-enabling editable after calling this will NOT work.
+ * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
+ * @history 2007-07-08 jvs
+ * Slight mods for Ext 2.0
+ * @xtype selectbox
+ */
+Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
+ constructor: function(config){
+ this.searchResetDelay = 1000;
+ config = config || {};
+ config = Ext.apply(config || {}, {
+ editable: false,
+ forceSelection: true,
+ rowHeight: false,
+ lastSearchTerm: false,
+ triggerAction: 'all',
+ mode: 'local'
+ });
+
+ Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
+
+ this.lastSelectedIndex = this.selectedIndex || 0;
+ },
+
+ initEvents : function(){
+ Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
+ // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
+ this.el.on('keydown', this.keySearch, this, true);
+ this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
+ },
+
+ keySearch : function(e, target, options) {
+ var raw = e.getKey();
+ var key = String.fromCharCode(raw);
+ var startIndex = 0;
+
+ if( !this.store.getCount() ) {
+ return;
+ }
+
+ switch(raw) {
+ case Ext.EventObject.HOME:
+ e.stopEvent();
+ this.selectFirst();
+ return;
+
+ case Ext.EventObject.END:
+ e.stopEvent();
+ this.selectLast();
+ return;
+
+ case Ext.EventObject.PAGEDOWN:
+ this.selectNextPage();
+ e.stopEvent();
+ return;
+
+ case Ext.EventObject.PAGEUP:
+ this.selectPrevPage();
+ e.stopEvent();
+ return;
+ }
+
+ // skip special keys other than the shift key
+ if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
+ return;
+ }
+ if( this.lastSearchTerm == key ) {
+ startIndex = this.lastSelectedIndex;
+ }
+ this.search(this.displayField, key, startIndex);
+ this.cshTask.delay(this.searchResetDelay);
+ },
+
+ onRender : function(ct, position) {
+ this.store.on('load', this.calcRowsPerPage, this);
+ Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
+ if( this.mode == 'local' ) {
+ this.calcRowsPerPage();
+ }
+ },
+
+ onSelect : function(record, index, skipCollapse){
+ if(this.fireEvent('beforeselect', this, record, index) !== false){
+ this.setValue(record.data[this.valueField || this.displayField]);
+ if( !skipCollapse ) {
+ this.collapse();
+ }
+ this.lastSelectedIndex = index + 1;
+ this.fireEvent('select', this, record, index);
+ }
+ },
+
+ render : function(ct) {
+ Ext.ux.form.SelectBox.superclass.render.apply(this, arguments);
+ if( Ext.isSafari ) {
+ this.el.swallowEvent('mousedown', true);
+ }
+ this.el.unselectable();
+ this.innerList.unselectable();
+ this.trigger.unselectable();
+ this.innerList.on('mouseup', function(e, target, options) {
+ if( target.id && target.id == this.innerList.id ) {
+ return;
+ }
+ this.onViewClick();
+ }, this);
+
+ this.innerList.on('mouseover', function(e, target, options) {
+ if( target.id && target.id == this.innerList.id ) {
+ return;
+ }
+ this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
+ this.cshTask.delay(this.searchResetDelay);
+ }, this);
+
+ this.trigger.un('click', this.onTriggerClick, this);
+ this.trigger.on('mousedown', function(e, target, options) {
+ e.preventDefault();
+ this.onTriggerClick();
+ }, this);
+
+ this.on('collapse', function(e, target, options) {
+ Ext.getDoc().un('mouseup', this.collapseIf, this);
+ }, this, true);
+
+ this.on('expand', function(e, target, options) {
+ Ext.getDoc().on('mouseup', this.collapseIf, this);
+ }, this, true);
+ },
+
+ clearSearchHistory : function() {
+ this.lastSelectedIndex = 0;
+ this.lastSearchTerm = false;
+ },
+
+ selectFirst : function() {
+ this.focusAndSelect(this.store.data.first());
+ },
+
+ selectLast : function() {
+ this.focusAndSelect(this.store.data.last());
+ },
+
+ selectPrevPage : function() {
+ if( !this.rowHeight ) {
+ return;
+ }
+ var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
+ this.focusAndSelect(this.store.getAt(index));
+ },
+
+ selectNextPage : function() {
+ if( !this.rowHeight ) {
+ return;
+ }
+ var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
+ this.focusAndSelect(this.store.getAt(index));
+ },
+
+ search : function(field, value, startIndex) {
+ field = field || this.displayField;
+ this.lastSearchTerm = value;
+ var index = this.store.find.apply(this.store, arguments);
+ if( index !== -1 ) {
+ this.focusAndSelect(index);
+ }
+ },
+
+ focusAndSelect : function(record) {
+ var index = typeof record === 'number' ? record : this.store.indexOf(record);
+ this.select(index, this.isExpanded());
+ this.onSelect(this.store.getAt(record), index, this.isExpanded());
+ },
+
+ calcRowsPerPage : function() {
+ if( this.store.getCount() ) {
+ this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
+ this.rowsPerPage = this.maxHeight / this.rowHeight;
+ } else {
+ this.rowHeight = false;
+ }
+ }
+
+});
+
+Ext.reg('selectbox', Ext.ux.form.SelectBox);
+
+//backwards compat
+Ext.ux.SelectBox = Ext.ux.form.SelectBox;
+/**
+ * @class Ext.ux.SliderTip
+ * @extends Ext.Tip
+ * Simple plugin for using an Ext.Tip with a slider to show the slider value
+ */
+Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
+ minWidth: 10,
+ offsets : [0, -10],
+ init : function(slider){
+ slider.on('dragstart', this.onSlide, this);
+ slider.on('drag', this.onSlide, this);
+ slider.on('dragend', this.hide, this);
+ slider.on('destroy', this.destroy, this);
+ },
+
+ onSlide : function(slider){
+ this.show();
+ this.body.update(this.getText(slider));
+ this.doAutoWidth();
+ this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
+ },
+
+ getText : function(slider){
+ return String(slider.getValue());
+ }
+});
+Ext.ux.SlidingPager = Ext.extend(Object, {
+ init : function(pbar){
+ Ext.each(pbar.items.getRange(2,6), function(c){
+ c.hide();
+ });
+ var slider = new Ext.Slider({
+ width: 114,
+ minValue: 1,
+ maxValue: 1,
+ plugins: new Ext.ux.SliderTip({
+ getText : function(s){
+ return String.format('Page {0} of {1}', s.value, s.maxValue);
+ }
+ }),
+ listeners: {
+ changecomplete: function(s, v){
+ pbar.changePage(v);
+ }
+ }
+ });
+ pbar.insert(5, slider);
+ pbar.on({
+ change: function(pb, data){
+ slider.maxValue = data.pages;
+ slider.setValue(data.activePage);
+ },
+ beforedestroy: function(){
+ slider.destroy();
+ }
+ });
+ }
+});Ext.ns('Ext.ux.form');
+
+/**
+ * @class Ext.ux.form.SpinnerField
+ * @extends Ext.form.NumberField
+ * Creates a field utilizing Ext.ux.Spinner
+ * @xtype spinnerfield
+ */
+Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
+ deferHeight: true,
+ autoSize: Ext.emptyFn,
+ onBlur: Ext.emptyFn,
+ adjustSize: Ext.BoxComponent.prototype.adjustSize,
+
+ constructor: function(config) {
+ var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
+
+ var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
+
+ var plugins = config.plugins
+ ? (Ext.isArray(config.plugins)
+ ? config.plugins.push(spl)
+ : [config.plugins, spl])
+ : spl;
+
+ Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
+ },
+
+ onShow: function(){
+ if (this.wrap) {
+ this.wrap.dom.style.display = '';
+ this.wrap.dom.style.visibility = 'visible';
+ }
+ },
+
+ onHide: function(){
+ this.wrap.dom.style.display = 'none';
+ },
+
+ // private
+ getResizeEl: function(){
+ return this.wrap;
+ },
+
+ // private
+ getPositionEl: function(){
+ return this.wrap;
+ },
+
+ // private
+ alignErrorIcon: function(){
+ if (this.wrap) {
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ }
+ },
+
+ validateBlur: function(){
+ return true;
+ }
+});
+
+Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
+
+//backwards compat
+Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
+/**
+ * @class Ext.ux.Spinner
+ * @extends Ext.util.Observable
+ * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
+ */
+Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
+ incrementValue: 1,
+ alternateIncrementValue: 5,
+ triggerClass: 'x-form-spinner-trigger',
+ splitterClass: 'x-form-spinner-splitter',
+ alternateKey: Ext.EventObject.shiftKey,
+ defaultValue: 0,
+ accelerate: false,
+
+ constructor: function(config){
+ Ext.ux.Spinner.superclass.constructor.call(this, config);
+ Ext.apply(this, config);
+ this.mimicing = false;
+ },
+
+ init: function(field){
+ this.field = field;
+
+ field.afterMethod('onRender', this.doRender, this);
+ field.afterMethod('onEnable', this.doEnable, this);
+ field.afterMethod('onDisable', this.doDisable, this);
+ field.afterMethod('afterRender', this.doAfterRender, this);
+ field.afterMethod('onResize', this.doResize, this);
+ field.afterMethod('onFocus', this.doFocus, this);
+ field.beforeMethod('onDestroy', this.doDestroy, this);
+ },
+
+ doRender: function(ct, position){
+ var el = this.el = this.field.getEl();
+ var f = this.field;
+
+ if (!f.wrap) {
+ f.wrap = this.wrap = el.wrap({
+ cls: "x-form-field-wrap"
+ });
+ }
+ else {
+ this.wrap = f.wrap.addClass('x-form-field-wrap');
+ }
+
+ this.trigger = this.wrap.createChild({
+ tag: "img",
+ src: Ext.BLANK_IMAGE_URL,
+ cls: "x-form-trigger " + this.triggerClass
+ });
+
+ if (!f.width) {
+ this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
+ }
+
+ this.splitter = this.wrap.createChild({
+ tag: 'div',
+ cls: this.splitterClass,
+ style: 'width:13px; height:2px;'
+ });
+ this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
+
+ this.proxy = this.trigger.createProxy('', this.splitter, true);
+ this.proxy.addClass("x-form-spinner-proxy");
+ this.proxy.setStyle('left', '0px');
+ this.proxy.setSize(14, 1);
+ this.proxy.hide();
+ this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
+ dragElId: this.proxy.id
+ });
+
+ this.initTrigger();
+ this.initSpinner();
+ },
+
+ doAfterRender: function(){
+ var y;
+ if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
+ this.el.position();
+ this.el.setY(y);
+ }
+ },
+
+ doEnable: function(){
+ if (this.wrap) {
+ this.wrap.removeClass(this.field.disabledClass);
+ }
+ },
+
+ doDisable: function(){
+ if (this.wrap) {
+ this.wrap.addClass(this.field.disabledClass);
+ this.el.removeClass(this.field.disabledClass);
+ }
+ },
+
+ doResize: function(w, h){
+ if (typeof w == 'number') {
+ this.el.setWidth(this.field.adjustWidth('input', w - this.trigger.getWidth()));
+ }
+ this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
+ },
+
+ doFocus: function(){
+ if (!this.mimicing) {
+ this.wrap.addClass('x-trigger-wrap-focus');
+ this.mimicing = true;
+ Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
+ delay: 10
+ });
+ this.el.on('keydown', this.checkTab, this);
+ }
+ },
+
+ // private
+ checkTab: function(e){
+ if (e.getKey() == e.TAB) {
+ this.triggerBlur();
+ }
+ },
+
+ // private
+ mimicBlur: function(e){
+ if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
+ this.triggerBlur();
+ }
+ },
+
+ // private
+ triggerBlur: function(){
+ this.mimicing = false;
+ Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
+ this.el.un("keydown", this.checkTab, this);
+ this.field.beforeBlur();
+ this.wrap.removeClass('x-trigger-wrap-focus');
+ this.field.onBlur.call(this.field);
+ },
+
+ initTrigger: function(){
+ this.trigger.addClassOnOver('x-form-trigger-over');
+ this.trigger.addClassOnClick('x-form-trigger-click');
+ },
+
+ initSpinner: function(){
+ this.field.addEvents({
+ 'spin': true,
+ 'spinup': true,
+ 'spindown': true
+ });
+
+ this.keyNav = new Ext.KeyNav(this.el, {
+ "up": function(e){
+ e.preventDefault();
+ this.onSpinUp();
+ },
+
+ "down": function(e){
+ e.preventDefault();
+ this.onSpinDown();
+ },
+
+ "pageUp": function(e){
+ e.preventDefault();
+ this.onSpinUpAlternate();
+ },
+
+ "pageDown": function(e){
+ e.preventDefault();
+ this.onSpinDownAlternate();
+ },
+
+ scope: this
+ });
+
+ this.repeater = new Ext.util.ClickRepeater(this.trigger, {
+ accelerate: this.accelerate
+ });
+ this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
+ preventDefault: true
+ });
+
+ this.field.mon(this.trigger, {
+ mouseover: this.onMouseOver,
+ mouseout: this.onMouseOut,
+ mousemove: this.onMouseMove,
+ mousedown: this.onMouseDown,
+ mouseup: this.onMouseUp,
+ scope: this,
+ preventDefault: true
+ });
+
+ this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
+
+ this.dd.setXConstraint(0, 0, 10)
+ this.dd.setYConstraint(1500, 1500, 10);
+ this.dd.endDrag = this.endDrag.createDelegate(this);
+ this.dd.startDrag = this.startDrag.createDelegate(this);
+ this.dd.onDrag = this.onDrag.createDelegate(this);
+ },
+
+ onMouseOver: function(){
+ if (this.disabled) {
+ return;
+ }
+ var middle = this.getMiddle();
+ this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
+ this.trigger.addClass(this.tmpHoverClass);
+ },
+
+ //private
+ onMouseOut: function(){
+ this.trigger.removeClass(this.tmpHoverClass);
+ },
+
+ //private
+ onMouseMove: function(){
+ if (this.disabled) {
+ return;
+ }
+ var middle = this.getMiddle();
+ if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
+ ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
+ }
+ },
+
+ //private
+ onMouseDown: function(){
+ if (this.disabled) {
+ return;
+ }
+ var middle = this.getMiddle();
+ this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
+ this.trigger.addClass(this.tmpClickClass);
+ },
+
+ //private
+ onMouseUp: function(){
+ this.trigger.removeClass(this.tmpClickClass);
+ },
+
+ //private
+ onTriggerClick: function(){
+ if (this.disabled || this.el.dom.readOnly) {
+ return;
+ }
+ var middle = this.getMiddle();
+ var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
+ this['onSpin' + ud]();
+ },
+
+ //private
+ getMiddle: function(){
+ var t = this.trigger.getTop();
+ var h = this.trigger.getHeight();
+ var middle = t + (h / 2);
+ return middle;
+ },
+
+ //private
+ //checks if control is allowed to spin
+ isSpinnable: function(){
+ if (this.disabled || this.el.dom.readOnly) {
+ Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
+ return false;
+ }
+ return true;
+ },
+
+ handleMouseWheel: function(e){
+ //disable scrolling when not focused
+ if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
+ return;
+ }
+
+ var delta = e.getWheelDelta();
+ if (delta > 0) {
+ this.onSpinUp();
+ e.stopEvent();
+ }
+ else
+ if (delta < 0) {
+ this.onSpinDown();
+ e.stopEvent();
+ }
+ },
+
+ //private
+ startDrag: function(){
+ this.proxy.show();
+ this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
+ },
+
+ //private
+ endDrag: function(){
+ this.proxy.hide();
+ },
+
+ //private
+ onDrag: function(){
+ if (this.disabled) {
+ return;
+ }
+ var y = Ext.fly(this.dd.getDragEl()).getTop();
+ var ud = '';
+
+ if (this._previousY > y) {
+ ud = 'Up';
+ } //up
+ if (this._previousY < y) {
+ ud = 'Down';
+ } //down
+ if (ud != '') {
+ this['onSpin' + ud]();
+ }
+
+ this._previousY = y;
+ },
+
+ //private
+ onSpinUp: function(){
+ if (this.isSpinnable() == false) {
+ return;
+ }
+ if (Ext.EventObject.shiftKey == true) {
+ this.onSpinUpAlternate();
+ return;
+ }
+ else {
+ this.spin(false, false);
+ }
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spinup", this);
+ },
+
+ //private
+ onSpinDown: function(){
+ if (this.isSpinnable() == false) {
+ return;
+ }
+ if (Ext.EventObject.shiftKey == true) {
+ this.onSpinDownAlternate();
+ return;
+ }
+ else {
+ this.spin(true, false);
+ }
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
+ },
+
+ //private
+ onSpinUpAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
+ }
+ this.spin(false, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spinup", this);
+ },
+
+ //private
+ onSpinDownAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
+ }
+ this.spin(true, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
+ },
+
+ spin: function(down, alternate){
+ var v = parseFloat(this.field.getValue());
+ var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
+ (down == true) ? v -= incr : v += incr;
+
+ v = (isNaN(v)) ? this.defaultValue : v;
+ v = this.fixBoundries(v);
+ this.field.setRawValue(v);
+ },
+
+ fixBoundries: function(value){
+ var v = value;
+
+ if (this.field.minValue != undefined && v < this.field.minValue) {
+ v = this.field.minValue;
+ }
+ if (this.field.maxValue != undefined && v > this.field.maxValue) {
+ v = this.field.maxValue;
+ }
+
+ return this.fixPrecision(v);
+ },
+
+ // private
+ fixPrecision: function(value){
+ var nan = isNaN(value);
+ if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
+ return nan ? '' : value;
+ }
+ return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
+ },
+
+ doDestroy: function(){
+ if (this.trigger) {
+ this.trigger.remove();
+ }
+ if (this.wrap) {
+ this.wrap.remove();
+ delete this.field.wrap;
+ }
+
+ if (this.splitter) {
+ this.splitter.remove();
+ }
+
+ if (this.dd) {
+ this.dd.unreg();
+ this.dd = null;
+ }
+
+ if (this.proxy) {
+ this.proxy.remove();
+ }
+
+ if (this.repeater) {
+ this.repeater.purgeListeners();
+ }
+ }
+});
+
+//backwards compat
+Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
+ Ext.apply(this, config);
+}
+Ext.ux.Spotlight.prototype = {
+ active : false,
+ animate : true,
+ duration: .25,
+ easing:'easeNone',
+
+ // private
+ animated : false,
+
+ createElements : function(){
+ var bd = Ext.getBody();
+
+ this.right = bd.createChild({cls:'x-spotlight'});
+ this.left = bd.createChild({cls:'x-spotlight'});
+ this.top = bd.createChild({cls:'x-spotlight'});
+ this.bottom = bd.createChild({cls:'x-spotlight'});
+
+ this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
+ },
+
+ show : function(el, callback, scope){
+ if(this.animated){
+ this.show.defer(50, this, [el, callback, scope]);
+ return;
+ }
+ this.el = Ext.get(el);
+ if(!this.right){
+ this.createElements();
+ }
+ if(!this.active){
+ this.all.setDisplayed('');
+ this.applyBounds(true, false);
+ this.active = true;
+ Ext.EventManager.onWindowResize(this.syncSize, this);
+ this.applyBounds(false, this.animate, false, callback, scope);
+ }else{
+ this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
+ }
+ },
+
+ hide : function(callback, scope){
+ if(this.animated){
+ this.hide.defer(50, this, [callback, scope]);
+ return;
+ }
+ Ext.EventManager.removeResizeListener(this.syncSize, this);
+ this.applyBounds(true, this.animate, true, callback, scope);
+ },
+
+ doHide : function(){
+ this.active = false;
+ this.all.setDisplayed(false);
+ },
+
+ syncSize : function(){
+ this.applyBounds(false, false);
+ },
+
+ applyBounds : function(basePts, anim, doHide, callback, scope){
+
+ var rg = this.el.getRegion();
+
+ var dw = Ext.lib.Dom.getViewWidth(true);
+ var dh = Ext.lib.Dom.getViewHeight(true);
+
+ var c = 0, cb = false;
+ if(anim){
+ cb = {
+ callback: function(){
+ c++;
+ if(c == 4){
+ this.animated = false;
+ if(doHide){
+ this.doHide();
+ }
+ Ext.callback(callback, scope, [this]);
+ }
+ },
+ scope: this,
+ duration: this.duration,
+ easing: this.easing
+ };
+ this.animated = true;
+ }
+
+ this.right.setBounds(
+ rg.right,
+ basePts ? dh : rg.top,
+ dw - rg.right,
+ basePts ? 0 : (dh - rg.top),
+ cb);
+
+ this.left.setBounds(
+ 0,
+ 0,
+ rg.left,
+ basePts ? 0 : rg.bottom,
+ cb);
+
+ this.top.setBounds(
+ basePts ? dw : rg.left,
+ 0,
+ basePts ? 0 : dw - rg.left,
+ rg.top,
+ cb);
+
+ this.bottom.setBounds(
+ 0,
+ rg.bottom,
+ basePts ? 0 : rg.right,
+ dh - rg.bottom,
+ cb);
+
+ if(!anim){
+ if(doHide){
+ this.doHide();
+ }
+ if(callback){
+ Ext.callback(callback, scope, [this]);
+ }
+ }
+ },
+
+ destroy : function(){
+ this.doHide();
+ Ext.destroy(
+ this.right,
+ this.left,
+ this.top,
+ this.bottom);
+ delete this.el;
+ delete this.all;
+ }
+};
+
+//backwards compat
+Ext.Spotlight = Ext.ux.Spotlight;/**
+ * @class Ext.ux.TabCloseMenu
+ * @extends Object
+ * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs.
+ *
+ * @ptype tabclosemenu
+ */
+Ext.ux.TabCloseMenu = function(){
+ var tabs, menu, ctxItem;
+ this.init = function(tp){
+ tabs = tp;
+ tabs.on('contextmenu', onContextMenu);
+ };
+
+ function onContextMenu(ts, item, e){
+ if(!menu){ // create context menu on first right click
+ menu = new Ext.menu.Menu({
+ items: [{
+ id: tabs.id + '-close',
+ text: 'Close Tab',
+ handler : function(){
+ tabs.remove(ctxItem);
+ }
+ },{
+ id: tabs.id + '-close-others',
+ text: 'Close Other Tabs',
+ handler : function(){
+ tabs.items.each(function(item){
+ if(item.closable && item != ctxItem){
+ tabs.remove(item);
+ }
+ });
+ }
+ }]});
+ }
+ ctxItem = item;
+ var items = menu.items;
+ items.get(tabs.id + '-close').setDisabled(!item.closable);
+ var disableOthers = true;
+ tabs.items.each(function(){
+ if(this != item && this.closable){
+ disableOthers = false;
+ return false;
+ }
+ });
+ items.get(tabs.id + '-close-others').setDisabled(disableOthers);
+ e.stopEvent();
+ menu.showAt(e.getPoint());
+ }
+};
+
+Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);
+Ext.ns('Ext.ux.grid');
+
+/**
+ * @class Ext.ux.grid.TableGrid
+ * @extends Ext.grid.GridPanel
+ * A Grid which creates itself from an existing HTML table element.
+ * @history
+ * 2007-03-01 Original version by Nige "Animal" White
+ * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
+ * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
+ * The table MUST have some type of size defined for the grid to fill. The container will be
+ * automatically set to position relative if it isn't already.
+ * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
+ * properties: fields and columns which allow for customizing data fields and columns for this grid.
+ */
+Ext.ux.grid.TableGrid = function(table, config){
+ config = config ||
+ {};
+ Ext.apply(this, config);
+ var cf = config.fields || [], ch = config.columns || [];
+ table = Ext.get(table);
+
+ var ct = table.insertSibling();
+
+ var fields = [], cols = [];
+ var headers = table.query("thead th");
+ for (var i = 0, h; h = headers[i]; i++) {
+ var text = h.innerHTML;
+ var name = 'tcol-' + i;
+
+ fields.push(Ext.applyIf(cf[i] ||
+ {}, {
+ name: name,
+ mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
+ }));
+
+ cols.push(Ext.applyIf(ch[i] ||
+ {}, {
+ 'header': text,
+ 'dataIndex': name,
+ 'width': h.offsetWidth,
+ 'tooltip': h.title,
+ 'sortable': true
+ }));
+ }
+
+ var ds = new Ext.data.Store({
+ reader: new Ext.data.XmlReader({
+ record: 'tbody tr'
+ }, fields)
+ });
+
+ ds.loadData(table.dom);
+
+ var cm = new Ext.grid.ColumnModel(cols);
+
+ if (config.width || config.height) {
+ ct.setSize(config.width || 'auto', config.height || 'auto');
+ }
+ else {
+ ct.setWidth(table.getWidth());
+ }
+
+ if (config.remove !== false) {
+ table.remove();
+ }
+
+ Ext.applyIf(this, {
+ 'ds': ds,
+ 'cm': cm,
+ 'sm': new Ext.grid.RowSelectionModel(),
+ autoHeight: true,
+ autoWidth: false
+ });
+ Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
+};
+
+Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
+
+//backwards compat
+Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
+
+
+Ext.ux.TabScrollerMenu = Ext.extend(Object, {
+ pageSize : 10,
+ maxText : 15,
+ menuPrefixText : 'Items',
+ constructor : function(config) {
+ config = config || {};
+ Ext.apply(this, config);
+ },
+ init : function(tabPanel) {
+ Ext.apply(tabPanel, this.tabPanelMethods);
+
+ tabPanel.tabScrollerMenu = this;
+ var thisRef = this;
+
+ tabPanel.on({
+ render : {
+ scope : tabPanel,
+ single : true,
+ fn : function() {
+ var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
+ tabPanel.createScrollers = newFn;
+ }
+ }
+ });
+ },
+ // private && sequeneced
+ createPanelsMenu : function() {
+ var h = this.stripWrap.dom.offsetHeight;
+
+ //move the right menu item to the left 18px
+ var rtScrBtn = this.header.dom.firstChild;
+ Ext.fly(rtScrBtn).applyStyles({
+ right : '18px'
+ });
+
+ var stripWrap = Ext.get(this.strip.dom.parentNode);
+ stripWrap.applyStyles({
+ 'margin-right' : '36px'
+ });
+
+ // Add the new righthand menu
+ var scrollMenu = this.header.insertFirst({
+ cls:'x-tab-tabmenu-right'
+ });
+ scrollMenu.setHeight(h);
+ scrollMenu.addClassOnOver('x-tab-tabmenu-over');
+ scrollMenu.on('click', this.showTabsMenu, this);
+
+ this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
+ scrollMenu.show();
+ });
+
+ this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
+ scrollMenu.hide();
+ });
+
+ },
+ // public
+ getPageSize : function() {
+ return this.pageSize;
+ },
+ // public
+ setPageSize : function(pageSize) {
+ this.pageSize = pageSize;
+ },
+ // public
+ getMaxText : function() {
+ return this.maxText;
+ },
+ // public
+ setMaxText : function(t) {
+ this.maxText = t;
+ },
+ getMenuPrefixText : function() {
+ return this.menuPrefixText;
+ },
+ setMenuPrefixText : function(t) {
+ this.menuPrefixText = t;
+ },
+ // private && applied to the tab panel itself.
+ tabPanelMethods : {
+ // all execute within the scope of the tab panel
+ // private
+ showTabsMenu : function(e) {
+ if (! this.tabsMenu) {
+ this.tabsMenu = new Ext.menu.Menu();
+ this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
+ }
+
+ this.tabsMenu.removeAll();
+
+ this.generateTabMenuItems();
+
+ var target = Ext.get(e.getTarget());
+ var xy = target.getXY();
+
+ //Y param + 24 pixels
+ xy[1] += 24;
+
+ this.tabsMenu.showAt(xy);
+ },
+ // private
+ generateTabMenuItems : function() {
+ var curActive = this.getActiveTab();
+ var totalItems = this.items.getCount();
+ var pageSize = this.tabScrollerMenu.getPageSize();
+
+
+ if (totalItems > pageSize) {
+ var numSubMenus = Math.floor(totalItems / pageSize);
+ var remainder = totalItems % pageSize;
+
+ // Loop through all of the items and create submenus in chunks of 10
+ for (var i = 0 ; i < numSubMenus; i++) {
+ var curPage = (i + 1) * pageSize;
+ var menuItems = [];
+
+
+ for (var x = 0; x < pageSize; x++) {
+ index = x + curPage - pageSize;
+ var item = this.items.get(index);
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+
+ this.tabsMenu.add({
+ text : this.tabScrollerMenu.getMenuPrefixText() + ' ' + (curPage - pageSize + 1) + ' - ' + curPage,
+ menu : menuItems
+ });
+
+ }
+ // remaining items
+ if (remainder > 0) {
+ var start = numSubMenus * pageSize;
+ menuItems = [];
+ for (var i = start ; i < totalItems; i ++ ) {
+ var item = this.items.get(i);
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+
+
+ this.tabsMenu.add({
+ text : this.tabScrollerMenu.menuPrefixText + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
+ menu : menuItems
+ });
+
+
+ }
+ }
+ else {
+ this.items.each(function(item) {
+ if (item.id != curActive.id && ! item.hidden) {
+ menuItems.push(this.autoGenMenuItem(item));
+ }
+ }, this);
+ }
+ },
+ // private
+ autoGenMenuItem : function(item) {
+ var maxText = this.tabScrollerMenu.getMaxText();
+ var text = Ext.util.Format.ellipsis(item.title, maxText);
+
+ return {
+ text : text,
+ handler : this.showTabFromMenu,
+ scope : this,
+ disabled : item.disabled,
+ tabToShow : item,
+ iconCls : item.iconCls
+ }
+
+ },
+ // private
+ showTabFromMenu : function(menuItem) {
+ this.setActiveTab(menuItem.tabToShow);
+ }
+ }
+});
+Ext.ns('Ext.ux.tree');
+
+/**
+ * @class Ext.ux.tree.XmlTreeLoader
+ * @extends Ext.tree.TreeLoader
+ * A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
+ * Any text value included as a text node in the XML will be added to the parent node as an attribute
+ * called innerText. Also, the tag name of each XML node will be added to the tree node as
+ * an attribute called tagName.
+ * By default, this class expects that your source XML will provide the necessary attributes on each
+ * node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
+ * provide your own custom processing of node attributes by overriding the {@link #processNode} method
+ * and modifying the attributes as needed before they are used to create the associated TreeNode.
+ * @constructor
+ * Creates a new XmlTreeloader.
+ * @param {Object} config A config object containing config properties.
+ */
+Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
+ /**
+ * @property XML_NODE_ELEMENT
+ * XML element node (value 1, read-only)
+ * @type Number
+ */
+ XML_NODE_ELEMENT : 1,
+ /**
+ * @property XML_NODE_TEXT
+ * XML text node (value 3, read-only)
+ * @type Number
+ */
+ XML_NODE_TEXT : 3,
+
+ // private override
+ processResponse : function(response, node, callback){
+ var xmlData = response.responseXML;
+ var root = xmlData.documentElement || xmlData;
+
+ try{
+ node.beginUpdate();
+ node.appendChild(this.parseXml(root));
+ node.endUpdate();
+
+ if(typeof callback == "function"){
+ callback(this, node);
+ }
+ }catch(e){
+ this.handleFailure(response);
+ }
+ },
+
+ // private
+ parseXml : function(node) {
+ var nodes = [];
+ Ext.each(node.childNodes, function(n){
+ if(n.nodeType == this.XML_NODE_ELEMENT){
+ var treeNode = this.createNode(n);
+ if(n.childNodes.length > 0){
+ var child = this.parseXml(n);
+ if(typeof child == 'string'){
+ treeNode.attributes.innerText = child;
+ }else{
+ treeNode.appendChild(child);
+ }
+ }
+ nodes.push(treeNode);
+ }
+ else if(n.nodeType == this.XML_NODE_TEXT){
+ var text = n.nodeValue.trim();
+ if(text.length > 0){
+ return nodes = text;
+ }
+ }
+ }, this);
+
+ return nodes;
+ },
+
+ // private override
+ createNode : function(node){
+ var attr = {
+ tagName: node.tagName
+ };
+
+ Ext.each(node.attributes, function(a){
+ attr[a.nodeName] = a.nodeValue;
+ });
+
+ this.processAttributes(attr);
+
+ return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
+ },
+
+ /*
+ * Template method intended to be overridden by subclasses that need to provide
+ * custom attribute processing prior to the creation of each TreeNode. This method
+ * will be passed a config object containing existing TreeNode attribute name/value
+ * pairs which can be modified as needed directly (no need to return the object).
+ */
+ processAttributes: Ext.emptyFn
+});
+
+//backwards compat
+Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
',
+ '
',
+ '',
+ '', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
+ "