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);
+
+ if(this.ms.appendOnly) {
+ insertAt = this.view.store.getCount();
+ } else {
+ insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : 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 {
@@ -6199,2249 +6286,2239 @@ Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
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;
+
+ // 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(v1, v2){
+ return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ };
+ 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.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
+ }, this, {single: true});
+
+ }
+
+ },
+ // private
+ // This method handles the click for the progress bar
+ handleProgressBarClick : function(e){
+ var parent = this.parent,
+ displayItem = parent.displayItem,
+ box = this.progressBar.getBox(),
+ xy = e.getXY(),
+ position = xy[0]-box.x,
+ pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
+ 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(),
+ pgData = this.getPageData(),
+ pageNum = this.readPage(pgData),
+ 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,
+
+ saveText: 'Save',
+ cancelText: 'Cancel',
+ commitChangesText: 'You need to commit or cancel your changes',
+ errorText: 'Errors',
+
+ 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 canceledit
+ * Fired when the editor is cancelled.
+ * @param {Ext.ux.grid.RowEditor} roweditor This object
+ * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
+ */
+ 'canceledit',
+ /**
+ * @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,
+ beforedestroy : this.beforedestroy,
+ 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, []));
+ },
+
+ beforedestroy: function() {
+ this.stopMonitoring();
+ this.grid.getStore().un('remove', this.onStoreRemove, this);
+ this.stopEditing(false);
+ Ext.destroy(this.btns, this.tooltip);
+ },
+
+ 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(this.commitChangesText);
+ return;
+ }
+ if(Ext.isObject(rowIndex)){
+ rowIndex = this.grid.getStore().indexOf(rowIndex);
+ }
+ if(this.fireEvent('beforeedit', this, rowIndex) !== false){
+ this.editing = true;
+ var g = this.grid, view = g.getView(),
+ row = view.getRow(rowIndex),
+ 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] = Ext.isEmpty(val) ? '' : 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();
+ this.fireEvent('canceledit', this, saveChanges === false);
+ return;
+ }
+ var changes = {},
+ r = this.record,
+ hasChange = false,
+ 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],
+ 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();
+ Ext.iterate(changes, function(name, value){
+ r.set(name, value);
+ });
+ 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() + 9 : 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 === (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),
+ 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,
+ width: this.minButtonWidth,
+ handler: this.stopEditing.createDelegate(this, [true])
+ }, {
+ xtype: 'button',
+ text: this.cancelText,
+ 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 g = this.grid,
+ h = this.el.dom.clientHeight,
+ view = g.getView(),
+ scroll = view.scroller.dom.scrollLeft,
+ bw = this.btns.getWidth(),
+ width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+
+ 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,
+ cm = this.grid.getColumnModel(),
+ c;
+ if(pt){
+ index = this.getTargetColumnIndex(pt);
+ }
+ for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
+ c = cm.getColumnAt(i);
+ if(!c.hidden && c.getEditor()){
+ c.getEditor().focus();
+ break;
+ }
+ }
+ }
+ },
+
+ getTargetColumnIndex: function(pt){
+ var grid = this.grid,
+ v = grid.view,
+ x = pt.left,
+ cms = grid.colModel.config,
+ 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: this.errorText,
+ autoHide: false,
+ anchor: 'left',
+ anchorToTarget: true,
+ mouseOffset: [40,0]
+ });
+ }
+ var v = this.grid.getView(),
+ top = parseInt(this.el.dom.style.top, 10),
+ scroll = v.scroller.dom.scrollTop,
+ h = this.el.getHeight();
+
+ if(top + h >= scroll){
+ t.initTarget(this.items.last().getEl());
+ if(!t.rendered){
+ t.show();
+ t.hide();
+ }
+ t.body.update(msg);
+ t.doAutoWidth(20);
+ t.show();
+ }else if(t.rendered){
+ t.hide();
+ }
+ },
+
+ getErrorText: function(){
+ var data = [''];
+ this.items.each(function(f){
+ if(!f.isValid(true)){
+ data.push('- ', f.getActiveError(), '
');
+ }
+ });
+ data.push('
');
+ return data;
+ }
+});
+Ext.preg('roweditor', Ext.ux.grid.RowEditor);
+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,
+ hideable: false,
+ 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() {
+ if(this.keyNav){
+ this.keyNav.disable();
+ delete this.keyNav;
+ }
+ /*
+ * A majority of the time, the plugin will be destroyed along with the grid,
+ * which means the mainBody won't be available. On the off chance that the plugin
+ * isn't destroyed with the grid, take care of removing the listener.
+ */
+ var mainBody = this.grid.getView().mainBody;
+ if(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,
+
+ type: 'row',
+
+ // private
+ allowContainerRemove: false,
+
+ // private
+ isValidParent : function(c, target){
+ return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+ },
+
+ getLayoutTargetSize : function() {
+ var target = this.container.getLayoutTarget(), ret;
+ if (target) {
+ ret = target.getViewSize();
+
+ // IE in strict mode will return a height of 0 on the 1st pass of getViewSize.
+ // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly
+ // with getViewSize
+ if (Ext.isIE && Ext.isStrict && ret.height == 0){
+ ret = target.getStyleSize();
+ }
+
+ ret.width -= target.getPadding('lr');
+ ret.height -= target.getPadding('tb');
+ }
+ return ret;
+ },
+
+ renderAll : function(ct, target) {
+ if(!this.innerCt){
+ // the innerCt prevents wrapping and shuffling while
+ // the container is resizing
+ this.innerCt = target.createChild({cls:'x-column-inner'});
+ this.innerCt.createChild({cls:'x-clear'});
+ }
+ Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
+ },
+
+ // private
+ onLayout : function(ct, target){
+ var rs = ct.items.items,
+ len = rs.length,
+ r,
+ m,
+ i,
+ margins = [];
+
+ this.renderAll(ct, target);
+
+ var size = this.getLayoutTargetSize();
+
+ if(size.width < 1 && size.height < 1){ // display none?
+ return;
+ }
+
+ var h = size.height,
+ 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];
+ m = r.getPositionEl().getMargins('tb');
+ margins[i] = m;
+ if(!r.rowHeight){
+ ph -= (r.getHeight() + m);
+ }
}
-
- // 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(v1, v2){
- return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
- };
- 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;
- });
+
+ ph = ph < 0 ? 0 : ph;
+
+ for(i = 0; i < len; i++){
+ r = rs[i];
+ m = margins[i];
+ if(r.rowHeight){
+ r.setSize({height: Math.floor(r.rowHeight*ph) - m});
+ }
}
- // 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);
+
+ // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar
+ // spaces were accounted for properly. If not, re-layout.
+ if (Ext.isIE) {
+ if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
+ var ts = this.getLayoutTargetSize();
+ if (ts.width != size.width){
+ this.adjustmentPass = true;
+ this.onLayout(ct, target);
+ }
+ }
}
- callback.call(scope, result, options, true);
+ delete this.adjustmentPass;
}
+
+ /**
+ * @property activeItem
+ * @hide
+ */
});
-//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);
+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.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);
+ * @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);
},
- //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.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
- }, this, {single: true});
-
+
+ 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.initList();
+ this.calcRowsPerPage();
}
-
},
- // private
- // This method handles the click for the progress bar
- handleProgressBarClick : function(e){
- var parent = this.parent,
- displayItem = parent.displayItem,
- box = this.progressBar.getBox(),
- xy = e.getXY(),
- position = xy[0]-box.x,
- pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
- newpage = Math.ceil(position/(displayItem.width/pages));
-
- parent.changePage(newpage);
+
+ 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);
+ }
},
-
- // private, overriddes
- parentOverrides : {
- // private
- // This method updates the information via the progress bar.
- updateInfo : function(){
- if(this.displayItem){
- var count = this.store.getCount(),
- pgData = this.getPageData(),
- pageNum = this.readPage(pgData),
- 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);
+
+ afterRender : function() {
+ Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
+ if(Ext.isWebKit) {
+ 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 = Ext.isNumber(record) ? record : this.store.indexOf(record);
+ this.select(index, this.isExpanded());
+ this.onSelect(this.store.getAt(index), 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.preg('progressbarpager', Ext.ux.ProgressBarPager);
-Ext.ns('Ext.ux.grid');
+Ext.reg('selectbox', Ext.ux.form.SelectBox);
+//backwards compat
+Ext.ux.SelectBox = Ext.ux.form.SelectBox;
/**
- * @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
+ * Plugin for PagingToolbar which replaces the textfield input with a slider
*/
-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,
+Ext.ux.SlidingPager = Ext.extend(Object, {
+ init : function(pbar){
+ var idx = pbar.items.indexOf(pbar.inputItem);
+ Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
+ c.hide();
+ });
+ var slider = new Ext.Slider({
+ width: 114,
+ minValue: 1,
+ maxValue: 1,
+ plugins: new Ext.slider.Tip({
+ getText : function(thumb) {
+ return String.format('Page {0} of {1}', thumb.value, thumb.slider.maxValue);
+ }
+ }),
+ listeners: {
+ changecomplete: function(s, v){
+ pbar.changePage(v);
+ }
+ }
+ });
+ pbar.insert(idx + 1, slider);
+ pbar.on({
+ change: function(pb, data){
+ slider.setMaxValue(data.pages);
+ slider.setValue(data.activePage);
+ }
+ });
+ }
+});Ext.ns('Ext.ux.form');
- saveText: 'Save',
- cancelText: 'Cancel',
- commitChangesText: 'You need to commit or cancel your changes',
- errorText: 'Errors',
+/**
+ * @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, {
+ actionMode: 'wrap',
+ deferHeight: true,
+ autoSize: Ext.emptyFn,
+ onBlur: Ext.emptyFn,
+ adjustSize: Ext.BoxComponent.prototype.adjustSize,
- defaults: {
- normalWidth: true
- },
+ constructor: function(config) {
+ var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
- 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 canceledit
- * Fired when the editor is cancelled.
- * @param {Ext.ux.grid.RowEditor} roweditor This object
- * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
- */
- 'canceledit',
- /**
- * @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'
- );
- },
+ var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
- 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);
- }
- }
+ var plugins = config.plugins
+ ? (Ext.isArray(config.plugins)
+ ? config.plugins.push(spl)
+ : [config.plugins, spl])
+ : spl;
- // stopEditing without saving when a record is removed from Store.
- grid.getStore().on('remove', function() {
- this.stopEditing(false);
- },this);
+ Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
+ },
- grid.on({
- scope: this,
- keydown: this.onGridKey,
- columnresize: this.verifyLayout,
- columnmove: this.refreshFields,
- reconfigure: this.refreshFields,
- beforedestroy : this.beforedestroy,
- 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, []));
+ // private
+ getResizeEl: function(){
+ return this.wrap;
},
- beforedestroy: function() {
- this.grid.getStore().un('remove', this.onStoreRemove, this);
- this.stopEditing(false);
- Ext.destroy(this.btns);
+ // private
+ getPositionEl: function(){
+ return this.wrap;
},
- refreshFields: function(){
- this.initFields();
- this.verifyLayout();
+ // private
+ alignErrorIcon: function(){
+ if (this.wrap) {
+ this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+ }
},
- 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;
+ 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;
},
- startEditing: function(rowIndex, doFocus){
- if(this.editing && this.isDirty()){
- this.showTooltip(this.commitChangesText);
- return;
- }
- if(Ext.isObject(rowIndex)){
- rowIndex = this.grid.getStore().indexOf(rowIndex);
- }
- if(this.fireEvent('beforeedit', this, rowIndex) !== false){
- this.editing = true;
- var g = this.grid, view = g.getView(),
- row = view.getRow(rowIndex),
- record = g.store.getAt(rowIndex);
+ init: function(field){
+ this.field = field;
- 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] = Ext.isEmpty(val) ? '' : 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);
- }
- }
+ 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);
},
- stopEditing : function(saveChanges){
- this.editing = false;
- if(!this.isVisible()){
- return;
- }
- if(saveChanges === false || !this.isValid()){
- this.hide();
- this.fireEvent('canceledit', this, saveChanges === false);
- return;
- }
- var changes = {},
- r = this.record,
- hasChange = false,
- 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],
- 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();
- Ext.iterate(changes, function(name, value){
- r.set(name, value);
+ 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"
});
- 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() + 9 : 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 === (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();
+ 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();
},
- slideHide : function(){
- this.hide();
+ doAfterRender: function(){
+ var y;
+ if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
+ this.el.position();
+ this.el.setY(y);
+ }
},
- 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),
- ed = c.getEditor();
- if(!ed){
- ed = c.displayEditor || new Ext.form.DisplayField();
- }else{
- ed = ed.field;
- }
- 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);
+ doEnable: function(){
+ if (this.wrap) {
+ this.wrap.removeClass(this.field.disabledClass);
}
- this.initialized = true;
},
- onKey: function(f, e){
- if(e.getKey() === e.ENTER){
- this.stopEditing(true);
- e.stopPropagation();
+ doDisable: function(){
+ if (this.wrap) {
+ this.wrap.addClass(this.field.disabledClass);
+ this.el.removeClass(this.field.disabledClass);
}
},
- 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();
- }
+ doResize: function(w, h){
+ if (typeof w == 'number') {
+ this.el.setWidth(w - this.trigger.getWidth());
}
+ this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
},
- ensureVisible: function(editor){
- if(this.isVisible()){
- this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
+ 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);
}
},
- onRowClick: function(g, rowIndex, e){
- if(this.clicksToEdit == 'auto'){
- var li = this.lastClickIndex;
- this.lastClickIndex = rowIndex;
- if(li != rowIndex && !this.isVisible()){
- return;
- }
+ // private
+ checkTab: function(e){
+ if (e.getKey() == e.TAB) {
+ this.triggerBlur();
}
- 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()]);
+ // private
+ mimicBlur: function(e){
+ if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
+ this.triggerBlur();
+ }
},
- 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,
- width: this.minButtonWidth,
- handler: this.stopEditing.createDelegate(this, [true])
- }, {
- xtype: 'button',
- text: this.cancelText,
- width: this.minButtonWidth,
- handler: this.stopEditing.createDelegate(this, [false])
- }]
+ // 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.btns.render(this.bwrap);
+
+ 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);
},
- afterRender: function(){
- Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
- this.positionButtons();
- if(this.monitorValid){
- this.startMonitoring();
+ 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);
},
- onShow: function(){
- if(this.monitorValid){
- this.startMonitoring();
+ //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")) {
}
- 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);
+ //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);
},
- positionButtons: function(){
- if(this.btns){
- var g = this.grid,
- h = this.el.dom.clientHeight,
- view = g.getView(),
- scroll = view.scroller.dom.scrollLeft,
- bw = this.btns.getWidth(),
- width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
+ //private
+ onMouseUp: function(){
+ this.trigger.removeClass(this.tmpClickClass);
+ },
- this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
+ //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
- preEditValue : function(r, field){
- var value = r.data[field];
- return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
+ //private
+ getMiddle: function(){
+ var t = this.trigger.getTop();
+ var h = this.trigger.getHeight();
+ var middle = t + (h / 2);
+ return middle;
},
- // private
- postEditValue : function(value, originalValue, r, field){
- return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
+ //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;
},
- doFocus: function(pt){
- if(this.isVisible()){
- var index = 0,
- cm = this.grid.getColumnModel(),
- c,
- ed;
- if(pt){
- index = this.getTargetColumnIndex(pt);
- }
- for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
- c = cm.getColumnAt(i);
- ed = c.getEditor();
- if(!c.hidden && ed){
- ed.field.focus();
- break;
- }
- }
+ handleMouseWheel: function(e){
+ //disable scrolling when not focused
+ if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
+ return;
}
- },
- getTargetColumnIndex: function(pt){
- var grid = this.grid,
- v = grid.view,
- x = pt.left,
- cms = grid.colModel.config,
- 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;
- }
- }
+ var delta = e.getWheelDelta();
+ if (delta > 0) {
+ this.onSpinUp();
+ e.stopEvent();
}
- return match;
+ else
+ if (delta < 0) {
+ this.onSpinDown();
+ e.stopEvent();
+ }
},
- startMonitoring : function(){
- if(!this.bound && this.monitorValid){
- this.bound = true;
- Ext.TaskMgr.start({
- run : this.bindHandler,
- interval : this.monitorPoll || 200,
- scope: this
- });
- }
+ //private
+ startDrag: function(){
+ this.proxy.show();
+ this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
},
- stopMonitoring : function(){
- this.bound = false;
- if(this.tooltip){
- this.tooltip.hide();
+ //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;
},
- isValid: function(){
- var valid = true;
- this.items.each(function(f){
- if(!f.isValid(true)){
- valid = false;
- return false;
- }
- });
- return valid;
+ //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
- bindHandler : function(){
- if(!this.bound){
- return false; // stops binding
+ //private
+ onSpinDown: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
- var valid = this.isValid();
- if(!valid && this.errorSummary){
- this.showTooltip(this.getErrorText().join(''));
+ if (Ext.EventObject.shiftKey == true) {
+ this.onSpinDownAlternate();
+ return;
}
- this.btns.saveBtn.setDisabled(!valid);
- this.fireEvent('validation', this, valid);
+ else {
+ this.spin(true, false);
+ }
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
},
- showTooltip: function(msg){
- var t = this.tooltip;
- if(!t){
- t = this.tooltip = new Ext.ToolTip({
- maxWidth: 600,
- cls: 'errorTip',
- width: 300,
- title: this.errorText,
- autoHide: false,
- anchor: 'left',
- anchorToTarget: true,
- mouseOffset: [40,0]
- });
+ //private
+ onSpinUpAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
- var v = this.grid.getView(),
- top = parseInt(this.el.dom.style.top, 10),
- scroll = v.scroller.dom.scrollTop,
- h = this.el.getHeight();
+ this.spin(false, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spinup", this);
+ },
- if(top + h >= scroll){
- t.initTarget(this.items.last().getEl());
- if(!t.rendered){
- t.show();
- t.hide();
- }
- t.body.update(msg);
- t.doAutoWidth(20);
- t.show();
- }else if(t.rendered){
- t.hide();
+ //private
+ onSpinDownAlternate: function(){
+ if (this.isSpinnable() == false) {
+ return;
}
+ this.spin(true, true);
+ this.field.fireEvent("spin", this);
+ this.field.fireEvent("spindown", this);
},
- getErrorText: function(){
- var data = [''];
- this.items.each(function(f){
- if(!f.isValid(true)){
- data.push('- ', f.getActiveError(), '
');
- }
- });
- data.push('
');
- return data;
- }
-});
-Ext.preg('roweditor', Ext.ux.grid.RowEditor);
-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() {
- if(this.keyNav){
- this.keyNav.disable();
- delete this.keyNav;
- }
- /*
- * A majority of the time, the plugin will be destroyed along with the grid,
- * which means the mainBody won't be available. On the off chance that the plugin
- * isn't destroyed with the grid, take care of removing the listener.
- */
- var mainBody = this.grid.getView().mainBody;
- if(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');
+ spin: function(down, alternate){
+ var v = parseFloat(this.field.getValue());
+ var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
+ (down == true) ? v -= incr : v += incr;
-/**
- * @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
- }]
-});
+ v = (isNaN(v)) ? this.defaultValue : v;
+ v = this.fixBoundries(v);
+ this.field.setRawValue(v);
+ },
-// 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,
+ fixBoundries: function(value){
+ var v = value;
- type: 'row',
+ 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;
+ }
- // private
- allowContainerRemove: false,
+ return this.fixPrecision(v);
+ },
// private
- isValidParent : function(c, target){
- return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
+ 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));
},
- getLayoutTargetSize : function() {
- var target = this.container.getLayoutTarget(), ret;
- if (target) {
- ret = target.getViewSize();
- ret.width -= target.getPadding('lr');
- ret.height -= target.getPadding('tb');
+ doDestroy: function(){
+ if (this.trigger) {
+ this.trigger.remove();
+ }
+ if (this.wrap) {
+ this.wrap.remove();
+ delete this.field.wrap;
}
- return ret;
- },
- renderAll : function(ct, target) {
- if(!this.innerCt){
- // the innerCt prevents wrapping and shuffling while
- // the container is resizing
- this.innerCt = target.createChild({cls:'x-column-inner'});
- this.innerCt.createChild({cls:'x-clear'});
+ if (this.splitter) {
+ this.splitter.remove();
}
- Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
- },
+
+ 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
- onLayout : function(ct, target){
- var rs = ct.items.items, len = rs.length, r, i;
+ animated : false,
- this.renderAll(ct, target);
+ createElements : function(){
+ var bd = Ext.getBody();
- var size = this.getLayoutTargetSize();
+ 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'});
- if(size.width < 1 && size.height < 1){ // display none?
+ 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
+ }
+ },
- var h = size.height,
- ph = h;
+ 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);
+ },
- this.innerCt.setSize({height:h});
+ doHide : function(){
+ this.active = false;
+ this.all.setDisplayed(false);
+ },
- // some rows can be percentages while others are fixed
- // so we need to make 2 passes
+ syncSize : function(){
+ this.applyBounds(false, false);
+ },
- for(i = 0; i < len; i++){
- r = rs[i];
- if(!r.rowHeight){
- ph -= (r.getHeight() + r.getEl().getMargins('tb'));
- }
- }
+ applyBounds : function(basePts, anim, doHide, callback, scope){
- ph = ph < 0 ? 0 : ph;
+ var rg = this.el.getRegion();
- for(i = 0; i < len; i++){
- r = rs[i];
- if(r.rowHeight){
- r.setSize({height: Math.floor(r.rowHeight*ph) - r.getEl().getMargins('tb')});
- }
+ 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;
}
- // Browsers differ as to when they account for scrollbars. We need to re-measure to see if the scrollbar
- // spaces were accounted for properly. If not, re-layout.
- if (Ext.isIE) {
- if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
- var ts = this.getLayoutTargetSize();
- if (ts.width != size.width){
- this.adjustmentPass = true;
- this.layoutTargetSize = ts;
- this.onLayout(ct, target);
- }
+ 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]);
}
}
- delete this.adjustmentPass;
- }
+ },
- /**
- * @property activeItem
- * @hide
- */
-});
+ destroy : function(){
+ this.doHide();
+ Ext.destroy(
+ this.right,
+ this.left,
+ this.top,
+ this.bottom);
+ delete this.el;
+ delete this.all;
+ }
+};
-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.initList();
- 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);
- }
- },
-
- afterRender : function() {
- Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
- if(Ext.isWebKit) {
- 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 = Ext.isNumber(record) ? record : this.store.indexOf(record);
- this.select(index, this.isExpanded());
- this.onSelect(this.store.getAt(index), 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){
- var idx = pbar.items.indexOf(pbar.inputItem);
- Ext.each(pbar.items.getRange(idx - 2, idx + 2), 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(idx + 1, slider);
- pbar.on({
- change: function(pb, data){
- slider.setMaxValue(data.pages);
- slider.setValue(data.activePage);
- }
- });
- }
-});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, {
- actionMode: 'wrap',
- 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}));
- },
-
- // 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(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
+//backwards compat
Ext.Spotlight = Ext.ux.Spotlight;/**
* @class Ext.ux.StatusBar
* Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}. In addition to
@@ -8854,59 +8931,150 @@ statusBar.setStatus({
}
});
Ext.reg('statusbar', Ext.ux.StatusBar);
-/**
- * @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.TabCloseMenu
+ * @extends Object
+ * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
+ * the closable configuration on the tab. As such, commands like remove others and remove all will not
+ * remove items that are not closable.
+ *
+ * @constructor
+ * @param {Object} config The configuration options
+ * @ptype tabclosemenu
+ */
+Ext.ux.TabCloseMenu = Ext.extend(Object, {
+ /**
+ * @cfg {String} closeTabText
+ * The text for closing the current tab. Defaults to 'Close Tab'.
+ */
+ closeTabText: 'Close Tab',
+
+ /**
+ * @cfg {String} closeOtherTabsText
+ * The text for closing all tabs except the current one. Defaults to 'Close Other Tabs'.
+ */
+ closeOtherTabsText: 'Close Other Tabs',
+
+ /**
+ * @cfg {Boolean} showCloseAll
+ * Indicates whether to show the 'Close All' option. Defaults to true.
+ */
+ showCloseAll: true,
+
+ /**
+ * @cfg {String} closeAllTabsText
+ *
The text for closing all tabs. Defaults to 'Close All Tabs'.
+ */
+ closeAllTabsText: 'Close All Tabs',
+
+ constructor : function(config){
+ Ext.apply(this, config || {});
+ },
+
+ //public
+ init : function(tabs){
+ this.tabs = tabs;
+ tabs.on({
+ scope: this,
+ contextmenu: this.onContextMenu,
+ destroy: this.destroy
+ });
+ },
+
+ destroy : function(){
+ Ext.destroy(this.menu);
+ delete this.menu;
+ delete this.tabs;
+ delete this.active;
+ },
+
+ // private
+ onContextMenu : function(tabs, item, e){
+ this.active = item;
+ var m = this.createMenu(),
+ disableAll = true,
+ disableOthers = true,
+ closeAll = m.getComponent('closeall');
+
+ m.getComponent('close').setDisabled(!item.closable);
+ tabs.items.each(function(){
+ if(this.closable){
+ disableAll = false;
+ if(this != item){
+ disableOthers = false;
+ return false;
+ }
+ }
+ });
+ m.getComponent('closeothers').setDisabled(disableOthers);
+ if(closeAll){
+ closeAll.setDisabled(disableAll);
+ }
+
+ e.stopEvent();
+ m.showAt(e.getPoint());
+ },
+
+ createMenu : function(){
+ if(!this.menu){
+ var items = [{
+ itemId: 'close',
+ text: this.closeTabText,
+ scope: this,
+ handler: this.onClose
+ }];
+ if(this.showCloseAll){
+ items.push('-');
+ }
+ items.push({
+ itemId: 'closeothers',
+ text: this.closeOtherTabsText,
+ scope: this,
+ handler: this.onCloseOthers
+ });
+ if(this.showCloseAll){
+ items.push({
+ itemId: 'closeall',
+ text: this.closeAllTabsText,
+ scope: this,
+ handler: this.onCloseAll
+ });
+ }
+ this.menu = new Ext.menu.Menu({
+ items: items
+ });
+ }
+ return this.menu;
+ },
+
+ onClose : function(){
+ this.tabs.remove(this.active);
+ },
+
+ onCloseOthers : function(){
+ this.doClose(true);
+ },
+
+ onCloseAll : function(){
+ this.doClose(false);
+ },
+
+ doClose : function(excludeActive){
+ var items = [];
+ this.tabs.items.each(function(item){
+ if(item.closable){
+ if(!excludeActive || item != this.active){
+ items.push(item);
+ }
+ }
+ }, this);
+ Ext.each(items, function(item){
+ this.tabs.remove(item);
+ }, this);
+ }
+});
+
+Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.TableGrid
@@ -9495,31 +9663,25 @@ Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
this.showErrors();
}
}
-});(function() {
+});(function() {
Ext.override(Ext.list.Column, {
- init : function() {
- if(!this.type){
- this.type = "auto";
+ init : function() {
+ var types = Ext.data.Types,
+ st = this.sortType;
+
+ if(this.type){
+ if(Ext.isString(this.type)){
+ this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
+ }
+ }else{
+ this.type = types.AUTO;
}
- var st = Ext.data.SortTypes;
// named sortTypes are supported, here we look them up
- if(typeof this.sortType == "string"){
- this.sortType = st[this.sortType];
- }
-
- // set default sortType for strings and dates
- if(!this.sortType){
- switch(this.type){
- case "string":
- this.sortType = st.asUCString;
- break;
- case "date":
- this.sortType = st.asDate;
- break;
- default:
- this.sortType = st.none;
- }
+ if(Ext.isString(st)){
+ this.sortType = Ext.data.SortTypes[st];
+ }else if(Ext.isEmpty(st)){
+ this.sortType = this.type.sortType;
}
}
});
',
- '
',
- '',
- '', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
- "