-
- *
- top : Defaultchild items are aligned vertically - * at the top of the container
- *
- middle : child items are aligned vertically in the - * middle of the container
- *
- stretch : child items are stretched vertically to fill - * the height of the container
- *
- stretchmax : child items are stretched vertically to - * the height of the largest item.
- */
- align : 'top', // top, middle, stretch, strechmax
- type: 'hbox',
- /**
- * @cfg {String} pack
- * Controls how the child items of the container are packed together. Acceptable configuration values
- * for this property are:
- *
- start : Defaultchild items are packed together at - * left side of container
- *
- center : child items are packed together at - * mid-width of container
- *
- end : child items are packed together at right - * side of container
- *
- ',
'
', - ' ', '', + '
'
);
@@ -22670,7 +26092,7 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/**
if (!a.isMenuItem && a.needsIcon) {
c.positionEl.addClass('x-menu-list-item-indent');
}
- this.configureItem(c, position);
+ this.configureItem(c);
}else if(c && !this.isValidParent(c, target)){
if(Ext.isNumber(position)){
position = target.dom.childNodes[position];
@@ -22680,14 +26102,17 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/**
},
getItemArgs : function(c) {
- var isMenuItem = c instanceof Ext.menu.Item;
+ var isMenuItem = c instanceof Ext.menu.Item,
+ canHaveIcon = !(isMenuItem || c instanceof Ext.menu.Separator);
+
return {
isMenuItem: isMenuItem,
- needsIcon: !isMenuItem && (c.icon || c.iconCls),
+ needsIcon: canHaveIcon && (c.icon || c.iconCls),
icon: c.icon || Ext.BLANK_IMAGE_URL,
iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
itemId: 'x-menu-el-' + c.id,
- itemCls: 'x-menu-list-item '
+ itemCls: 'x-menu-list-item ',
+ altText: c.altText || ''
};
},
@@ -22707,14 +26132,15 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/**
if(w){
ct.setWidth(w);
}else if(Ext.isIE){
- ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
+ ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8 || Ext.isIE9) ? 'auto' : ct.minWidth);
var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
}
}
}
});
-Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;/**
+Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;
+/**
* @class Ext.Viewport
* @extends Ext.Container
* - auto (Default, implies no conversion) *
- string @@ -34169,13 +38463,16 @@ Ext.data.Field.prototype = { *
- float *
- boolean *
- date
- v : MixedThe data value as read by the Reader, if undefined will use - * the configured {@link Ext.data.Field#defaultValue defaultValue}.
+ * the configured
- rec : MixedThe data object containing the row as read by the Reader. * Depending on the Reader type, this could be an Array ({@link Ext.data.ArrayReader ArrayReader}), an object * ({@link Ext.data.JsonReader JsonReader}), or an XML element ({@link Ext.data.XMLReader XMLReader}).
@@ -34229,15 +38526,24 @@ var myData = [
*/
/**
* @cfg {String} dateFormat
- * (Optional) A format string for the {@link Date#parseDate Date.parseDate} function, or "timestamp" if the
+ *
- remote-request failed : @@ -34969,10 +39265,10 @@ myStore.on({ *"));Ext.DomQuery.selectNode("."+c+"-mc",d.dom).appendChild(this.dom);return d},setSize:function(e,c,d){var g=this;if(Ext.isObject(e)){c=e.height;e=e.width}e=g.adjustWidth(e);c=g.adjustHeight(c);if(!d||!g.anim){g.dom.style.width=g.addUnits(e);g.dom.style.height=g.addUnits(c)}else{g.anim({width:{to:e},height:{to:c}},g.preanim(arguments,2))}return g},getComputedHeight:function(){var d=this,c=Math.max(d.dom.offsetHeight,d.dom.clientHeight);if(!c){c=parseFloat(d.getStyle("height"))||0;if(!d.isBorderBox()){c+=d.getFrameWidth("tb")}}return c},getComputedWidth:function(){var c=Math.max(this.dom.offsetWidth,this.dom.clientWidth);if(!c){c=parseFloat(this.getStyle("width"))||0;if(!this.isBorderBox()){c+=this.getFrameWidth("lr")}}return c},getFrameWidth:function(d,c){return c&&this.isBorderBox()?0:(this.getPadding(d)+this.getBorderWidth(d))},addClassOnOver:function(c){this.hover(function(){Ext.fly(this,a).addClass(c)},function(){Ext.fly(this,a).removeClass(c)});return this},addClassOnFocus:function(c){this.on("focus",function(){Ext.fly(this,a).addClass(c)},this.dom);this.on("blur",function(){Ext.fly(this,a).removeClass(c)},this.dom);return this},addClassOnClick:function(c){var d=this.dom;this.on("mousedown",function(){Ext.fly(d,a).addClass(c);var g=Ext.getDoc(),e=function(){Ext.fly(d,a).removeClass(c);g.removeListener("mouseup",e)};g.on("mouseup",e)});return this},getViewSize:function(){var g=document,h=this.dom,c=(h==g||h==g.body);if(c){var e=Ext.lib.Dom;return{width:e.getViewWidth(),height:e.getViewHeight()}}else{return{width:h.clientWidth,height:h.clientHeight}}},getStyleSize:function(){var j=this,c,i,l=document,m=this.dom,e=(m==l||m==l.body),g=m.style;if(e){var k=Ext.lib.Dom;return{width:k.getViewWidth(),height:k.getViewHeight()}}if(g.width&&g.width!="auto"){c=parseFloat(g.width);if(j.isBorderBox()){c-=j.getFrameWidth("lr")}}if(g.height&&g.height!="auto"){i=parseFloat(g.height);if(j.isBorderBox()){i-=j.getFrameWidth("tb")}}return{width:c||j.getWidth(true),height:i||j.getHeight(true)}},getSize:function(c){return{width:this.getWidth(c),height:this.getHeight(c)}},repaint:function(){var c=this.dom;this.addClass("x-repaint");setTimeout(function(){Ext.fly(c).removeClass("x-repaint")},1);return this},unselectable:function(){this.dom.unselectable="on";return this.swallowEvent("selectstart",true).applyStyles("-moz-user-select:none;-khtml-user-select:none;").addClass("x-unselectable")},getMargins:function(d){var e=this,c,g={t:"top",l:"left",r:"right",b:"bottom"},h={};if(!d){for(c in e.margins){h[g[c]]=parseFloat(e.getStyle(e.margins[c]))||0}return h}else{return e.addStyles.call(e,d,e.margins)}}}}());(function(){var a=Ext.lib.Dom,b="left",g="right",d="top",i="bottom",h="position",c="static",e="relative",j="auto",k="z-index";Ext.Element.addMethods({getX:function(){return a.getX(this.dom)},getY:function(){return a.getY(this.dom)},getXY:function(){return a.getXY(this.dom)},getOffsetsTo:function(l){var n=this.getXY(),m=Ext.fly(l,"_internal").getXY();return[n[0]-m[0],n[1]-m[1]]},setX:function(l,m){return this.setXY([l,this.getY()],this.animTest(arguments,m,1))},setY:function(m,l){return this.setXY([this.getX(),m],this.animTest(arguments,l,1))},setLeft:function(l){this.setStyle(b,this.addUnits(l));return this},setTop:function(l){this.setStyle(d,this.addUnits(l));return this},setRight:function(l){this.setStyle(g,this.addUnits(l));return this},setBottom:function(l){this.setStyle(i,this.addUnits(l));return this},setXY:function(n,l){var m=this;if(!l||!m.anim){a.setXY(m.dom,n)}else{m.anim({points:{to:n}},m.preanim(arguments,1),"motion")}return m},setLocation:function(l,n,m){return this.setXY([l,n],this.animTest(arguments,m,2))},moveTo:function(l,n,m){return this.setXY([l,n],this.animTest(arguments,m,2))},getLeft:function(l){return !l?this.getX():parseInt(this.getStyle(b),10)||0},getRight:function(l){var m=this;return !l?m.getX()+m.getWidth():(m.getLeft(true)+m.getWidth())||0},getTop:function(l){return !l?this.getY():parseInt(this.getStyle(d),10)||0},getBottom:function(l){var m=this;return !l?m.getY()+m.getHeight():(m.getTop(true)+m.getHeight())||0},position:function(p,o,l,n){var m=this;if(!p&&m.isStyle(h,c)){m.setStyle(h,e)}else{if(p){m.setStyle(h,p)}}if(o){m.setStyle(k,o)}if(l||n){m.setXY([l||false,n||false])}},clearPositioning:function(l){l=l||"";this.setStyle({left:l,right:l,top:l,bottom:l,"z-index":"",position:c});return this},getPositioning:function(){var m=this.getStyle(b);var n=this.getStyle(d);return{position:this.getStyle(h),left:m,right:m?"":this.getStyle(g),top:n,bottom:n?"":this.getStyle(i),"z-index":this.getStyle(k)}},setPositioning:function(l){var n=this,m=n.dom.style;n.setStyle(l);if(l.right==j){m.right=""}if(l.bottom==j){m.bottom=""}return n},translatePoints:function(m,u){u=isNaN(m[1])?u:m[1];m=isNaN(m[0])?m:m[0];var q=this,r=q.isStyle(h,e),s=q.getXY(),n=parseInt(q.getStyle(b),10),p=parseInt(q.getStyle(d),10);n=!isNaN(n)?n:(r?0:q.dom.offsetLeft);p=!isNaN(p)?p:(r?0:q.dom.offsetTop);return{left:(m-s[0]+n),top:(u-s[1]+p)}},animTest:function(m,l,n){return !!l&&this.preanim?this.preanim(m,n):false}})})();Ext.Element.addMethods({setBox:function(e,g,b){var d=this,a=e.width,c=e.height;if((g&&!d.autoBoxAdjust)&&!d.isBorderBox()){a-=(d.getBorderWidth("lr")+d.getPadding("lr"));c-=(d.getBorderWidth("tb")+d.getPadding("tb"))}d.setBounds(e.x,e.y,a,c,d.animTest.call(d,arguments,b,2));return d},getBox:function(j,p){var m=this,v,e,o,d=m.getBorderWidth,q=m.getPadding,g,a,u,n;if(!p){v=m.getXY()}else{e=parseInt(m.getStyle("left"),10)||0;o=parseInt(m.getStyle("top"),10)||0;v=[e,o]}var c=m.dom,s=c.offsetWidth,i=c.offsetHeight,k;if(!j){k={x:v[0],y:v[1],0:v[0],1:v[1],width:s,height:i}}else{g=d.call(m,"l")+q.call(m,"l");a=d.call(m,"r")+q.call(m,"r");u=d.call(m,"t")+q.call(m,"t");n=d.call(m,"b")+q.call(m,"b");k={x:v[0]+g,y:v[1]+u,0:v[0]+g,1:v[1]+u,width:s-(g+a),height:i-(u+n)}}k.right=k.x+k.width;k.bottom=k.y+k.height;return k},move:function(j,b,c){var g=this,m=g.getXY(),k=m[0],i=m[1],d=[k-b,i],l=[k+b,i],h=[k,i-b],a=[k,i+b],e={l:d,left:d,r:l,right:l,t:h,top:h,up:h,b:a,bottom:a,down:a};j=j.toLowerCase();g.moveTo(e[j][0],e[j][1],g.animTest.call(g,arguments,c,2))},setLeftTop:function(d,c){var b=this,a=b.dom.style;a.left=b.addUnits(d);a.top=b.addUnits(c);return b},getRegion:function(){return Ext.lib.Dom.getRegion(this.dom)},setBounds:function(b,g,d,a,c){var e=this;if(!c||!e.anim){e.setSize(d,a);e.setLocation(b,g)}else{e.anim({points:{to:[b,g]},width:{to:e.adjustWidth(d)},height:{to:e.adjustHeight(a)}},e.preanim(arguments,4),"motion")}return e},setRegion:function(b,a){return this.setBounds(b.left,b.top,b.right-b.left,b.bottom-b.top,this.animTest.call(this,arguments,a,1))}});Ext.Element.addMethods({isScrollable:function(){var a=this.dom;return a.scrollHeight>a.clientHeight||a.scrollWidth>a.clientWidth},scrollTo:function(a,b){this.dom["scroll"+(/top/i.test(a)?"Top":"Left")]=b;return this},getScroll:function(){var i=this.dom,h=document,a=h.body,c=h.documentElement,b,g,e;if(i==h||i==a){if(Ext.isIE&&Ext.isStrict){b=c.scrollLeft;g=c.scrollTop}else{b=window.pageXOffset;g=window.pageYOffset}e={left:b||(a?a.scrollLeft:0),top:g||(a?a.scrollTop:0)}}else{e={left:i.scrollLeft,top:i.scrollTop}}return e}});Ext.Element.addMethods({scrollTo:function(b,d,a){var e=/top/i.test(b),c=this,g=c.dom,h;if(!a||!c.anim){h="scroll"+(e?"Top":"Left"),g[h]=d}else{h="scroll"+(e?"Left":"Top"),c.anim({scroll:{to:e?[g[h],d]:[d,g[h]]}},c.preanim(arguments,2),"scroll")}return c},scrollIntoView:function(e,i){var p=Ext.getDom(e)||Ext.getBody().dom,h=this.dom,g=this.getOffsetsTo(p),k=g[0]+p.scrollLeft,u=g[1]+p.scrollTop,q=u+h.offsetHeight,d=k+h.offsetWidth,a=p.clientHeight,m=parseInt(p.scrollTop,10),s=parseInt(p.scrollLeft,10),j=m+a,n=s+p.clientWidth;if(h.offsetHeight>a||u
Fires before a request is generated for one of the actions Ext.data.Api.actions.create|update|destroy
*In addition to being fired through the DataProxy instance that raised the event, this event is also fired * through the Ext.data.DataProxy class to allow for centralized processing of beforewrite events from all - * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
+ * DataProxies by attaching a listener to the Ext.data.DataProxy class itself. * @param {DataProxy} this The proxy for the request * @param {String} action [Ext.data.Api.actions.create|update|destroy] - * @param {Record/Array[Record]} rs The Record(s) to create|update|destroy. + * @param {Record/Record[]} rs The Record(s) to create|update|destroy. * @param {Object} params The requestparamsobject. Editparamsto add parameters to the request. */ 'beforewrite', @@ -34981,12 +39277,12 @@ myStore.on({ *Fires before the request-callback is called
*In addition to being fired through the DataProxy instance that raised the event, this event is also fired * through the Ext.data.DataProxy class to allow for centralized processing of write events from all - * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
+ * DataProxies by attaching a listener to the Ext.data.DataProxy class itself. * @param {DataProxy} this The proxy that sent the request * @param {String} action [Ext.data.Api.actions.create|upate|destroy] * @param {Object} data The data object extracted from the server-response * @param {Object} response The decoded response from server - * @param {Record/Record{}} rs The records from Store + * @param {Record/Record[]} rs The Record(s) from Store * @param {Object} options The callback's options property as passed to the {@link #request} function */ 'write' @@ -35168,7 +39464,7 @@ proxy.setApi(Ext.data.Api.actions.read, '/users/new_load_url'); * url will be built Rails-style, as in "/controller/action/32". restful will aply iff the supplied record is an * instance of Ext.data.Record rather than an Array of them. * @param {String} action The api action being executed [read|create|update|destroy] - * @param {Ext.data.Record/Array[Ext.data.Record]} The record or Array of Records being acted upon. + * @param {Ext.data.Record/Ext.data.Record[]} record The record or Array of Records being acted upon. * @return {String} url * @private */ @@ -35220,8 +39516,8 @@ Ext.util.Observable.call(Ext.data.DataProxy); * @extends Ext.Error * DataProxy Error extension. * constructor - * @param {String} name - * @param {Record/Array[Record]/Array} + * @param {String} message Message describing the error. + * @param {Record/Record[]} arg */ Ext.data.DataProxy.Error = Ext.extend(Ext.Error, { constructor : function(message, arg) { @@ -35759,7 +40055,7 @@ Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, { if (!success) { if (action === Ext.data.Api.actions.read) { // @deprecated: fire loadexception for backwards compat. - // TODO remove in 3.1 + // TODO remove this.fireEvent('loadexception', this, o, response); } this.fireEvent('exception', this, 'response', action, o, response); @@ -35790,7 +40086,7 @@ Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, { result = o.reader.read(response); }catch(e){ // @deprecated: fire old loadexception for backwards-compat. - // TODO remove in 3.1 + // TODO remove this.fireEvent('loadexception', this, o, response, e); this.fireEvent('exception', this, 'response', action, o, response, e); @@ -35799,7 +40095,7 @@ Ext.extend(Ext.data.HttpProxy, Ext.data.DataProxy, { } if (result.success === false) { // @deprecated: fire old loadexception for backwards-compat. - // TODO remove in 3.1 + // TODO remove this.fireEvent('loadexception', this, o, response); // Get DataReader read-back a response-object to pass along to exception event @@ -35921,20 +40217,204 @@ Ext.extend(Ext.data.MemoryProxy, Ext.data.DataProxy, { callback.call(scope, result, arg, true); } });/** + * @class Ext.data.Types + *This is s static class containing the system-supplied data types which may be given to a {@link Ext.data.Field Field}.
+ *The properties in this class are used as type indicators in the {@link Ext.data.Field Field} class, so to + * test whether a Field is of a certain type, compare the {@link Ext.data.Field#type type} property against properties + * of this class.
+ *Developers may add their own application-specific data types to this class. Definition names must be UPPERCASE. + * each type definition must contain three properties:
+ *+ *-
+ *
convert: FunctionA function to convert raw data values from a data block into the data + * to be stored in the Field. The function is passed the collowing parameters: + *-
+ *
- v : MixedThe data value as read by the Reader, if undefined will use + * the configured {@link Ext.data.Field#defaultValue defaultValue}.
+ *
- rec : MixedThe data object containing the row as read by the Reader. + * Depending on the Reader type, this could be an Array ({@link Ext.data.ArrayReader ArrayReader}), an object + * ({@link Ext.data.JsonReader JsonReader}), or an XML element ({@link Ext.data.XMLReader XMLReader}).
+ *
+ * - v : Mixed
sortType: FunctionA function to convert the stored data into comparable form, as defined by {@link Ext.data.SortTypes}.
+ * type: StringA textual data type name.
+ *
For example, to create a VELatLong field (See the Microsoft Bing Mapping API) containing the latitude/longitude value of a datapoint on a map from a JsonReader data block + * which contained the properties
+ *latandlong, you would define a new data type like this:
+ *+// Add a new Field data type which stores a VELatLong object in the Record. +Ext.data.Types.VELATLONG = { + convert: function(v, data) { + return new VELatLong(data.lat, data.long); + }, + sortType: function(v) { + return v.Latitude; // When sorting, order by latitude + }, + type: 'VELatLong' +}; +Then, when declaring a Record, use
+ * @singleton + */ +Ext.data.Types = new function(){ + var st = Ext.data.SortTypes; + Ext.apply(this, { + /** + * @type Regexp + * @property stripRe + * A regular expression for stripping non-numeric characters from a numeric value. Defaults to /[\$,%]/g. + * This should be overridden for localization. + */ + stripRe: /[\$,%]/g, + + /** + * @type Object. + * @property AUTO + * This data type means that no conversion is applied to the raw data before it is placed into a Record. + */ + AUTO: { + convert: function(v){ return v; }, + sortType: st.none, + type: 'auto' + }, + + /** + * @type Object. + * @property STRING + * This data type means that the raw data is converted into a String before it is placed into a Record. + */ + STRING: { + convert: function(v){ return (v === undefined || v === null) ? '' : String(v); }, + sortType: st.asUCString, + type: 'string' + }, + + /** + * @type Object. + * @property INT + * This data type means that the raw data is converted into an integer before it is placed into a Record. + *+var types = Ext.data.Types; // allow shorthand type access +UnitRecord = Ext.data.Record.create([ + { name: 'unitName', mapping: 'UnitName' }, + { name: 'curSpeed', mapping: 'CurSpeed', type: types.INT }, + { name: 'latitude', mapping: 'lat', type: types.FLOAT }, + { name: 'latitude', mapping: 'lat', type: types.FLOAT }, + { name: 'position', type: types.VELATLONG } +]); +The synonym
+ */ + INT: { + convert: function(v){ + return v !== undefined && v !== null && v !== '' ? + parseInt(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0); + }, + sortType: st.none, + type: 'int' + }, + + /** + * @type Object. + * @property FLOAT + * This data type means that the raw data is converted into a number before it is placed into a Record. + *INTEGERis equivalent.The synonym
+ */ + FLOAT: { + convert: function(v){ + return v !== undefined && v !== null && v !== '' ? + parseFloat(String(v).replace(Ext.data.Types.stripRe, ''), 10) : (this.useNull ? null : 0); + }, + sortType: st.none, + type: 'float' + }, + + /** + * @type Object. + * @property BOOL + *NUMBERis equivalent.This data type means that the raw data is converted into a boolean before it is placed into + * a Record. The string "true" and the number 1 are converted to boolean
+ *true.The synonym
+ */ + BOOL: { + convert: function(v){ return v === true || v === 'true' || v == 1; }, + sortType: st.none, + type: 'bool' + }, + + /** + * @type Object. + * @property DATE + * This data type means that the raw data is converted into a Date before it is placed into a Record. + * The date format is specified in the constructor of the {@link Ext.data.Field} to which this type is + * being applied. + */ + DATE: { + convert: function(v){ + var df = this.dateFormat; + if(!v){ + return null; + } + if(Ext.isDate(v)){ + return v; + } + if(df){ + if(df == 'timestamp'){ + return new Date(v*1000); + } + if(df == 'time'){ + return new Date(parseInt(v, 10)); + } + return Date.parseDate(v, df); + } + var parsed = Date.parse(v); + return parsed ? new Date(parsed) : null; + }, + sortType: st.asDate, + type: 'date' + } + }); + + Ext.apply(this, { + /** + * @type Object. + * @property BOOLEAN + *BOOLEANis equivalent.This data type means that the raw data is converted into a boolean before it is placed into + * a Record. The string "true" and the number 1 are converted to boolean
+ *true.The synonym
+ */ + BOOLEAN: this.BOOL, + /** + * @type Object. + * @property INTEGER + * This data type means that the raw data is converted into an integer before it is placed into a Record. + *BOOLis equivalent.The synonym
+ */ + INTEGER: this.INT, + /** + * @type Object. + * @property NUMBER + * This data type means that the raw data is converted into a number before it is placed into a Record. + *INTis equivalent.The synonym
+ */ + NUMBER: this.FLOAT + }); +};/** * @class Ext.data.JsonWriter * @extends Ext.data.DataWriter * DataWriter extension for writing an array or single {@link Ext.data.Record} object(s) in preparation for executing a remote CRUD action. */ Ext.data.JsonWriter = Ext.extend(Ext.data.DataWriter, { /** - * @cfg {Boolean} encode true to {@link Ext.util.JSON#encode encode} the - * {@link Ext.data.DataWriter#toHash hashed data}. Defaults to true. When using - * {@link Ext.data.DirectProxy}, set this to false since Ext.Direct.JsonProvider will perform + * @cfg {Boolean} encodeFLOATis equivalent.true to {@link Ext.util.JSON#encode JSON encode} the + * {@link Ext.data.DataWriter#toHash hashed data} into a standard HTTP parameter named after this + * Reader's
+ *meta.rootproperty which, by default is imported from the associated Reader. Defaults to true.If set to
+ *false, the hashed data is {@link Ext.util.JSON#encode JSON encoded}, along with + * the associated {@link Ext.data.Store}'s {@link Ext.data.Store#baseParams baseParams}, into the POST body.When using {@link Ext.data.DirectProxy}, set this to false since Ext.Direct.JsonProvider will perform * its own json-encoding. In addition, if you're using {@link Ext.data.HttpProxy}, setting to false * will cause HttpProxy to transmit data using the jsonData configuration-params of {@link Ext.Ajax#request} - * instead of params. When using a {@link Ext.data.Store#restful} Store, some serverside frameworks are + * instead of params.
+ *When using a {@link Ext.data.Store#restful} Store, some serverside frameworks are * tuned to expect data through the jsonData mechanism. In those cases, one will want to set encode: false, as in - * let the lower-level connection object (eg: Ext.Ajax) do the encoding. + * let the lower-level connection object (eg: Ext.Ajax) do the encoding.
*/ encode : true, /** @@ -35950,10 +40430,14 @@ Ext.data.JsonWriter = Ext.extend(Ext.data.DataWriter, { }, /** - * Final action of a write event. Apply the written data-object to params. - * @param {Object} http params-object to write-to. + *This method should not need to be called by application code, however it may be useful on occasion to + * override it, or augment it with an {@link Function#createInterceptor interceptor} or {@link Function#createSequence sequence}.
+ *The provided implementation encodes the serialized data representing the Store's modified Records into the Ajax request's + *
+ * @param {Object} Ajax request params object to write into. * @param {Object} baseParams as defined by {@link Ext.data.Store#baseParams}. The baseParms must be encoded by the extending class, eg: {@link Ext.data.JsonWriter}, {@link Ext.data.XmlWriter}. - * @param {Object/Object[]} data Data-object representing compiled Store-recordset. + * @param {Object/Object[]} data Data object representing the serialized modified records from the Store. May be either a single object, + * or an Array of objects - user implementations must handle both cases. */ render : function(params, baseParams, data) { if (this.encode === true) { @@ -36020,7 +40504,7 @@ var myReader = new Ext.data.JsonReader({ // constructor that provides mapping for reading the record data objects {@link Ext.data.DataReader#fields fields}: [ // map Record's 'firstname' field to data object's key of same name - {name: 'name'}, + {name: 'name', mapping: 'firstname'}, // map Record's 'job' field to data object's 'occupation' key {name: 'job', mapping: 'occupation'} ] @@ -36162,21 +40646,25 @@ Ext.extend(Ext.data.JsonReader, Ext.data.DataReader, { return this.readRecords(o); }, - /** - * Decode a json response from server. - * @param {String} action [Ext.data.Api.actions.create|read|update|destroy] - * @param {Object} response + /* * TODO: refactor code between JsonReader#readRecords, #readResponse into 1 method. * there's ugly duplication going on due to maintaining backwards compat. with 2.0. It's time to do this. */ + /** + * Decode a JSON response from server. + * @param {String} action [Ext.data.Api.actions.create|read|update|destroy] + * @param {Object} response The XHR object returned through an Ajax server request. + * @return {Response} A {@link Ext.data.Response Response} object containing the data response, and also status information. + */ readResponse : function(action, response) { var o = (response.responseText !== undefined) ? Ext.decode(response.responseText) : response; if(!o) { throw new Ext.data.JsonReader.Error('response'); } - var root = this.getRoot(o); - if (action === Ext.data.Api.actions.create) { + var root = this.getRoot(o), + success = this.getSuccess(o); + if (success && action === Ext.data.Api.actions.create) { var def = Ext.isDefined(root); if (def && Ext.isEmpty(root)) { throw new Ext.data.JsonReader.Error('root-empty', this.meta.root); @@ -36189,7 +40677,7 @@ Ext.extend(Ext.data.JsonReader, Ext.data.DataReader, { // instantiate response object var res = new Ext.data.Response({ action: action, - success: this.getSuccess(o), + success: success, data: (root) ? this.extractData(root, false) : [], message: this.getMessage(o), raw: o @@ -36648,8 +41136,9 @@ Ext.extend(Ext.data.XmlWriter, Ext.data.DataWriter, { *paramsaccording to the{@link #encode}setting.- {Array} baseParams. The baseParams as defined upon {@link Ext.data.Store#baseParams}. Note that the baseParams have been converted into an array of [{name : "foo", value: "bar"}, ...] pairs in the same manner as the records parameter above. See {@link #documentRoot} and {@link #forceDocumentRoot}.
* */ - // Break up encoding here in case it's being included by some kind of page that will parse it (eg. PHP) - tpl: '<' + '?xml version="{version}" encoding="{encoding}"?' + '> <{documentRoot}> ', + // Encoding the ? here in case it's being included by some kind of page that will parse it (eg. PHP) + tpl: '<{name}>{value} <{root}> <{parent.record}> <{name}>{value} <\u003fxml version="{version}" encoding="{encoding}"\u003f> ', + /** * XmlWriter implementation of the final stage of a write action. @@ -36702,7 +41191,6 @@ Ext.extend(Ext.data.XmlWriter, Ext.data.DataWriter, { return this.toArray(data); } }); - /** * @class Ext.data.XmlReader * @extends Ext.data.DataReader @@ -36818,21 +41306,22 @@ Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, { }, /** - * Decode a json response from server. + * Decode an XML response from server. * @param {String} action [{@link Ext.data.Api#actions} create|read|update|destroy] * @param {Object} response HTTP Response object from browser. - * @return {Ext.data.Response} response Returns an instance of {@link Ext.data.Response} + * @return {Ext.data.Response} An instance of {@link Ext.data.Response} */ readResponse : function(action, response) { - var q = Ext.DomQuery, - doc = response.responseXML; + var q = Ext.DomQuery, + doc = response.responseXML, + root = doc.documentElement || doc; // create general Response instance. var res = new Ext.data.Response({ action: action, - success : this.getSuccess(doc), - message: this.getMessage(doc), - data: this.extractData(q.select(this.meta.record, doc) || q.select(this.meta.root, doc), false), + success : this.getSuccess(root), + message: this.getMessage(root), + data: this.extractData(q.select(this.meta.record, root) || q.select(this.meta.root, root), false), raw: doc }); @@ -36883,7 +41372,7 @@ Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, { } this.getRoot = function(res) { return (!Ext.isEmpty(res[this.meta.record])) ? res[this.meta.record] : res[this.meta.root]; - } + }; if (s.idPath || s.idProperty) { var g = this.createAccessor(s.idPath || s.idProperty); this.getId = function(rec) { @@ -36912,23 +41401,26 @@ Ext.extend(Ext.data.XmlReader, Ext.data.DataReader, { createAccessor : function(){ var q = Ext.DomQuery; return function(key) { + if (Ext.isFunction(key)) { + return key; + } switch(key) { case this.meta.totalProperty: return function(root, def){ return q.selectNumber(key, root, def); - } + }; break; case this.meta.successProperty: return function(root, def) { var sv = q.selectValue(key, root, true); var success = sv !== false && sv !== 'false'; return success; - } + }; break; default: return function(root, def) { return q.selectValue(key, root, def); - } + }; break; } }; @@ -37023,8 +41515,13 @@ Ext.reg('xmlstore', Ext.data.XmlStore);/** * @class Ext.data.GroupingStore * @extends Ext.data.Store * A specialized store implementation that provides for grouping records by one of the available fields. This - * is usually used in conjunction with an {@link Ext.grid.GroupingView} to proved the data model for + * is usually used in conjunction with an {@link Ext.grid.GroupingView} to provide the data model for * a grouped GridPanel. + * + * Internally, GroupingStore is simply a normal Store with multi sorting enabled from the start. The grouping field + * and direction are always injected as the first sorter pair. GroupingView picks up on the configured groupField and + * builds grid rows appropriately. + * * @constructor * Creates a new GroupingStore. * @param {Object} config A config object containing the objects needed for the Store to access data, @@ -37034,8 +41531,46 @@ Ext.reg('xmlstore', Ext.data.XmlStore);/** Ext.data.GroupingStore = Ext.extend(Ext.data.Store, { //inherit docs - constructor: function(config){ + constructor: function(config) { + config = config || {}; + + //We do some preprocessing here to massage the grouping + sorting options into a single + //multi sort array. If grouping and sorting options are both presented to the constructor, + //the sorters array consists of the grouping sorter object followed by the sorting sorter object + //see Ext.data.Store's sorting functions for details about how multi sorting works + this.hasMultiSort = true; + this.multiSortInfo = this.multiSortInfo || {sorters: []}; + + var sorters = this.multiSortInfo.sorters, + groupField = config.groupField || this.groupField, + sortInfo = config.sortInfo || this.sortInfo, + groupDir = config.groupDir || this.groupDir; + + //add the grouping sorter object first + if(groupField){ + sorters.push({ + field : groupField, + direction: groupDir + }); + } + + //add the sorting sorter object if it is present + if (sortInfo) { + sorters.push(sortInfo); + } + Ext.data.GroupingStore.superclass.constructor.call(this, config); + + this.addEvents( + /** + * @event groupchange + * Fired whenever a call to store.groupBy successfully changes the grouping on the store + * @param {Ext.data.GroupingStore} store The grouping store + * @param {String} groupField The field that the store is now grouped by + */ + 'groupchange' + ); + this.applyGroupField(); }, @@ -37057,6 +41592,10 @@ Ext.data.GroupingStore = Ext.extend(Ext.data.Store, { */ groupOnSort:false, + /** + * @cfg {String} groupDir + * The direction to sort the groups. Defaults to 'ASC'. + */ groupDir : 'ASC', /** @@ -37078,7 +41617,7 @@ Ext.data.GroupingStore = Ext.extend(Ext.data.Store, { this.reload(); }else{ - this.applySort(); + this.sort(); this.fireEvent('datachanged', this); } }, @@ -37089,64 +41628,122 @@ Ext.data.GroupingStore = Ext.extend(Ext.data.Store, { * @param {Boolean} forceRegroup (optional) True to force the group to be refreshed even if the field passed * in is the same as the current grouping field, false to skip grouping on the same field (defaults to false) */ - groupBy : function(field, forceRegroup, direction){ + groupBy : function(field, forceRegroup, direction) { direction = direction ? (String(direction).toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : this.groupDir; - if(this.groupField == field && this.groupDir == direction && !forceRegroup){ + + if (this.groupField == field && this.groupDir == direction && !forceRegroup) { return; // already grouped by this field } + + //check the contents of the first sorter. If the field matches the CURRENT groupField (before it is set to the new one), + //remove the sorter as it is actually the grouper. The new grouper is added back in by this.sort + var sorters = this.multiSortInfo.sorters; + if (sorters.length > 0 && sorters[0].field == this.groupField) { + sorters.shift(); + } + this.groupField = field; this.groupDir = direction; this.applyGroupField(); - if(this.groupOnSort){ + + var fireGroupEvent = function() { + this.fireEvent('groupchange', this, this.getGroupState()); + }; + + if (this.groupOnSort) { this.sort(field, direction); + fireGroupEvent.call(this); return; } - if(this.remoteGroup){ + + if (this.remoteGroup) { + this.on('load', fireGroupEvent, this, {single: true}); this.reload(); - }else{ - var si = this.sortInfo || {}; - if(forceRegroup || si.field != field || si.direction != direction){ - this.applySort(); - }else{ - this.sortData(field, direction); - } - this.fireEvent('datachanged', this); + } else { + this.sort(sorters); + fireGroupEvent.call(this); } }, - // private + //GroupingStore always uses multisorting so we intercept calls to sort here to make sure that our grouping sorter object + //is always injected first. + sort : function(fieldName, dir) { + if (this.remoteSort) { + return Ext.data.GroupingStore.superclass.sort.call(this, fieldName, dir); + } + + var sorters = []; + + //cater for any existing valid arguments to this.sort, massage them into an array of sorter objects + if (Ext.isArray(arguments[0])) { + sorters = arguments[0]; + } else if (fieldName == undefined) { + //we preserve the existing sortInfo here because this.sort is called after + //clearGrouping and there may be existing sorting + sorters = this.sortInfo ? [this.sortInfo] : []; + } else { + //TODO: this is lifted straight from Ext.data.Store's singleSort function. It should instead be + //refactored into a common method if possible + var field = this.fields.get(fieldName); + if (!field) return false; + + var name = field.name, + sortInfo = this.sortInfo || null, + sortToggle = this.sortToggle ? this.sortToggle[name] : null; + + if (!dir) { + if (sortInfo && sortInfo.field == name) { // toggle sort dir + dir = (this.sortToggle[name] || 'ASC').toggle('ASC', 'DESC'); + } else { + dir = field.sortDir; + } + } + + this.sortToggle[name] = dir; + this.sortInfo = {field: name, direction: dir}; + + sorters = [this.sortInfo]; + } + + //add the grouping sorter object as the first multisort sorter + if (this.groupField) { + sorters.unshift({direction: this.groupDir, field: this.groupField}); + } + + return this.multiSort.call(this, sorters, dir); + }, + + /** + * @private + * Saves the current grouping field and direction to this.baseParams and this.lastOptions.params + * if we're using remote grouping. Does not actually perform any grouping - just stores values + */ applyGroupField: function(){ - if(this.remoteGroup){ + if (this.remoteGroup) { if(!this.baseParams){ this.baseParams = {}; } + Ext.apply(this.baseParams, { groupBy : this.groupField, - groupDir : this.groupDir + groupDir: this.groupDir }); var lo = this.lastOptions; - if(lo && lo.params){ - Ext.apply(lo.params, { - groupBy : this.groupField, - groupDir : this.groupDir - }); + if (lo && lo.params) { + lo.params.groupDir = this.groupDir; + + //this is deleted because of a bug reported at http://www.extjs.com/forum/showthread.php?t=82907 + delete lo.params.groupBy; } } }, - // private - applySort : function(){ - Ext.data.GroupingStore.superclass.applySort.call(this); - if(!this.groupOnSort && !this.remoteGroup){ - var gs = this.getGroupState(); - if(gs && (gs != this.sortInfo.field || this.groupDir != this.sortInfo.direction)){ - this.sortData(this.groupField, this.groupDir); - } - } - }, - - // private + /** + * @private + * TODO: This function is apparently never invoked anywhere in the framework. It has no documentation + * and should be considered for deletion + */ applyGrouping : function(alwaysFireChange){ if(this.groupField !== false){ this.groupBy(this.groupField, true, this.groupDir); @@ -37159,13 +41756,19 @@ Ext.data.GroupingStore = Ext.extend(Ext.data.Store, { } }, - // private + /** + * @private + * Returns the grouping field that should be used. If groupOnSort is used this will be sortInfo's field, + * otherwise it will be this.groupField + * @return {String} The group field + */ getGroupState : function(){ return this.groupOnSort && this.groupField !== false ? (this.sortInfo ? this.sortInfo.field : undefined) : this.groupField; } }); -Ext.reg('groupingstore', Ext.data.GroupingStore);/** +Ext.reg('groupingstore', Ext.data.GroupingStore); +/** * @class Ext.data.DirectProxy * @extends Ext.data.DataProxy */ @@ -37268,23 +41871,25 @@ paramOrder: 'param1|param2|param' // private createCallback : function(action, rs, trans) { + var me = this; return function(result, res) { if (!res.status) { // @deprecated fire loadexception if (action === Ext.data.Api.actions.read) { - this.fireEvent("loadexception", this, trans, res, null); + me.fireEvent("loadexception", me, trans, res, null); } - this.fireEvent('exception', this, 'remote', action, trans, res, null); + me.fireEvent('exception', me, 'remote', action, trans, res, null); trans.request.callback.call(trans.request.scope, null, trans.request.arg, false); return; } if (action === Ext.data.Api.actions.read) { - this.onRead(action, trans, result, res); + me.onRead(action, trans, result, res); } else { - this.onWrite(action, trans, result, res, rs); + me.onWrite(action, trans, result, res, rs); } }; }, + /** * Callback for read actions * @param {String} action [Ext.data.Api.actions.create|read|update|destroy] @@ -37319,12 +41924,17 @@ paramOrder: 'param1|param2|param' * @protected */ onWrite : function(action, trans, result, res, rs) { - var data = trans.reader.extractData(result, false); - this.fireEvent("write", this, action, data, res, rs, trans.request.arg); - trans.request.callback.call(trans.request.scope, data, res, true); + var data = trans.reader.extractData(trans.reader.getRoot(result), false); + var success = trans.reader.getSuccess(result); + success = (success !== false); + if (success){ + this.fireEvent("write", this, action, data, res, rs, trans.request.arg); + }else{ + this.fireEvent('exception', this, 'remote', action, trans, result, rs); + } + trans.request.callback.call(trans.request.scope, data, res, success); } }); - /** * @class Ext.data.DirectStore * @extends Ext.data.Store @@ -37377,52 +41987,52 @@ Ext.reg('directstore', Ext.data.DirectStore); * @class Ext.Direct * @extends Ext.util.Observable *<{documentRoot}> <{name}>{value} <{root}> <{parent.record}> <{name}>{value} Overview
- * + * *Ext.Direct aims to streamline communication between the client and server * by providing a single interface that reduces the amount of common code * typically required to validate data and handle returned data packets * (reading data, error conditions, etc).
- * + * *The Ext.direct namespace includes several classes for a closer integration * with the server-side. The Ext.data namespace also includes classes for working * with Ext.data.Stores which are backed by data from an Ext.Direct method.
- * + * *Specification
- * - *For additional information consult the + * + *
For additional information consult the * Ext.Direct Specification.
- * + * *Providers
- * + * *Ext.Direct uses a provider architecture, where one or more providers are * used to transport data to and from the server. There are several providers * that exist in the core at the moment:
- * + * *-
- *
+ *
*
- {@link Ext.direct.JsonProvider JsonProvider} for simple JSON operations *
- {@link Ext.direct.PollingProvider PollingProvider} for repeated requests *
- {@link Ext.direct.RemotingProvider RemotingProvider} exposes server side * on the client. *
A provider does not need to be invoked directly, providers are added via * {@link Ext.Direct}.{@link Ext.Direct#add add}.
- * + * *Router
- * + * *Ext.Direct utilizes a "router" on the server to direct requests from the client * to the appropriate server-side method. Because the Ext.Direct API is completely * platform-agnostic, you could completely swap out a Java based server solution * and replace it with one that uses C# without changing the client side JavaScript * at all.
- * + * *Server side events
- * + * *Custom events from the server may be handled by the client by adding * listeners, for example:
*
* Acceptable properties for each column configuration object are: *{"type":"event","name":"message","data":"Successfully polled at: 11:19:30 am"} -// add a handler for a 'message' event sent by the server +// add a handler for a 'message' event sent by the server Ext.Direct.on('message', function(e){ out.append(String.format('<p><i>{0}</i></p>', e.data)); out.el.scrollTo('t', 100000, true); @@ -37459,7 +42069,7 @@ Ext.Direct = Ext.extend(Ext.util.Observable, { LOGIN: 'login', SERVER: 'exception' }, - + // private constructor: function(){ this.addEvents( @@ -37487,14 +42097,14 @@ Ext.Direct = Ext.extend(Ext.util.Observable, { *
+ *var pollProv = new Ext.direct.PollingProvider({ url: 'php/poll2.php' -}); +}); Ext.Direct.addProvider( { - "type":"remoting", // create a {@link Ext.direct.RemotingProvider} + "type":"remoting", // create a {@link Ext.direct.RemotingProvider} "url":"php\/router.php", // url to connect to the Ext.Direct server-side router. - "actions":{ // each property within the actions object represents a Class - "TestAction":[ // array of methods within each server side Class + "actions":{ // each property within the actions object represents a Class + "TestAction":[ // array of methods within each server side Class { "name":"doEcho", // name of method "len":1 @@ -37503,13 +42113,13 @@ Ext.Direct.addProvider( "len":1 },{ "name":"doForm", - "formHandler":true, // handle form on server with Ext.Direct.Transaction + "formHandler":true, // handle form on server with Ext.Direct.Transaction "len":1 }] }, "namespace":"myApplication",// namespace to create the Remoting Provider in },{ - type: 'polling', // create a {@link Ext.direct.PollingProvider} + type: 'polling', // create a {@link Ext.direct.PollingProvider} url: 'php/poll.php' }, pollProv // reference to previously created instance @@ -37519,7 +42129,7 @@ Ext.Direct.addProvider( * or config object for a Provider) or any number of Provider descriptions as arguments. Each * Provider description instructs Ext.Direct how to create client-side stub methods. */ - addProvider : function(provider){ + addProvider : function(provider){ var a = arguments; if(a.length > 1){ for(var i = 0, len = a.length; i < len; i++){ @@ -37527,7 +42137,7 @@ Ext.Direct.addProvider( } return; } - + // if provider has not already been instantiated if(!provider.events){ provider = new Ext.Direct.PROVIDERS[provider.type](provider); @@ -37550,14 +42160,14 @@ Ext.Direct.addProvider( * Retrieve a {@link Ext.direct.Provider provider} by the * {@link Ext.direct.Provider#id id} specified when the provider is * {@link #addProvider added}. - * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider} + * @param {String} id Unique identifier assigned to the provider when calling {@link #addProvider} */ getProvider : function(id){ return this.providers[id]; }, removeProvider : function(id){ - var provider = id.id ? id : this.providers[id.id]; + var provider = id.id ? id : this.providers[id]; provider.un('data', this.onProviderData, this); provider.un('exception', this.onProviderException, this); delete this.providers[provider.id]; @@ -37628,7 +42238,8 @@ Ext.Direct.Transaction.prototype = { } };Ext.Direct.Event = function(config){ Ext.apply(this, config); -} +}; + Ext.Direct.Event.prototype = { status: true, getData: function(){ @@ -37653,7 +42264,6 @@ Ext.Direct.eventTypes = { 'event': Ext.Direct.Event, 'exception': Ext.Direct.ExceptionEvent }; - /** * @class Ext.direct.Provider * @extends Ext.util.Observable @@ -37783,7 +42393,7 @@ Ext.direct.JsonProvider = Ext.extend(Ext.direct.Provider, { xhr: xhr, code: Ext.Direct.exceptions.PARSE, message: 'Error parsing json response: \n\n ' + data - }) + }); return [event]; } var events = []; @@ -38058,6 +42668,7 @@ TestAction.multiply( * executing. * @param {Ext.direct.RemotingProvider} provider * @param {Ext.Direct.Transaction} transaction + * @param {Object} meta The meta data */ 'beforecall', /** @@ -38066,6 +42677,7 @@ TestAction.multiply( * NOT fire after the response has come back from the call. * @param {Ext.direct.RemotingProvider} provider * @param {Ext.Direct.Transaction} transaction + * @param {Object} meta The meta data */ 'call' ); @@ -38223,10 +42835,10 @@ TestAction.multiply( cb: scope && Ext.isFunction(hs) ? hs.createDelegate(scope) : hs }); - if(this.fireEvent('beforecall', this, t) !== false){ + if(this.fireEvent('beforecall', this, t, m) !== false){ Ext.Direct.addTransaction(t); this.queueTransaction(t); - this.fireEvent('call', this, t); + this.fireEvent('call', this, t, m); } }, @@ -38240,7 +42852,7 @@ TestAction.multiply( isForm: true }); - if(this.fireEvent('beforecall', this, t) !== false){ + if(this.fireEvent('beforecall', this, t, m) !== false){ Ext.Direct.addTransaction(t); var isUpload = String(form.getAttribute("enctype")).toLowerCase() == 'multipart/form-data', params = { @@ -38258,7 +42870,7 @@ TestAction.multiply( isUpload: isUpload, params: callback && Ext.isObject(callback.params) ? Ext.apply(params, callback.params) : params }); - this.fireEvent('call', this, t); + this.fireEvent('call', this, t, m); this.processForm(t); } }, @@ -38311,16 +42923,10 @@ TestAction.multiply( } } }); -Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;/*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** +Ext.Direct.PROVIDERS['remoting'] = Ext.direct.RemotingProvider;/** * @class Ext.Resizable * @extends Ext.util.Observable - *Applies drag handles to an element to make it resizable. The drag handles are inserted into the element + *
Applies drag handles to an element to make it resizable. The drag handles are inserted into the element * and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap * the textarea in a div and set 'resizeChild' to true (or to the id of the element), or set wrap:true in your config and * the element will be wrapped for you automatically.
@@ -38358,7 +42964,7 @@ resizer.on('resize', myHandler); * @param {Object} config configuration options */ Ext.Resizable = Ext.extend(Ext.util.Observable, { - + constructor: function(el, config){ this.el = Ext.get(el); if(config && config.wrap){ @@ -38376,7 +42982,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { config.adjustments = 'auto'; } } - + /** * The proxy Element that is resized in place of the real Element during the resize operation. * This may be queried using {@link Ext.Element#getBox} to provide the new area to resize to. @@ -38387,9 +42993,9 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { this.proxy = this.el.createProxy({tag: 'div', cls: 'x-resizable-proxy', id: this.el.id + '-rzproxy'}, Ext.getBody()); this.proxy.unselectable(); this.proxy.enableDisplayMode('block'); - + Ext.apply(this, config); - + if(this.pinned){ this.disableTrackOver = true; this.el.addClass('x-resizable-pinned'); @@ -38418,13 +43024,13 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { } // legacy this.corner = this.southeast; - + if(this.handles.indexOf('n') != -1 || this.handles.indexOf('w') != -1){ this.updateBox = true; - } - + } + this.activeHandle = null; - + if(this.resizeChild){ if(typeof this.resizeChild == 'boolean'){ this.resizeChild = Ext.get(this.el.dom.firstChild, true); @@ -38432,7 +43038,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { this.resizeChild = Ext.get(this.resizeChild, true); } } - + if(this.adjustments == 'auto'){ var rc = this.resizeChild; var hw = this.west, he = this.east, hn = this.north, hs = this.south; @@ -38443,19 +43049,19 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { } this.adjustments = [ (he ? -he.el.getWidth() : 0) + (hw ? -hw.el.getWidth() : 0), - (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 + (hn ? -hn.el.getHeight() : 0) + (hs ? -hs.el.getHeight() : 0) -1 ]; } - + if(this.draggable){ - this.dd = this.dynamic ? + this.dd = this.dynamic ? this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id}); this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id); if(this.constrainTo){ this.dd.constrainTo(this.constrainTo); } } - + this.addEvents( /** * @event beforeresize @@ -38474,7 +43080,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { */ 'resize' ); - + if(this.width !== null && this.height !== null){ this.resizeTo(this.width, this.height); }else{ @@ -38483,7 +43089,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { if(Ext.isIE){ this.el.dom.style.zoom = 1; } - Ext.Resizable.superclass.constructor.call(this); + Ext.Resizable.superclass.constructor.call(this); }, /** @@ -38524,7 +43130,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { enabled : true, /** * @property enabled Writable. False if resizing is disabled. - * @type Boolean + * @type Boolean */ /** * @cfg {String} handles String consisting of the resize handles to display (defaults to undefined). @@ -38588,8 +43194,8 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { */ preserveRatio : false, /** - * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) - */ + * @cfg {Boolean/String/Element} resizeChild True to resize the first child, or id/element to resize (defaults to false) + */ resizeChild : false, /** * @cfg {Boolean} transparent True for transparent handles. This is only applied at config time. (defaults to false) @@ -38606,7 +43212,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { * @cfg {String} handleCls A css class to add to each handle. Defaults to ''. */ - + /** * Perform a manual resize and fires the 'resize' event. * @param {Number} width @@ -38669,7 +43275,7 @@ Ext.Resizable = Ext.extend(Ext.util.Observable, { e.stopEvent(); this.activeHandle = handle; this.startSizing(e, handle); - } + } }, // private @@ -38785,11 +43391,11 @@ new Ext.Panel({ // private constrain : function(v, diff, m, mx){ if(v - diff < m){ - diff = v - m; + diff = v - m; }else if(v - diff > mx){ - diff = v - mx; + diff = v - mx; } - return diff; + return diff; }, // private @@ -38804,15 +43410,15 @@ new Ext.Panel({ //var curXY = this.startPoint; var curSize = this.curSize || this.startBox, x = this.startBox.x, y = this.startBox.y, - ox = x, + ox = x, oy = y, - w = curSize.width, + w = curSize.width, h = curSize.height, - ow = w, + ow = w, oh = h, - mw = this.minWidth, + mw = this.minWidth, mh = this.minHeight, - mxw = this.maxWidth, + mxw = this.maxWidth, mxh = this.maxHeight, wi = this.widthIncrement, hi = this.heightIncrement, @@ -38822,10 +43428,10 @@ new Ext.Panel({ pos = this.activeHandle.position, tw, th; - + switch(pos){ case 'east': - w += diffX; + w += diffX; w = Math.min(Math.max(mw, w), mxw); break; case 'south': @@ -38833,7 +43439,7 @@ new Ext.Panel({ h = Math.min(Math.max(mh, h), mxh); break; case 'southeast': - w += diffX; + w += diffX; h += diffY; w = Math.min(Math.max(mw, w), mxw); h = Math.min(Math.max(mh, h), mxh); @@ -38849,7 +43455,7 @@ new Ext.Panel({ w -= diffX; break; case 'northeast': - w += diffX; + w += diffX; w = Math.min(Math.max(mw, w), mxw); diffY = this.constrain(h, diffY, mh, mxh); y += diffY; @@ -38871,7 +43477,7 @@ new Ext.Panel({ w -= diffX; break; } - + var sw = this.snap(w, wi, mw); var sh = this.snap(h, hi, mh); if(sw != w || sh != h){ @@ -38896,7 +43502,7 @@ new Ext.Panel({ w = sw; h = sh; } - + if(this.preserveRatio){ switch(pos){ case 'southeast': @@ -38947,7 +43553,7 @@ new Ext.Panel({ y += th - h; x += tw - w; break; - + } } this.proxy.setBounds(x, y, w, h); @@ -38971,7 +43577,7 @@ new Ext.Panel({ this.el.removeClass('x-resizable-over'); } }, - + /** * Returns the element this component is bound to. * @return {Ext.Element} @@ -38979,7 +43585,7 @@ new Ext.Panel({ getEl : function(){ return this.el; }, - + /** * Returns the resizeChild element (or null). * @return {Ext.Element} @@ -38987,9 +43593,9 @@ new Ext.Panel({ getResizeChild : function(){ return this.resizeChild; }, - + /** - * Destroys this resizable. If the element was wrapped and + * Destroys this resizable. If the element was wrapped and * removeEl is not true then the element remains. * @param {Boolean} removeEl (optional) true to remove the element from the DOM */ @@ -38997,7 +43603,7 @@ new Ext.Panel({ Ext.destroy(this.dd, this.overlay, this.proxy); this.overlay = null; this.proxy = null; - + var ps = Ext.Resizable.positions; for(var k in ps){ if(typeof ps[k] != 'function' && this[ps[k]]){ @@ -39047,7 +43653,7 @@ Ext.Resizable.Handle = Ext.extend(Object, { this.el.setOpacity(0); } if(!Ext.isEmpty(cls)){ - this.el.addClass(cls); + this.el.addClass(cls); } this.el.on('mousedown', this.onMouseDown, this); if(!disableTrackOver){ @@ -39056,12 +43662,12 @@ Ext.Resizable.Handle = Ext.extend(Object, { mouseover: this.onMouseOver, mouseout: this.onMouseOut }); - } + } }, - + // private afterResize : function(rz){ - // do nothing + // do nothing }, // private onMouseDown : function(e){ @@ -39256,6 +43862,18 @@ Ext.Window = Ext.extend(Ext.Panel, { */ expandOnShow : true, + /** + * @cfg {Number} showAnimDuration The number of seconds that the window show animation takes if enabled. + * Defaults to 0.25 + */ + showAnimDuration: 0.25, + + /** + * @cfg {Number} hideAnimDuration The number of seconds that the window hide animation takes if enabled. + * Defaults to 0.25 + */ + hideAnimDuration: 0.25, + // inherited docs, same default collapsible : false, @@ -39408,8 +44026,12 @@ Ext.Window = Ext.extend(Ext.Panel, { initDraggable : function(){ /** - * If this Window is configured {@link #draggable}, this property will contain - * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element. + *If this Window is configured {@link #draggable}, this property will contain + * an instance of {@link Ext.dd.DD} which handles dragging the Window's DOM Element.
+ *This has implementations of
* @type Ext.dd.DD * @property dd */ @@ -39418,18 +44040,18 @@ Ext.Window = Ext.extend(Ext.Panel, { // private onEsc : function(k, e){ + if (this.activeGhost) { + this.unghost(); + } e.stopEvent(); this[this.closeAction](); }, // private beforeDestroy : function(){ - if (this.rendered){ + if(this.rendered){ this.hide(); - if(this.doAnchor){ - Ext.EventManager.removeResizeListener(this.doAnchor, this); - Ext.EventManager.un(window, 'scroll', this.doAnchor, this); - } + this.clearAnchor(); Ext.destroy( this.focusEl, this.resizer, @@ -39506,11 +44128,13 @@ Ext.Window = Ext.extend(Ext.Panel, { this.updateBox(box); }else{ this.setSize(box); + if (Ext.isIE6 && Ext.isStrict) { + this.doLayout(); + } } this.focus(); this.updateHandles(); this.saveState(); - this.doLayout(); }, /** @@ -39518,7 +44142,11 @@ Ext.Window = Ext.extend(Ext.Panel, { * window itself will receive focus. */ focus : function(){ - var f = this.focusEl, db = this.defaultButton, t = typeof db; + var f = this.focusEl, + db = this.defaultButton, + t = typeof db, + el, + ct; if(Ext.isDefined(db)){ if(Ext.isNumber(db) && this.fbar){ f = this.fbar.items.get(db); @@ -39527,6 +44155,13 @@ Ext.Window = Ext.extend(Ext.Panel, { }else{ f = db; } + el = f.getEl(); + ct = Ext.getDom(this.container); + if (el && ct) { + if (ct != document.body && !Ext.lib.Region.getRegion(ct).contains(Ext.lib.Region.getRegion(el.dom))){ + return; + } + } } f = f || this.focusEl; f.focus.defer(10, f); @@ -39643,7 +44278,7 @@ Ext.Window = Ext.extend(Ext.Panel, { callback: this.afterShow.createDelegate(this, [true], false), scope: this, easing: 'easeNone', - duration: 0.25, + duration: this.showAnimDuration, opacity: 0.5 })); }, @@ -39703,7 +44338,7 @@ Ext.Window = Ext.extend(Ext.Panel, { this.proxy.shift(Ext.apply(this.animateTarget.getBox(), { callback: this.afterHide, scope: this, - duration: 0.25, + duration: this.hideAnimDuration, easing: 'easeNone', opacity: 0 })); @@ -39748,7 +44383,7 @@ Ext.Window = Ext.extend(Ext.Panel, { var s = this.getSize(); offsets = { right:-(s.width - 100), - bottom:-(s.height - 25) + bottom:-(s.height - 25 + this.el.getConstrainOffset()) }; } @@ -39777,7 +44412,7 @@ Ext.Window = Ext.extend(Ext.Panel, { } if(show !== false){ this.el.show(); - this.focus(); + this.focus.defer(10, this); if(Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug this.cascade(this.setAutoScroll); } @@ -39951,21 +44586,44 @@ Ext.Window = Ext.extend(Ext.Panel, { * @return {Ext.Window} this */ anchorTo : function(el, alignment, offsets, monitorScroll){ - if(this.doAnchor){ - Ext.EventManager.removeResizeListener(this.doAnchor, this); - Ext.EventManager.un(window, 'scroll', this.doAnchor, this); - } - this.doAnchor = function(){ - this.alignTo(el, alignment, offsets); - }; - Ext.EventManager.onWindowResize(this.doAnchor, this); + this.clearAnchor(); + this.anchorTarget = { + el: el, + alignment: alignment, + offsets: offsets + }; - var tm = typeof monitorScroll; - if(tm != 'undefined'){ - Ext.EventManager.on(window, 'scroll', this.doAnchor, this, - {buffer: tm == 'number' ? monitorScroll : 50}); - } - return this; + Ext.EventManager.onWindowResize(this.doAnchor, this); + var tm = typeof monitorScroll; + if(tm != 'undefined'){ + Ext.EventManager.on(window, 'scroll', this.doAnchor, this, + {buffer: tm == 'number' ? monitorScroll : 50}); + } + return this.doAnchor(); + }, + + /** + * Performs the anchor, using the saved anchorTarget property. + * @return {Ext.Window} this + * @private + */ + doAnchor : function(){ + var o = this.anchorTarget; + this.alignTo(o.el, o.alignment, o.offsets); + return this; + }, + + /** + * Removes any existing anchor from this window. See {@link #anchorTo}. + * @return {Ext.Window} this + */ + clearAnchor : function(){ + if(this.anchorTarget){ + Ext.EventManager.removeResizeListener(this.doAnchor, this); + Ext.EventManager.un(window, 'scroll', this.doAnchor, this); + delete this.anchorTarget; + } + return this; }, /** @@ -40026,19 +44684,20 @@ Ext.Window = Ext.extend(Ext.Panel, { Ext.reg('window', Ext.Window); // private - custom Window DD implementation -Ext.Window.DD = function(win){ - this.win = win; - Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); - this.setHandleElId(win.header.id); - this.scroll = false; -}; +Ext.Window.DD = Ext.extend(Ext.dd.DD, { + + constructor : function(win){ + this.win = win; + Ext.Window.DD.superclass.constructor.call(this, win.el.id, 'WindowDD-'+win.id); + this.setHandleElId(win.header.id); + this.scroll = false; + }, -Ext.extend(Ext.Window.DD, Ext.dd.DD, { moveOnly:true, headerOffsets:[100, 25], startDrag : function(){ var w = this.win; - this.proxy = w.ghost(); + this.proxy = w.ghost(w.initialConfig.cls); if(w.constrain !== false){ var so = w.el.shadowOffset; this.constrainTo(w.container, {right: so, left: so, bottom: so}); @@ -40437,7 +45096,8 @@ Ext.MessageBox = function(){ if(!dlg.isVisible() && !opt.width){ dlg.setSize(this.maxWidth, 100); // resize first so content is never clipped from previous shows } - msgEl.update(text || ' '); + // Append a space here for sizing. In IE, for some reason, it wraps text incorrectly without one in some cases + msgEl.update(text ? text + ' ' : ' '); var iw = iconCls != '' ? (iconEl.getWidth() + iconEl.getMargins('lr')) : 0, mw = msgEl.getWidth() + msgEl.getMargins('lr'), @@ -40445,11 +45105,6 @@ Ext.MessageBox = function(){ bw = dlg.body.getFrameWidth('lr'), w; - if (Ext.isIE && iw > 0){ - //3 pixels get subtracted in the icon CSS for an IE margin issue, - //so we have to add it back here for the overall width to be consistent - iw += 3; - } w = Math.max(Math.min(opt.width || iw+mw+fw+bw, opt.maxWidth || this.maxWidth), Math.max(opt.minWidth || this.minWidth, bwidth || 0)); @@ -40462,6 +45117,7 @@ Ext.MessageBox = function(){ if(Ext.isIE && w == bwidth){ w += 4; //Add offset when the content width is smaller than the buttons. } + msgEl.update(text || ' '); dlg.setSize(w, 'auto').center(); return this; }, @@ -40620,7 +45276,7 @@ Ext.Msg.show({ d.focusEl = db; } } - if(opt.iconCls){ + if(Ext.isDefined(opt.iconCls)){ d.setIconClass(opt.iconCls); } this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon); @@ -40908,13 +45564,14 @@ Ext.Msg = Ext.MessageBox;/** * @param panel The {@link Ext.Panel} to proxy for * @param config Configuration options */ -Ext.dd.PanelProxy = function(panel, config){ - this.panel = panel; - this.id = this.panel.id +'-ddproxy'; - Ext.apply(this, config); -}; +Ext.dd.PanelProxy = Ext.extend(Object, { + + constructor : function(panel, config){ + this.panel = panel; + this.id = this.panel.id +'-ddproxy'; + Ext.apply(this, config); + }, -Ext.dd.PanelProxy.prototype = { /** * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel, * false to drag with no proxy (defaults to true). @@ -40972,8 +45629,8 @@ Ext.dd.PanelProxy.prototype = { */ show : function(){ if(!this.ghost){ - this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody()); - this.ghost.setXY(this.panel.el.getXY()) + this.ghost = this.panel.createGhost(this.panel.initialConfig.cls, undefined, Ext.getBody()); + this.ghost.setXY(this.panel.el.getXY()); if(this.insertProxy){ this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'}); this.proxy.setSize(this.panel.getSize()); @@ -41002,31 +45659,34 @@ Ext.dd.PanelProxy.prototype = { parentNode.insertBefore(this.proxy.dom, before); } } -}; +}); // private - DD implementation for Panels -Ext.Panel.DD = function(panel, cfg){ - this.panel = panel; - this.dragData = {panel: panel}; - this.proxy = new Ext.dd.PanelProxy(panel, cfg); - Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg); - var h = panel.header; - if(h){ - this.setHandleElId(h.id); - } - (h ? h : this.panel.body).setStyle('cursor', 'move'); - this.scroll = false; -}; +Ext.Panel.DD = Ext.extend(Ext.dd.DragSource, { + + constructor : function(panel, cfg){ + this.panel = panel; + this.dragData = {panel: panel}; + this.proxy = new Ext.dd.PanelProxy(panel, cfg); + Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg); + var h = panel.header, + el = panel.body; + if(h){ + this.setHandleElId(h.id); + el = panel.header; + } + el.setStyle('cursor', 'move'); + this.scroll = false; + }, -Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, { showFrame: Ext.emptyFn, startDrag: Ext.emptyFn, b4StartDrag: function(x, y) { this.proxy.show(); }, b4MouseDown: function(e) { - var x = e.getPageX(); - var y = e.getPageY(); + var x = e.getPageX(), + y = e.getPageY(); this.autoOffset(x, y); }, onInitDrag : function(x, y){ @@ -41053,19 +45713,21 @@ Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, { * for encoding and decoding typed variables including dates and defines the * Provider interface. */ -Ext.state.Provider = function(){ - /** - * @event statechange - * Fires when a state change occurs. - * @param {Provider} this This state provider - * @param {String} key The state key which was changed - * @param {String} value The encoded value for the state - */ - this.addEvents("statechange"); - this.state = {}; - Ext.state.Provider.superclass.constructor.call(this); -}; -Ext.extend(Ext.state.Provider, Ext.util.Observable, { +Ext.state.Provider = Ext.extend(Ext.util.Observable, { + + constructor : function(){ + /** + * @event statechange + * Fires when a state change occurs. + * @param {Provider} this This state provider + * @param {String} key The state key which was changed + * @param {String} value The encoded value for the state + */ + this.addEvents("statechange"); + this.state = {}; + Ext.state.Provider.superclass.constructor.call(this); + }, + /** * Returns the current value for a key * @param {String} name The key name @@ -41102,31 +45764,48 @@ Ext.extend(Ext.state.Provider, Ext.util.Observable, { * @return {Mixed} The decoded value */ decodeValue : function(cookie){ - var re = /^(a|n|d|b|s|o)\:(.*)$/; - var matches = re.exec(unescape(cookie)); - if(!matches || !matches[1]) return; // non state cookie - var type = matches[1]; - var v = matches[2]; + /** + * a -> Array + * n -> Number + * d -> Date + * b -> Boolean + * s -> String + * o -> Object + * -> Empty (null) + */ + var re = /^(a|n|d|b|s|o|e)\:(.*)$/, + matches = re.exec(unescape(cookie)), + all, + type, + v, + kv; + if(!matches || !matches[1]){ + return; // non state cookie + } + type = matches[1]; + v = matches[2]; switch(type){ - case "n": + case 'e': + return null; + case 'n': return parseFloat(v); - case "d": + case 'd': return new Date(Date.parse(v)); - case "b": - return (v == "1"); - case "a": - var all = []; + case 'b': + return (v == '1'); + case 'a': + all = []; if(v != ''){ Ext.each(v.split('^'), function(val){ all.push(this.decodeValue(val)); }, this); } return all; - case "o": - var all = {}; + case 'o': + all = {}; if(v != ''){ Ext.each(v.split('^'), function(val){ - var kv = val.split('='); + kv = val.split('='); all[kv[0]] = this.decodeValue(kv[1]); }, this); } @@ -41142,30 +45821,36 @@ Ext.extend(Ext.state.Provider, Ext.util.Observable, { * @return {String} The encoded value */ encodeValue : function(v){ - var enc; - if(typeof v == "number"){ - enc = "n:" + v; - }else if(typeof v == "boolean"){ - enc = "b:" + (v ? "1" : "0"); + var enc, + flat = '', + i = 0, + len, + key; + if(v == null){ + return 'e:1'; + }else if(typeof v == 'number'){ + enc = 'n:' + v; + }else if(typeof v == 'boolean'){ + enc = 'b:' + (v ? '1' : '0'); }else if(Ext.isDate(v)){ - enc = "d:" + v.toGMTString(); + enc = 'd:' + v.toGMTString(); }else if(Ext.isArray(v)){ - var flat = ""; - for(var i = 0, len = v.length; i < len; i++){ + for(len = v.length; i < len; i++){ flat += this.encodeValue(v[i]); - if(i != len-1) flat += "^"; - } - enc = "a:" + flat; - }else if(typeof v == "object"){ - var flat = ""; - for(var key in v){ - if(typeof v[key] != "function" && v[key] !== undefined){ - flat += key + "=" + this.encodeValue(v[key]) + "^"; + if(i != len - 1){ + flat += '^'; } } - enc = "o:" + flat.substring(0, flat.length-1); + enc = 'a:' + flat; + }else if(typeof v == 'object'){ + for(key in v){ + if(typeof v[key] != 'function' && v[key] !== undefined){ + flat += key + '=' + this.encodeValue(v[key]) + '^'; + } + } + enc = 'o:' + flat.substring(0, flat.length-1); }else{ - enc = "s:" + v; + enc = 's:' + v; } return escape(enc); } @@ -41257,17 +45942,18 @@ Ext.state.Manager = function(){ * Create a new CookieProvider * @param {Object} config The configuration object */ -Ext.state.CookieProvider = function(config){ - Ext.state.CookieProvider.superclass.constructor.call(this); - this.path = "/"; - this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days - this.domain = null; - this.secure = false; - Ext.apply(this, config); - this.state = this.readCookies(); -}; +Ext.state.CookieProvider = Ext.extend(Ext.state.Provider, { + + constructor : function(config){ + Ext.state.CookieProvider.superclass.constructor.call(this); + this.path = "/"; + this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days + this.domain = null; + this.secure = false; + Ext.apply(this, config); + this.state = this.readCookies(); + }, -Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, { // private set : function(name, value){ if(typeof value == "undefined" || value === null){ @@ -41286,13 +45972,15 @@ Ext.extend(Ext.state.CookieProvider, Ext.state.Provider, { // private readCookies : function(){ - var cookies = {}; - var c = document.cookie + ";"; - var re = /\s?(.*?)=(.*?);/g; - var matches; + var cookies = {}, + c = document.cookie + ";", + re = /\s?(.*?)=(.*?);/g, + matches, + name, + value; while((matches = re.exec(c)) != null){ - var name = matches[1]; - var value = matches[2]; + name = matches[1]; + value = matches[2]; if(name && name.substring(0,3) == "ys-"){ cookies[name.substr(3)] = this.decodeValue(value); } @@ -41435,6 +46123,12 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { */ trackOver: false, + /** + * @cfg {Boolean} blockRefresh Set this to true to ignore datachanged events on the bound store. This is useful if + * you wish to provide custom transition animations via a plugin (defaults to false) + */ + blockRefresh: false, + //private last: false, @@ -41564,11 +46258,12 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Refreshes the view by reloading the data from the store and re-rendering the template. */ - refresh : function(){ + refresh : function() { this.clearSelections(false, true); - var el = this.getTemplateTarget(); - el.update(""); - var records = this.store.getRange(); + var el = this.getTemplateTarget(), + records = this.store.getRange(); + + el.update(''); if(records.length < 1){ if(!this.deferEmptyText || this.hasSkippedEmptyText){ el.update(this.emptyText); @@ -41612,17 +46307,19 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { * contain named properties. */ collectData : function(records, startIndex){ - var r = []; - for(var i = 0, len = records.length; i < len; i++){ - r[r.length] = this.prepareData(records[i].data, startIndex+i, records[i]); + var r = [], + i = 0, + len = records.length; + for(; i < len; i++){ + r[r.length] = this.prepareData(records[i].data, startIndex + i, records[i]); } return r; }, // private - bufferRender : function(records){ + bufferRender : function(records, index){ var div = document.createElement('div'); - this.tpl.overwrite(div, this.collectData(records)); + this.tpl.overwrite(div, this.collectData(records, index)); return Ext.query(this.itemSelector, div); }, @@ -41630,9 +46327,9 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { onUpdate : function(ds, record){ var index = this.store.indexOf(record); if(index > -1){ - var sel = this.isSelected(index); - var original = this.all.elements[index]; - var node = this.bufferRender([record], index)[0]; + var sel = this.isSelected(index), + original = this.all.elements[index], + node = this.bufferRender([record], index)[0]; this.all.replaceElement(index, node, true); if(sel){ @@ -41706,7 +46403,7 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { this.store.destroy(); }else{ this.store.un("beforeload", this.onBeforeLoad, this); - this.store.un("datachanged", this.refresh, this); + this.store.un("datachanged", this.onDataChanged, this); this.store.un("add", this.onAdd, this); this.store.un("remove", this.onRemove, this); this.store.un("update", this.onUpdate, this); @@ -41721,7 +46418,7 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { store.on({ scope: this, beforeload: this.onBeforeLoad, - datachanged: this.refresh, + datachanged: this.onDataChanged, add: this.onAdd, remove: this.onRemove, update: this.onUpdate, @@ -41734,6 +46431,16 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { } }, + /** + * @private + * Calls this.refresh if this.blockRefresh is not true + */ + onDataChanged: function() { + if (this.blockRefresh !== true) { + this.refresh.apply(this, arguments); + } + }, + /** * Returns the template node the passed child belongs to, or null if it doesn't belong to one. * @param {HTMLElement} node @@ -41745,9 +46452,10 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { // private onClick : function(e){ - var item = e.getTarget(this.itemSelector, this.getTemplateTarget()); + var item = e.getTarget(this.itemSelector, this.getTemplateTarget()), + index; if(item){ - var index = this.indexOf(item); + index = this.indexOf(item); if(this.onItemClick(item, index, e) !== false){ this.fireEvent("click", this, index, item, e); } @@ -41861,9 +46569,13 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { * @return {Array} An array of numeric indexes */ getSelectedIndexes : function(){ - var indexes = [], s = this.selected.elements; - for(var i = 0, len = s.length; i < len; i++){ - indexes.push(s[i].viewIndex); + var indexes = [], + selected = this.selected.elements, + i = 0, + len = selected.length; + + for(; i < len; i++){ + indexes.push(selected[i].viewIndex); } return indexes; }, @@ -41873,11 +46585,7 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { * @return {Array} An array of {@link Ext.data.Record} objects */ getSelectedRecords : function(){ - var r = [], s = this.selected.elements; - for(var i = 0, len = s.length; i < len; i++){ - r[r.length] = this.store.getAt(s[i].viewIndex); - } - return r; + return this.getRecords(this.selected.elements); }, /** @@ -41886,11 +46594,14 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { * @return {Array} records The {@link Ext.data.Record} objects */ getRecords : function(nodes){ - var r = [], s = nodes; - for(var i = 0, len = s.length; i < len; i++){ - r[r.length] = this.store.getAt(s[i].viewIndex); + var records = [], + i = 0, + len = nodes.length; + + for(; i < len; i++){ + records[records.length] = this.store.getAt(nodes[i].viewIndex); } - return r; + return records; }, /** @@ -41921,7 +46632,7 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Returns true if the passed node is selected, else false. - * @param {HTMLElement/Number} node The node or node index to check + * @param {HTMLElement/Number/Ext.data.Record} node The node, node index or record to check * @return {Boolean} True if selected, else false */ isSelected : function(node){ @@ -41930,7 +46641,7 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Deselects a node. - * @param {HTMLElement/Number} node The node to deselect + * @param {HTMLElement/Number/Record} node The node, node index or record to deselect */ deselect : function(node){ if(this.isSelected(node)){ @@ -41946,8 +46657,8 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Selects a set of nodes. - * @param {Array/HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node, - * id of a template node or an array of any of those to select + * @param {Array/HTMLElement/String/Number/Ext.data.Record} nodeInfo An HTMLElement template node, index of a template node, + * id of a template node, record associated with a node or an array of any of those to select * @param {Boolean} keepExisting (optional) true to keep existing selections * @param {Boolean} suppressEvent (optional) true to skip firing of the selectionchange vent */ @@ -41995,7 +46706,8 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Gets a template node. - * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node + * @param {HTMLElement/String/Number/Ext.data.Record} nodeInfo An HTMLElement template node, index of a template node, + * the id of a template node or the record associated with the node. * @return {HTMLElement} The node or null if it wasn't found */ getNode : function(nodeInfo){ @@ -42003,6 +46715,9 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { return document.getElementById(nodeInfo); }else if(Ext.isNumber(nodeInfo)){ return this.all.elements[nodeInfo]; + }else if(nodeInfo instanceof Ext.data.Record){ + var idx = this.store.indexOf(nodeInfo); + return this.all.elements[idx]; } return nodeInfo; }, @@ -42014,10 +46729,12 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { * @return {Array} An array of nodes */ getNodes : function(start, end){ - var ns = this.all.elements; + var ns = this.all.elements, + nodes = [], + i; + start = start || 0; end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end; - var nodes = [], i; if(start <= end){ for(i = start; i <= end && ns[i]; i++){ nodes.push(ns[i]); @@ -42032,7 +46749,8 @@ Ext.DataView = Ext.extend(Ext.BoxComponent, { /** * Finds the index of the passed node. - * @param {HTMLElement/String/Number} nodeInfo An HTMLElement template node, index of a template node or the id of a template node + * @param {HTMLElement/String/Number/Record} nodeInfo An HTMLElement template node, index of a template node, the id of a template node + * or a record associated with a node. * @return {Number} The index of the node or -1 */ indexOf : function(node){ @@ -42099,7 +46817,7 @@ Ext.reg('dataview', Ext.DataView); "url":"images\/thumbs\/zack_sink.jpg" } ] -} +} var store = new Ext.data.JsonStore({ url: 'get-images.php', root: 'images', @@ -42122,7 +46840,7 @@ var listView = new Ext.list.ListView({ dataIndex: 'name' },{ header: 'Last Modified', - width: .35, + width: .35, dataIndex: 'lastmod', tpl: '{lastmod:date("m-d h:i a")}' },{ @@ -42172,7 +46890,7 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { * @cfg {String} itemSelector * Defaults to 'dl' to work with the preconfigured {@link Ext.DataView#tpl tpl}. * This setting specifies the CSS selector (e.g. div.some-class or span:first-child) - * that will be used to determine what nodes the ListView will be working with. + * that will be used to determine what nodes the ListView will be working with. */ itemSelector: 'dl', /** @@ -42221,7 +46939,7 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { tpl: '{size:fileSize}', width: .35 } - *startDrag,onDragandendDrag+ * which perform the dragging action. If extra logic is needed at these points, use + * {@link Function#createInterceptor createInterceptor} or {@link Function#createSequence createSequence} to + * augment the existing implementations.'; }, // private @@ -70135,12 +78559,14 @@ var grid = new Ext.grid.GridPanel({ }, // private - onAdd : function(){ - if(this.canGroup() && !this.ignoreAdd){ + onAdd : function(ds, records, index) { + if (this.canGroup() && !this.ignoreAdd) { var ss = this.getScrollState(); + this.fireEvent('beforerowsinserted', ds, index, index + (records.length-1)); this.refresh(); this.restoreScroll(ss); - }else if(!this.canGroup()){ + this.fireEvent('rowsinserted', ds, index, index + (records.length-1)); + } else if (!this.canGroup()) { Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments); } }, @@ -70174,14 +78600,13 @@ var grid = new Ext.grid.GridPanel({ } if((item = items.get('showGroups'))){ item.setDisabled(disabled); - item.setChecked(this.enableGrouping, true); + item.setChecked(this.canGroup(), true); } }, // private renderUI : function(){ - Ext.grid.GroupingView.superclass.renderUI.call(this); - this.mainBody.on('mousedown', this.interceptMouse, this); + var markup = Ext.grid.GroupingView.superclass.renderUI.call(this); if(this.enableGroupingMenu && this.hmenu){ this.hmenu.add('-',{ @@ -70202,37 +78627,46 @@ var grid = new Ext.grid.GridPanel({ } this.hmenu.on('beforeshow', this.beforeMenuShow, this); } + return markup; }, processEvent: function(name, e){ + Ext.grid.GroupingView.superclass.processEvent.call(this, name, e); var hd = e.getTarget('.x-grid-group-hd', this.mainBody); if(hd){ // group value is at the end of the string var field = this.getGroupField(), prefix = this.getPrefix(field), - groupValue = hd.id.substring(prefix.length); + groupValue = hd.id.substring(prefix.length), + emptyRe = new RegExp('gp-' + Ext.escapeRe(field) + '--hd'); // remove trailing '-hd' groupValue = groupValue.substr(0, groupValue.length - 3); - if(groupValue){ + + // also need to check for empty groups + if(groupValue || emptyRe.test(hd.id)){ this.grid.fireEvent('group' + name, this.grid, field, groupValue, e); } + if(name == 'mousedown' && e.button == 0){ + this.toggleGroup(hd.parentNode); + } } }, // private onGroupByClick : function(){ + var grid = this.grid; this.enableGrouping = true; - this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex)); - this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState()); + grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex)); + grid.fireEvent('groupchange', grid, grid.store.getGroupState()); this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups this.refresh(); }, // private onShowGroupsClick : function(mi, checked){ - this.enableGrouping = checked; + this.enableGrouping = checked; if(checked){ this.onGroupByClick(); }else{ @@ -70262,11 +78696,15 @@ var grid = new Ext.grid.GridPanel({ * @param {Boolean} expanded (optional) */ toggleGroup : function(group, expanded){ - var gel = Ext.get(group); + var gel = Ext.get(group), + id = Ext.util.Format.htmlEncode(gel.id); + expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed'); - if(this.state[gel.id] !== expanded){ - this.grid.stopEditing(true); - this.state[gel.id] = expanded; + if(this.state[id] !== expanded){ + if (this.cancelEditOnToggle !== false) { + this.grid.stopEditing(true); + } + this.state[id] = expanded; gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed'); } }, @@ -70296,20 +78734,12 @@ var grid = new Ext.grid.GridPanel({ this.toggleAllGroups(false); }, - // private - interceptMouse : function(e){ - var hd = e.getTarget('.x-grid-group-hd', this.mainBody); - if(hd){ - e.stopEvent(); - this.toggleGroup(hd.parentNode); - } - }, - // private getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){ - var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v); + var column = this.cm.config[colIndex], + g = groupRenderer ? groupRenderer.call(column.scope, v, {}, r, rowIndex, colIndex, ds) : String(v); if(g === '' || g === ' '){ - g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText; + g = column.emptyGroupText || this.emptyGroupText; } return g; }, @@ -70330,6 +78760,32 @@ var grid = new Ext.grid.GridPanel({ } }, + afterRenderUI: function () { + Ext.grid.GroupingView.superclass.afterRenderUI.call(this); + + if (this.enableGroupingMenu && this.hmenu) { + this.hmenu.add('-',{ + itemId:'groupBy', + text: this.groupByText, + handler: this.onGroupByClick, + scope: this, + iconCls:'x-group-by-icon' + }); + + if (this.enableNoGroups) { + this.hmenu.add({ + itemId:'showGroups', + text: this.showGroupsText, + checked: true, + checkHandler: this.onShowGroupsClick, + scope: this + }); + } + + this.hmenu.on('beforeshow', this.beforeMenuShow, this); + } + }, + // private renderRows : function(){ var groupField = this.getGroupField(); @@ -70364,8 +78820,7 @@ var grid = new Ext.grid.GridPanel({ } if(!this.canGroup() || this.isUpdating){ - return Ext.grid.GroupingView.superclass.doRender.apply( - this, arguments); + return Ext.grid.GroupingView.superclass.doRender.apply(this, arguments); } var groupField = this.getGroupField(), @@ -70462,12 +78917,20 @@ var grid = new Ext.grid.GridPanel({ if(!this.canGroup()){ return Ext.grid.GroupingView.superclass.getRows.call(this); } - var r = []; - var g, gs = this.getGroups(); - for(var i = 0, len = gs.length; i < len; i++){ - g = gs[i].childNodes[1].childNodes; - for(var j = 0, jlen = g.length; j < jlen; j++){ - r[r.length] = g[j]; + var r = [], + gs = this.getGroups(), + g, + i = 0, + len = gs.length, + j, + jlen; + for(; i < len; ++i){ + g = gs[i].childNodes[1]; + if(g){ + g = g.childNodes; + for(j = 0, jlen = g.length; j < jlen; ++j){ + r[r.length] = g[j]; + } } } return r; @@ -70514,4 +78977,4 @@ var grid = new Ext.grid.GridPanel({ } }); // private -Ext.grid.GroupingView.GROUP_ID = 1000; +Ext.grid.GroupingView.GROUP_ID = 1000; \ No newline at end of file diff --git a/deluge/ui/web/js/ext-all.js b/deluge/ui/web/js/ext-all.js index 1594c7f15..5b0034a59 100644 --- a/deluge/ui/web/js/ext-all.js +++ b/deluge/ui/web/js/ext-all.js @@ -1,18 +1,11 @@ /* - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license + * Ext JS Library 3.4.0 + * Copyright(c) 2006-2011 Sencha Inc. + * licensing@sencha.com + * http://www.sencha.com/license */ -Ext.DomHelper=function(){var s=null,j=/^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i,l=/^table|tbody|tr|td$/i,p,m="afterbegin",n="afterend",c="beforebegin",o="beforeend",a="-
*
- align : StringSet the CSS text-align property @@ -42255,8 +46973,8 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { /* * IE has issues when setting percentage based widths to 100%. Default to 99. */ - maxWidth: Ext.isIE ? 99 : 100, - + maxColumnWidth: Ext.isIE ? 99 : 100, + initComponent : function(){ if(this.columnResize){ this.colResizer = new Ext.list.ColumnResizer(this.colResizer); @@ -42295,13 +47013,13 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { '' ); }; - - var cs = this.columns, - allocatedWidth = 0, - colsWithWidth = 0, - len = cs.length, + + var cs = this.columns, + allocatedWidth = 0, + colsWithWidth = 0, + len = cs.length, columns = []; - + for(var i = 0; i < len; i++){ var c = cs[i]; if(!c.isColumn) { @@ -42310,18 +47028,21 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { } if(c.width) { allocatedWidth += c.width*100; + if(allocatedWidth > this.maxColumnWidth){ + c.width -= (allocatedWidth - this.maxColumnWidth) / 100; + } colsWithWidth++; } columns.push(c); } - + cs = this.columns = columns; - + // auto calculate missing column widths if(colsWithWidth < len){ var remaining = len - colsWithWidth; - if(allocatedWidth < this.maxWidth){ - var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100; + if(allocatedWidth < this.maxColumnWidth){ + var perCol = ((this.maxColumnWidth-allocatedWidth) / remaining)/100; for(var j = 0; j < len; j++){ var c = cs[j]; if(!c.width){ @@ -42335,12 +47056,12 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { onRender : function(){ this.autoEl = { - cls: 'x-list-wrap' + cls: 'x-list-wrap' }; Ext.list.ListView.superclass.onRender.apply(this, arguments); this.internalTpl.overwrite(this.el, {columns: this.columns}); - + this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild); this.innerHd = Ext.get(this.el.dom.firstChild.firstChild); @@ -42355,7 +47076,7 @@ Ext.list.ListView = Ext.extend(Ext.DataView, { /** *
Function which can be overridden which returns the data object passed to this - * view's {@link #tpl template} to render the whole ListView. The returned object + * view's {@link #tpl template} to render the whole ListView. The returned object * shall contain the following properties:
*- * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip. + * @param {Ext.BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip. * @return {Object} An object hash containing the properties required to render the selector element. */ getTemplateArgs : function(item) { @@ -43360,9 +48120,6 @@ new Ext.TabPanel({ if(this.rendered){ var items = this.items; this.initTab(c, items.indexOf(c)); - if(items.getCount() == 1){ - this.syncSize(); - } this.delegateUpdates(); } }, @@ -43515,13 +48272,14 @@ new Ext.TabPanel({ // private delegateUpdates : function(){ + var rendered = this.rendered; if(this.suspendUpdates){ return; } - if(this.resizeTabs && this.rendered){ + if(this.resizeTabs && rendered){ this.autoSizeTabs(); } - if(this.enableTabScroll && this.rendered){ + if(this.enableTabScroll && rendered){ this.autoScrollTabs(); } }, @@ -43589,13 +48347,15 @@ new Ext.TabPanel({ Ext.fly(oldEl).removeClass('x-tab-strip-active'); } } + this.activeTab = item; if(item){ var el = this.getTabEl(item); Ext.fly(el).addClass('x-tab-strip-active'); - this.activeTab = item; this.stack.add(item); this.layout.setActiveItem(item); + // Need to do this here, since setting the active tab slightly changes the size + this.delegateUpdates(); if(this.scrolling){ this.scrollToTab(item, this.animScroll); } @@ -43635,10 +48395,11 @@ new Ext.TabPanel({ pos = this.getScrollPos(), l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos; - if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues + if(!this.enableTabScroll || cw < 20){ // 20 to prevent display:none issues return; } - if(l <= tw){ + if(count == 0 || l <= tw){ + // ensure the width is set if there's no tabs wd.scrollLeft = 0; wrap.setWidth(tw); if(this.scrolling){ @@ -44082,8 +48843,32 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { * @type Menu * The {@link Ext.menu.Menu Menu} object associated with this Button when configured with the {@link #menu} config option. */ + /** + * @cfg {Boolean} autoWidth + * By default, if a width is not specified the button will attempt to stretch horizontally to fit its content. + * If the button is being managed by a width sizing layout (hbox, fit, anchor), set this to false to prevent + * the button from doing this automatic sizing. + * Defaults to undefined. + */ initComponent : function(){ + if(this.menu){ + // If array of items, turn it into an object config so we + // can set the ownerCt property in the config + if (Ext.isArray(this.menu)){ + this.menu = { items: this.menu }; + } + + // An object config will work here, but an instance of a menu + // will have already setup its ref's and have no effect + if (Ext.isObject(this.menu)){ + this.menu.ownerCt = this; + } + + this.menu = Ext.menu.MenuMgr.get(this.menu); + this.menu.ownerCt = undefined; + } + Ext.Button.superclass.initComponent.call(this); this.addEvents( @@ -44146,9 +48931,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { */ 'menutriggerout' ); - if(this.menu){ - this.menu = Ext.menu.MenuMgr.get(this.menu); - } + if(Ext.isString(this.toggleGroup)){ this.enableToggle = true; } @@ -44179,7 +48962,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(!Ext.isEmpty(this.oldCls)){ this.el.removeClass([this.oldCls, 'x-btn-pressed']); } - this.oldCls = (this.iconCls || this.icon) ? (this.text ? ' x-btn-text-icon' : ' x-btn-icon') : ' x-btn-noicon'; + this.oldCls = (this.iconCls || this.icon) ? (this.text ? 'x-btn-text-icon' : 'x-btn-icon') : 'x-btn-noicon'; this.el.addClass([this.oldCls, this.pressed ? 'x-btn-pressed' : null]); } }, @@ -44264,9 +49047,10 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { if(this.repeat){ var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {}); - this.mon(repeater, 'click', this.onClick, this); + this.mon(repeater, 'click', this.onRepeatClick, this); + }else{ + this.mon(btn, this.clickEvent, this.onClick, this); } - this.mon(btn, this.clickEvent, this.onClick, this); }, // private @@ -44334,7 +49118,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { this.clearTip(); } if(this.menu && this.destroyMenu !== false) { - Ext.destroy(this.menu); + Ext.destroy(this.btnEl, this.menu); } Ext.destroy(this.repeater); }, @@ -44353,7 +49137,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { // private doAutoWidth : function(){ - if(this.el && this.text && this.width === undefined){ + if(this.autoWidth !== false && this.el && this.text && this.width === undefined){ this.el.setWidth('auto'); if(Ext.isIE7 && Ext.isStrict){ var ib = this.btnEl; @@ -44444,13 +49228,6 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return this; }, - /** - * Focus the button - */ - focus : function(){ - this.btnEl.focus(); - }, - // private onDisable : function(){ this.onDisableChange(true); @@ -44506,6 +49283,11 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return this.menu && this.menu.ownerCt == this && this.menu.isVisible(); }, + // private + onRepeatClick : function(repeat, e){ + this.onClick(e); + }, + // private onClick : function(e){ if(e){ @@ -44515,9 +49297,7 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { return; } if(!this.disabled){ - if(this.enableToggle && (this.allowDepress !== false || !this.pressed)){ - this.toggle(); - } + this.doToggle(); if(this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick){ this.showMenu(); } @@ -44529,6 +49309,13 @@ Ext.Button = Ext.extend(Ext.BoxComponent, { } }, + // private + doToggle: function(){ + if (this.enableToggle && (this.allowDepress !== false || !this.pressed)) { + this.toggle(); + } + }, + // private isMenuTriggerOver : function(e, internal){ return this.menu && !internal; @@ -44817,9 +49604,7 @@ Ext.SplitButton = Ext.extend(Ext.Button, { this.arrowHandler.call(this.scope || this, this, e); } }else{ - if(this.enableToggle){ - this.toggle(); - } + this.doToggle(); this.fireEvent("click", this, e); if(this.handler){ this.handler.call(this.scope || this, this, e); @@ -44932,7 +49717,7 @@ Ext.CycleButton = Ext.extend(Ext.SplitButton, { } this.activeItem = item; if(!item.checked){ - item.setChecked(true, false); + item.setChecked(true, suppressEvent); } if(this.forceIcon){ this.setIconClass(this.forceIcon); @@ -45153,7 +49938,7 @@ Ext.extend(T, Ext.Container, { /** * @cfg {Boolean} enableOverflow - * Defaults to false. Configure-
*
- columns : StringSee {@link #columns}
@@ -42372,7 +47093,7 @@ Ext.list.ListView = Ext.extend(Ext.DataView, {
return {
columns: this.columns,
rows: rs
- }
+ };
},
verifyInternalSize : function(){
@@ -42383,30 +47104,32 @@ Ext.list.ListView = Ext.extend(Ext.DataView, {
// private
onResize : function(w, h){
- var bd = this.innerBody.dom;
- var hd = this.innerHd.dom
- if(!bd){
+ var body = this.innerBody.dom,
+ header = this.innerHd.dom,
+ scrollWidth = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth()) + 'px',
+ parentNode;
+
+ if(!body){
return;
}
- var bdp = bd.parentNode;
+ parentNode = body.parentNode;
if(Ext.isNumber(w)){
- var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
- if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
- bd.style.width = sw + 'px';
- hd.style.width = sw + 'px';
+ if(this.reserveScrollOffset || ((parentNode.offsetWidth - parentNode.clientWidth) > 10)){
+ body.style.width = scrollWidth;
+ header.style.width = scrollWidth;
}else{
- bd.style.width = w + 'px';
- hd.style.width = w + 'px';
+ body.style.width = w + 'px';
+ header.style.width = w + 'px';
setTimeout(function(){
- if((bdp.offsetWidth - bdp.clientWidth) > 10){
- bd.style.width = sw + 'px';
- hd.style.width = sw + 'px';
+ if((parentNode.offsetWidth - parentNode.clientWidth) > 10){
+ body.style.width = scrollWidth;
+ header.style.width = scrollWidth;
}
}, 10);
}
}
if(Ext.isNumber(h)){
- bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
+ parentNode.style.height = Math.max(0, h - header.parentNode.offsetHeight) + 'px';
}
},
@@ -42415,11 +47138,14 @@ Ext.list.ListView = Ext.extend(Ext.DataView, {
this.verifyInternalSize();
},
- findHeaderIndex : function(hd){
- hd = hd.dom || hd;
- var pn = hd.parentNode, cs = pn.parentNode.childNodes;
- for(var i = 0, c; c = cs[i]; i++){
- if(c == pn){
+ findHeaderIndex : function(header){
+ header = header.dom || header;
+ var parentNode = header.parentNode,
+ children = parentNode.parentNode.childNodes,
+ i = 0,
+ c;
+ for(; c = children[i]; i++){
+ if(c == parentNode){
return i;
}
}
@@ -42427,9 +47153,13 @@ Ext.list.ListView = Ext.extend(Ext.DataView, {
},
setHdWidths : function(){
- var els = this.innerHd.dom.getElementsByTagName('div');
- for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
- els[i].style.width = (cs[i].width*100) + '%';
+ var els = this.innerHd.dom.getElementsByTagName('div'),
+ i = 0,
+ columns = this.columns,
+ len = columns.length;
+
+ for(; i < len; i++){
+ els[i].style.width = (columns[i].width*100) + '%';
}
}
});
@@ -42625,23 +47355,23 @@ Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
},
handleHdMove : function(e, t){
- var hw = 5,
+ var handleWidth = 5,
x = e.getPageX(),
- hd = e.getTarget('em', 3, true);
- if(hd){
- var r = hd.getRegion(),
- ss = hd.dom.style,
- pn = hd.dom.parentNode;
+ header = e.getTarget('em', 3, true);
+ if(header){
+ var region = header.getRegion(),
+ style = header.dom.style,
+ parentNode = header.dom.parentNode;
- if(x - r.left <= hw && pn != pn.parentNode.firstChild){
- this.activeHd = Ext.get(pn.previousSibling.firstChild);
- ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
- } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
- this.activeHd = hd;
- ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
+ if(x - region.left <= handleWidth && parentNode != parentNode.parentNode.firstChild){
+ this.activeHd = Ext.get(parentNode.previousSibling.firstChild);
+ style.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
+ } else if(region.right - x <= handleWidth && parentNode != parentNode.parentNode.lastChild.previousSibling){
+ this.activeHd = header;
+ style.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
} else{
delete this.activeHd;
- ss.cursor = '';
+ style.cursor = '';
}
}
},
@@ -42652,59 +47382,89 @@ Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
},
onStart: function(e){
- this.view.disableHeaders = true;
- this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
- this.proxy.setHeight(this.view.el.getHeight());
- var x = this.tracker.getXY()[0],
- w = this.view.innerHd.getWidth();
+ var me = this,
+ view = me.view,
+ dragHeader = me.dragHd,
+ x = me.tracker.getXY()[0];
- this.hdX = this.dragHd.getX();
- this.hdIndex = this.view.findHeaderIndex(this.dragHd);
+ me.proxy = view.el.createChild({cls:'x-list-resizer'});
+ me.dragX = dragHeader.getX();
+ me.headerIndex = view.findHeaderIndex(dragHeader);
- this.proxy.setX(this.hdX);
- this.proxy.setWidth(x-this.hdX);
+ me.headersDisabled = view.disableHeaders;
+ view.disableHeaders = true;
- this.minWidth = w*this.minPct;
- this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
+ me.proxy.setHeight(view.el.getHeight());
+ me.proxy.setX(me.dragX);
+ me.proxy.setWidth(x - me.dragX);
+
+ this.setBoundaries();
+
+ },
+
+ // Sets up the boundaries for the drag/drop operation
+ setBoundaries: function(relativeX){
+ var view = this.view,
+ headerIndex = this.headerIndex,
+ width = view.innerHd.getWidth(),
+ relativeX = view.innerHd.getX(),
+ minWidth = Math.ceil(width * this.minPct),
+ maxWidth = width - minWidth,
+ numColumns = view.columns.length,
+ headers = view.innerHd.select('em', true),
+ minX = minWidth + relativeX,
+ maxX = maxWidth + relativeX,
+ header;
+
+ if (numColumns == 2) {
+ this.minX = minX;
+ this.maxX = maxX;
+ }else{
+ header = headers.item(headerIndex + 2);
+ this.minX = headers.item(headerIndex).getX() + minWidth;
+ this.maxX = header ? header.getX() - minWidth : maxX;
+ if (headerIndex == 0) {
+ // First
+ this.minX = minX;
+ } else if (headerIndex == numColumns - 2) {
+ // Last
+ this.maxX = maxX;
+ }
+ }
},
onDrag: function(e){
- var cursorX = this.tracker.getXY()[0];
- this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
+ var me = this,
+ cursorX = me.tracker.getXY()[0].constrain(me.minX, me.maxX);
+
+ me.proxy.setWidth(cursorX - this.dragX);
},
onEnd: function(e){
/* calculate desired width by measuring proxy and then remove it */
- var nw = this.proxy.getWidth();
+ var newWidth = this.proxy.getWidth(),
+ index = this.headerIndex,
+ view = this.view,
+ columns = view.columns,
+ width = view.innerHd.getWidth(),
+ newPercent = Math.ceil(newWidth * view.maxColumnWidth / width) / 100,
+ disabled = this.headersDisabled,
+ headerCol = columns[index],
+ otherCol = columns[index + 1],
+ totalPercent = headerCol.width + otherCol.width;
+
this.proxy.remove();
- var index = this.hdIndex,
- vw = this.view,
- cs = vw.columns,
- len = cs.length,
- w = this.view.innerHd.getWidth(),
- minPct = this.minPct * 100,
- pct = Math.ceil((nw * vw.maxWidth) / w),
- diff = (cs[index].width * 100) - pct,
- each = Math.floor(diff / (len-1-index)),
- mod = diff - (each * (len-1-index));
+ headerCol.width = newPercent;
+ otherCol.width = totalPercent - newPercent;
- for(var i = index+1; i < len; i++){
- var cw = (cs[i].width * 100) + each,
- ncw = Math.max(minPct, cw);
- if(cw != ncw){
- mod += cw - ncw;
- }
- cs[i].width = ncw / 100;
- }
- cs[index].width = pct / 100;
- cs[index+1].width += (mod / 100);
delete this.dragHd;
- vw.setHdWidths();
- vw.refresh();
+ view.setHdWidths();
+ view.refresh();
+
setTimeout(function(){
- vw.disableHeaders = false;
+ view.disableHeaders = disabled;
}, 100);
}
});
@@ -43331,7 +48091,7 @@ new Ext.TabPanel({
*
- cls : StringThe CSS class name
*
- iconCls : StringA CSS class to provide appearance for an icon.
*
trueto make the toolbar provide a button + * Defaults to false. Configure true to make the toolbar provide a button * which activates a dropdown Menu to show items which overflow the Toolbar's width. */ /** @@ -45397,6 +50182,9 @@ Ext.extend(T, Ext.Container, { // private onRemove : function(c){ Ext.Toolbar.superclass.onRemove.call(this); + if (c == this.activeMenuBtn) { + delete this.activeMenuBtn; + } this.trackMenu(c, true); }, @@ -46246,8 +51034,13 @@ Ext.History = (function () { var currentToken; function getHash() { - var href = top.location.href, i = href.indexOf("#"); - return i >= 0 ? href.substr(i + 1) : null; + var href = location.href, i = href.indexOf("#"), + hash = i >= 0 ? href.substr(i + 1) : null; + + if (Ext.isGecko) { + hash = decodeURIComponent(hash); + } + return hash; } function doSave() { @@ -46296,7 +51089,7 @@ Ext.History = (function () { if (newtoken !== token) { token = newtoken; handleStateChange(token); - top.location.hash = token; + location.hash = token; hash = token; doSave(); } else if (newHash !== hash) { @@ -46412,7 +51205,7 @@ tabPanel.on('tabchange', function(tabPanel, tab){ if (Ext.isIE) { return updateIFrame(token); } else { - top.location.hash = token; + location.hash = token; return true; } }, @@ -46724,7 +51517,7 @@ myGrid.on('render', function(grid) { // private afterRender : function(){ Ext.ToolTip.superclass.afterRender.call(this); - this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1); + this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1).setVisibilityMode(Ext.Element.DISPLAY); }, /** @@ -46991,8 +51784,8 @@ myGrid.on('render', function(grid) { this.showAt(this.getTargetXY()); if(this.anchor){ - this.syncAnchor(); this.anchorEl.show(); + this.syncAnchor(); this.constrainPosition = this.origConstrainPosition; }else{ this.anchorEl.hide(); @@ -47010,6 +51803,8 @@ myGrid.on('render', function(grid) { if(this.anchor && !this.anchorEl.isVisible()){ this.syncAnchor(); this.anchorEl.show(); + }else{ + this.anchorEl.hide(); } }, @@ -47079,7 +51874,14 @@ myGrid.on('render', function(grid) { onDocMouseDown : function(e){ if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){ this.disable(); - this.enable.defer(100, this); + this.doEnable.defer(100, this); + } + }, + + // private + doEnable : function(){ + if(!this.isDestroyed){ + this.enable(); } }, @@ -47091,7 +51893,7 @@ myGrid.on('render', function(grid) { // private adjustPosition : function(x, y){ - if(this.contstrainPosition){ + if(this.constrainPosition){ var ay = this.targetXY[1], h = this.getSize().height; if(y <= ay && (y+h) >= ay){ y = ay-h-5; @@ -47344,7 +52146,7 @@ Ext.reg('quicktip', Ext.QuickTip);/** * configuration properties of Ext.QuickTip. These settings will apply to all * tooltips shown by the singleton. *Below is the summary of the configuration properties which can be used. - * For detailed descriptions see {@link #getQuickTip}
+ * For detailed descriptions see the config options for the {@link Ext.QuickTip QuickTip} class *QuickTips singleton configs (all are optional)
*'; } - - this.endGroup = '- dismissDelay *
- hideDelay @@ -47369,7 +52171,7 @@ Ext.QuickTips.init(); Ext.apply(Ext.QuickTips.getQuickTip(), { maxWidth: 200, minWidth: 100, - showDelay: 50, + showDelay: 50, // Show 50ms after entering target trackMouse: true }); @@ -47379,7 +52181,7 @@ Ext.QuickTips.register({ title: 'My Tooltip', text: 'This tooltip was added in code', width: 100, - dismissDelay: 20 + dismissDelay: 10000 // Hide after 10 seconds hover }); *
To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with @@ -47400,7 +52202,9 @@ Ext.QuickTips.register({ * @singleton */ Ext.QuickTips = function(){ - var tip, locks = []; + var tip, + disabled = false; + return { /** * Initialize the global QuickTips instance and prepare any quick tips. @@ -47414,23 +52218,40 @@ Ext.QuickTips = function(){ }); return; } - tip = new Ext.QuickTip({elements:'header,body'}); + tip = new Ext.QuickTip({ + elements:'header,body', + disabled: disabled + }); if(autoRender !== false){ tip.render(Ext.getBody()); } } }, + // Protected method called by the dd classes + ddDisable : function(){ + // don't disable it if we don't need to + if(tip && !disabled){ + tip.disable(); + } + }, + + // Protected method called by the dd classes + ddEnable : function(){ + // only enable it if it hasn't been disabled + if(tip && !disabled){ + tip.enable(); + } + }, + /** * Enable quick tips globally. */ enable : function(){ if(tip){ - locks.pop(); - if(locks.length < 1){ - tip.enable(); - } + tip.enable(); } + disabled = false; }, /** @@ -47440,7 +52261,7 @@ Ext.QuickTips = function(){ if(tip){ tip.disable(); } - locks.push(1); + disabled = true; }, /** @@ -47452,7 +52273,8 @@ Ext.QuickTips = function(){ }, /** - * Gets the global QuickTips instance. + * Gets the single {@link Ext.QuickTip QuickTip} instance used to show tips from all registered elements. + * @return {Ext.QuickTip} */ getQuickTip : function(){ return tip; @@ -47479,11 +52301,78 @@ Ext.QuickTips = function(){ * Alias of {@link #register}. * @param {Object} config The config object */ - tips :function(){ + tips : function(){ tip.register.apply(tip, arguments); } - } + }; }();/** + * @class Ext.slider.Tip + * @extends Ext.Tip + * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage: +
+new Ext.Slider({ + width: 214, + minValue: 0, + maxValue: 100, + plugins: new Ext.slider.Tip() +}); ++ * Optionally provide your own tip text by overriding getText: ++ new Ext.Slider({ + width: 214, + minValue: 0, + maxValue: 100, + plugins: new Ext.slider.Tip({ + getText: function(thumb){ + return String.format('{0}% complete', thumb.value); + } + }) + }); ++ */ +Ext.slider.Tip = Ext.extend(Ext.Tip, { + minWidth: 10, + offsets : [0, -10], + + init: function(slider) { + slider.on({ + scope : this, + dragstart: this.onSlide, + drag : this.onSlide, + dragend : this.hide, + destroy : this.destroy + }); + }, + + /** + * @private + * Called whenever a dragstart or drag event is received on the associated Thumb. + * Aligns the Tip with the Thumb's new position. + * @param {Ext.slider.MultiSlider} slider The slider + * @param {Ext.EventObject} e The Event object + * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to + */ + onSlide : function(slider, e, thumb) { + this.show(); + this.body.update(this.getText(thumb)); + this.doAutoWidth(); + this.el.alignTo(thumb.el, 'b-t?', this.offsets); + }, + + /** + * Used to create the text that appears in the Tip's body. By default this just returns + * the value of the Slider Thumb that the Tip is attached to. Override to customize. + * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to + * @return {String} The text to display in the tip + */ + getText : function(thumb) { + return String(thumb.value); + } +}); + +//backwards compatibility - SliderTip used to be a ux before 3.2 +Ext.ux.SliderTip = Ext.slider.Tip;/** * @class Ext.tree.TreePanel * @extends Ext.Panel *The TreePanel provides tree-structured UI representation of tree-structured data.
@@ -47992,7 +52881,7 @@ new Ext.tree.TreePanel({ * @return {Node} */ setRootNode : function(node){ - Ext.destroy(this.root); + this.destroyRoot(); if(!node.render){ // attributes passed node = this.loader.createNode(node); } @@ -48117,6 +53006,12 @@ new Ext.tree.TreePanel({ * (bSuccess, oLastNode) where bSuccess is if the expand was successful and oLastNode is the last node that was expanded. */ expandPath : function(path, attr, callback){ + if(Ext.isEmpty(path)){ + if(callback){ + callback(false, undefined); + } + return; + } attr = attr || 'id'; var keys = path.split(this.pathSeparator); var curNode = this.root; @@ -48155,6 +53050,12 @@ new Ext.tree.TreePanel({ * (bSuccess, oSelNode) where bSuccess is if the selection was successful and oSelNode is the selected node. */ selectPath : function(path, attr, callback){ + if(Ext.isEmpty(path)){ + if(callback){ + callback(false, undefined); + } + return; + } attr = attr || 'id'; var keys = path.split(this.pathSeparator), v = keys.pop(); @@ -48244,9 +53145,20 @@ new Ext.tree.TreePanel({ Ext.dd.ScrollManager.unregister(this.body); Ext.destroy(this.dropZone, this.dragZone); } - Ext.destroy(this.root, this.loader); + this.destroyRoot(); + Ext.destroy(this.loader); this.nodeHash = this.root = this.loader = null; Ext.tree.TreePanel.superclass.beforeDestroy.call(this); + }, + + /** + * Destroy the root node. Not included by itself because we need to pass the silent parameter. + * @private + */ + destroyRoot : function(){ + if(this.root && this.root.destroy){ + this.root.destroy(true); + } } /** @@ -48437,7 +53349,7 @@ Ext.tree.TreePanel.nodeTypes = {}; Ext.reg('treepanel', Ext.tree.TreePanel);Ext.tree.TreeEventModel = function(tree){ this.tree = tree; this.tree.on('render', this.initEvents, this); -} +}; Ext.tree.TreeEventModel.prototype = { initEvents : function(){ @@ -48534,9 +53446,9 @@ Ext.tree.TreeEventModel.prototype = { this.onIconClick(e, this.getNode(e)); }else if(this.getNodeTarget(e)){ this.onNodeClick(e, this.getNode(e)); - }else{ - this.onContainerEvent(e, 'click'); } + }else{ + this.checkContainerEvent(e, 'click'); } }, @@ -48544,9 +53456,9 @@ Ext.tree.TreeEventModel.prototype = { if(this.beforeEvent(e)){ if(this.getNodeTarget(e)){ this.onNodeDblClick(e, this.getNode(e)); - }else{ - this.onContainerEvent(e, 'dblclick'); } + }else{ + this.checkContainerEvent(e, 'dblclick'); } }, @@ -48554,12 +53466,20 @@ Ext.tree.TreeEventModel.prototype = { if(this.beforeEvent(e)){ if(this.getNodeTarget(e)){ this.onNodeContextMenu(e, this.getNode(e)); - }else{ - this.onContainerEvent(e, 'contextmenu'); } + }else{ + this.checkContainerEvent(e, 'contextmenu'); } }, + checkContainerEvent: function(e, type){ + if(this.disabled){ + e.stopEvent(); + return false; + } + this.onContainerEvent(e, type); + }, + onContainerEvent: function(e, type){ this.tree.fireEvent('container' + type, this.tree, e); }, @@ -48622,33 +53542,34 @@ Ext.tree.TreeEventModel.prototype = { * @extends Ext.util.Observable * The default single selection for a TreePanel. */ -Ext.tree.DefaultSelectionModel = function(config){ - this.selNode = null; +Ext.tree.DefaultSelectionModel = Ext.extend(Ext.util.Observable, { + + constructor : function(config){ + this.selNode = null; - this.addEvents( - /** - * @event selectionchange - * Fires when the selected node changes - * @param {DefaultSelectionModel} this - * @param {TreeNode} node the new selection - */ - 'selectionchange', + this.addEvents( + /** + * @event selectionchange + * Fires when the selected node changes + * @param {DefaultSelectionModel} this + * @param {TreeNode} node the new selection + */ + 'selectionchange', - /** - * @event beforeselect - * Fires before the selected node changes, return false to cancel the change - * @param {DefaultSelectionModel} this - * @param {TreeNode} node the new selection - * @param {TreeNode} node the old selection - */ - 'beforeselect' - ); + /** + * @event beforeselect + * Fires before the selected node changes, return false to cancel the change + * @param {DefaultSelectionModel} this + * @param {TreeNode} node the new selection + * @param {TreeNode} node the old selection + */ + 'beforeselect' + ); - Ext.apply(this, config); - Ext.tree.DefaultSelectionModel.superclass.constructor.call(this); -}; + Ext.apply(this, config); + Ext.tree.DefaultSelectionModel.superclass.constructor.call(this); + }, -Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, { init : function(tree){ this.tree = tree; tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this); @@ -48823,23 +53744,24 @@ Ext.extend(Ext.tree.DefaultSelectionModel, Ext.util.Observable, { * @extends Ext.util.Observable * Multi selection for a TreePanel. */ -Ext.tree.MultiSelectionModel = function(config){ - this.selNodes = []; - this.selMap = {}; - this.addEvents( - /** - * @event selectionchange - * Fires when the selected nodes change - * @param {MultiSelectionModel} this - * @param {Array} nodes Array of the selected nodes - */ - 'selectionchange' - ); - Ext.apply(this, config); - Ext.tree.MultiSelectionModel.superclass.constructor.call(this); -}; +Ext.tree.MultiSelectionModel = Ext.extend(Ext.util.Observable, { + + constructor : function(config){ + this.selNodes = []; + this.selMap = {}; + this.addEvents( + /** + * @event selectionchange + * Fires when the selected nodes change + * @param {MultiSelectionModel} this + * @param {Array} nodes Array of the selected nodes + */ + 'selectionchange' + ); + Ext.apply(this, config); + Ext.tree.MultiSelectionModel.superclass.constructor.call(this); + }, -Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, { init : function(tree){ this.tree = tree; tree.mon(tree.getTreeEl(), 'keydown', this.onKeyDown, this); @@ -48925,7 +53847,7 @@ Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, { * @return {Array} */ getSelectedNodes : function(){ - return this.selNodes; + return this.selNodes.concat([]); }, onKeyDown : Ext.tree.DefaultSelectionModel.prototype.onKeyDown, @@ -48941,94 +53863,94 @@ Ext.extend(Ext.tree.MultiSelectionModel, Ext.util.Observable, { * @constructor * @param {Node} root (optional) The root node */ -Ext.data.Tree = function(root){ - this.nodeHash = {}; - /** - * The root node for this tree - * @type Node - */ - this.root = null; - if(root){ - this.setRootNode(root); - } - this.addEvents( - /** - * @event append - * Fires when a new child node is appended to a node in this tree. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The newly appended node - * @param {Number} index The index of the newly appended node - */ - "append", - /** - * @event remove - * Fires when a child node is removed from a node in this tree. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The child node removed - */ - "remove", - /** - * @event move - * Fires when a node is moved to a new location in the tree - * @param {Tree} tree The owner tree - * @param {Node} node The node moved - * @param {Node} oldParent The old parent of this node - * @param {Node} newParent The new parent of this node - * @param {Number} index The index it was moved to - */ - "move", - /** - * @event insert - * Fires when a new child node is inserted in a node in this tree. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The child node inserted - * @param {Node} refNode The child node the node was inserted before - */ - "insert", - /** - * @event beforeappend - * Fires before a new child is appended to a node in this tree, return false to cancel the append. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The child node to be appended - */ - "beforeappend", - /** - * @event beforeremove - * Fires before a child is removed from a node in this tree, return false to cancel the remove. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The child node to be removed - */ - "beforeremove", - /** - * @event beforemove - * Fires before a node is moved to a new location in the tree. Return false to cancel the move. - * @param {Tree} tree The owner tree - * @param {Node} node The node being moved - * @param {Node} oldParent The parent of the node - * @param {Node} newParent The new parent the node is moving to - * @param {Number} index The index it is being moved to - */ - "beforemove", - /** - * @event beforeinsert - * Fires before a new child is inserted in a node in this tree, return false to cancel the insert. - * @param {Tree} tree The owner tree - * @param {Node} parent The parent node - * @param {Node} node The child node to be inserted - * @param {Node} refNode The child node the node is being inserted before - */ - "beforeinsert" - ); +Ext.data.Tree = Ext.extend(Ext.util.Observable, { - Ext.data.Tree.superclass.constructor.call(this); -}; + constructor: function(root){ + this.nodeHash = {}; + /** + * The root node for this tree + * @type Node + */ + this.root = null; + if(root){ + this.setRootNode(root); + } + this.addEvents( + /** + * @event append + * Fires when a new child node is appended to a node in this tree. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The newly appended node + * @param {Number} index The index of the newly appended node + */ + "append", + /** + * @event remove + * Fires when a child node is removed from a node in this tree. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The child node removed + */ + "remove", + /** + * @event move + * Fires when a node is moved to a new location in the tree + * @param {Tree} tree The owner tree + * @param {Node} node The node moved + * @param {Node} oldParent The old parent of this node + * @param {Node} newParent The new parent of this node + * @param {Number} index The index it was moved to + */ + "move", + /** + * @event insert + * Fires when a new child node is inserted in a node in this tree. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The child node inserted + * @param {Node} refNode The child node the node was inserted before + */ + "insert", + /** + * @event beforeappend + * Fires before a new child is appended to a node in this tree, return false to cancel the append. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The child node to be appended + */ + "beforeappend", + /** + * @event beforeremove + * Fires before a child is removed from a node in this tree, return false to cancel the remove. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The child node to be removed + */ + "beforeremove", + /** + * @event beforemove + * Fires before a node is moved to a new location in the tree. Return false to cancel the move. + * @param {Tree} tree The owner tree + * @param {Node} node The node being moved + * @param {Node} oldParent The parent of the node + * @param {Node} newParent The new parent the node is moving to + * @param {Number} index The index it is being moved to + */ + "beforemove", + /** + * @event beforeinsert + * Fires before a new child is inserted in a node in this tree, return false to cancel the insert. + * @param {Tree} tree The owner tree + * @param {Node} parent The parent node + * @param {Node} node The child node to be inserted + * @param {Node} refNode The child node the node is being inserted before + */ + "beforeinsert" + ); + Ext.data.Tree.superclass.constructor.call(this); + }, -Ext.extend(Ext.data.Tree, Ext.util.Observable, { /** * @cfg {String} pathSeparator * The token used to separate paths in node ids (defaults to '/'). @@ -49093,134 +54015,125 @@ Ext.extend(Ext.data.Tree, Ext.util.Observable, { * @constructor * @param {Object} attributes The attributes/config for the node */ -Ext.data.Node = function(attributes){ - /** - * The attributes supplied for the node. You can use this property to access any custom attributes you supplied. - * @type {Object} - */ - this.attributes = attributes || {}; - this.leaf = this.attributes.leaf; - /** - * The node id. @type String - */ - this.id = this.attributes.id; - if(!this.id){ - this.id = Ext.id(null, "xnode-"); - this.attributes.id = this.id; - } - /** - * All child nodes of this node. @type Array - */ - this.childNodes = []; - if(!this.childNodes.indexOf){ // indexOf is a must - this.childNodes.indexOf = function(o){ - for(var i = 0, len = this.length; i < len; i++){ - if(this[i] == o){ - return i; - } - } - return -1; - }; - } - /** - * The parent node for this node. @type Node - */ - this.parentNode = null; - /** - * The first direct child node of this node, or null if this node has no child nodes. @type Node - */ - this.firstChild = null; - /** - * The last direct child node of this node, or null if this node has no child nodes. @type Node - */ - this.lastChild = null; - /** - * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node - */ - this.previousSibling = null; - /** - * The node immediately following this node in the tree, or null if there is no sibling node. @type Node - */ - this.nextSibling = null; +Ext.data.Node = Ext.extend(Ext.util.Observable, { - this.addEvents({ - /** - * @event append - * Fires when a new child node is appended - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The newly appended node - * @param {Number} index The index of the newly appended node - */ - "append" : true, - /** - * @event remove - * Fires when a child node is removed - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The removed node - */ - "remove" : true, - /** - * @event move - * Fires when this node is moved to a new location in the tree - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} oldParent The old parent of this node - * @param {Node} newParent The new parent of this node - * @param {Number} index The index it was moved to - */ - "move" : true, - /** - * @event insert - * Fires when a new child node is inserted. - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The child node inserted - * @param {Node} refNode The child node the node was inserted before - */ - "insert" : true, - /** - * @event beforeappend - * Fires before a new child is appended, return false to cancel the append. - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The child node to be appended - */ - "beforeappend" : true, - /** - * @event beforeremove - * Fires before a child is removed, return false to cancel the remove. - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The child node to be removed - */ - "beforeremove" : true, - /** - * @event beforemove - * Fires before this node is moved to a new location in the tree. Return false to cancel the move. - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} oldParent The parent of this node - * @param {Node} newParent The new parent this node is moving to - * @param {Number} index The index it is being moved to - */ - "beforemove" : true, - /** - * @event beforeinsert - * Fires before a new child is inserted, return false to cancel the insert. - * @param {Tree} tree The owner tree - * @param {Node} this This node - * @param {Node} node The child node to be inserted - * @param {Node} refNode The child node the node is being inserted before - */ - "beforeinsert" : true - }); - this.listeners = this.attributes.listeners; - Ext.data.Node.superclass.constructor.call(this); -}; + constructor: function(attributes){ + /** + * The attributes supplied for the node. You can use this property to access any custom attributes you supplied. + * @type {Object} + */ + this.attributes = attributes || {}; + this.leaf = this.attributes.leaf; + /** + * The node id. @type String + */ + this.id = this.attributes.id; + if(!this.id){ + this.id = Ext.id(null, "xnode-"); + this.attributes.id = this.id; + } + /** + * All child nodes of this node. @type Array + */ + this.childNodes = []; + /** + * The parent node for this node. @type Node + */ + this.parentNode = null; + /** + * The first direct child node of this node, or null if this node has no child nodes. @type Node + */ + this.firstChild = null; + /** + * The last direct child node of this node, or null if this node has no child nodes. @type Node + */ + this.lastChild = null; + /** + * The node immediately preceding this node in the tree, or null if there is no sibling node. @type Node + */ + this.previousSibling = null; + /** + * The node immediately following this node in the tree, or null if there is no sibling node. @type Node + */ + this.nextSibling = null; + + this.addEvents({ + /** + * @event append + * Fires when a new child node is appended + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The newly appended node + * @param {Number} index The index of the newly appended node + */ + "append" : true, + /** + * @event remove + * Fires when a child node is removed + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The removed node + */ + "remove" : true, + /** + * @event move + * Fires when this node is moved to a new location in the tree + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} oldParent The old parent of this node + * @param {Node} newParent The new parent of this node + * @param {Number} index The index it was moved to + */ + "move" : true, + /** + * @event insert + * Fires when a new child node is inserted. + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The child node inserted + * @param {Node} refNode The child node the node was inserted before + */ + "insert" : true, + /** + * @event beforeappend + * Fires before a new child is appended, return false to cancel the append. + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The child node to be appended + */ + "beforeappend" : true, + /** + * @event beforeremove + * Fires before a child is removed, return false to cancel the remove. + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The child node to be removed + */ + "beforeremove" : true, + /** + * @event beforemove + * Fires before this node is moved to a new location in the tree. Return false to cancel the move. + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} oldParent The parent of this node + * @param {Node} newParent The new parent this node is moving to + * @param {Number} index The index it is being moved to + */ + "beforemove" : true, + /** + * @event beforeinsert + * Fires before a new child is inserted, return false to cancel the insert. + * @param {Tree} tree The owner tree + * @param {Node} this This node + * @param {Node} node The child node to be inserted + * @param {Node} refNode The child node the node is being inserted before + */ + "beforeinsert" : true + }); + this.listeners = this.attributes.listeners; + Ext.data.Node.superclass.constructor.call(this); + }, -Ext.extend(Ext.data.Node, Ext.util.Observable, { // private fireEvent : function(evtName){ // first do standard event for this node @@ -49279,7 +54192,7 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { hasChildNodes : function(){ return !this.isLeaf() && this.childNodes.length > 0; }, - + /** * Returns true if this node has one or more child nodes, or if the expandable * node attribute is explicitly specified as true (see {@link #attributes}), otherwise returns false. @@ -49304,7 +54217,7 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { // if passed an array or multiple args do them one by one if(multi){ for(var i = 0, len = multi.length; i < len; i++) { - this.appendChild(multi[i]); + this.appendChild(multi[i]); } }else{ if(this.fireEvent("beforeappend", this.ownerTree, this, node) === false){ @@ -49377,34 +54290,45 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { this.setLastChild(node.previousSibling); } - node.clear(); this.fireEvent("remove", this.ownerTree, this, node); if(destroy){ - node.destroy(); + node.destroy(true); + }else{ + node.clear(); } return node; }, - + // private clear : function(destroy){ // clear any references from the node this.setOwnerTree(null, destroy); - this.parentNode = this.previousSibling = this.nextSibling = null + this.parentNode = this.previousSibling = this.nextSibling = null; if(destroy){ - this.firstChild = this.lastChild = null; + this.firstChild = this.lastChild = null; } }, - + /** * Destroys the node. */ - destroy : function(){ - this.purgeListeners(); - this.clear(true); - Ext.each(this.childNodes, function(n){ - n.destroy(); - }); - this.childNodes = null; + destroy : function(/* private */ silent){ + /* + * Silent is to be used in a number of cases + * 1) When setRootNode is called. + * 2) When destroy on the tree is called + * 3) For destroying child nodes on a node + */ + if(silent === true){ + this.purgeListeners(); + this.clear(true); + Ext.each(this.childNodes, function(n){ + n.destroy(true); + }); + this.childNodes = null; + }else{ + this.remove(true); + } }, /** @@ -49469,10 +54393,12 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { * @return {Node} this */ remove : function(destroy){ - this.parentNode.removeChild(this, destroy); + if (this.parentNode) { + this.parentNode.removeChild(this, destroy); + } return this; }, - + /** * Removes all child nodes from this node. * @param {Boolean} destroy true to destroy the node upon removal. Defaults to false. @@ -49570,7 +54496,7 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { } } }, - + /** * Changes the id of this node. * @param {String} id The new id for the node. @@ -49588,7 +54514,7 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { this.onIdChange(id); } }, - + // private onIdChange: Ext.emptyFn, @@ -49639,7 +54565,7 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { if(fn.apply(scope || this, args || [this]) !== false){ var cs = this.childNodes; for(var i = 0, len = cs.length; i < len; i++) { - cs[i].cascade(fn, scope, args); + cs[i].cascade(fn, scope, args); } } }, @@ -49655,9 +54581,9 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { eachChild : function(fn, scope, args){ var cs = this.childNodes; for(var i = 0, len = cs.length; i < len; i++) { - if(fn.apply(scope || this, args || [cs[i]]) === false){ - break; - } + if(fn.apply(scope || cs[i], args || [cs[i]]) === false){ + break; + } } }, @@ -49665,30 +54591,39 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { * Finds the first child that has the attribute with the specified value. * @param {String} attribute The attribute name * @param {Mixed} value The value to search for + * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children * @return {Node} The found child or null if none was found */ - findChild : function(attribute, value){ - var cs = this.childNodes; - for(var i = 0, len = cs.length; i < len; i++) { - if(cs[i].attributes[attribute] == value){ - return cs[i]; - } - } - return null; + findChild : function(attribute, value, deep){ + return this.findChildBy(function(){ + return this.attributes[attribute] == value; + }, null, deep); }, /** * Finds the first child by a custom function. The child matches if the function passed returnstrue. * @param {Function} fn A function which must returntrueif the passed Node is the required Node. * @param {Object} scope (optional) The scope (thisreference) in which the function is executed. Defaults to the Node being tested. + * @param {Boolean} deep (Optional) True to search through nodes deeper than the immediate children * @return {Node} The found child or null if none was found */ - findChildBy : function(fn, scope){ - var cs = this.childNodes; - for(var i = 0, len = cs.length; i < len; i++) { - if(fn.call(scope||cs[i], cs[i]) === true){ - return cs[i]; - } + findChildBy : function(fn, scope, deep){ + var cs = this.childNodes, + len = cs.length, + i = 0, + n, + res; + for(; i < len; i++){ + n = cs[i]; + if(fn.call(scope || n, n) === true){ + return n; + }else if (deep){ + res = n.findChildBy(fn, scope, deep); + if(res != null){ + return res; + } + } + } return null; }, @@ -49775,138 +54710,140 @@ Ext.extend(Ext.data.Node, Ext.util.Observable, { * @constructor * @param {Object/String} attributes The attributes/config for the node or just a string with the text for the node */ -Ext.tree.TreeNode = function(attributes){ - attributes = attributes || {}; - if(Ext.isString(attributes)){ - attributes = {text: attributes}; - } - this.childrenRendered = false; - this.rendered = false; - Ext.tree.TreeNode.superclass.constructor.call(this, attributes); - this.expanded = attributes.expanded === true; - this.isTarget = attributes.isTarget !== false; - this.draggable = attributes.draggable !== false && attributes.allowDrag !== false; - this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false; +Ext.tree.TreeNode = Ext.extend(Ext.data.Node, { - /** - * Read-only. The text for this node. To change it use{@link #setText}. - * @type String - */ - this.text = attributes.text; - /** - * True if this node is disabled. - * @type Boolean - */ - this.disabled = attributes.disabled === true; - /** - * True if this node is hidden. - * @type Boolean - */ - this.hidden = attributes.hidden === true; + constructor : function(attributes){ + attributes = attributes || {}; + if(Ext.isString(attributes)){ + attributes = {text: attributes}; + } + this.childrenRendered = false; + this.rendered = false; + Ext.tree.TreeNode.superclass.constructor.call(this, attributes); + this.expanded = attributes.expanded === true; + this.isTarget = attributes.isTarget !== false; + this.draggable = attributes.draggable !== false && attributes.allowDrag !== false; + this.allowChildren = attributes.allowChildren !== false && attributes.allowDrop !== false; - this.addEvents( /** - * @event textchange - * Fires when the text for this node is changed - * @param {Node} this This node - * @param {String} text The new text - * @param {String} oldText The old text - */ - 'textchange', + * Read-only. The text for this node. To change it use{@link #setText}. + * @type String + */ + this.text = attributes.text; /** - * @event beforeexpand - * Fires before this node is expanded, return false to cancel. - * @param {Node} this This node - * @param {Boolean} deep - * @param {Boolean} anim - */ - 'beforeexpand', + * True if this node is disabled. + * @type Boolean + */ + this.disabled = attributes.disabled === true; /** - * @event beforecollapse - * Fires before this node is collapsed, return false to cancel. - * @param {Node} this This node - * @param {Boolean} deep - * @param {Boolean} anim - */ - 'beforecollapse', - /** - * @event expand - * Fires when this node is expanded - * @param {Node} this This node - */ - 'expand', - /** - * @event disabledchange - * Fires when the disabled status of this node changes - * @param {Node} this This node - * @param {Boolean} disabled - */ - 'disabledchange', - /** - * @event collapse - * Fires when this node is collapsed - * @param {Node} this This node - */ - 'collapse', - /** - * @event beforeclick - * Fires before click processing. Return false to cancel the default action. - * @param {Node} this This node - * @param {Ext.EventObject} e The event object - */ - 'beforeclick', - /** - * @event click - * Fires when this node is clicked - * @param {Node} this This node - * @param {Ext.EventObject} e The event object - */ - 'click', - /** - * @event checkchange - * Fires when a node with a checkbox's checked property changes - * @param {Node} this This node - * @param {Boolean} checked - */ - 'checkchange', - /** - * @event beforedblclick - * Fires before double click processing. Return false to cancel the default action. - * @param {Node} this This node - * @param {Ext.EventObject} e The event object - */ - 'beforedblclick', - /** - * @event dblclick - * Fires when this node is double clicked - * @param {Node} this This node - * @param {Ext.EventObject} e The event object - */ - 'dblclick', - /** - * @event contextmenu - * Fires when this node is right clicked - * @param {Node} this This node - * @param {Ext.EventObject} e The event object - */ - 'contextmenu', - /** - * @event beforechildrenrendered - * Fires right before the child nodes for this node are rendered - * @param {Node} this This node - */ - 'beforechildrenrendered' - ); + * True if this node is hidden. + * @type Boolean + */ + this.hidden = attributes.hidden === true; - var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI; + this.addEvents( + /** + * @event textchange + * Fires when the text for this node is changed + * @param {Node} this This node + * @param {String} text The new text + * @param {String} oldText The old text + */ + 'textchange', + /** + * @event beforeexpand + * Fires before this node is expanded, return false to cancel. + * @param {Node} this This node + * @param {Boolean} deep + * @param {Boolean} anim + */ + 'beforeexpand', + /** + * @event beforecollapse + * Fires before this node is collapsed, return false to cancel. + * @param {Node} this This node + * @param {Boolean} deep + * @param {Boolean} anim + */ + 'beforecollapse', + /** + * @event expand + * Fires when this node is expanded + * @param {Node} this This node + */ + 'expand', + /** + * @event disabledchange + * Fires when the disabled status of this node changes + * @param {Node} this This node + * @param {Boolean} disabled + */ + 'disabledchange', + /** + * @event collapse + * Fires when this node is collapsed + * @param {Node} this This node + */ + 'collapse', + /** + * @event beforeclick + * Fires before click processing. Return false to cancel the default action. + * @param {Node} this This node + * @param {Ext.EventObject} e The event object + */ + 'beforeclick', + /** + * @event click + * Fires when this node is clicked + * @param {Node} this This node + * @param {Ext.EventObject} e The event object + */ + 'click', + /** + * @event checkchange + * Fires when a node with a checkbox's checked property changes + * @param {Node} this This node + * @param {Boolean} checked + */ + 'checkchange', + /** + * @event beforedblclick + * Fires before double click processing. Return false to cancel the default action. + * @param {Node} this This node + * @param {Ext.EventObject} e The event object + */ + 'beforedblclick', + /** + * @event dblclick + * Fires when this node is double clicked + * @param {Node} this This node + * @param {Ext.EventObject} e The event object + */ + 'dblclick', + /** + * @event contextmenu + * Fires when this node is right clicked + * @param {Node} this This node + * @param {Ext.EventObject} e The event object + */ + 'contextmenu', + /** + * @event beforechildrenrendered + * Fires right before the child nodes for this node are rendered + * @param {Node} this This node + */ + 'beforechildrenrendered' + ); + + var uiClass = this.attributes.uiProvider || this.defaultUI || Ext.tree.TreeNodeUI; + + /** + * Read-only. The UI for this node + * @type TreeNodeUI + */ + this.ui = new uiClass(this); + }, - /** - * Read-only. The UI for this node - * @type TreeNodeUI - */ - this.ui = new uiClass(this); -}; -Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { preventHScroll : true, /** * Returns true if this node is expanded @@ -49958,15 +54895,12 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { // these methods are overridden to provide lazy rendering support // private override appendChild : function(n){ - var node, exists; if(!n.render && !Ext.isArray(n)){ n = this.getLoader().createNode(n); - }else{ - exists = !n.parentNode; } - node = Ext.tree.TreeNode.superclass.appendChild.call(this, n); - if(node){ - this.afterAdd(node, exists); + var node = Ext.tree.TreeNode.superclass.appendChild.call(this, n); + if(node && this.childrenRendered){ + node.render(); } this.ui.updateExpandIcon(); return node; @@ -49976,47 +54910,37 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { removeChild : function(node, destroy){ this.ownerTree.getSelectionModel().unselect(node); Ext.tree.TreeNode.superclass.removeChild.apply(this, arguments); - // if it's been rendered remove dom node - if(node.ui.rendered){ - node.ui.remove(); - } - if(this.childNodes.length < 1){ - this.collapse(false, false); - }else{ - this.ui.updateExpandIcon(); - } - if(!this.firstChild && !this.isHiddenRoot()) { - this.childrenRendered = false; + // only update the ui if we're not destroying + if(!destroy){ + var rendered = node.ui.rendered; + // if it's been rendered remove dom node + if(rendered){ + node.ui.remove(); + } + if(rendered && this.childNodes.length < 1){ + this.collapse(false, false); + }else{ + this.ui.updateExpandIcon(); + } + if(!this.firstChild && !this.isHiddenRoot()){ + this.childrenRendered = false; + } } return node; }, // private override insertBefore : function(node, refNode){ - var newNode, exists; if(!node.render){ node = this.getLoader().createNode(node); - } else { - exists = Ext.isObject(node.parentNode); } - newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode); - if(newNode && refNode){ - this.afterAdd(newNode, exists); + var newNode = Ext.tree.TreeNode.superclass.insertBefore.call(this, node, refNode); + if(newNode && refNode && this.childrenRendered){ + node.render(); } this.ui.updateExpandIcon(); return newNode; }, - - // private - afterAdd : function(node, exists){ - if(this.childrenRendered){ - // bulk render if the node already exists - node.render(exists); - }else if(exists){ - // make sure we update the indent - node.renderIndent(true, true); - } - }, /** * Sets the text for this node @@ -50031,6 +54955,67 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { this.fireEvent('textchange', this, text, oldText); }, + /** + * Sets the icon class for this node. + * @param {String} cls + */ + setIconCls : function(cls){ + var old = this.attributes.iconCls; + this.attributes.iconCls = cls; + if(this.rendered){ + this.ui.onIconClsChange(this, cls, old); + } + }, + + /** + * Sets the tooltip for this node. + * @param {String} tip The text for the tip + * @param {String} title (Optional) The title for the tip + */ + setTooltip : function(tip, title){ + this.attributes.qtip = tip; + this.attributes.qtipTitle = title; + if(this.rendered){ + this.ui.onTipChange(this, tip, title); + } + }, + + /** + * Sets the icon for this node. + * @param {String} icon + */ + setIcon : function(icon){ + this.attributes.icon = icon; + if(this.rendered){ + this.ui.onIconChange(this, icon); + } + }, + + /** + * Sets the href for the node. + * @param {String} href The href to set + * @param {String} (Optional) target The target of the href + */ + setHref : function(href, target){ + this.attributes.href = href; + this.attributes.hrefTarget = target; + if(this.rendered){ + this.ui.onHrefChange(this, href, target); + } + }, + + /** + * Sets the class on this node. + * @param {String} cls + */ + setCls : function(cls){ + var old = this.attributes.cls; + this.attributes.cls = cls; + if(this.rendered){ + this.ui.onClsChange(this, cls, old); + } + }, + /** * Triggers selection of this node */ @@ -50084,7 +55069,7 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { this.fireEvent('expand', this); this.runCallback(callback, scope || this, [this]); if(deep === true){ - this.expandChildNodes(true); + this.expandChildNodes(true, true); } }.createDelegate(this)); return; @@ -50196,10 +55181,12 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { * Expand all child nodes * @param {Boolean} deep (optional) true if the child nodes should also expand their child nodes */ - expandChildNodes : function(deep){ - var cs = this.childNodes; - for(var i = 0, len = cs.length; i < len; i++) { - cs[i].expand(deep); + expandChildNodes : function(deep, anim) { + var cs = this.childNodes, + i, + len = cs.length; + for (i = 0; i < len; i++) { + cs[i].expand(deep, anim); } }, @@ -50298,9 +55285,12 @@ Ext.extend(Ext.tree.TreeNode, Ext.data.Node, { } }, - destroy : function(){ - this.unselect(true); - Ext.tree.TreeNode.superclass.destroy.call(this); + //inherit docs + destroy : function(silent){ + if(silent === true){ + this.unselect(true); + } + Ext.tree.TreeNode.superclass.destroy.call(this, silent); Ext.destroy(this.ui, this.loader); this.ui = this.loader = null; }, @@ -50431,16 +55421,19 @@ Ext.tree.TreePanel.nodeTypes.async = Ext.tree.AsyncTreeNode;/** * This class provides access to the user interface components of an Ext TreeNode, through * {@link Ext.tree.TreeNode#getUI} */ -Ext.tree.TreeNodeUI = function(node){ - this.node = node; - this.rendered = false; - this.animating = false; - this.wasLeaf = true; - this.ecc = 'x-tree-ec-icon x-tree-elbow'; - this.emptyIcon = Ext.BLANK_IMAGE_URL; -}; +Ext.tree.TreeNodeUI = Ext.extend(Object, { + + constructor : function(node){ + Ext.apply(this, { + node: node, + rendered: false, + animating: false, + wasLeaf: true, + ecc: 'x-tree-ec-icon x-tree-elbow', + emptyIcon: Ext.BLANK_IMAGE_URL + }); + }, -Ext.tree.TreeNodeUI.prototype = { // private removeChild : function(node){ if(this.rendered){ @@ -50465,17 +55458,65 @@ Ext.tree.TreeNodeUI.prototype = { } }, + // private + onIconClsChange : function(node, cls, oldCls){ + if(this.rendered){ + Ext.fly(this.iconNode).replaceClass(oldCls, cls); + } + }, + + // private + onIconChange : function(node, icon){ + if(this.rendered){ + //'', + var empty = Ext.isEmpty(icon); + this.iconNode.src = empty ? this.emptyIcon : icon; + Ext.fly(this.iconNode)[empty ? 'removeClass' : 'addClass']('x-tree-node-inline-icon'); + } + }, + + // private + onTipChange : function(node, tip, title){ + if(this.rendered){ + var hasTitle = Ext.isDefined(title); + if(this.textNode.setAttributeNS){ + this.textNode.setAttributeNS("ext", "qtip", tip); + if(hasTitle){ + this.textNode.setAttributeNS("ext", "qtitle", title); + } + }else{ + this.textNode.setAttribute("ext:qtip", tip); + if(hasTitle){ + this.textNode.setAttribute("ext:qtitle", title); + } + } + } + }, + + // private + onHrefChange : function(node, href, target){ + if(this.rendered){ + this.anchor.href = this.getHref(href); + if(Ext.isDefined(target)){ + this.anchor.target = target; + } + } + }, + + // private + onClsChange : function(node, cls, oldCls){ + if(this.rendered){ + Ext.fly(this.elNode).replaceClass(oldCls, cls); + } + }, + // private onDisableChange : function(node, state){ this.disabled = state; if (this.checkbox) { this.checkbox.disabled = state; } - if(state){ - this.addClass("x-tree-node-disabled"); - }else{ - this.removeClass("x-tree-node-disabled"); - } + this[state ? 'addClass' : 'removeClass']('x-tree-node-disabled'); }, // private @@ -50704,7 +55745,7 @@ Ext.tree.TreeNodeUI.prototype = { /** * Sets the checked status of the tree node to the passed value, or, if no value was passed, * toggles the checked status. If the node was rendered with no checkbox, this has no effect. - * @param {Boolean} (optional) The new checked status. + * @param {Boolean} value (optional) The new checked status. */ toggleCheck : function(value){ var cb = this.checkbox; @@ -50818,17 +55859,7 @@ Ext.tree.TreeNodeUI.prototype = { this.renderElements(n, a, targetNode, bulkRender); if(a.qtip){ - if(this.textNode.setAttributeNS){ - this.textNode.setAttributeNS("ext", "qtip", a.qtip); - if(a.qtipTitle){ - this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle); - } - }else{ - this.textNode.setAttribute("ext:qtip", a.qtip); - if(a.qtipTitle){ - this.textNode.setAttribute("ext:qtitle", a.qtipTitle); - } - } + this.onTipChange(n, a.qtip, a.qtipTitle); }else if(a.qtipCfg){ a.qtipCfg.target = Ext.id(this.textNode); Ext.QuickTips.register(a.qtipCfg); @@ -50851,11 +55882,11 @@ Ext.tree.TreeNodeUI.prototype = { var cb = Ext.isBoolean(a.checked), nel, - href = a.href ? a.href : Ext.isGecko ? "" : "#", + href = this.getHref(a.href), buf = ['
- ", @@ -50885,6 +55916,14 @@ Ext.tree.TreeNodeUI.prototype = { this.textNode = cs[index].firstChild; }, + /** + * @private Gets a normalized href for the node. + * @param {String} href + */ + getHref : function(href){ + return Ext.isEmpty(href) ? (Ext.isGecko ? '' : '#') : href; + }, + /** * Returns the <a> element that provides focus for the node's UI. * @return {HtmlElement} The DOM anchor element. @@ -50975,9 +56014,9 @@ Ext.tree.TreeNodeUI.prototype = { while(p){ if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){ if(!p.isLast()) { - buf.unshift('
'); + buf.unshift('
thisreference) in which the callback is executed. + * @param {Object} scope The scope (thisreference) in which the callback is executed. * defaults to the loaded TreeNode. */ load : function(node, callback, scope){ @@ -51515,8 +56554,10 @@ new Ext.tree.TreeSorter(myTree, { * @param {TreePanel} tree * @param {Object} config */ -Ext.tree.TreeSorter = function(tree, config){ - /** +Ext.tree.TreeSorter = Ext.extend(Object, { + + constructor: function(tree, config){ + /** * @cfg {Boolean} folderSort True to sort leaf nodes under non-leaf nodes (defaults to false) */ /** @@ -51541,46 +56582,52 @@ Ext.tree.TreeSorter = function(tree, config){ */ Ext.apply(this, config); - tree.on("beforechildrenrendered", this.doSort, this); - tree.on("append", this.updateSort, this); - tree.on("insert", this.updateSort, this); - tree.on("textchange", this.updateSortParent, this); + tree.on({ + scope: this, + beforechildrenrendered: this.doSort, + append: this.updateSort, + insert: this.updateSort, + textchange: this.updateSortParent + }); - var dsc = this.dir && this.dir.toLowerCase() == "desc"; - var p = this.property || "text"; - var sortType = this.sortType; - var fs = this.folderSort; - var cs = this.caseSensitive === true; - var leafAttr = this.leafAttr || 'leaf'; + var desc = this.dir && this.dir.toLowerCase() == 'desc', + prop = this.property || 'text', + sortType = this.sortType, + folderSort = this.folderSort, + caseSensitive = this.caseSensitive === true, + leafAttr = this.leafAttr || 'leaf'; + if(Ext.isString(sortType)){ + sortType = Ext.data.SortTypes[sortType]; + } this.sortFn = function(n1, n2){ - if(fs){ - if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){ + var attr1 = n1.attributes, + attr2 = n2.attributes; + + if(folderSort){ + if(attr1[leafAttr] && !attr2[leafAttr]){ return 1; } - if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){ + if(!attr1[leafAttr] && attr2[leafAttr]){ return -1; } } - var v1 = sortType ? sortType(n1) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase()); - var v2 = sortType ? sortType(n2) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase()); - if(v1 < v2){ - return dsc ? +1 : -1; - }else if(v1 > v2){ - return dsc ? -1 : +1; - }else{ - return 0; - } - }; -}; + var prop1 = attr1[prop], + prop2 = attr2[prop], + v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase()), + v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase()); -Ext.tree.TreeSorter.prototype = { - doSort : function(node){ - node.sort(this.sortFn); + if(v1 < v2){ + return desc ? 1 : -1; + }else if(v1 > v2){ + return desc ? -1 : 1; + } + return 0; + }; }, - compareNodes : function(n1, n2){ - return (n1.text.toUpperCase() > n2.text.toUpperCase() ? 1 : -1); + doSort : function(node){ + node.sort(this.sortFn); }, updateSort : function(tree, node){ @@ -51595,7 +56642,8 @@ Ext.tree.TreeSorter.prototype = { this.doSort.defer(1, this, [p]); } } -};/** +}); +/** * @class Ext.tree.TreeDropZone * @extends Ext.dd.DropZone * @constructor @@ -52195,8 +57243,8 @@ var swfobject = function() { var w3cdom = typeof doc.getElementById != UNDEF && typeof doc.getElementsByTagName != UNDEF && typeof doc.createElement != UNDEF, u = nav.userAgent.toLowerCase(), p = nav.platform.toLowerCase(), - windows = p ? /win/.test(p) : /win/.test(u), - mac = p ? /mac/.test(p) : /mac/.test(u), + windows = p ? (/win/).test(p) : /win/.test(u), + mac = p ? (/mac/).test(p) : /mac/.test(u), webkit = /webkit/.test(u) ? parseFloat(u.replace(/^.*webkit\/(\d+(\.\d+)?).*$/, "$1")) : false, // returns either the webkit version or false if not webkit ie = !+"\v1", // feature detection based on Andrea Giammarchi's solution: http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html playerVersion = [0,0,0], @@ -52267,7 +57315,7 @@ var swfobject = function() { if (ua.wk) { (function(){ if (isDomLoaded) { return; } - if (!/loaded|complete/.test(doc.readyState)) { + if (!(/loaded|complete/).test(doc.readyState)) { setTimeout(arguments.callee, 0); return; } @@ -52480,8 +57528,13 @@ var swfobject = function() { storedAltContentId = replaceElemIdStr; } att.id = EXPRESS_INSTALL_ID; - if (typeof att.width == UNDEF || (!/%$/.test(att.width) && parseInt(att.width, 10) < 310)) { att.width = "310"; } - if (typeof att.height == UNDEF || (!/%$/.test(att.height) && parseInt(att.height, 10) < 137)) { att.height = "137"; } + if (typeof att.width == UNDEF || (!(/%$/).test(att.width) && parseInt(att.width, 10) < 310)) { + att.width = "310"; + } + + if (typeof att.height == UNDEF || (!(/%$/).test(att.height) && parseInt(att.height, 10) < 137)) { + att.height = "137"; + } doc.title = doc.title.slice(0, 47) + " - Flash Player Installation"; var pt = ua.ie && ua.win ? "ActiveX" : "PlugIn", fv = "MMredirectURL=" + win.location.toString().replace(/&/g,"%26") + "&MMplayerType=" + pt + "&MMdoctitle=" + doc.title; @@ -52771,6 +57824,7 @@ var swfobject = function() { swfobject[l] = null; } swfobject = null; + window.detachEvent('onunload', arguments.callee); }); } }(); @@ -52940,7 +57994,7 @@ var swfobject = function() { Ext.FlashComponent = Ext.extend(Ext.BoxComponent, { /** * @cfg {String} flashVersion - * Indicates the version the flash content was published for. Defaults to '9.0.45'. + * Indicates the version the flash content was published for. Defaults to '9.0.115'. */ flashVersion : '9.0.115', @@ -52955,13 +58009,13 @@ Ext.FlashComponent = Ext.extend(Ext.BoxComponent, { * The wmode of the flash object. This can be used to control layering. Defaults to 'opaque'. */ wmode: 'opaque', - + /** * @cfg {Object} flashVars * A set of key value pairs to be passed to the flash object as flash variables. Defaults to undefined. */ flashVars: undefined, - + /** * @cfg {Object} flashParams * A set of key value pairs to be passed to the flash object as parameters. Possible parameters can be found here: @@ -52991,7 +58045,7 @@ Ext.FlashComponent = Ext.extend(Ext.BoxComponent, { this.addEvents( /** * @event initialize - * + * * @param {Chart} this */ 'initialize' @@ -53007,8 +58061,8 @@ Ext.FlashComponent = Ext.extend(Ext.BoxComponent, { wmode: this.wmode }, this.flashParams), vars = Ext.apply({ allowedDomain: document.location.hostname, - elementID: this.getId(), - eventHandler: 'Ext.FlashEventProxy.onEvent' + YUISwfId: this.getId(), + YUIBridgeCallback: 'Ext.FlashEventProxy.onEvent' }, this.flashVars); new swfobject.embedSWF(this.url, this.id, this.swfWidth, this.swfHeight, this.flashVersion, @@ -53074,7 +58128,7 @@ Ext.FlashEventProxy = { arguments.callee.defer(10, this, [id, e]); } } -}/** +};/** * @class Ext.chart.Chart * @extends Ext.FlashComponent * The Ext.chart package provides the capability to visualize data with flash based charting. @@ -53083,10 +58137,10 @@ Ext.FlashEventProxy = { * @constructor * @xtype chart */ - + Ext.chart.Chart = Ext.extend(Ext.FlashComponent, { refreshBuffer: 100, - + /** * @cfg {String} backgroundColor * @hide @@ -53095,7 +58149,7 @@ Ext.FlashEventProxy = { /** * @cfg {Object} chartStyle * Sets styles for this chart. This contains default styling, so modifying this property will override - * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. + * the built in styles of the chart. Use {@link #extraStyle} to add customizations to the default styling. */ chartStyle: { padding: 10, @@ -53123,17 +58177,17 @@ Ext.FlashEventProxy = { } } }, - + /** * @cfg {String} url * The url to load the chart from. This defaults to Ext.chart.Chart.CHART_URL, which should * be modified to point to the local charts resource. */ - + /** * @cfg {Object} extraStyle * Contains extra styles that will be added or overwritten to the default chartStyle. Defaults to null. - * For a detailed list of the options available, visit the YUI Charts site + * For a detailed list of the options available, visit the YUI Charts site * at http://developer.yahoo.com/yui/charts/#basicstyles
* Some of the options availabe:
*-
@@ -53195,13 +58249,13 @@ Ext.FlashEventProxy = {
*
The location where the message text set through {@link #markInvalid} should display. + * @cfg {String} msgTarget
The location where the message text set through {@link #markInvalid} should display. * Must be one of the following values:
*-
*
qtipDisplay a quick tip containing the message when the user hovers over the field. This is the default. @@ -55885,7 +61166,7 @@ var form = new Ext.form.FormPanel({ // private initEvents : function(){ - this.mon(this.el, Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.fireKey, this); + this.mon(this.el, Ext.EventManager.getKeyEvent(), this.fireKey, this); this.mon(this.el, 'focus', this.onFocus, this); // standardise buffer across all browsers + OS-es for consistent event order. @@ -55953,7 +61234,7 @@ var form = new Ext.form.FormPanel({ } var restore = this.preventMark; this.preventMark = preventMark === true; - var v = this.validateValue(this.processValue(this.getRawValue())); + var v = this.validateValue(this.processValue(this.getRawValue()), preventMark); this.preventMark = restore; return v; }, @@ -55982,12 +61263,33 @@ var form = new Ext.form.FormPanel({ }, /** - * @private - * Subclasses should provide the validation implementation by overriding this - * @param {Mixed} value + * Uses getErrors to build an array of validation errors. If any errors are found, markInvalid is called + * with the first and false is returned, otherwise true is returned. Previously, subclasses were invited + * to provide an implementation of this to process validations - from 3.2 onwards getErrors should be + * overridden instead. + * @param {Mixed} The current value of the field + * @return {Boolean} True if all validations passed, false if one or more failed */ - validateValue : function(value){ - return true; + validateValue : function(value) { + //currently, we only show 1 error at a time for a field, so just use the first one + var error = this.getErrors(value)[0]; + + if (error == undefined) { + return true; + } else { + this.markInvalid(error); + return false; + } + }, + + /** + * Runs this field's validators and returns an array of error messages for any validation failures. + * This is called internally during validation and would not usually need to be used manually. + * Each subclass should override or augment the return value to provide their own errors + * @return {Array} All error messages for this field + */ + getErrors: function() { + return []; }, /** @@ -56008,47 +61310,69 @@ var form = new Ext.form.FormPanel({ * @param {String} msg (optional) The validation message (defaults to {@link #invalidText}) */ markInvalid : function(msg){ - if(!this.rendered || this.preventMark){ // not rendered - return; - } - msg = msg || this.invalidText; + //don't set the error icon if we're not rendered or marking is prevented + if (this.rendered && !this.preventMark) { + msg = msg || this.invalidText; - var mt = this.getMessageHandler(); - if(mt){ - mt.mark(this, msg); - }else if(this.msgTarget){ - this.el.addClass(this.invalidClass); - var t = Ext.getDom(this.msgTarget); - if(t){ - t.innerHTML = msg; - t.style.display = this.msgDisplay; + var mt = this.getMessageHandler(); + if(mt){ + mt.mark(this, msg); + }else if(this.msgTarget){ + this.el.addClass(this.invalidClass); + var t = Ext.getDom(this.msgTarget); + if(t){ + t.innerHTML = msg; + t.style.display = this.msgDisplay; + } } } - this.activeError = msg; - this.fireEvent('invalid', this, msg); + + this.setActiveError(msg); }, /** * Clear any invalid styles/messages for this field */ clearInvalid : function(){ - if(!this.rendered || this.preventMark){ // not rendered - return; - } - this.el.removeClass(this.invalidClass); - var mt = this.getMessageHandler(); - if(mt){ - mt.clear(this); - }else if(this.msgTarget){ + //don't remove the error icon if we're not rendered or marking is prevented + if (this.rendered && !this.preventMark) { this.el.removeClass(this.invalidClass); - var t = Ext.getDom(this.msgTarget); - if(t){ - t.innerHTML = ''; - t.style.display = 'none'; + var mt = this.getMessageHandler(); + if(mt){ + mt.clear(this); + }else if(this.msgTarget){ + this.el.removeClass(this.invalidClass); + var t = Ext.getDom(this.msgTarget); + if(t){ + t.innerHTML = ''; + t.style.display = 'none'; + } } } + + this.unsetActiveError(); + }, + + /** + * Sets the current activeError to the given string. Fires the 'invalid' event. + * This does not set up the error icon, only sets the message and fires the event. To show the error icon, + * use markInvalid instead, which calls this method internally + * @param {String} msg The error message + * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired + */ + setActiveError: function(msg, suppressEvent) { + this.activeError = msg; + if (suppressEvent !== true) this.fireEvent('invalid', this, msg); + }, + + /** + * Clears the activeError and fires the 'valid' event. This is called internally by clearInvalid and would not + * usually need to be called manually + * @param {Boolean} suppressEvent True to suppress the 'invalid' event from being fired + */ + unsetActiveError: function(suppressEvent) { delete this.activeError; - this.fireEvent('valid', this); + if (suppressEvent !== true) this.fireEvent('valid', this); }, // private @@ -56197,11 +61521,16 @@ Ext.form.MessageTargets = { field.el.addClass(field.invalidClass); if(!field.errorIcon){ var elp = field.getErrorCt(); - if(!elp){ // field has no container el + // field has no container el + if(!elp){ field.el.dom.title = msg; return; } field.errorIcon = elp.createChild({cls:'x-form-invalid-icon'}); + if (field.ownerCt) { + field.ownerCt.on('afterlayout', field.alignErrorIcon, field); + field.ownerCt.on('expand', field.alignErrorIcon, field); + } field.on('resize', field.alignErrorIcon, field); field.on('destroy', function(){ Ext.destroy(this.errorIcon); @@ -56317,7 +61646,7 @@ Ext.form.TextField = Ext.extend(Ext.form.Field, { vtype : null, /** * @cfg {RegExp} maskRe An input mask regular expression that will be used to filter keystrokes that do - * not match (defaults to null) + * not match (defaults to null). The maskRe will not operate on any paste events. */ maskRe : null, /** @@ -56577,14 +61906,16 @@ var myField = new Ext.form.NumberField({ // private preFocus : function(){ - var el = this.el; + var el = this.el, + isEmpty; if(this.emptyText){ if(el.dom.value == this.emptyText){ this.setRawValue(''); + isEmpty = true; } el.removeClass(this.emptyClass); } - if(this.selectOnFocus){ + if(this.selectOnFocus || isEmpty){ el.dom.select(); } }, @@ -56623,8 +61954,8 @@ var myField = new Ext.form.NumberField({ }, /** - *Validates a value according to the field's validation rules and marks the field as invalid - * if the validation fails. Validation rules are processed in the following order:
+ *Validates a value according to the field's validation rules and returns an array of errors + * for any failing validations. Validation rules are processed in the following order:
*-
*
*
- 1. Field specific validator
@@ -56687,46 +62018,54 @@ var myField = new Ext.form.NumberField({
*
{@link #regexText}. *
*
- * @param {Mixed} value The value to validate
- * @return {Boolean} True if the value is valid, else false
+ * @param {Mixed} value The value to validate. The processed raw value will be used if nothing is passed
+ * @return {Array} Array of any validation errors
*/
- validateValue : function(value){
- if(Ext.isFunction(this.validator)){
+ getErrors: function(value) {
+ var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);
+
+ value = Ext.isDefined(value) ? value : this.processValue(this.getRawValue());
+
+ if (Ext.isFunction(this.validator)) {
var msg = this.validator(value);
- if(msg !== true){
- this.markInvalid(msg);
- return false;
+ if (msg !== true) {
+ errors.push(msg);
}
}
- if(value.length < 1 || value === this.emptyText){ // if it's blank
- if(this.allowBlank){
- this.clearInvalid();
- return true;
- }else{
- this.markInvalid(this.blankText);
- return false;
- }
+
+ if (value.length < 1 || value === this.emptyText) {
+ if (this.allowBlank) {
+ //if value is blank and allowBlank is true, there cannot be any additional errors
+ return errors;
+ } else {
+ errors.push(this.blankText);
+ }
}
- if(value.length < this.minLength){
- this.markInvalid(String.format(this.minLengthText, this.minLength));
- return false;
+
+ if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) { // if it's blank
+ errors.push(this.blankText);
}
- if(value.length > this.maxLength){
- this.markInvalid(String.format(this.maxLengthText, this.maxLength));
- return false;
- }
- if(this.vtype){
+
+ if (value.length < this.minLength) {
+ errors.push(String.format(this.minLengthText, this.minLength));
+ }
+
+ if (value.length > this.maxLength) {
+ errors.push(String.format(this.maxLengthText, this.maxLength));
+ }
+
+ if (this.vtype) {
var vt = Ext.form.VTypes;
if(!vt[this.vtype](value, this)){
- this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
- return false;
+ errors.push(this.vtypeText || vt[this.vtype +'Text']);
}
}
- if(this.regex && !this.regex.test(value)){
- this.markInvalid(this.regexText);
- return false;
+
+ if (this.regex && !this.regex.test(value)) {
+ errors.push(this.regexText);
}
- return true;
+
+ return errors;
},
/**
@@ -56884,7 +62223,7 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
getTriggerWidth: function(){
var tw = this.trigger.getWidth();
- if(!this.hideTrigger && tw === 0){
+ if(!this.hideTrigger && !this.readOnly && tw === 0){
tw = this.defaultTriggerWidth;
}
return tw;
@@ -56904,7 +62243,7 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
this.wrap = this.el.wrap({cls: 'x-form-field-wrap x-form-field-trigger-wrap'});
this.trigger = this.wrap.createChild(this.triggerConfig ||
- {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass});
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.triggerClass});
this.initTrigger();
if(!this.width){
this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
@@ -56912,6 +62251,10 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
this.resizeEl = this.positionEl = this.wrap;
},
+ getWidth: function() {
+ return(this.el.getWidth() + this.trigger.getWidth());
+ },
+
updateEditState: function(){
if(this.rendered){
if (this.readOnly) {
@@ -56935,6 +62278,10 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
}
},
+ /**
+ * Changes the hidden status of the trigger.
+ * @param {Boolean} hideTrigger True to hide the trigger, false to show it.
+ */
setHideTrigger: function(hideTrigger){
if(hideTrigger != this.hideTrigger){
this.hideTrigger = hideTrigger;
@@ -56943,11 +62290,11 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
},
/**
- * @param {Boolean} value True to allow the user to directly edit the field text
* Allow or prevent the user from directly editing the field text. If false is passed,
* the user will only be able to modify the field using the trigger. Will also add
* a click event to the text field which will call the trigger. This method
- * is the runtime equivalent of setting the 'editable' config option at config time.
+ * is the runtime equivalent of setting the {@link #editable} config option at config time.
+ * @param {Boolean} value True to allow the user to directly edit the field text.
*/
setEditable: function(editable){
if(editable != this.editable){
@@ -56957,11 +62304,11 @@ Ext.form.TriggerField = Ext.extend(Ext.form.TextField, {
},
/**
+ * Setting this to true will supersede settings {@link #editable} and {@link #hideTrigger}.
+ * Setting this to false will defer back to {@link #editable} and {@link #hideTrigger}. This method
+ * is the runtime equivalent of setting the {@link #readOnly} config option at config time.
* @param {Boolean} value True to prevent the user changing the field and explicitly
* hide the trigger.
- * Setting this to true will superceed settings editable and hideTrigger.
- * Setting this to false will defer back to editable and hideTrigger. This method
- * is the runtime equivalent of setting the 'readOnly' config option at config time.
*/
setReadOnly: function(readOnly){
if(readOnly != this.readOnly){
@@ -57098,8 +62445,8 @@ Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
- {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
- {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.trigger1Class},
+ {tag: "img", src: Ext.BLANK_IMAGE_URL, alt: "", cls: "x-form-trigger " + this.trigger2Class}
]};
},
@@ -57107,28 +62454,38 @@ Ext.form.TwinTriggerField = Ext.extend(Ext.form.TriggerField, {
return this.triggers[index];
},
+ afterRender: function(){
+ Ext.form.TwinTriggerField.superclass.afterRender.call(this);
+ var triggers = this.triggers,
+ i = 0,
+ len = triggers.length;
+
+ for(; i < len; ++i){
+ if(this['hideTrigger' + (i + 1)]){
+ triggers[i].hide();
+ }
+
+ }
+ },
+
initTrigger : function(){
- var ts = this.trigger.select('.x-form-trigger', true);
- var triggerField = this;
+ var ts = this.trigger.select('.x-form-trigger', true),
+ triggerField = this;
+
ts.each(function(t, all, index){
var triggerIndex = 'Trigger'+(index+1);
t.hide = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = 'none';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- this['hidden' + triggerIndex] = true;
+ triggerField['hidden' + triggerIndex] = true;
};
t.show = function(){
var w = triggerField.wrap.getWidth();
this.dom.style.display = '';
triggerField.el.setWidth(w-triggerField.trigger.getWidth());
- this['hidden' + triggerIndex] = false;
+ triggerField['hidden' + triggerIndex] = false;
};
-
- if(this['hide'+triggerIndex]){
- t.dom.style.display = 'none';
- this['hidden' + triggerIndex] = true;
- }
this.mon(t, 'click', this['on'+triggerIndex+'Click'], this, {preventDefault:true});
t.addClassOnOver('x-form-trigger-over');
t.addClassOnClick('x-form-trigger-click');
@@ -57249,6 +62606,13 @@ Ext.form.TextArea = Ext.extend(Ext.form.TextField, {
return !e.isNavKeyPress() || e.getKey() == e.ENTER;
},
+ // inherit docs
+ filterValidation: function(e) {
+ if(!e.isNavKeyPress() || (!this.enterIsSpecial && e.keyCode == e.ENTER)){
+ this.validationTask.delay(this.validationDelay);
+ }
+ },
+
/**
* Automatically grows the field to accomodate the height of the text up to the maximum field height allowed.
* This only takes effect if grow = true, and fires the {@link #autosize} event if the height changes.
@@ -57300,50 +62664,65 @@ Ext.form.NumberField = Ext.extend(Ext.form.TextField, {
* @cfg {String} fieldClass The default CSS class for the field (defaults to "x-form-field x-form-num-field")
*/
fieldClass: "x-form-field x-form-num-field",
+
/**
* @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true)
*/
allowDecimals : true,
+
/**
* @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.')
*/
decimalSeparator : ".",
+
/**
* @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2)
*/
decimalPrecision : 2,
+
/**
* @cfg {Boolean} allowNegative False to prevent entering a negative sign (defaults to true)
*/
allowNegative : true,
+
/**
* @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY)
*/
minValue : Number.NEGATIVE_INFINITY,
+
/**
* @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE)
*/
maxValue : Number.MAX_VALUE,
+
/**
* @cfg {String} minText Error text to display if the minimum value validation fails (defaults to "The minimum value for this field is {minValue}")
*/
minText : "The minimum value for this field is {0}",
+
/**
* @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to "The maximum value for this field is {maxValue}")
*/
maxText : "The maximum value for this field is {0}",
+
/**
* @cfg {String} nanText Error text to display if the value is not a valid number. For example, this can happen
* if a valid character like '.' or '-' is left in the field with no number (defaults to "{value} is not a valid number")
*/
nanText : "{0} is not a valid number",
+
/**
* @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789').
*/
baseChars : "0123456789",
+ /**
+ * @cfg {Boolean} autoStripChars True to automatically strip not allowed characters from the field. Defaults to false
+ */
+ autoStripChars: false,
+
// private
- initEvents : function(){
+ initEvents : function() {
var allowed = this.baseChars + '';
if (this.allowDecimals) {
allowed += this.decimalSeparator;
@@ -57351,41 +62730,58 @@ Ext.form.NumberField = Ext.extend(Ext.form.TextField, {
if (this.allowNegative) {
allowed += '-';
}
- this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
+ allowed = Ext.escapeRe(allowed);
+ this.maskRe = new RegExp('[' + allowed + ']');
+ if (this.autoStripChars) {
+ this.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
+ }
+
Ext.form.NumberField.superclass.initEvents.call(this);
},
- // private
- validateValue : function(value){
- if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ /**
+ * Runs all of NumberFields validations and returns an array of any errors. Note that this first
+ * runs TextField's validations, so the returned array is an amalgamation of all field errors.
+ * The additional validations run test that the value is a number, and that it is within the
+ * configured min and max values.
+ * @param {Mixed} value The value to get errors for (defaults to the current field value)
+ * @return {Array} All validation errors for this field
+ */
+ getErrors: function(value) {
+ var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
+
+ value = Ext.isDefined(value) ? value : this.processValue(this.getRawValue());
+
+ if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+ return errors;
}
+
value = String(value).replace(this.decimalSeparator, ".");
+
if(isNaN(value)){
- this.markInvalid(String.format(this.nanText, value));
- return false;
+ errors.push(String.format(this.nanText, value));
}
+
var num = this.parseValue(value);
- if(num < this.minValue){
- this.markInvalid(String.format(this.minText, this.minValue));
- return false;
+
+ if (num < this.minValue) {
+ errors.push(String.format(this.minText, this.minValue));
}
- if(num > this.maxValue){
- this.markInvalid(String.format(this.maxText, this.maxValue));
- return false;
+
+ if (num > this.maxValue) {
+ errors.push(String.format(this.maxText, this.maxValue));
}
- return true;
+
+ return errors;
},
- getValue : function(){
+ getValue : function() {
return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
},
- setValue : function(v){
+ setValue : function(v) {
v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
+ v = this.fixPrecision(v);
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
return Ext.form.NumberField.superclass.setValue.call(this, v);
},
@@ -57394,7 +62790,7 @@ Ext.form.NumberField = Ext.extend(Ext.form.TextField, {
* Replaces any existing {@link #minValue} with the new value.
* @param {Number} value The minimum value
*/
- setMinValue : function(value){
+ setMinValue : function(value) {
this.minValue = Ext.num(value, Number.NEGATIVE_INFINITY);
},
@@ -57402,33 +62798,41 @@ Ext.form.NumberField = Ext.extend(Ext.form.TextField, {
* Replaces any existing {@link #maxValue} with the new value.
* @param {Number} value The maximum value
*/
- setMaxValue : function(value){
+ setMaxValue : function(value) {
this.maxValue = Ext.num(value, Number.MAX_VALUE);
},
// private
- parseValue : function(value){
+ parseValue : function(value) {
value = parseFloat(String(value).replace(this.decimalSeparator, "."));
return isNaN(value) ? '' : value;
},
- // private
- fixPrecision : function(value){
+ /**
+ * @private
+ *
+ */
+ fixPrecision : function(value) {
var nan = isNaN(value);
- if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
- return nan ? '' : value;
+
+ if (!this.allowDecimals || this.decimalPrecision == -1 || nan || !value) {
+ return nan ? '' : value;
}
+
return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
},
- beforeBlur : function(){
+ beforeBlur : function() {
var v = this.parseValue(this.getRawValue());
- if(!Ext.isEmpty(v)){
- this.setValue(this.fixPrecision(v));
+
+ if (!Ext.isEmpty(v)) {
+ this.setValue(v);
}
}
});
-Ext.reg('numberfield', Ext.form.NumberField);/**
+
+Ext.reg('numberfield', Ext.form.NumberField);
+/**
* @class Ext.form.DateField
* @extends Ext.form.TriggerField
* Provides a date input field with a {@link Ext.DatePicker} dropdown and automatic date validation.
@@ -57448,9 +62852,9 @@ Ext.form.DateField = Ext.extend(Ext.form.TriggerField, {
* @cfg {String} altFormats
* Multiple date formats separated by "|" to try when parsing a user input value and it
* does not match the defined format (defaults to
- * 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d').
+ * 'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j').
*/
- altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d",
+ altFormats : "m/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d|n-j|n/j",
/**
* @cfg {String} disabledDaysText
* The tooltip to display when the date falls on a disabled day (defaults to 'Disabled')
@@ -57492,6 +62896,13 @@ Ext.form.DateField = Ext.extend(Ext.form.TriggerField, {
* the keyboard handler for spacebar that selects the current date (defaults to true).
*/
showToday : true,
+
+ /**
+ * @cfg {Number} startDay
+ * Day index at which the week should begin, 0-based (defaults to 0, which is Sunday)
+ */
+ startDay : 0,
+
/**
* @cfg {Date/String} minValue
* The minimum allowed date. Can be either a Javascript date object or a string date in a
@@ -57541,6 +62952,27 @@ disabledDates: ["^03"]
// private
defaultAutoCreate : {tag: "input", type: "text", size: "10", autocomplete: "off"},
+ // in the absence of a time value, a default value of 12 noon will be used
+ // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
+ initTime: '12', // 24 hour format
+
+ initTimeFormat: 'H',
+
+ // PUBLIC -- to be documented
+ safeParse : function(value, format) {
+ if (Date.formatContainsHourInfo(format)) {
+ // if parse format contains hour information, no DST adjustment is necessary
+ return Date.parseDate(value, format);
+ } else {
+ // set time to 12 noon, then clear the time
+ var parsedDate = Date.parseDate(value + ' ' + this.initTime, format + ' ' + this.initTimeFormat);
+
+ if (parsedDate) {
+ return parsedDate.clearTime();
+ }
+ }
+ },
+
initComponent : function(){
Ext.form.DateField.superclass.initComponent.call(this);
@@ -57563,7 +62995,7 @@ disabledDates: ["^03"]
this.disabledDatesRE = null;
this.initDisabledDays();
},
-
+
initEvents: function() {
Ext.form.DateField.superclass.initEvents.call(this);
this.keyNav = new Ext.KeyNav(this.el, {
@@ -57580,9 +63012,9 @@ disabledDates: ["^03"]
initDisabledDays : function(){
if(this.disabledDates){
var dd = this.disabledDates,
- len = dd.length - 1,
+ len = dd.length - 1,
re = "(?:";
-
+
Ext.each(dd, function(d, i){
re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
if(i != len){
@@ -57640,45 +63072,57 @@ disabledDates: ["^03"]
}
},
- // private
- validateValue : function(value){
- value = this.formatDate(value);
- if(!Ext.form.DateField.superclass.validateValue.call(this, value)){
- return false;
- }
- if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
- return true;
+ /**
+ * Runs all of NumberFields validations and returns an array of any errors. Note that this first
+ * runs TextField's validations, so the returned array is an amalgamation of all field errors.
+ * The additional validation checks are testing that the date format is valid, that the chosen
+ * date is within the min and max date constraints set, that the date chosen is not in the disabledDates
+ * regex and that the day chosed is not one of the disabledDays.
+ * @param {Mixed} value The value to get errors for (defaults to the current field value)
+ * @return {Array} All validation errors for this field
+ */
+ getErrors: function(value) {
+ var errors = Ext.form.DateField.superclass.getErrors.apply(this, arguments);
+
+ value = this.formatDate(value || this.processValue(this.getRawValue()));
+
+ if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
+ return errors;
}
+
var svalue = value;
value = this.parseDate(value);
- if(!value){
- this.markInvalid(String.format(this.invalidText, svalue, this.format));
- return false;
+ if (!value) {
+ errors.push(String.format(this.invalidText, svalue, this.format));
+ return errors;
}
+
var time = value.getTime();
- if(this.minValue && time < this.minValue.getTime()){
- this.markInvalid(String.format(this.minText, this.formatDate(this.minValue)));
- return false;
+ if (this.minValue && time < this.minValue.clearTime().getTime()) {
+ errors.push(String.format(this.minText, this.formatDate(this.minValue)));
}
- if(this.maxValue && time > this.maxValue.getTime()){
- this.markInvalid(String.format(this.maxText, this.formatDate(this.maxValue)));
- return false;
+
+ if (this.maxValue && time > this.maxValue.clearTime().getTime()) {
+ errors.push(String.format(this.maxText, this.formatDate(this.maxValue)));
}
- if(this.disabledDays){
+
+ if (this.disabledDays) {
var day = value.getDay();
+
for(var i = 0; i < this.disabledDays.length; i++) {
- if(day === this.disabledDays[i]){
- this.markInvalid(this.disabledDaysText);
- return false;
+ if (day === this.disabledDays[i]) {
+ errors.push(this.disabledDaysText);
+ break;
}
}
}
+
var fvalue = this.formatDate(value);
- if(this.disabledDatesRE && this.disabledDatesRE.test(fvalue)){
- this.markInvalid(String.format(this.disabledDatesText, fvalue));
- return false;
+ if (this.disabledDatesRE && this.disabledDatesRE.test(fvalue)) {
+ errors.push(String.format(this.disabledDatesText, fvalue));
}
- return true;
+
+ return errors;
},
// private
@@ -57722,17 +63166,20 @@ dateField.setValue('2006-05-04');
},
// private
- parseDate : function(value){
+ parseDate : function(value) {
if(!value || Ext.isDate(value)){
return value;
}
- var v = Date.parseDate(value, this.format);
- if(!v && this.altFormats){
- if(!this.altFormatsArray){
- this.altFormatsArray = this.altFormats.split("|");
- }
- for(var i = 0, len = this.altFormatsArray.length; i < len && !v; i++){
- v = Date.parseDate(value, this.altFormatsArray[i]);
+
+ var v = this.safeParse(value, this.format),
+ af = this.altFormats,
+ afa = this.altFormatsArray;
+
+ if (!v && af) {
+ afa = afa || af.split("|");
+
+ for (var i = 0, len = afa.length; i < len && !v; i++) {
+ v = this.safeParse(value, afa[i]);
}
}
return v;
@@ -57740,7 +63187,7 @@ dateField.setValue('2006-05-04');
// private
onDestroy : function(){
- Ext.destroy(this.menu, this.keyNav);
+ Ext.destroy(this.menu, this.keyNav);
Ext.form.DateField.superclass.onDestroy.call(this);
},
@@ -57775,6 +63222,7 @@ dateField.setValue('2006-05-04');
disabledDaysText : this.disabledDaysText,
format : this.format,
showToday : this.showToday,
+ startDay: this.startDay,
minText : String.format(this.minText, this.formatDate(this.minValue)),
maxText : String.format(this.maxText, this.formatDate(this.maxValue))
});
@@ -57782,20 +63230,20 @@ dateField.setValue('2006-05-04');
this.menu.show(this.el, "tl-bl?");
this.menuEvents('on');
},
-
+
//private
menuEvents: function(method){
this.menu[method]('select', this.onSelect, this);
this.menu[method]('hide', this.onMenuHide, this);
this.menu[method]('show', this.onFocus, this);
},
-
+
onSelect: function(m, d){
this.setValue(d);
this.fireEvent('select', this, d);
this.menu.hide();
},
-
+
onMenuHide: function(){
this.focus(false, 60);
this.menuEvents('un');
@@ -57823,7 +63271,8 @@ dateField.setValue('2006-05-04');
* @method autoSize
*/
});
-Ext.reg('datefield', Ext.form.DateField);/**
+Ext.reg('datefield', Ext.form.DateField);
+/**
* @class Ext.form.DisplayField
* @extends Ext.form.Field
* A display-only text field which is not validated and not submitted.
@@ -58057,16 +63506,11 @@ Ext.form.ComboBox = Ext.extend(Ext.form.TriggerField, {
* @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
* field's data value (defaults to the underlying DOM element's name). Required for the combo's value to automatically
* post during a form submission. See also {@link #valueField}.
- * - 1. Field specific validator
@@ -56687,46 +62018,54 @@ var myField = new Ext.form.NumberField({
*
Note: the hidden field's id will also default to this name if {@link #hiddenId} is not specified. - * The ComboBox {@link Ext.Component#id id} and the {@link #hiddenId} should be different, since - * no two DOM nodes should share the same id. So, if the ComboBox {@link Ext.form.Field#name name} and - * hiddenName are the same, you should specify a unique {@link #hiddenId}.
*/ /** * @cfg {String} hiddenId If {@link #hiddenName} is specified, hiddenId can also be provided - * to give the hidden field a unique id (defaults to the {@link #hiddenName}). The hiddenId - * and combo {@link Ext.Component#id id} should be different, since no two DOM - * nodes should share the same id. + * to give the hidden field a unique id. The hiddenId and combo {@link Ext.Component#id id} should be + * different, since no two DOM nodes should share the same id. */ /** * @cfg {String} hiddenValue Sets the initial value of the hidden field if {@link #hiddenName} is @@ -58355,7 +63799,7 @@ var combo = new Ext.form.ComboBox({ d.push([value, o.text]); } this.store = new Ext.data.ArrayStore({ - 'id': 0, + idIndex: 0, fields: ['value', 'text'], data : d, autoDestroy: true @@ -58402,7 +63846,7 @@ var combo = new Ext.form.ComboBox({ Ext.form.ComboBox.superclass.onRender.call(this, ct, position); if(this.hiddenName){ this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, - id: (this.hiddenId||this.hiddenName)}, 'before', true); + id: (this.hiddenId || Ext.id())}, 'before', true); } if(Ext.isGecko){ @@ -58425,26 +63869,38 @@ var combo = new Ext.form.ComboBox({ } }, + getParentZIndex : function(){ + var zindex; + if (this.ownerCt){ + this.findParentBy(function(ct){ + zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10); + return !!zindex; + }); + } + return zindex; + }, + + getZIndex : function(listParent){ + listParent = listParent || Ext.getDom(this.getListParent() || Ext.getBody()); + var zindex = parseInt(Ext.fly(listParent).getStyle('z-index'), 10); + if(!zindex){ + zindex = this.getParentZIndex(); + } + return (zindex || 12000) + 5; + }, + // private initList : function(){ if(!this.list){ var cls = 'x-combo-list', - listParent = Ext.getDom(this.getListParent() || Ext.getBody()), - zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10); - - if (this.ownerCt && !zindex){ - this.findParentBy(function(ct){ - zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10); - return !!zindex; - }); - } + listParent = Ext.getDom(this.getListParent() || Ext.getBody()); this.list = new Ext.Layer({ parentEl: listParent, shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false, - zindex: (zindex || 12000) + 5 + zindex: this.getZIndex(listParent) }); var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth); @@ -58636,17 +64092,33 @@ var menu = new Ext.menu.Menu({ }, reset : function(){ - Ext.form.ComboBox.superclass.reset.call(this); if(this.clearFilterOnReset && this.mode == 'local'){ this.store.clearFilter(); } + Ext.form.ComboBox.superclass.reset.call(this); }, // private initEvents : function(){ Ext.form.ComboBox.superclass.initEvents.call(this); - + /** + * @property keyNav + * @type Ext.KeyNav + *A {@link Ext.KeyNav KeyNav} object which handles navigation keys for this ComboBox. This performs actions + * based on keystrokes typed when the input field is focused.
+ *After the ComboBox has been rendered, you may override existing navigation key functionality, + * or add your own based upon key names as specified in the {@link Ext.KeyNav KeyNav} class.
+ *The function is executed in the scope (
thisreference of the ComboBox. Example:
+ */ this.keyNav = new Ext.KeyNav(this.el, { "up" : function(e){ this.inKeyMode = true; @@ -58671,7 +64143,11 @@ var menu = new Ext.menu.Menu({ }, "tab" : function(e){ - this.collapse(); + if (this.forceSelection === true) { + this.collapse(); + } else { + this.onViewClick(false); + } return true; }, @@ -58732,7 +64208,7 @@ var menu = new Ext.menu.Menu({ // private onResize : function(w, h){ Ext.form.ComboBox.superclass.onResize.apply(this, arguments); - if(this.isVisible() && this.list){ + if(!isNaN(w) && this.isVisible() && this.list){ this.doResize(w); }else{ this.bufferSize = w; @@ -58819,11 +64295,16 @@ var menu = new Ext.menu.Menu({ }, // private - assertValue : function(){ - + assertValue : function(){ var val = this.getRawValue(), - rec = this.findRecord(this.displayField, val); + rec; + if(this.valueField && Ext.isDefined(this.value)){ + rec = this.findRecord(this.valueField, this.value); + } + if(!rec || rec.get(this.displayField) != val){ + rec = this.findRecord(this.displayField, val); + } if(!rec && this.forceSelection){ if(val.length > 0 && val != this.emptyText){ this.el.dom.value = Ext.value(this.lastSelectionText, ''); @@ -58832,12 +64313,17 @@ var menu = new Ext.menu.Menu({ this.clearValue(); } }else{ - if(rec){ + if(rec && this.valueField){ + // onSelect may have already set the value and by doing so + // set the display field properly. Let's not wipe out the + // valueField here by just sending the displayField. + if (this.value == val){ + return; + } val = rec.get(this.valueField || this.displayField); } this.setValue(val); } - }, // private @@ -59123,13 +64609,13 @@ var menu = new Ext.menu.Menu({ // private getParams : function(q){ - var p = {}; - //p[this.queryParam] = q; + var params = {}, + paramNames = this.store.paramNames; if(this.pageSize){ - p.start = 0; - p.limit = this.pageSize; + params[paramNames.start] = 0; + params[paramNames.limit] = this.pageSize; } - return p; + return params; }, /** @@ -59147,7 +64633,7 @@ var menu = new Ext.menu.Menu({ // private collapseIf : function(e){ - if(!e.within(this.wrap) && !e.within(this.list)){ + if(!this.isDestroyed && !e.within(this.wrap) && !e.within(this.list)){ this.collapse(); } }, @@ -59159,11 +64645,25 @@ var menu = new Ext.menu.Menu({ if(this.isExpanded() || !this.hasFocus){ return; } + + if(this.title || this.pageSize){ + this.assetHeight = 0; + if(this.title){ + this.assetHeight += this.header.getHeight(); + } + if(this.pageSize){ + this.assetHeight += this.footer.getHeight(); + } + } + if(this.bufferSize){ this.doResize(this.bufferSize); delete this.bufferSize; } this.list.alignTo.apply(this.list, [this.el].concat(this.listAlign)); + + // zindex can change, re-check it and set it if necessary + this.list.setZIndex(this.getZIndex()); this.list.show(); if(Ext.isGecko2){ this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac @@ -59238,19 +64738,20 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, { * @cfg {Boolean} checked true if the checkbox should render initially checked (defaults to false) */ checked : false, + /** + * @cfg {String} boxLabel The text that appears beside the checkbox + */ + boxLabel: ' ', /** * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to * {tag: 'input', type: 'checkbox', autocomplete: 'off'}) */ defaultAutoCreate : { tag: 'input', type: 'checkbox', autocomplete: 'off'}, - /** - * @cfg {String} boxLabel The text that appears beside the checkbox - */ /** * @cfg {String} inputValue The value that should go into the generated input element's value attribute */ /** - * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of + * @cfg {Function} handler A function called when the {@link #checked} value changes (can be used instead of * handling the check event). The handler is passed the following parameters: *+myCombo.keyNav.esc = function(e) { // Override ESC handling function + this.collapse(); // Standard behaviour of Ext's ComboBox. + this.setValue(this.startValue); // We reset to starting value on ESC +}; +myCombo.keyNav.tab = function() { // Override TAB handling function + this.onViewClick(false); // Select the currently highlighted row +}; +*-
*
- checkbox : Ext.form.CheckboxThe Checkbox being toggled.
@@ -59264,7 +64765,7 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
// private
actionMode : 'wrap',
-
+
// private
initComponent : function(){
Ext.form.Checkbox.superclass.initComponent.call(this);
@@ -59326,7 +64827,7 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
this.checked = this.el.dom.checked;
}
// Need to repaint for IE, otherwise positioning is broken
- if(Ext.isIE){
+ if (Ext.isIE && !Ext.isStrict) {
this.wrap.repaint();
}
this.resizeEl = this.positionEl = this.wrap;
@@ -59369,8 +64870,15 @@ Ext.form.Checkbox = Ext.extend(Ext.form.Field, {
* @return {Ext.form.Field} this
*/
setValue : function(v){
- var checked = this.checked ;
- this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+ var checked = this.checked,
+ inputVal = this.inputValue;
+
+ if (v === false) {
+ this.checked = false;
+ } else {
+ this.checked = (v === true || v === 'true' || v == '1' || (inputVal ? v == inputVal : String(v).toLowerCase() == 'on'));
+ }
+
if(this.rendered){
this.el.dom.checked = this.checked;
this.el.dom.defaultChecked = this.checked;
@@ -59528,7 +65036,7 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
var cc = Ext.apply({items:[]}, colCfg);
cc[this.columns[i] <= 1 ? 'columnWidth' : 'width'] = this.columns[i];
if(this.defaults){
- cc.defaults = Ext.apply(cc.defaults || {}, this.defaults)
+ cc.defaults = Ext.apply(cc.defaults || {}, this.defaults);
}
cols.push(cc);
};
@@ -59618,21 +65126,27 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
this.fireEvent('change', this, arr);
},
- // private
- validateValue : function(value){
- if(!this.allowBlank){
+ /**
+ * Runs CheckboxGroup's validations and returns an array of any errors. The only error by default
+ * is if allowBlank is set to true and no items are checked.
+ * @return {Array} Array of all validation errors
+ */
+ getErrors: function() {
+ var errors = Ext.form.CheckboxGroup.superclass.getErrors.apply(this, arguments);
+
+ if (!this.allowBlank) {
var blank = true;
+
this.eachItem(function(f){
- if(f.checked){
+ if (f.checked) {
return (blank = false);
}
});
- if(blank){
- this.markInvalid(this.blankText);
- return false;
- }
+
+ if (blank) errors.push(this.blankText);
}
- return true;
+
+ return errors;
},
// private
@@ -59643,15 +65157,27 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
}
var dirty = false;
+
this.eachItem(function(item){
if(item.isDirty()){
dirty = true;
return false;
}
});
+
return dirty;
},
+ // private
+ setReadOnly : function(readOnly){
+ if(this.rendered){
+ this.eachItem(function(item){
+ item.setReadOnly(readOnly);
+ });
+ }
+ this.readOnly = readOnly;
+ },
+
// private
onDisable : function(){
this.eachItem(function(item){
@@ -59666,14 +65192,6 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
});
},
- // private
- doLayout: function(){
- if(this.rendered){
- this.panel.forceLayout = this.ownerCt.forceLayout;
- this.panel.doLayout();
- }
- },
-
// private
onResize : function(w, h){
this.panel.setSize(w, h);
@@ -59682,11 +65200,26 @@ Ext.form.CheckboxGroup = Ext.extend(Ext.form.Field, {
// inherit docs from Field
reset : function(){
- this.eachItem(function(c){
- if(c.reset){
- c.reset();
- }
- });
+ if (this.originalValue) {
+ // Clear all items
+ this.eachItem(function(c){
+ if(c.setValue){
+ c.setValue(false);
+ c.originalValue = c.getValue();
+ }
+ });
+ // Set items stored in originalValue, ugly - set a flag to reset the originalValue
+ // during the horrible onSetValue. This will allow trackResetOnLoad to function.
+ this.resetOriginal = true;
+ this.setValue(this.originalValue);
+ delete this.resetOriginal;
+ } else {
+ this.eachItem(function(c){
+ if(c.reset){
+ c.reset();
+ }
+ });
+ }
// Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete.
// Important because reset is being called on both the group and the individual items.
(function() {
@@ -59725,14 +65258,33 @@ myCheckboxGroup.setValue('cb-col-1,cb-col-3');
return this;
},
+ /**
+ * @private
+ * Sets the values of one or more of the items within the CheckboxGroup
+ * @param {String|Array|Object} id Can take multiple forms. Can be optionally:
+ *
- An ID string to be used with a second argument + *
- An array of the form ['some', 'list', 'of', 'ids', 'to', 'mark', 'checked'] + *
- An array in the form [true, true, false, true, false] etc, where each item relates to the check status of + * the checkbox at the same index + *
- An object containing ids of the checkboxes as keys and check values as properties + *
-
+ *
+{ + xtype: 'compositefield', + labelWidth: 120 + items: [ + { + xtype : 'textfield', + fieldLabel: 'Title', + width : 20 + }, + { + xtype : 'textfield', + fieldLabel: 'First', + flex : 1 + }, + { + xtype : 'textfield', + fieldLabel: 'Last', + flex : 1 + } + ] +} + *+ * In the example above the composite's fieldLabel will be set to 'Title, First, Last' as it groups the fieldLabels + * of each of its children. This can be overridden by setting a fieldLabel on the compositefield itself: + *+{ + xtype: 'compositefield', + fieldLabel: 'Custom label', + items: [...] +} + *+ * Any Ext.form.* component can be placed inside a composite field. + */ +Ext.form.CompositeField = Ext.extend(Ext.form.Field, { + + /** + * @property defaultMargins + * @type String + * The margins to apply by default to each field in the composite + */ + defaultMargins: '0 5 0 0', + + /** + * @property skipLastItemMargin + * @type Boolean + * If true, the defaultMargins are not applied to the last item in the composite field set (defaults to true) + */ + skipLastItemMargin: true, + + /** + * @property isComposite + * @type Boolean + * Signifies that this is a Composite field + */ + isComposite: true, + + /** + * @property combineErrors + * @type Boolean + * True to combine errors from the individual fields into a single error message at the CompositeField level (defaults to true) + */ + combineErrors: true, + + /** + * @cfg {String} labelConnector The string to use when joining segments of the built label together (defaults to ', ') + */ + labelConnector: ', ', + + /** + * @cfg {Object} defaults Any default properties to assign to the child fields. + */ + + //inherit docs + //Builds the composite field label + initComponent: function() { + var labels = [], + items = this.items, + item; + + for (var i=0, j = items.length; i < j; i++) { + item = items[i]; + + if (!Ext.isEmpty(item.ref)){ + item.ref = '../' + item.ref; + } + + labels.push(item.fieldLabel); + + //apply any defaults + Ext.applyIf(item, this.defaults); + + //apply default margins to each item except the last + if (!(i == j - 1 && this.skipLastItemMargin)) { + Ext.applyIf(item, {margins: this.defaultMargins}); + } + } + + this.fieldLabel = this.fieldLabel || this.buildLabel(labels); + + /** + * @property fieldErrors + * @type Ext.util.MixedCollection + * MixedCollection of current errors on the Composite's subfields. This is used internally to track when + * to show and hide error messages at the Composite level. Listeners are attached to the MixedCollection's + * add, remove and replace events to update the error icon in the UI as errors are added or removed. + */ + this.fieldErrors = new Ext.util.MixedCollection(true, function(item) { + return item.field; + }); + + this.fieldErrors.on({ + scope : this, + add : this.updateInvalidMark, + remove : this.updateInvalidMark, + replace: this.updateInvalidMark + }); + + Ext.form.CompositeField.superclass.initComponent.apply(this, arguments); + + this.innerCt = new Ext.Container({ + layout : 'hbox', + items : this.items, + cls : 'x-form-composite', + defaultMargins: '0 3 0 0', + ownerCt: this + }); + this.innerCt.ownerCt = undefined; + + var fields = this.innerCt.findBy(function(c) { + return c.isFormField; + }, this); + + /** + * @property items + * @type Ext.util.MixedCollection + * Internal collection of all of the subfields in this Composite + */ + this.items = new Ext.util.MixedCollection(); + this.items.addAll(fields); + + }, + + /** + * @private + * Creates an internal container using hbox and renders the fields to it + */ + onRender: function(ct, position) { + if (!this.el) { + /** + * @property innerCt + * @type Ext.Container + * A container configured with hbox layout which is responsible for laying out the subfields + */ + var innerCt = this.innerCt; + innerCt.render(ct); + + this.el = innerCt.getEl(); + + //if we're combining subfield errors into a single message, override the markInvalid and clearInvalid + //methods of each subfield and show them at the Composite level instead + if (this.combineErrors) { + this.eachItem(function(field) { + Ext.apply(field, { + markInvalid : this.onFieldMarkInvalid.createDelegate(this, [field], 0), + clearInvalid: this.onFieldClearInvalid.createDelegate(this, [field], 0) + }); + }); + } + + //set the label 'for' to the first item + var l = this.el.parent().parent().child('label', true); + if (l) { + l.setAttribute('for', this.items.items[0].id); + } + } + + Ext.form.CompositeField.superclass.onRender.apply(this, arguments); + }, + + /** + * Called if combineErrors is true and a subfield's markInvalid method is called. + * By default this just adds the subfield's error to the internal fieldErrors MixedCollection + * @param {Ext.form.Field} field The field that was marked invalid + * @param {String} message The error message + */ + onFieldMarkInvalid: function(field, message) { + var name = field.getName(), + error = { + field: name, + errorName: field.fieldLabel || name, + error: message + }; + + this.fieldErrors.replace(name, error); + + if (!field.preventMark) { + field.el.addClass(field.invalidClass); + } + }, + + /** + * Called if combineErrors is true and a subfield's clearInvalid method is called. + * By default this just updates the internal fieldErrors MixedCollection. + * @param {Ext.form.Field} field The field that was marked invalid + */ + onFieldClearInvalid: function(field) { + this.fieldErrors.removeKey(field.getName()); + + field.el.removeClass(field.invalidClass); + }, + + /** + * @private + * Called after a subfield is marked valid or invalid, this checks to see if any of the subfields are + * currently invalid. If any subfields are invalid it builds a combined error message marks the composite + * invalid, otherwise clearInvalid is called + */ + updateInvalidMark: function() { + var ieStrict = Ext.isIE6 && Ext.isStrict; + + if (this.fieldErrors.length == 0) { + this.clearInvalid(); + + //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it + if (ieStrict) { + this.clearInvalid.defer(50, this); + } + } else { + var message = this.buildCombinedErrorMessage(this.fieldErrors.items); + + this.sortErrors(); + this.markInvalid(message); + + //IE6 in strict mode has a layout bug when using 'under' as the error message target. This fixes it + if (ieStrict) { + this.markInvalid(message); + } + } + }, + + /** + * Performs validation checks on each subfield and returns false if any of them fail validation. + * @return {Boolean} False if any subfield failed validation + */ + validateValue: function(value, preventMark) { + var valid = true; + + this.eachItem(function(field) { + if (!field.isValid(preventMark)) { + valid = false; + } + }); + + return valid; + }, + + /** + * Takes an object containing error messages for contained fields, returning a combined error + * string (defaults to just placing each item on a new line). This can be overridden to provide + * custom combined error message handling. + * @param {Array} errors Array of errors in format: [{field: 'title', error: 'some error'}] + * @return {String} The combined error message + */ + buildCombinedErrorMessage: function(errors) { + var combined = [], + error; + + for (var i = 0, j = errors.length; i < j; i++) { + error = errors[i]; + + combined.push(String.format("{0}: {1}", error.errorName, error.error)); + } + + return combined.join("
"); + }, + + /** + * Sorts the internal fieldErrors MixedCollection by the order in which the fields are defined. + * This is called before displaying errors to ensure that the errors are presented in the expected order. + * This function can be overridden to provide a custom sorting order if needed. + */ + sortErrors: function() { + var fields = this.items; + + this.fieldErrors.sort("ASC", function(a, b) { + var findByName = function(key) { + return function(field) { + return field.getName() == key; + }; + }; + + var aIndex = fields.findIndexBy(findByName(a.field)), + bIndex = fields.findIndexBy(findByName(b.field)); + + return aIndex < bIndex ? -1 : 1; + }); + }, + + /** + * Resets each field in the composite to their previous value + */ + reset: function() { + this.eachItem(function(item) { + item.reset(); + }); + + // Defer the clearInvalid so if BaseForm's collection is being iterated it will be called AFTER it is complete. + // Important because reset is being called on both the group and the individual items. + (function() { + this.clearInvalid(); + }).defer(50, this); + }, + + /** + * Calls clearInvalid on all child fields. This is a convenience function and should not often need to be called + * as fields usually take care of clearing themselves + */ + clearInvalidChildren: function() { + this.eachItem(function(item) { + item.clearInvalid(); + }); + }, + + /** + * Builds a label string from an array of subfield labels. + * By default this just joins the labels together with a comma + * @param {Array} segments Array of each of the labels in the composite field's subfields + * @return {String} The built label + */ + buildLabel: function(segments) { + return Ext.clean(segments).join(this.labelConnector); + }, + + /** + * Checks each field in the composite and returns true if any is dirty + * @return {Boolean} True if any field is dirty + */ + isDirty: function(){ + //override the behaviour to check sub items. + if (this.disabled || !this.rendered) { + return false; + } + + var dirty = false; + this.eachItem(function(item){ + if(item.isDirty()){ + dirty = true; + return false; + } + }); + return dirty; + }, + + /** + * @private + * Convenience function which passes the given function to every item in the composite + * @param {Function} fn The function to call + * @param {Object} scope Optional scope object + */ + eachItem: function(fn, scope) { + if(this.items && this.items.each){ + this.items.each(fn, scope || this); + } + }, + + /** + * @private + * Passes the resize call through to the inner panel + */ + onResize: function(adjWidth, adjHeight, rawWidth, rawHeight) { + var innerCt = this.innerCt; + + if (this.rendered && innerCt.rendered) { + innerCt.setSize(adjWidth, adjHeight); + } + + Ext.form.CompositeField.superclass.onResize.apply(this, arguments); + }, + + /** + * @private + * Forces the internal container to be laid out again + */ + doLayout: function(shallow, force) { + if (this.rendered) { + var innerCt = this.innerCt; + + innerCt.forceLayout = this.ownerCt.forceLayout; + innerCt.doLayout(shallow, force); + } + }, + + /** + * @private + */ + beforeDestroy: function(){ + Ext.destroy(this.innerCt); + + Ext.form.CompositeField.superclass.beforeDestroy.call(this); + }, + + //override the behaviour to check sub items. + setReadOnly : function(readOnly) { + if (readOnly == undefined) { + readOnly = true; + } + readOnly = !!readOnly; + + if(this.rendered){ + this.eachItem(function(item){ + item.setReadOnly(readOnly); + }); + } + this.readOnly = readOnly; + }, + + onShow : function() { + Ext.form.CompositeField.superclass.onShow.call(this); + this.doLayout(); + }, + + //override the behaviour to check sub items. + onDisable : function(){ + this.eachItem(function(item){ + item.disable(); + }); + }, + + //override the behaviour to check sub items. + onEnable : function(){ + this.eachItem(function(item){ + item.enable(); + }); + } +}); + +Ext.reg('compositefield', Ext.form.CompositeField);/** * @class Ext.form.Radio * @extends Ext.form.Checkbox * Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type. @@ -59853,24 +65855,10 @@ Ext.form.Radio = Ext.extend(Ext.form.Checkbox, { */ getGroupValue : function(){ var p = this.el.up('form') || Ext.getBody(); - var c = p.child('input[name='+this.el.dom.name+']:checked', true); + var c = p.child('input[name="'+this.el.dom.name+'"]:checked', true); return c ? c.value : null; }, - // private - onClick : function(){ - if(this.el.dom.checked != this.checked){ - var els = this.getCheckEl().select('input[name=' + this.el.dom.name + ']'); - els.each(function(el){ - if(el.dom.id == this.id){ - this.setValue(true); - }else{ - Ext.getCmp(el.dom.id).setValue(false); - } - }, this); - } - }, - /** * Sets either the checked/unchecked status of this Radio, or, if a string value * is passed, checks a sibling Radio of the same name whose value is the value specified. @@ -59878,21 +65866,34 @@ Ext.form.Radio = Ext.extend(Ext.form.Checkbox, { * @return {Ext.form.Field} this */ setValue : function(v){ + var checkEl, + els, + radio; if (typeof v == 'boolean') { Ext.form.Radio.superclass.setValue.call(this, v); } else if (this.rendered) { - var r = this.getCheckEl().child('input[name=' + this.el.dom.name + '][value=' + v + ']', true); - if(r){ - Ext.getCmp(r.id).setValue(true); + checkEl = this.getCheckEl(); + radio = checkEl.child('input[name="' + this.el.dom.name + '"][value="' + v + '"]', true); + if(radio){ + Ext.getCmp(radio.id).setValue(true); } } + if(this.rendered && this.checked){ + checkEl = checkEl || this.getCheckEl(); + els = this.getCheckEl().select('input[name="' + this.el.dom.name + '"]'); + els.each(function(el){ + if(el.dom.id != this.id){ + Ext.getCmp(el.dom.id).setValue(false); + } + }, this); + } return this; }, // private getCheckEl: function(){ if(this.inGroup){ - return this.el.up('.x-form-radio-group') + return this.el.up('.x-form-radio-group'); } return this.el.up('form') || Ext.getBody(); } @@ -60027,6 +66028,8 @@ Ext.form.Hidden = Ext.extend(Ext.form.Field, { // private inputType : 'hidden', + shouldLayout: false, + // private onRender : function(){ Ext.form.Hidden.superclass.onRender.apply(this, arguments); @@ -60077,7 +66080,7 @@ Ext.reg('hidden', Ext.form.Hidden);/** * @param {Object} config Configuration options */ Ext.form.BasicForm = Ext.extend(Ext.util.Observable, { - + constructor: function(el, config){ Ext.apply(this, config); if(Ext.isString(this.paramOrder)){ @@ -60118,9 +66121,9 @@ Ext.form.BasicForm = Ext.extend(Ext.util.Observable, { if(el){ this.initEl(el); } - Ext.form.BasicForm.superclass.constructor.call(this); + Ext.form.BasicForm.superclass.constructor.call(this); }, - + /** * @cfg {String} method * The request method to use (GET or POST) for form actions if one isn't supplied in the action options. @@ -60226,7 +66229,7 @@ paramOrder: 'param1|param2|param' * {@link #paramOrder} nullifies this configuration. */ paramsAsHash: false, - + /** * @cfg {String} waitTitle * The default title to show for the waiting message box (defaults to 'Please Wait...') @@ -60320,15 +66323,20 @@ new Ext.FormPanel({ e.stopEvent(); }, - // private - destroy: function() { - this.items.each(function(f){ - Ext.destroy(f); - }); - if(this.el){ - this.el.removeAllListeners(); - this.el.remove(); + /** + * Destroys this object. + * @private + * @param {Boolean} bound true if the object is bound to a form panel. If this is the case + * the FormPanel will take care of destroying certain things, so we're just doubling up. + */ + destroy: function(bound){ + if(bound !== true){ + this.items.each(function(f){ + Ext.destroy(f); + }); + Ext.destroy(this.el); } + this.items.clear(); this.purgeListeners(); }, @@ -60477,8 +66485,9 @@ myFormPanel.getForm().submit({ * @return {BasicForm} this */ submit : function(options){ + options = options || {}; if(this.standardSubmit){ - var v = this.isValid(); + var v = options.clientValidation === false || this.isValid(); if(v){ var el = this.el.dom; if(this.url && Ext.isEmpty(el.action)){ @@ -60511,11 +66520,22 @@ myFormPanel.getForm().submit({ */ updateRecord : function(record){ record.beginEdit(); - var fs = record.fields; + var fs = record.fields, + field, + value; fs.each(function(f){ - var field = this.findField(f.name); + field = this.findField(f.name); if(field){ - record.set(f.name, field.getValue()); + value = field.getValue(); + if (Ext.type(value) !== false && value.getGroupValue) { + value = value.getGroupValue(); + } else if ( field.eachItem ) { + value = []; + field.eachItem(function(item){ + value.push(item.getValue()); + }); + } + record.set(f.name, value); } }, this); record.endEdit(); @@ -60536,6 +66556,12 @@ myFormPanel.getForm().submit({ // private beforeAction : function(action){ + // Call HtmlEditor's syncValue before actions + this.items.each(function(f){ + if(f.isFormField && f.syncValue){ + f.syncValue(); + } + }); var o = action.options; if(o.waitMsg){ if(this.waitMsgTarget === true){ @@ -60581,15 +66607,25 @@ myFormPanel.getForm().submit({ * {@link Ext.grid.Column#dataIndex dataIndex}, {@link Ext.form.Field#getName name or hiddenName}). * @return Field */ - findField : function(id){ + findField : function(id) { var field = this.items.get(id); - if(!Ext.isObject(field)){ - this.items.each(function(f){ - if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){ - field = f; - return false; + + if (!Ext.isObject(field)) { + //searches for the field corresponding to the given id. Used recursively for composite fields + var findMatchingField = function(f) { + if (f.isFormField) { + if (f.dataIndex == id || f.id == id || f.getName() == id) { + field = f; + return false; + } else if (f.isComposite) { + return f.items.each(findMatchingField); + } else if (f instanceof Ext.form.CheckboxGroup && f.rendered) { + return f.eachItem(findMatchingField); + } } - }); + }; + + this.items.each(findMatchingField); } return field || null; }, @@ -60601,7 +66637,7 @@ myFormPanel.getForm().submit({ * @return {BasicForm} this */ markInvalid : function(errors){ - if(Ext.isArray(errors)){ + if (Ext.isArray(errors)) { for(var i = 0, len = errors.length; i < len; i++){ var fieldError = errors[i]; var f = this.findField(fieldError.id); @@ -60609,7 +66645,7 @@ myFormPanel.getForm().submit({ f.markInvalid(fieldError.msg); } } - }else{ + } else { var field, id; for(id in errors){ if(!Ext.isFunction(errors[id]) && (field = this.findField(id))){ @@ -60617,6 +66653,7 @@ myFormPanel.getForm().submit({ } } } + return this; }, @@ -60688,12 +66725,12 @@ myFormPanel.getForm().submit({ n, key, val; - this.items.each(function(f){ - if(dirtyOnly !== true || f.isDirty()){ + this.items.each(function(f) { + if (!f.disabled && (dirtyOnly !== true || f.isDirty())) { n = f.getName(); key = o[n]; val = f.getValue(); - + if(Ext.isDefined(key)){ if(Ext.isArray(key)){ o[n].push(val); @@ -60748,7 +66785,6 @@ myFormPanel.getForm().submit({ return this; }, - /** * Removes a field from the items collection (does NOT remove its markup). * @param {Field} field @@ -60759,6 +66795,13 @@ myFormPanel.getForm().submit({ return this; }, + /** + * Removes all fields from the collection that have been destroyed. + */ + cleanDestroyed : function() { + this.items.filterBy(function(o) { return !!o.isDestroyed; }).each(this.remove, this); + }, + /** * Iterates through the {@link Ext.form.Field Field}s which have been {@link #add add}ed to this BasicForm, * checks them for an id attribute, and calls {@link Ext.form.Field#applyToMarkup} on the existing dom element with that id. @@ -60809,7 +66852,8 @@ myFormPanel.getForm().submit({ }); // back compat -Ext.BasicForm = Ext.form.BasicForm;/** +Ext.BasicForm = Ext.form.BasicForm; +/** * @class Ext.form.FormPanel * @extends Ext.Panel *Standard form container.
@@ -61006,12 +67050,7 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { // private beforeDestroy : function(){ this.stopMonitoring(); - /* - * Don't move this behaviour to BasicForm because it can be used - * on it's own. - */ - Ext.destroy(this.form); - this.form.items.clear(); + this.form.destroy(true); Ext.FormPanel.superclass.beforeDestroy.call(this); }, @@ -61072,16 +67111,20 @@ Ext.FormPanel = Ext.extend(Ext.Panel, { }, // private - processRemove : function(c){ - // If a single form Field, remove it - if(this.isField(c)){ - this.form.remove(c); - // If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields. - }else if(c.findBy){ - var isDestroyed = function(o) { - return !!o.isDestroyed; + processRemove: function(c){ + if(!this.destroying){ + // If a single form Field, remove it + if(this.isField(c)){ + this.form.remove(c); + // If a Container, its already destroyed by the time it gets here. Remove any references to destroyed fields. + }else if (c.findBy){ + Ext.each(c.findBy(this.isField), this.form.remove, this.form); + /* + * This isn't the most efficient way of getting rid of the items, however it's the most + * correct, which in this case is most important. + */ + this.form.cleanDestroyed(); } - this.form.items.filterBy(isDestroyed, this.form).each(this.form.remove, this.form); } }, @@ -61232,7 +67275,7 @@ Ext.form.FieldSet = Ext.extend(Ext.Panel, { * If true is specified, the default DomHelper config object used to create the element * is:
+ * */ /** * @cfg {String} checkboxName The name to assign to the fieldset's checkbox if {@link #checkboxToggle} = true @@ -61248,7 +67291,7 @@ Ext.form.FieldSet = Ext.extend(Ext.Panel, { * @cfg {Number} labelWidth The width of labels. This property cascades to child containers. */ /** - * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see + * @cfg {String} itemCls A css class to apply to the x-form-item of fields (see * {@link Ext.layout.FormLayout}.{@link Ext.layout.FormLayout#fieldTpl fieldTpl} for details). * This property cascades to child containers. */ @@ -61452,8 +67495,7 @@ Ext.form.FieldSet = Ext.extend(Ext.Panel, { * @hide */ }); -Ext.reg('fieldset', Ext.form.FieldSet); -/** +Ext.reg('fieldset', Ext.form.FieldSet);/** * @class Ext.form.HtmlEditor * @extends Ext.form.Field * Provides a lightweight HTML Editor component. Some toolbar features are not supported by Safari and will be @@ -61622,7 +67664,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @param {Boolean} sourceEdit True if source edit, false if standard editing. */ 'editmodechange' - ) + ); + Ext.form.HtmlEditor.superclass.initComponent.call(this); }, // private @@ -61804,13 +67847,13 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { }, this); } - // stop form submits this.mon(tb.el, 'click', function(e){ e.preventDefault(); }); this.tb = tb; + this.tb.doLayout(); }, onDisable: function(){ @@ -61827,7 +67870,11 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { Ext.form.HtmlEditor.superclass.setReadOnly.call(this, readOnly); if(this.initialized){ - this.setDesignMode(!readOnly); + if(Ext.isIE){ + this.getEditorBody().contentEditable = !readOnly; + }else{ + this.setDesignMode(!readOnly); + } var bd = this.getEditorBody(); if(bd){ bd.style.cursor = this.readOnly ? 'default' : 'text'; @@ -61844,7 +67891,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * Note: IE8-Standards has unwanted scroller behavior, so the default meta tag forces IE7 compatibility */ getDocMarkup : function(){ - return ''; + var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2; + return String.format('', this.iframePad, h); }, // private @@ -61870,7 +67918,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.el.dom.setAttribute('tabIndex', -1); this.el.addClass('x-hidden'); if(Ext.isIE){ // fix IE 1px bogus margin - this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;') + this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;'); } this.wrap = this.el.wrap({ cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'} @@ -61896,6 +67944,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { iframe.name = Ext.id(); iframe.frameBorder = '0'; iframe.style.overflow = 'auto'; + iframe.src = Ext.SSL_SECURE_URL; this.wrap.dom.appendChild(iframe); this.iframe = iframe; @@ -61949,8 +67998,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * set current design mode. To enable, mode can be true or 'on', off otherwise */ setDesignMode : function(mode){ - var doc ; - if(doc = this.getDoc()){ + var doc = this.getDoc(); + if (doc) { if(this.readOnly){ mode = false; } @@ -62005,27 +68054,38 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @param {Boolean} sourceEdit (optional) True for source edit, false for standard */ toggleSourceEdit : function(sourceEditMode){ - if(sourceEditMode === undefined){ + var iframeHeight, + elHeight; + + if (sourceEditMode === undefined) { sourceEditMode = !this.sourceEditMode; } this.sourceEditMode = sourceEditMode === true; var btn = this.tb.getComponent('sourceedit'); - if(btn.pressed !== this.sourceEditMode){ + if (btn.pressed !== this.sourceEditMode) { btn.toggle(this.sourceEditMode); - if(!btn.xtbHidden){ + if (!btn.xtbHidden) { return; } } - if(this.sourceEditMode){ + if (this.sourceEditMode) { + // grab the height of the containing panel before we hide the iframe + this.previousSize = this.getSize(); + + iframeHeight = Ext.get(this.iframe).getHeight(); + this.disableItems(true); this.syncValue(); this.iframe.className = 'x-hidden'; this.el.removeClass('x-hidden'); this.el.dom.removeAttribute('tabIndex'); this.el.focus(); - }else{ - if(this.initialized){ + this.el.dom.style.height = iframeHeight + 'px'; + } + else { + elHeight = parseInt(this.el.dom.style.height, 10); + if (this.initialized) { this.disableItems(this.readOnly); } this.pushValue(); @@ -62033,17 +68093,16 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.el.addClass('x-hidden'); this.el.dom.setAttribute('tabIndex', -1); this.deferFocus(); - } - var lastSize = this.lastSize; - if(lastSize){ - delete this.lastSize; - this.setSize(lastSize); + + this.setSize(this.previousSize); + delete this.previousSize; + this.iframe.style.height = elHeight + 'px'; } this.fireEvent('editmodechange', this, this.sourceEditMode); }, // private used internally - createLink : function(){ + createLink : function() { var url = prompt(this.createLinkText, this.defaultLinkValue); if(url && url != 'http:/'+'/'){ this.relayCmd('createlink', url); @@ -62141,9 +68200,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { if(Ext.isGecko){ // Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8 this.setDesignMode(false); //toggle off first - + this.setDesignMode(true); } - this.setDesignMode(true); this.fireEvent('push', this, v); } @@ -62169,7 +68227,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { //Destroying the component during/before initEditor can cause issues. try{ var dbody = this.getEditorBody(), - ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat'), + ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat', 'background-color', 'color'), doc, fn; @@ -62216,7 +68274,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { }, // private - onDestroy : function(){ + beforeDestroy : function(){ if(this.monitorTask){ Ext.TaskMgr.stop(this.monitorTask); } @@ -62236,12 +68294,7 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { this.wrap.remove(); } } - - if(this.el){ - this.el.removeAllListeners(); - this.el.remove(); - } - this.purgeListeners(); + Ext.form.HtmlEditor.superclass.beforeDestroy.call(this); }, // private @@ -62698,7 +68751,8 @@ Ext.form.HtmlEditor = Ext.extend(Ext.form.Field, { * @hide */ }); -Ext.reg('htmleditor', Ext.form.HtmlEditor);/** +Ext.reg('htmleditor', Ext.form.HtmlEditor); +/** * @class Ext.form.TimeField * @extends Ext.form.ComboBox * Provides a time input field with a time dropdown and automatic time validation. Example usage: @@ -62717,13 +68771,13 @@ new Ext.form.TimeField({ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { /** * @cfg {Date/String} minValue - * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string + * The minimum allowed time. Can be either a Javascript date object with a valid time value or a string * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined). */ minValue : undefined, /** * @cfg {Date/String} maxValue - * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string + * The maximum allowed time. Can be either a Javascript date object with a valid time value or a string * time in a valid format -- see {@link #format} and {@link #altFormats} (defaults to undefined). */ maxValue : undefined, @@ -62755,9 +68809,9 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { /** * @cfg {String} altFormats * Multiple date formats separated by "|" to try when parsing a user input value and it doesn't match the defined - * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H'). + * format (defaults to 'g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A'). */ - altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H", + altFormats : "g:ia|g:iA|g:i a|g:i A|h:i|g:i|H:i|ga|ha|gA|h a|g a|g A|gi|hi|gia|hia|g|H|gi a|hi a|giA|hiA|gi A|hi A", /** * @cfg {Number} increment * The number of minutes between each time value in the list (defaults to 15). @@ -62770,12 +68824,14 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { triggerAction: 'all', // private override typeAhead: false, - + // private - This is the date to use when generating time values in the absence of either minValue - // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an + // or maxValue. Using the current date causes DST issues on DST boundary dates, so this is an // arbitrary "safe" date that can be any date aside from DST boundary dates. initDate: '1/1/2008', + initDateFormat: 'j/n/Y', + // private initComponent : function(){ if(Ext.isDefined(this.minValue)){ @@ -62789,7 +68845,7 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { } Ext.form.TimeField.superclass.initComponent.call(this); }, - + /** * Replaces any existing {@link #minValue} with the new time and refreshes the store. * @param {Date/String} value The minimum time that can be selected @@ -62807,13 +68863,13 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { this.setLimit(value, false, initial); return this; }, - + // private generateStore: function(initial){ var min = this.minValue || new Date(this.initDate).clearTime(), max = this.maxValue || new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1), times = []; - + while(min <= max){ times.push(min.dateFormat(this.format)); min = min.add('mi', this.increment); @@ -62831,14 +68887,14 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { } if(d){ var val = new Date(this.initDate).clearTime(); - val.setHours(d.getHours(), d.getMinutes(), isMin ? 0 : 59, 0); + val.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()); this[isMin ? 'minValue' : 'maxValue'] = val; if(!initial){ this.generateStore(); } } }, - + // inherited docs getValue : function(){ var v = Ext.form.TimeField.superclass.getValue.call(this); @@ -62852,33 +68908,208 @@ Ext.form.TimeField = Ext.extend(Ext.form.ComboBox, { // private overrides validateValue : Ext.form.DateField.prototype.validateValue, - parseDate : Ext.form.DateField.prototype.parseDate, + formatDate : Ext.form.DateField.prototype.formatDate, - // private - beforeBlur : function(){ - var v = this.parseDate(this.getRawValue()); - if(v){ - this.setValue(v.dateFormat(this.format)); + parseDate: function(value) { + if (!value || Ext.isDate(value)) { + return value; } - Ext.form.TimeField.superclass.beforeBlur.call(this); - } - /** - * @cfg {Boolean} grow @hide - */ - /** - * @cfg {Number} growMin @hide - */ - /** - * @cfg {Number} growMax @hide - */ - /** - * @hide - * @method autoSize - */ + var id = this.initDate + ' ', + idf = this.initDateFormat + ' ', + v = Date.parseDate(id + value, idf + this.format), // *** handle DST. note: this.format is a TIME-only format + af = this.altFormats; + + if (!v && af) { + if (!this.altFormatsArray) { + this.altFormatsArray = af.split("|"); + } + for (var i = 0, afa = this.altFormatsArray, len = afa.length; i < len && !v; i++) { + v = Date.parseDate(id + value, idf + afa[i]); + } + } + + return v; + } }); Ext.reg('timefield', Ext.form.TimeField);/** + * @class Ext.form.SliderField + * @extends Ext.form.Field + * Wraps a {@link Ext.slider.MultiSlider Slider} so it can be used as a form field. + * @constructor + * Creates a new SliderField + * @param {Object} config Configuration options. Note that you can pass in any slider configuration options, as well as + * as any field configuration options. + * @xtype sliderfield + */ +Ext.form.SliderField = Ext.extend(Ext.form.Field, { + + /** + * @cfg {Boolean} useTips + * True to use an Ext.slider.Tip to display tips for the value. Defaults to true. + */ + useTips : true, + + /** + * @cfg {Function} tipText + * A function used to display custom text for the slider tip. Defaults to null, which will + * use the default on the plugin. + */ + tipText : null, + + // private override + actionMode: 'wrap', + + /** + * Initialize the component. + * @private + */ + initComponent : function() { + var cfg = Ext.copyTo({ + id: this.id + '-slider' + }, this.initialConfig, ['vertical', 'minValue', 'maxValue', 'decimalPrecision', 'keyIncrement', 'increment', 'clickToChange', 'animate']); + + // only can use it if it exists. + if (this.useTips) { + var plug = this.tipText ? {getText: this.tipText} : {}; + cfg.plugins = [new Ext.slider.Tip(plug)]; + } + this.slider = new Ext.Slider(cfg); + Ext.form.SliderField.superclass.initComponent.call(this); + }, + + /** + * Set up the hidden field + * @param {Object} ct The container to render to. + * @param {Object} position The position in the container to render to. + * @private + */ + onRender : function(ct, position){ + this.autoCreate = { + id: this.id, + name: this.name, + type: 'hidden', + tag: 'input' + }; + Ext.form.SliderField.superclass.onRender.call(this, ct, position); + this.wrap = this.el.wrap({cls: 'x-form-field-wrap'}); + this.resizeEl = this.positionEl = this.wrap; + this.slider.render(this.wrap); + }, + + /** + * Ensure that the slider size is set automatically when the field resizes. + * @param {Object} w The width + * @param {Object} h The height + * @param {Object} aw The adjusted width + * @param {Object} ah The adjusted height + * @private + */ + onResize : function(w, h, aw, ah){ + Ext.form.SliderField.superclass.onResize.call(this, w, h, aw, ah); + this.slider.setSize(w, h); + }, + + /** + * Initialize any events for this class. + * @private + */ + initEvents : function(){ + Ext.form.SliderField.superclass.initEvents.call(this); + this.slider.on('change', this.onChange, this); + }, + + /** + * Utility method to set the value of the field when the slider changes. + * @param {Object} slider The slider object. + * @param {Object} v The new value. + * @private + */ + onChange : function(slider, v){ + this.setValue(v, undefined, true); + }, + + /** + * Enable the slider when the field is enabled. + * @private + */ + onEnable : function(){ + Ext.form.SliderField.superclass.onEnable.call(this); + this.slider.enable(); + }, + + /** + * Disable the slider when the field is disabled. + * @private + */ + onDisable : function(){ + Ext.form.SliderField.superclass.onDisable.call(this); + this.slider.disable(); + }, + + /** + * Ensure the slider is destroyed when the field is destroyed. + * @private + */ + beforeDestroy : function(){ + Ext.destroy(this.slider); + Ext.form.SliderField.superclass.beforeDestroy.call(this); + }, + + /** + * If a side icon is shown, do alignment to the slider + * @private + */ + alignErrorIcon : function(){ + this.errorIcon.alignTo(this.slider.el, 'tl-tr', [2, 0]); + }, + + /** + * Sets the minimum field value. + * @param {Number} v The new minimum value. + * @return {Ext.form.SliderField} this + */ + setMinValue : function(v){ + this.slider.setMinValue(v); + return this; + }, + + /** + * Sets the maximum field value. + * @param {Number} v The new maximum value. + * @return {Ext.form.SliderField} this + */ + setMaxValue : function(v){ + this.slider.setMaxValue(v); + return this; + }, + + /** + * Sets the value for this field. + * @param {Number} v The new value. + * @param {Boolean} animate (optional) Whether to animate the transition. If not specified, it will default to the animate config. + * @return {Ext.form.SliderField} this + */ + setValue : function(v, animate, /* private */ silent){ + // silent is used if the setValue method is invoked by the slider + // which means we don't need to set the value on the slider. + if(!silent){ + this.slider.setValue(v, animate); + } + return Ext.form.SliderField.superclass.setValue.call(this, this.slider.getValue()); + }, + + /** + * Gets the current value for this field. + * @return {Number} The current value. + */ + getValue : function(){ + return this.slider.getValue(); + } +}); + +Ext.reg('sliderfield', Ext.form.SliderField);/** * @class Ext.form.Label * @extends Ext.BoxComponent * Basic Label field. @@ -63044,6 +69275,11 @@ Ext.form.Action.prototype = { * during the time the action is being processed. */ +/** + * @cfg {Boolean} submitEmptyText If set to true, the emptyText value will be sent with the form + * when it is submitted. Defaults to true. + */ + /** * The type of action this Action instance performs. * Currently only "submit" and "load" are supported. @@ -63138,6 +69374,14 @@ buttons: [{ return this.result; }, + decodeResponse: function(response) { + try { + return Ext.decode(response.responseText); + } catch(e) { + return false; + } + }, + // utility functions used internally getUrl : function(appendParams){ var url = this.options.url || this.form.url || this.form.el.dom.action; @@ -63262,10 +69506,25 @@ Ext.extend(Ext.form.Action.Submit, Ext.form.Action, { // private run : function(){ - var o = this.options; - var method = this.getMethod(); - var isGet = method == 'GET'; + var o = this.options, + method = this.getMethod(), + isGet = method == 'GET'; if(o.clientValidation === false || this.form.isValid()){ + if (o.submitEmptyText === false) { + var fields = this.form.items, + emptyFields = [], + setupEmptyFields = function(f){ + if (f.el.getValue() == f.emptyText) { + emptyFields.push(f); + f.el.dom.value = ""; + } + if(f.isComposite && f.rendered){ + f.items.each(setupEmptyFields); + } + }; + + fields.each(setupEmptyFields); + } Ext.Ajax.request(Ext.apply(this.createCallback(o), { form:this.form.el.dom, url:this.getUrl(isGet), @@ -63274,6 +69533,13 @@ Ext.extend(Ext.form.Action.Submit, Ext.form.Action, { params:!isGet ? this.getParams() : null, isUpload: this.form.fileUpload })); + if (o.submitEmptyText === false) { + Ext.each(emptyFields, function(f) { + if (f.applyEmptyText) { + f.applyEmptyText(); + } + }); + } }else if (o.clientValidation !== false){ // client validation failed this.failureType = Ext.form.Action.CLIENT_INVALID; this.form.afterAction(this, false); @@ -63313,7 +69579,7 @@ Ext.extend(Ext.form.Action.Submit, Ext.form.Action, { errors : errors }; } - return Ext.decode(response.responseText); + return this.decodeResponse(response); } }); @@ -63419,7 +69685,7 @@ Ext.extend(Ext.form.Action.Load, Ext.form.Action, { data : data }; } - return Ext.decode(response.responseText); + return this.decodeResponse(response); } }); @@ -63533,7 +69799,7 @@ Ext.form.Action.DirectLoad = Ext.extend(Ext.form.Action.Load, { this.result = result; return result; }, - + success : function(response, trans){ if(trans.type == Ext.Direct.exceptions.SERVER){ response = {}; @@ -63665,7 +69931,7 @@ Ext.form.Action.DirectSubmit = Ext.extend(Ext.form.Action.Submit, { this.result = result; return result; }, - + success : function(response, trans){ if(trans.type == Ext.Direct.exceptions.SERVER){ response = {}; @@ -63701,7 +69967,7 @@ Ext.apply(Ext.form.VTypes, { timeMask: /[\d\s:amp]/i }); * - * Another example: + * Another example: ** {tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'} - *// custom Vtype for vtype:'IPAddress' Ext.apply(Ext.form.VTypes, { @@ -63718,7 +69984,7 @@ Ext.form.VTypes = function(){ // closure these in so they are only created once. var alpha = /^[a-zA-Z_]+$/, alphanum = /^[a-zA-Z0-9_]+$/, - email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/, + email = /^(\w+)([\-+.\'][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/, url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i; // All these messages and functions are configurable @@ -63727,7 +69993,7 @@ Ext.form.VTypes = function(){ * The function used to validate email addresses. Note that this is a very basic validation -- complete * validation per the email RFC specifications is very complex and beyond the scope of this class, although * this function can be overridden if a more comprehensive validation scheme is desired. See the validation - * section of the Wikipedia article on email addresses + * section of the Wikipedia article on email addresses * for additional information. This implementation is intended to validate the following emails: * 'barney@example.de', 'barney.rubble@example.com', 'barney-rubble@example.coop', 'barney+rubble@example.com' * . @@ -63744,12 +70010,12 @@ Ext.form.VTypes = function(){ */ 'emailText' : 'This field should be an e-mail address in the format "user@example.com"', /** - * The keystroke filter mask to be applied on email input. See the {@link #email} method for + * The keystroke filter mask to be applied on email input. See the {@link #email} method for * information about more complex email validation. Defaults to: - * /[a-z0-9_\.\-@]/i + * /[a-z0-9_\.\-\+\'@]/i * @type RegExp */ - 'emailMask' : /[a-z0-9_\.\-@]/i, + 'emailMask' : /[a-z0-9_\.\-\+\'@]/i, /** * The function used to validate URLs @@ -63765,7 +70031,7 @@ Ext.form.VTypes = function(){ * @type String */ 'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"', - + /** * The function used to validate alpha values * @param {String} value The value @@ -63808,7 +70074,8 @@ Ext.form.VTypes = function(){ */ 'alphanumMask' : /[a-z0-9_]/i }; -}();/** +}(); +/** * @class Ext.grid.GridPanel * @extends Ext.Panel *This class represents the primary interface of a component based grid control to represent data @@ -63818,9 +70085,9 @@ Ext.form.VTypes = function(){ *
*- {@link Ext.grid.ColumnModel Column model} : Column makeup *
- *- {@link Ext.grid.GridView View} : Encapsulates the user interface + *
- {@link Ext.grid.GridView View} : Encapsulates the user interface *
- *- {@link Ext.grid.AbstractSelectionModel selection model} : Selection behavior + *
- {@link Ext.grid.AbstractSelectionModel selection model} : Selection behavior *
*Example usage:
@@ -63846,7 +70113,7 @@ var grid = new Ext.grid.GridPanel({ header: 'Last Updated', width: 135, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y' } - ], + ] }), {@link #viewConfig}: { {@link Ext.grid.GridView#forceFit forceFit}: true, @@ -63901,21 +70168,25 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { *See {@link #autoExpandMax} and {@link #autoExpandMin} also.
*/ autoExpandColumn : false, + /** * @cfg {Number} autoExpandMax The maximum width the {@link #autoExpandColumn} * can have (if enabled). Defaults to 1000. */ autoExpandMax : 1000, + /** * @cfg {Number} autoExpandMin The minimum width the {@link #autoExpandColumn} * can have (if enabled). Defaults to 50. */ autoExpandMin : 50, + /** * @cfg {Boolean} columnLines true to add css for column separation lines. * Default is false. */ columnLines : false, + /** * @cfg {Object} cm Shorthand for {@link #colModel}. */ @@ -63939,12 +70210,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * {0} is replaced with the number of selected rows. */ ddText : '{0} selected row{1}', + /** * @cfg {Boolean} deferRowRenderDefaults to true to enable deferred row rendering.
*This allows the GridPanel to be initially rendered empty, with the expensive update of the row * structure deferred so that layouts with GridPanels appear more quickly.
*/ deferRowRender : true, + /** * @cfg {Boolean} disableSelectiontrue to disable selections in the grid. Defaults to false.
*Ignored if a {@link #selModel SelectionModel} is specified.
@@ -63958,11 +70231,13 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * with the {@link #enableHdMenu header menu}. */ enableColumnHide : true, + /** * @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false * to turn off column reordering via drag drop. */ enableColumnMove : true, + /** * @cfg {Boolean} enableDragDropEnables dragging of the selected rows of the GridPanel. Defaults to false.
*Setting this to true causes this GridPanel's {@link #getView GridView} to @@ -63975,10 +70250,12 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.
*/ enableDragDrop : false, + /** * @cfg {Boolean} enableHdMenu Defaults to true to enable the drop down button for menu in the headers. */ enableHdMenu : true, + /** * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults tofalse. */ @@ -63987,6 +70264,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * loading. Defaults tofalse. */ loadMask : false, + /** * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on. */ @@ -63994,6 +70272,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25. */ minColumnWidth : 25, + /** * @cfg {Object} sm Shorthand for {@link #selModel}. */ @@ -64012,11 +70291,13 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * modifier, or which uses a CSS selector of higher specificity. */ stripeRows : false, + /** * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true * for GridPanel, but false for EditorGridPanel. */ trackMouseOver : true, + /** * @cfg {Array} stateEvents * An array of events that, when fired, should trigger this component to save its state. @@ -64029,20 +70310,21 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * Component state. */ stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'], + /** * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set * before a call to {@link Ext.Component#render render()}. */ view : null, - + /** * @cfg {Array} bubbleEvents *An array of events that, when fired, should be bubbled to any parent container. - * See {@link Ext.util.Observable#enableBubble}. + * See {@link Ext.util.Observable#enableBubble}. * Defaults to []. */ bubbleEvents: [], - + /** * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of * the config options available for {@link Ext.grid.GridView} can be specified here. This option @@ -64051,14 +70333,15 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { // private rendered : false, + // private viewReady : false, // private - initComponent : function(){ + initComponent : function() { Ext.grid.GridPanel.superclass.initComponent.call(this); - if(this.columnLines){ + if (this.columnLines) { this.cls = (this.cls || '') + ' x-grid-with-col-lines'; } // override any provided value since it isn't valid @@ -64169,7 +70452,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @param {Ext.EventObject} e */ 'headermousedown', - + /** * @event groupmousedown * Fires before a group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}. @@ -64179,7 +70462,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @param {Ext.EventObject} e */ 'groupmousedown', - + /** * @event rowbodymousedown * Fires before the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. @@ -64188,7 +70471,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @param {Ext.EventObject} e */ 'rowbodymousedown', - + /** * @event containermousedown * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row. @@ -64289,7 +70572,7 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.EventObject} e */ 'containerdblclick', - + /** * @event rowbodyclick * Fires when the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. @@ -64306,7 +70589,7 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.EventObject} e */ 'rowbodydblclick', - + /** * @event rowcontextmenu * Fires when a row is right clicked @@ -64401,7 +70684,7 @@ function(grid, rowIndex, columnIndex, e) { 'reconfigure', /** * @event viewready - * Fires when the grid view is available (use this for selecting a default row). + * Fires when the grid view is available (use this for selecting a default row). * @param {Grid} this */ 'viewready' @@ -64453,18 +70736,21 @@ function(grid, rowIndex, columnIndex, e) { store = this.store, s, c, - oldIndex; - + colIndex; + if(cs){ for(var i = 0, len = cs.length; i < len; i++){ s = cs[i]; c = cm.getColumnById(s.id); if(c){ - c.hidden = s.hidden; - c.width = s.width; - oldIndex = cm.getIndexById(s.id); - if(oldIndex != i){ - cm.moveColumn(oldIndex, i); + colIndex = cm.getIndexById(s.id); + cm.setState(colIndex, { + hidden: s.hidden, + width: s.width, + sortable: s.sortable + }); + if(colIndex != i){ + cm.moveColumn(colIndex, i); } } } @@ -64495,7 +70781,7 @@ function(grid, rowIndex, columnIndex, e) { store = this.store, ss, gs; - + for(var i = 0, c; (c = this.colModel.config[i]); i++){ o.columns[i] = { id: c.id, @@ -64504,6 +70790,9 @@ function(grid, rowIndex, columnIndex, e) { if(c.hidden){ o.columns[i].hidden = true; } + if(c.sortable){ + o.columns[i].sortable = true; + } } if(store){ ss = store.getSortState(); @@ -64525,9 +70814,12 @@ function(grid, rowIndex, columnIndex, e) { Ext.grid.GridPanel.superclass.afterRender.call(this); var v = this.view; this.on('bodyresize', v.layout, v); - v.layout(); + v.layout(true); if(this.deferRowRender){ - v.afterRender.defer(10, this.view); + if (!this.deferRowRenderTask){ + this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view); + } + this.deferRowRenderTask.delay(10); }else{ v.afterRender(); } @@ -64568,6 +70860,9 @@ function(grid, rowIndex, columnIndex, e) { // private onDestroy : function(){ + if (this.deferRowRenderTask && this.deferRowRenderTask.cancel){ + this.deferRowRenderTask.cancel(); + } if(this.rendered){ Ext.destroy(this.view, this.loadMask); }else if(this.store && this.store.autoDestroy){ @@ -64580,31 +70875,6 @@ function(grid, rowIndex, columnIndex, e) { // private processEvent : function(name, e){ - this.fireEvent(name, e); - var t = e.getTarget(), - v = this.view, - header = v.findHeaderIndex(t); - - if(header !== false){ - this.fireEvent('header' + name, this, header, e); - }else{ - var row = v.findRowIndex(t), - cell, - body; - if(row !== false){ - this.fireEvent('row' + name, this, row, e); - cell = v.findCellIndex(t); - body = v.findRowBody(t); - if(cell !== false){ - this.fireEvent('cell' + name, this, row, cell, e); - } - if(body){ - this.fireEvent('rowbody' + name, this, row, e); - } - }else{ - this.fireEvent('container' + name, this, e); - } - } this.view.processEvent(name, e); }, @@ -64630,11 +70900,12 @@ function(grid, rowIndex, columnIndex, e) { // private walkCells : function(row, col, step, fn, scope){ - var cm = this.colModel, - clen = cm.getColumnCount(), - ds = this.store, - rlen = ds.getCount(), + var cm = this.colModel, + clen = cm.getColumnCount(), + ds = this.store, + rlen = ds.getCount(), first = true; + if(step < 0){ if(col < 0){ row--; @@ -64675,14 +70946,6 @@ function(grid, rowIndex, columnIndex, e) { return null; }, - // private - onResize : function(){ - Ext.grid.GridPanel.superclass.onResize.apply(this, arguments); - if(this.viewReady){ - this.view.layout(); - } - }, - /** * Returns the grid's underlying element. * @return {Element} The element @@ -64728,10 +70991,11 @@ function(grid, rowIndex, columnIndex, e) { * Returns the grid's GridView object. * @return {Ext.grid.GridView} The grid view */ - getView : function(){ - if(!this.view){ + getView : function() { + if (!this.view) { this.view = new Ext.grid.GridView(this.viewConfig); } + return this.view; }, /** @@ -64743,129 +71007,129 @@ function(grid, rowIndex, columnIndex, e) { return String.format(this.ddText, count, count == 1 ? '' : 's'); } - /** - * @cfg {String/Number} activeItem - * @hide + /** + * @cfg {String/Number} activeItem + * @hide */ - /** - * @cfg {Boolean} autoDestroy - * @hide + /** + * @cfg {Boolean} autoDestroy + * @hide */ - /** - * @cfg {Object/String/Function} autoLoad - * @hide + /** + * @cfg {Object/String/Function} autoLoad + * @hide */ - /** - * @cfg {Boolean} autoWidth - * @hide + /** + * @cfg {Boolean} autoWidth + * @hide */ - /** - * @cfg {Boolean/Number} bufferResize - * @hide + /** + * @cfg {Boolean/Number} bufferResize + * @hide */ - /** - * @cfg {String} defaultType - * @hide + /** + * @cfg {String} defaultType + * @hide */ - /** - * @cfg {Object} defaults - * @hide + /** + * @cfg {Object} defaults + * @hide */ - /** - * @cfg {Boolean} hideBorders - * @hide + /** + * @cfg {Boolean} hideBorders + * @hide */ - /** - * @cfg {Mixed} items - * @hide + /** + * @cfg {Mixed} items + * @hide */ - /** - * @cfg {String} layout - * @hide + /** + * @cfg {String} layout + * @hide */ - /** - * @cfg {Object} layoutConfig - * @hide + /** + * @cfg {Object} layoutConfig + * @hide */ - /** - * @cfg {Boolean} monitorResize - * @hide + /** + * @cfg {Boolean} monitorResize + * @hide */ - /** - * @property items - * @hide + /** + * @property items + * @hide */ - /** - * @method add - * @hide + /** + * @method add + * @hide */ - /** - * @method cascade - * @hide + /** + * @method cascade + * @hide */ - /** - * @method doLayout - * @hide + /** + * @method doLayout + * @hide */ - /** - * @method find - * @hide + /** + * @method find + * @hide */ - /** - * @method findBy - * @hide + /** + * @method findBy + * @hide */ - /** - * @method findById - * @hide + /** + * @method findById + * @hide */ - /** - * @method findByType - * @hide + /** + * @method findByType + * @hide */ - /** - * @method getComponent - * @hide + /** + * @method getComponent + * @hide */ - /** - * @method getLayout - * @hide + /** + * @method getLayout + * @hide */ - /** - * @method getUpdater - * @hide + /** + * @method getUpdater + * @hide */ - /** - * @method insert - * @hide + /** + * @method insert + * @hide */ - /** - * @method load - * @hide + /** + * @method load + * @hide */ - /** - * @method remove - * @hide + /** + * @method remove + * @hide */ - /** - * @event add - * @hide + /** + * @event add + * @hide */ - /** - * @event afterlayout - * @hide + /** + * @event afterlayout + * @hide */ - /** - * @event beforeadd - * @hide + /** + * @event beforeadd + * @hide */ - /** - * @event beforeremove - * @hide + /** + * @event beforeremove + * @hide */ - /** - * @event remove - * @hide + /** + * @event remove + * @hide */ @@ -64926,6 +71190,388 @@ function(grid, rowIndex, columnIndex, e) { */ }); Ext.reg('grid', Ext.grid.GridPanel);/** + * @class Ext.grid.PivotGrid + * @extends Ext.grid.GridPanel + *
The PivotGrid component enables rapid summarization of large data sets. It provides a way to reduce a large set of + * data down into a format where trends and insights become more apparent. A classic example is in sales data; a company + * will often have a record of all sales it makes for a given period - this will often encompass thousands of rows of + * data. The PivotGrid allows you to see how well each salesperson performed, which cities generate the most revenue, + * how products perform between cities and so on.
+ *A PivotGrid is composed of two axes (left and top), one {@link #measure} and one {@link #aggregator aggregation} + * function. Each axis can contain one or more {@link #dimension}, which are ordered into a hierarchy. Dimensions on the + * left axis can also specify a width. Each dimension in each axis can specify its sort ordering, defaulting to "ASC", + * and must specify one of the fields in the {@link Ext.data.Record Record} used by the PivotGrid's + * {@link Ext.data.Store Store}.
+
+ *+// This is the record representing a single sale +var SaleRecord = Ext.data.Record.create([ + {name: 'person', type: 'string'}, + {name: 'product', type: 'string'}, + {name: 'city', type: 'string'}, + {name: 'state', type: 'string'}, + {name: 'year', type: 'int'}, + {name: 'value', type: 'int'} +]); + +// A simple store that loads SaleRecord data from a url +var myStore = new Ext.data.Store({ + url: 'data.json', + autoLoad: true, + reader: new Ext.data.JsonReader({ + root: 'rows', + idProperty: 'id' + }, SaleRecord) +}); + +// Create the PivotGrid itself, referencing the store +var pivot = new Ext.grid.PivotGrid({ + store : myStore, + aggregator: 'sum', + measure : 'value', + + leftAxis: [ + { + width: 60, + dataIndex: 'product' + }, + { + width: 120, + dataIndex: 'person', + direction: 'DESC' + } + ], + + topAxis: [ + { + dataIndex: 'year' + } + ] +}); +The specified {@link #measure} is the field from SaleRecord that is extracted from each combination + * of product and person (on the left axis) and year on the top axis. There may be several SaleRecords in the + * data set that share this combination, so an array of measure fields is produced. This array is then + * aggregated using the {@link #aggregator} function.
+ *The default aggregator function is sum, which simply adds up all of the extracted measure values. Other + * built-in aggregator functions are count, avg, min and max. In addition, you can specify your own function. + * In this example we show the code used to sum the measures, but you can return any value you like. See + * {@link #aggregator} for more details.
+
+ *+new Ext.grid.PivotGrid({ + aggregator: function(records, measure) { + var length = records.length, + total = 0, + i; + + for (i = 0; i < length; i++) { + total += records[i].get(measure); + } + + return total; + }, + + renderer: function(value) { + return Math.round(value); + }, + + //your normal config here +}); +Renderers
+ *PivotGrid optionally accepts a {@link #renderer} function which can modify the data in each cell before it + * is rendered. The renderer is passed the value that would usually be placed in the cell and is expected to return + * the new value. For example let's imagine we had height data expressed as a decimal - here's how we might use a + * renderer to display the data in feet and inches notation:
+
+ *+new Ext.grid.PivotGrid({ + //in each case the value is a decimal number of feet + renderer : function(value) { + var feet = Math.floor(value), + inches = Math.round((value - feet) * 12); + + return String.format("{0}' {1}\"", feet, inches); + }, + //normal config here +}); +Reconfiguring
+ *All aspects PivotGrid's configuration can be updated at runtime. It is easy to change the {@link #setMeasure measure}, + * {@link #setAggregator aggregation function}, {@link #setLeftAxis left} and {@link #setTopAxis top} axes and refresh the grid.
+ *In this case we reconfigure the PivotGrid to have city and year as the top axis dimensions, rendering the average sale + * value into the cells:
+
+ *+//the left axis can also be changed +pivot.topAxis.setDimensions([ + {dataIndex: 'city', direction: 'DESC'}, + {dataIndex: 'year', direction: 'ASC'} +]); + +pivot.setMeasure('value'); +pivot.setAggregator('avg'); + +pivot.view.refresh(true); +See the {@link Ext.grid.PivotAxis PivotAxis} documentation for further detail on reconfiguring axes.
+ */ +Ext.grid.PivotGrid = Ext.extend(Ext.grid.GridPanel, { + + /** + * @cfg {String|Function} aggregator The aggregation function to use to combine the measures extracted + * for each dimension combination. Can be any of the built-in aggregators (sum, count, avg, min, max). + * Can also be a function which accepts two arguments (an array of Records to aggregate, and the measure + * to aggregate them on) and should return a String. + */ + aggregator: 'sum', + + /** + * @cfg {Function} renderer Optional renderer to pass values through before they are rendered to the dom. This + * gives an opportunity to modify cell contents after the value has been computed. + */ + renderer: undefined, + + /** + * @cfg {String} measure The field to extract from each Record when pivoting around the two axes. See the class + * introduction docs for usage + */ + + /** + * @cfg {Array|Ext.grid.PivotAxis} leftAxis Either and array of {@link #dimension} to use on the left axis, or + * a {@link Ext.grid.PivotAxis} instance. If an array is passed, it is turned into a PivotAxis internally. + */ + + /** + * @cfg {Array|Ext.grid.PivotAxis} topAxis Either and array of {@link #dimension} to use on the top axis, or + * a {@link Ext.grid.PivotAxis} instance. If an array is passed, it is turned into a PivotAxis internally. + */ + + //inherit docs + initComponent: function() { + Ext.grid.PivotGrid.superclass.initComponent.apply(this, arguments); + + this.initAxes(); + + //no resizing of columns is allowed yet in PivotGrid + this.enableColumnResize = false; + + this.viewConfig = Ext.apply(this.viewConfig || {}, { + forceFit: true + }); + + //TODO: dummy col model that is never used - GridView is too tightly integrated with ColumnModel + //in 3.x to remove this altogether. + this.colModel = new Ext.grid.ColumnModel({}); + }, + + /** + * Returns the function currently used to aggregate the records in each Pivot cell + * @return {Function} The current aggregator function + */ + getAggregator: function() { + if (typeof this.aggregator == 'string') { + return Ext.grid.PivotAggregatorMgr.types[this.aggregator]; + } else { + return this.aggregator; + } + }, + + /** + * Sets the function to use when aggregating data for each cell. + * @param {String|Function} aggregator The new aggregator function or named function string + */ + setAggregator: function(aggregator) { + this.aggregator = aggregator; + }, + + /** + * Sets the field name to use as the Measure in this Pivot Grid + * @param {String} measure The field to make the measure + */ + setMeasure: function(measure) { + this.measure = measure; + }, + + /** + * Sets the left axis of this pivot grid. Optionally refreshes the grid afterwards. + * @param {Ext.grid.PivotAxis} axis The pivot axis + * @param {Boolean} refresh True to immediately refresh the grid and its axes (defaults to false) + */ + setLeftAxis: function(axis, refresh) { + /** + * The configured {@link Ext.grid.PivotAxis} used as the left Axis for this Pivot Grid + * @property leftAxis + * @type Ext.grid.PivotAxis + */ + this.leftAxis = axis; + + if (refresh) { + this.view.refresh(); + } + }, + + /** + * Sets the top axis of this pivot grid. Optionally refreshes the grid afterwards. + * @param {Ext.grid.PivotAxis} axis The pivot axis + * @param {Boolean} refresh True to immediately refresh the grid and its axes (defaults to false) + */ + setTopAxis: function(axis, refresh) { + /** + * The configured {@link Ext.grid.PivotAxis} used as the top Axis for this Pivot Grid + * @property topAxis + * @type Ext.grid.PivotAxis + */ + this.topAxis = axis; + + if (refresh) { + this.view.refresh(); + } + }, + + /** + * @private + * Creates the top and left axes. Should usually only need to be called once from initComponent + */ + initAxes: function() { + var PivotAxis = Ext.grid.PivotAxis; + + if (!(this.leftAxis instanceof PivotAxis)) { + this.setLeftAxis(new PivotAxis({ + orientation: 'vertical', + dimensions : this.leftAxis || [], + store : this.store + })); + }; + + if (!(this.topAxis instanceof PivotAxis)) { + this.setTopAxis(new PivotAxis({ + orientation: 'horizontal', + dimensions : this.topAxis || [], + store : this.store + })); + }; + }, + + /** + * @private + * @return {Array} 2-dimensional array of cell data + */ + extractData: function() { + var records = this.store.data.items, + recCount = records.length, + cells = [], + record, i, j, k; + + if (recCount == 0) { + return []; + } + + var leftTuples = this.leftAxis.getTuples(), + leftCount = leftTuples.length, + topTuples = this.topAxis.getTuples(), + topCount = topTuples.length, + aggregator = this.getAggregator(); + + for (i = 0; i < recCount; i++) { + record = records[i]; + + for (j = 0; j < leftCount; j++) { + cells[j] = cells[j] || []; + + if (leftTuples[j].matcher(record) === true) { + for (k = 0; k < topCount; k++) { + cells[j][k] = cells[j][k] || []; + + if (topTuples[k].matcher(record)) { + cells[j][k].push(record); + } + } + } + } + } + + var rowCount = cells.length, + colCount, row; + + for (i = 0; i < rowCount; i++) { + row = cells[i]; + colCount = row.length; + + for (j = 0; j < colCount; j++) { + cells[i][j] = aggregator(cells[i][j], this.measure); + } + } + + return cells; + }, + + /** + * Returns the grid's GridView object. + * @return {Ext.grid.PivotGridView} The grid view + */ + getView: function() { + if (!this.view) { + this.view = new Ext.grid.PivotGridView(this.viewConfig); + } + + return this.view; + } +}); + +Ext.reg('pivotgrid', Ext.grid.PivotGrid); + + +Ext.grid.PivotAggregatorMgr = new Ext.AbstractManager(); + +Ext.grid.PivotAggregatorMgr.registerType('sum', function(records, measure) { + var length = records.length, + total = 0, + i; + + for (i = 0; i < length; i++) { + total += records[i].get(measure); + } + + return total; +}); + +Ext.grid.PivotAggregatorMgr.registerType('avg', function(records, measure) { + var length = records.length, + total = 0, + i; + + for (i = 0; i < length; i++) { + total += records[i].get(measure); + } + + return (total / length) || 'n/a'; +}); + +Ext.grid.PivotAggregatorMgr.registerType('min', function(records, measure) { + var data = [], + length = records.length, + i; + + for (i = 0; i < length; i++) { + data.push(records[i].get(measure)); + } + + return Math.min.apply(this, data) || 'n/a'; +}); + +Ext.grid.PivotAggregatorMgr.registerType('max', function(records, measure) { + var data = [], + length = records.length, + i; + + for (i = 0; i < length; i++) { + data.push(records[i].get(measure)); + } + + return Math.max.apply(this, data) || 'n/a'; +}); + +Ext.grid.PivotAggregatorMgr.registerType('count', function(records, measure) { + return records.length; +});/** * @class Ext.grid.GridView * @extends Ext.util.Observable *This class encapsulates the user interface of an {@link Ext.grid.GridPanel}. @@ -64955,7 +71601,7 @@ viewConfig: { } return 'x-grid3-row-collapsed'; } -}, +}, * @param {Record} record The {@link Ext.data.Record} corresponding to the current row. * @param {Number} index The row index. @@ -64976,10 +71622,12 @@ viewConfig: { * @method getRowClass * @return {String} a CSS class name to add to the row. */ + /** * @cfg {Boolean} enableRowBody True to add a second TR element per row that can be used to provide a row body * that spans beneath the data row. Use the {@link #getRowClass} method's rowParams config to customize the row body. */ + /** * @cfg {String} emptyText Default text (html tags are accepted) to display in the grid body when no rows * are available (defaults to ''). This value will be used to update the {@link #mainBody}: @@ -64987,8 +71635,9 @@ viewConfig: { this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>'); */ + /** - * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to false). + * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to false). * Use the {@link Ext.grid.ColumnModel ColumnModel} {@link Ext.grid.ColumnModel#menuDisabled menuDisabled} * config to disable the menu for individual columns. While this config is true the * following will be disabled:
*/ + /** *-
@@ -64996,6 +71645,7 @@ viewConfig: {
*
- the trigger to reveal the menu. *
A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. @@ -65007,48 +71657,59 @@ viewConfig: { * @property dragZone * @type {Ext.grid.GridDragZone} */ + /** * @cfg {Boolean} deferEmptyText True to defer {@link #emptyText} being applied until the store's * first load (defaults to true). */ deferEmptyText : true, + /** * @cfg {Number} scrollOffset The amount of space to reserve for the vertical scrollbar * (defaults to undefined). If an explicit value isn't specified, this will be automatically * calculated. */ scrollOffset : undefined, + /** * @cfg {Boolean} autoFill * Defaults to false. Specify true to have the column widths re-proportioned - * when the grid is initially rendered. The + * when the grid is initially rendered. The * {@link Ext.grid.Column#width initially configured width} of each column will be adjusted * to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually * or programmatically), the other columns in the grid will not be resized to fit the grid width. * See {@link #forceFit} also. */ autoFill : false, + /** * @cfg {Boolean} forceFit - * Defaults to false. Specify true to have the column widths re-proportioned - * at all times. The {@link Ext.grid.Column#width initially configured width} of each + *
Defaults to false. Specify true to have the column widths re-proportioned + * at all times.
+ *The {@link Ext.grid.Column#width initially configured width} of each * column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are * later resized (manually or programmatically), the other columns in the grid will be resized - * to fit the grid width. See {@link #autoFill} also. + * to fit the grid width.
+ *Columns which are configured with
+ *fixed: trueare omitted from being resized.See {@link #autoFill}.
*/ forceFit : false, + /** * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc']) */ sortClasses : ['sort-asc', 'sort-desc'], + /** * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending') */ sortAscText : 'Sort Ascending', + /** * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to 'Sort Descending') */ sortDescText : 'Sort Descending', + /** * @cfg {String} columnsText The text displayed in the 'Columns' menu item (defaults to 'Columns') */ @@ -65075,17 +71736,23 @@ viewConfig: { borderWidth : 2, tdClass : 'x-grid3-cell', hdCls : 'x-grid3-hd', + + + /** + * @cfg {Boolean} markDirty True to show the dirty cell indicator when a cell has been modified. Defaults to true. + */ markDirty : true, /** * @cfg {Number} cellSelectorDepth The number of levels to search for cells in event delegation (defaults to 4) */ cellSelectorDepth : 4, + /** * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to 10) */ rowSelectorDepth : 10, - + /** * @cfg {Number} rowBodySelectorDepth The number of levels to search for row bodies in event delegation (defaults to 10) */ @@ -65095,151 +71762,222 @@ viewConfig: { * @cfg {String} cellSelector The selector used to find cells internally (defaults to 'td.x-grid3-cell') */ cellSelector : 'td.x-grid3-cell', + /** * @cfg {String} rowSelector The selector used to find rows internally (defaults to 'div.x-grid3-row') */ rowSelector : 'div.x-grid3-row', - + /** * @cfg {String} rowBodySelector The selector used to find row bodies internally (defaults to 'div.x-grid3-row') */ rowBodySelector : 'div.x-grid3-row-body', - + // private firstRowCls: 'x-grid3-row-first', lastRowCls: 'x-grid3-row-last', rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g, - constructor : function(config){ + /** + * @cfg {String} headerMenuOpenCls The CSS class to add to the header cell when its menu is visible. Defaults to 'x-grid3-hd-menu-open' + */ + headerMenuOpenCls: 'x-grid3-hd-menu-open', + + /** + * @cfg {String} rowOverCls The CSS class added to each row when it is hovered over. Defaults to 'x-grid3-row-over' + */ + rowOverCls: 'x-grid3-row-over', + + constructor : function(config) { Ext.apply(this, config); - // These events are only used internally by the grid components - this.addEvents( - /** - * @event beforerowremoved - * Internal UI Event. Fired before a row is removed. - * @param {Ext.grid.GridView} view - * @param {Number} rowIndex The index of the row to be removed. - * @param {Ext.data.Record} record The Record to be removed - */ - 'beforerowremoved', - /** - * @event beforerowsinserted - * Internal UI Event. Fired before rows are inserted. - * @param {Ext.grid.GridView} view - * @param {Number} firstRow The index of the first row to be inserted. - * @param {Number} lastRow The index of the last row to be inserted. - */ - 'beforerowsinserted', - /** - * @event beforerefresh - * Internal UI Event. Fired before the view is refreshed. - * @param {Ext.grid.GridView} view - */ - 'beforerefresh', - /** - * @event rowremoved - * Internal UI Event. Fired after a row is removed. - * @param {Ext.grid.GridView} view - * @param {Number} rowIndex The index of the row that was removed. - * @param {Ext.data.Record} record The Record that was removed - */ - 'rowremoved', - /** - * @event rowsinserted - * Internal UI Event. Fired after rows are inserted. - * @param {Ext.grid.GridView} view - * @param {Number} firstRow The index of the first inserted. - * @param {Number} lastRow The index of the last row inserted. - */ - 'rowsinserted', - /** - * @event rowupdated - * Internal UI Event. Fired after a row has been updated. - * @param {Ext.grid.GridView} view - * @param {Number} firstRow The index of the row updated. - * @param {Ext.data.record} record The Record backing the row updated. - */ - 'rowupdated', - /** - * @event refresh - * Internal UI Event. Fired after the GridView's body has been refreshed. - * @param {Ext.grid.GridView} view - */ - 'refresh' - ); - Ext.grid.GridView.superclass.constructor.call(this); + + // These events are only used internally by the grid components + this.addEvents( + /** + * @event beforerowremoved + * Internal UI Event. Fired before a row is removed. + * @param {Ext.grid.GridView} view + * @param {Number} rowIndex The index of the row to be removed. + * @param {Ext.data.Record} record The Record to be removed + */ + 'beforerowremoved', + + /** + * @event beforerowsinserted + * Internal UI Event. Fired before rows are inserted. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the first row to be inserted. + * @param {Number} lastRow The index of the last row to be inserted. + */ + 'beforerowsinserted', + + /** + * @event beforerefresh + * Internal UI Event. Fired before the view is refreshed. + * @param {Ext.grid.GridView} view + */ + 'beforerefresh', + + /** + * @event rowremoved + * Internal UI Event. Fired after a row is removed. + * @param {Ext.grid.GridView} view + * @param {Number} rowIndex The index of the row that was removed. + * @param {Ext.data.Record} record The Record that was removed + */ + 'rowremoved', + + /** + * @event rowsinserted + * Internal UI Event. Fired after rows are inserted. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the first inserted. + * @param {Number} lastRow The index of the last row inserted. + */ + 'rowsinserted', + + /** + * @event rowupdated + * Internal UI Event. Fired after a row has been updated. + * @param {Ext.grid.GridView} view + * @param {Number} firstRow The index of the row updated. + * @param {Ext.data.record} record The Record backing the row updated. + */ + 'rowupdated', + + /** + * @event refresh + * Internal UI Event. Fired after the GridView's body has been refreshed. + * @param {Ext.grid.GridView} view + */ + 'refresh' + ); + + Ext.grid.GridView.superclass.constructor.call(this); }, /* -------------------------------- UI Specific ----------------------------- */ - // private - initTemplates : function(){ - var ts = this.templates || {}; - if(!ts.master){ - ts.master = new Ext.Template( - '', - '', - '' - ); - } + /** + * The master template to use when rendering the GridView. Has a default template + * @property Ext.Template + * @type masterTpl + */ + masterTpl: new Ext.Template( + '', - '', - '', + '', + '' + ), - if(!ts.header){ - ts.header = new Ext.Template( - '', + '', + '', - '
' - ); - } + /** + * The template to use when rendering headers. Has a default template + * @property headerTpl + * @type Ext.Template + */ + headerTpl: new Ext.Template( + '{cells} ', - '', + '', + '
' + ), - if(!ts.hcell){ - ts.hcell = new Ext.Template( - '{cells} ', + '', + '' - ); - } + /** + * The template to use when rendering the body. Has a default template + * @property bodyTpl + * @type Ext.Template + */ + bodyTpl: new Ext.Template('{rows}'), - if(!ts.body){ - ts.body = new Ext.Template('{rows}'); - } + /** + * The template to use to render each cell. Has a default template + * @property cellTpl + * @type Ext.Template + */ + cellTpl: new Ext.Template( + ' ', + ' ' + ), - if(!ts.row){ - ts.row = new Ext.Template( - '{value}', + '' - ); - } + /** + * @private + * Provides default templates if they are not given for this particular instance. Most of the templates are defined on + * the prototype, the ones defined inside this function are done so because they are based on Grid or GridView configuration + */ + initTemplates : function() { + var templates = this.templates || {}, + template, name, - if(!ts.cell){ - ts.cell = new Ext.Template( - '', - '
{cells} ', - (this.enableRowBody ? '', - ' ' - ); - } + headerCellTpl = new Ext.Template( + '{value}', - '', + '', + ' ' + ), - for(var k in ts){ - var t = ts[k]; - if(t && Ext.isFunction(t.compile) && !t.compiled){ - t.disableFormats = true; - t.compile(); + rowBodyText = [ + '', + ' ' + ].join(""), + + innerText = [ + '', + ' ', + '{body}', + '', + '', + '
' + ].join(""); + + Ext.applyIf(templates, { + hcell : headerCellTpl, + cell : this.cellTpl, + body : this.bodyTpl, + header : this.headerTpl, + master : this.masterTpl, + row : new Ext.Template('{cells} ', + this.enableRowBody ? rowBodyText : '', + '', + '' + innerText + ''), + rowInner: new Ext.Template(innerText) + }); + + for (name in templates) { + template = templates[name]; + + if (template && Ext.isFunction(template.compile) && !template.compiled) { + template.disableFormats = true; + template.compile(); } } - this.templates = ts; + this.templates = templates; this.colRe = new RegExp('x-grid3-td-([^\\s]+)', ''); }, - // private - fly : function(el){ - if(!this._flyweight){ + /** + * @private + * Each GridView has its own private flyweight, accessed through this method + */ + fly : function(el) { + if (!this._flyweight) { this._flyweight = new Ext.Element.Flyweight(document.body); } this._flyweight.dom = el; @@ -65247,56 +71985,62 @@ viewConfig: { }, // private - getEditorParent : function(){ + getEditorParent : function() { return this.scroller.dom; }, - // private - initElements : function(){ - var E = Ext.Element; + /** + * @private + * Finds and stores references to important elements + */ + initElements : function() { + var Element = Ext.Element, + el = Ext.get(this.grid.getGridEl().dom.firstChild), + mainWrap = new Element(el.child('div.x-grid3-viewport')), + mainHd = new Element(mainWrap.child('div.x-grid3-header')), + scroller = new Element(mainWrap.child('div.x-grid3-scroller')); - var el = this.grid.getGridEl().dom.firstChild; - var cs = el.childNodes; - - this.el = new E(el); - - this.mainWrap = new E(cs[0]); - this.mainHd = new E(this.mainWrap.dom.firstChild); - - if(this.grid.hideHeaders){ - this.mainHd.setDisplayed(false); + if (this.grid.hideHeaders) { + mainHd.setDisplayed(false); } - this.innerHd = this.mainHd.dom.firstChild; - this.scroller = new E(this.mainWrap.dom.childNodes[1]); - if(this.forceFit){ - this.scroller.setStyle('overflow-x', 'hidden'); + if (this.forceFit) { + scroller.setStyle('overflow-x', 'hidden'); } + /** * Read-only. The GridView's body Element which encapsulates all rows in the Grid. * This {@link Ext.Element Element} is only available after the GridPanel has been rendered. * @type Ext.Element * @property mainBody */ - this.mainBody = new E(this.scroller.dom.firstChild); - this.focusEl = new E(this.scroller.dom.childNodes[1]); + Ext.apply(this, { + el : el, + mainWrap: mainWrap, + scroller: scroller, + mainHd : mainHd, + innerHd : mainHd.child('div.x-grid3-header-inner').dom, + mainBody: new Element(Element.fly(scroller).child('div.x-grid3-body')), + focusEl : new Element(Element.fly(scroller).child('a')), + + resizeMarker: new Element(el.child('div.x-grid3-resize-marker')), + resizeProxy : new Element(el.child('div.x-grid3-resize-proxy')) + }); + this.focusEl.swallowEvent('click', true); - - this.resizeMarker = new E(cs[1]); - this.resizeProxy = new E(cs[2]); }, // private - getRows : function(){ + getRows : function() { return this.hasRows() ? this.mainBody.dom.childNodes : []; }, // finder methods, used with delegation // private - findCell : function(el){ - if(!el){ + findCell : function(el) { + if (!el) { return false; } return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth); @@ -65308,27 +72052,33 @@ viewConfig: { * @param {HTMLElement} el The target element * @return {Number} The column index, or false if the target element is not within a row of this GridView. */ - findCellIndex : function(el, requiredCls){ - var cell = this.findCell(el); - if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){ - return this.getCellIndex(cell); - } - return false; - }, + findCellIndex : function(el, requiredCls) { + var cell = this.findCell(el), + hasCls; - // private - getCellIndex : function(el){ - if(el){ - var m = el.className.match(this.colRe); - if(m && m[1]){ - return this.cm.getIndexById(m[1]); + if (cell) { + hasCls = this.fly(cell).hasClass(requiredCls); + if (!requiredCls || hasCls) { + return this.getCellIndex(cell); } } return false; }, // private - findHeaderCell : function(el){ + getCellIndex : function(el) { + if (el) { + var match = el.className.match(this.colRe); + + if (match && match[1]) { + return this.cm.getIndexById(match[1]); + } + } + return false; + }, + + // private + findHeaderCell : function(el) { var cell = this.findCell(el); return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null; }, @@ -65343,33 +72093,34 @@ viewConfig: { * @param {HTMLElement} el The target HTMLElement * @return {HTMLElement} The row element, or null if the target element is not within a row of this GridView. */ - findRow : function(el){ - if(!el){ + findRow : function(el) { + if (!el) { return false; } return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth); }, /** - *Return the index of the grid row which contains the passed HTMLElement.
+ * Return the index of the grid row which contains the passed HTMLElement. * See also {@link #findCellIndex} * @param {HTMLElement} el The target HTMLElement * @return {Number} The row index, or false if the target element is not within a row of this GridView. */ - findRowIndex : function(el){ - var r = this.findRow(el); - return r ? r.rowIndex : false; + findRowIndex : function(el) { + var row = this.findRow(el); + return row ? row.rowIndex : false; }, - + /** * Return the HtmlElement representing the grid row body which contains the passed element. * @param {HTMLElement} el The target HTMLElement * @return {HTMLElement} The row body element, or null if the target element is not within a row body of this GridView. */ - findRowBody : function(el){ - if(!el){ + findRowBody : function(el) { + if (!el) { return false; } + return this.fly(el).findParent(this.rowBodySelector, this.rowBodySelectorDepth); }, @@ -65380,7 +72131,7 @@ viewConfig: { * @param {Number} index The row index * @return {HtmlElement} The div element. */ - getRow : function(row){ + getRow : function(row) { return this.getRows()[row]; }, @@ -65390,8 +72141,8 @@ viewConfig: { * @param {Number} col The column index of the cell. * @return {HtmlElement} The td at the specified coordinates. */ - getCell : function(row, col){ - return this.getRow(row).getElementsByTagName('td')[col]; + getCell : function(row, col) { + return Ext.fly(this.getRow(row)).query(this.cellSelector)[col]; }, /** @@ -65399,22 +72150,22 @@ viewConfig: { * @param {Number} index The column index * @return {HtmlElement} The td element. */ - getHeaderCell : function(index){ - return this.mainHd.dom.getElementsByTagName('td')[index]; + getHeaderCell : function(index) { + return this.mainHd.dom.getElementsByTagName('td')[index]; }, // manipulating elements // private - use getRowClass to apply custom row classes - addRowClass : function(row, cls){ - var r = this.getRow(row); - if(r){ - this.fly(r).addClass(cls); + addRowClass : function(rowId, cls) { + var row = this.getRow(rowId); + if (row) { + this.fly(row).addClass(cls); } }, // private - removeRowClass : function(row, cls){ + removeRowClass : function(row, cls) { var r = this.getRow(row); if(r){ this.fly(r).removeClass(cls); @@ -65422,283 +72173,362 @@ viewConfig: { }, // private - removeRow : function(row){ + removeRow : function(row) { Ext.removeNode(this.getRow(row)); this.syncFocusEl(row); }, - + // private - removeRows : function(firstRow, lastRow){ - var bd = this.mainBody.dom; - for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ + removeRows : function(firstRow, lastRow) { + var bd = this.mainBody.dom, + rowIndex; + + for (rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ Ext.removeNode(bd.childNodes[firstRow]); } + this.syncFocusEl(firstRow); }, - // scrolling stuff + /* ----------------------------------- Scrolling functions -------------------------------------------*/ // private - getScrollState : function(){ + getScrollState : function() { var sb = this.scroller.dom; - return {left: sb.scrollLeft, top: sb.scrollTop}; + + return { + left: sb.scrollLeft, + top : sb.scrollTop + }; }, // private - restoreScroll : function(state){ + restoreScroll : function(state) { var sb = this.scroller.dom; sb.scrollLeft = state.left; - sb.scrollTop = state.top; + sb.scrollTop = state.top; }, /** * Scrolls the grid to the top */ - scrollToTop : function(){ - this.scroller.dom.scrollTop = 0; - this.scroller.dom.scrollLeft = 0; + scrollToTop : function() { + var dom = this.scroller.dom; + + dom.scrollTop = 0; + dom.scrollLeft = 0; }, // private - syncScroll : function(){ - this.syncHeaderScroll(); - var mb = this.scroller.dom; + syncScroll : function() { + this.syncHeaderScroll(); + var mb = this.scroller.dom; this.grid.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop); }, // private - syncHeaderScroll : function(){ - var mb = this.scroller.dom; - this.innerHd.scrollLeft = mb.scrollLeft; - this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) + syncHeaderScroll : function() { + var innerHd = this.innerHd, + scrollLeft = this.scroller.dom.scrollLeft; + + innerHd.scrollLeft = scrollLeft; + innerHd.scrollLeft = scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) }, - // private - updateSortIcon : function(col, dir){ - var sc = this.sortClasses; - var hds = this.mainHd.select('td').removeClass(sc); - hds.item(col).addClass(sc[dir == 'DESC' ? 1 : 0]); + /** + * @private + * Ensures the given column has the given icon class + */ + updateSortIcon : function(col, dir) { + var sortClasses = this.sortClasses, + sortClass = sortClasses[dir == "DESC" ? 1 : 0], + headers = this.mainHd.select('td').removeClass(sortClasses); + + headers.item(col).addClass(sortClass); }, - // private - updateAllColumnWidths : function(){ - var tw = this.getTotalWidth(), - clen = this.cm.getColumnCount(), - ws = [], - len, - i; - for(i = 0; i < clen; i++){ - ws[i] = this.getColumnWidth(i); - } - this.innerHd.firstChild.style.width = this.getOffsetWidth(); - this.innerHd.firstChild.firstChild.style.width = tw; - this.mainBody.dom.style.width = tw; - for(i = 0; i < clen; i++){ - var hd = this.getHeaderCell(i); - hd.style.width = ws[i]; + /** + * @private + * Updates the size of every column and cell in the grid + */ + updateAllColumnWidths : function() { + var totalWidth = this.getTotalWidth(), + colCount = this.cm.getColumnCount(), + rows = this.getRows(), + rowCount = rows.length, + widths = [], + row, rowFirstChild, trow, i, j; + + for (i = 0; i < colCount; i++) { + widths[i] = this.getColumnWidth(i); + this.getHeaderCell(i).style.width = widths[i]; } - var ns = this.getRows(), row, trow; - for(i = 0, len = ns.length; i < len; i++){ - row = ns[i]; - row.style.width = tw; - if(row.firstChild){ - row.firstChild.style.width = tw; - trow = row.firstChild.rows[0]; - for (var j = 0; j < clen; j++) { - trow.childNodes[j].style.width = ws[j]; + this.updateHeaderWidth(); + + for (i = 0; i < rowCount; i++) { + row = rows[i]; + row.style.width = totalWidth; + rowFirstChild = row.firstChild; + + if (rowFirstChild) { + rowFirstChild.style.width = totalWidth; + trow = rowFirstChild.rows[0]; + + for (j = 0; j < colCount; j++) { + trow.childNodes[j].style.width = widths[j]; } } } - this.onAllColumnWidthsUpdated(ws, tw); + this.onAllColumnWidthsUpdated(widths, totalWidth); }, - // private - updateColumnWidth : function(col, width){ - var w = this.getColumnWidth(col); - var tw = this.getTotalWidth(); - this.innerHd.firstChild.style.width = this.getOffsetWidth(); - this.innerHd.firstChild.firstChild.style.width = tw; - this.mainBody.dom.style.width = tw; - var hd = this.getHeaderCell(col); - hd.style.width = w; + /** + * @private + * Called after a column's width has been updated, this resizes all of the cells for that column in each row + * @param {Number} column The column index + */ + updateColumnWidth : function(column, width) { + var columnWidth = this.getColumnWidth(column), + totalWidth = this.getTotalWidth(), + headerCell = this.getHeaderCell(column), + nodes = this.getRows(), + nodeCount = nodes.length, + row, i, firstChild; - var ns = this.getRows(), row; - for(var i = 0, len = ns.length; i < len; i++){ - row = ns[i]; - row.style.width = tw; - if(row.firstChild){ - row.firstChild.style.width = tw; - row.firstChild.rows[0].childNodes[col].style.width = w; + this.updateHeaderWidth(); + headerCell.style.width = columnWidth; + + for (i = 0; i < nodeCount; i++) { + row = nodes[i]; + firstChild = row.firstChild; + + row.style.width = totalWidth; + if (firstChild) { + firstChild.style.width = totalWidth; + firstChild.rows[0].childNodes[column].style.width = columnWidth; } } - this.onColumnWidthUpdated(col, w, tw); + this.onColumnWidthUpdated(column, columnWidth, totalWidth); }, - // private - updateColumnHidden : function(col, hidden){ - var tw = this.getTotalWidth(); - this.innerHd.firstChild.style.width = this.getOffsetWidth(); - this.innerHd.firstChild.firstChild.style.width = tw; - this.mainBody.dom.style.width = tw; - var display = hidden ? 'none' : ''; + /** + * @private + * Sets the hidden status of a given column. + * @param {Number} col The column index + * @param {Boolean} hidden True to make the column hidden + */ + updateColumnHidden : function(col, hidden) { + var totalWidth = this.getTotalWidth(), + display = hidden ? 'none' : '', + headerCell = this.getHeaderCell(col), + nodes = this.getRows(), + nodeCount = nodes.length, + row, rowFirstChild, i; - var hd = this.getHeaderCell(col); - hd.style.display = display; + this.updateHeaderWidth(); + headerCell.style.display = display; - var ns = this.getRows(), row; - for(var i = 0, len = ns.length; i < len; i++){ - row = ns[i]; - row.style.width = tw; - if(row.firstChild){ - row.firstChild.style.width = tw; - row.firstChild.rows[0].childNodes[col].style.display = display; + for (i = 0; i < nodeCount; i++) { + row = nodes[i]; + row.style.width = totalWidth; + rowFirstChild = row.firstChild; + + if (rowFirstChild) { + rowFirstChild.style.width = totalWidth; + rowFirstChild.rows[0].childNodes[col].style.display = display; } } - this.onColumnHiddenUpdated(col, hidden, tw); - delete this.lastViewWidth; // force recalc + this.onColumnHiddenUpdated(col, hidden, totalWidth); + delete this.lastViewWidth; //recalc this.layout(); }, - // private - doRender : function(cs, rs, ds, startRow, colCount, stripe){ - var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1; - var tstyle = 'width:'+this.getTotalWidth()+';'; - // buffers - var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; - for(var j = 0, len = rs.length; j < len; j++){ - r = rs[j]; cb = []; - var rowIndex = (j+startRow); - for(var i = 0; i < colCount; i++){ - c = cs[i]; - p.id = c.id; - p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); - p.attr = p.cellAttr = ''; - p.value = c.renderer.call(c.scope, r.data[c.name], p, r, rowIndex, i, ds); - p.style = c.style; - if(Ext.isEmpty(p.value)){ - p.value = ' '; + /** + * @private + * Renders all of the rows to a string buffer and returns the string. This is called internally + * by renderRows and performs the actual string building for the rows - it does not inject HTML into the DOM. + * @param {Array} columns The column data acquired from getColumnData. + * @param {Array} records The array of records to render + * @param {Ext.data.Store} store The store to render the rows from + * @param {Number} startRow The index of the first row being rendered. Sometimes we only render a subset of + * the rows so this is used to maintain logic for striping etc + * @param {Number} colCount The total number of columns in the column model + * @param {Boolean} stripe True to stripe the rows + * @return {String} A string containing the HTML for the rendered rows + */ + doRender : function(columns, records, store, startRow, colCount, stripe) { + var templates = this.templates, + cellTemplate = templates.cell, + rowTemplate = templates.row, + last = colCount - 1, + tstyle = 'width:' + this.getTotalWidth() + ';', + // buffers + rowBuffer = [], + colBuffer = [], + rowParams = {tstyle: tstyle}, + meta = {}, + len = records.length, + alt, + column, + record, i, j, rowIndex; + + //build up each row's HTML + for (j = 0; j < len; j++) { + record = records[j]; + colBuffer = []; + + rowIndex = j + startRow; + + //build up each column's HTML + for (i = 0; i < colCount; i++) { + column = columns[i]; + + meta.id = column.id; + meta.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); + meta.attr = meta.cellAttr = ''; + meta.style = column.style; + meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store); + + if (Ext.isEmpty(meta.value)) { + meta.value = ' '; } - if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){ - p.css += ' x-grid3-dirty-cell'; + + if (this.markDirty && record.dirty && typeof record.modified[column.name] != 'undefined') { + meta.css += ' x-grid3-dirty-cell'; } - cb[cb.length] = ct.apply(p); + + colBuffer[colBuffer.length] = cellTemplate.apply(meta); } - var alt = []; - if(stripe && ((rowIndex+1) % 2 === 0)){ + + alt = []; + //set up row striping and row dirtiness CSS classes + if (stripe && ((rowIndex + 1) % 2 === 0)) { alt[0] = 'x-grid3-row-alt'; } - if(r.dirty){ + + if (record.dirty) { alt[1] = ' x-grid3-dirty-row'; } - rp.cols = colCount; - if(this.getRowClass){ - alt[2] = this.getRowClass(r, rowIndex, rp, ds); + + rowParams.cols = colCount; + + if (this.getRowClass) { + alt[2] = this.getRowClass(record, rowIndex, rowParams, store); } - rp.alt = alt.join(' '); - rp.cells = cb.join(''); - buf[buf.length] = rt.apply(rp); + + rowParams.alt = alt.join(' '); + rowParams.cells = colBuffer.join(''); + + rowBuffer[rowBuffer.length] = rowTemplate.apply(rowParams); } - return buf.join(''); + + return rowBuffer.join(''); }, - // private - processRows : function(startRow, skipStripe){ - if(!this.ds || this.ds.getCount() < 1){ + /** + * @private + * Adds CSS classes and rowIndex to each row + * @param {Number} startRow The row to start from (defaults to 0) + */ + processRows : function(startRow, skipStripe) { + if (!this.ds || this.ds.getCount() < 1) { return; } - var rows = this.getRows(), - len = rows.length, - i, r; - + + var rows = this.getRows(), + length = rows.length, + row, i; + skipStripe = skipStripe || !this.grid.stripeRows; - startRow = startRow || 0; - for(i = 0; i' + this.emptyText + ''); } }, - // private - updateHeaderSortState : function(){ + /** + * @private + * Adds sorting classes to the column headers based on the bound store's sortInfo. Fires the 'sortchange' event + * if the sorting has changed since this function was last run. + */ + updateHeaderSortState : function() { var state = this.ds.getSortState(); - if(!state){ + if (!state) { return; } - if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){ + + if (!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)) { this.grid.fireEvent('sortchange', this.grid, state); } + this.sortState = state; + var sortColumn = this.cm.findColumnIndex(state.field); - if(sortColumn != -1){ + if (sortColumn != -1) { var sortDir = state.direction; this.updateSortIcon(sortColumn, sortDir); } }, - // private - clearHeaderSortState : function(){ - if(!this.sortState){ + /** + * @private + * Removes any sorting indicator classes from the column headers + */ + clearHeaderSortState : function() { + if (!this.sortState) { return; } this.grid.fireEvent('sortchange', this.grid, null); @@ -66260,232 +73389,278 @@ viewConfig: { delete this.sortState; }, - // private - destroy : function(){ - if(this.colMenu){ - Ext.menu.MenuMgr.unregister(this.colMenu); - this.colMenu.destroy(); - delete this.colMenu; - } - if(this.hmenu){ - Ext.menu.MenuMgr.unregister(this.hmenu); - this.hmenu.destroy(); - delete this.hmenu; + /** + * @private + * Destroys all objects associated with the GridView + */ + destroy : function() { + var me = this, + grid = me.grid, + gridEl = grid.getGridEl(), + dragZone = me.dragZone, + splitZone = me.splitZone, + columnDrag = me.columnDrag, + columnDrop = me.columnDrop, + scrollToTopTask = me.scrollToTopTask, + columnDragData, + columnDragProxy; + + if (scrollToTopTask && scrollToTopTask.cancel) { + scrollToTopTask.cancel(); } - this.initData(null, null); - this.purgeListeners(); - Ext.fly(this.innerHd).un("click", this.handleHdDown, this); + Ext.destroyMembers(me, 'colMenu', 'hmenu'); - if(this.grid.enableColumnMove){ + me.initData(null, null); + me.purgeListeners(); + + Ext.fly(me.innerHd).un("click", me.handleHdDown, me); + + if (grid.enableColumnMove) { + columnDragData = columnDrag.dragData; + columnDragProxy = columnDrag.proxy; Ext.destroy( - this.columnDrag.el, - this.columnDrag.proxy.ghost, - this.columnDrag.proxy.el, - this.columnDrop.el, - this.columnDrop.proxyTop, - this.columnDrop.proxyBottom, - this.columnDrag.dragData.ddel, - this.columnDrag.dragData.header + columnDrag.el, + columnDragProxy.ghost, + columnDragProxy.el, + columnDrop.el, + columnDrop.proxyTop, + columnDrop.proxyBottom, + columnDragData.ddel, + columnDragData.header ); - if (this.columnDrag.proxy.anim) { - Ext.destroy(this.columnDrag.proxy.anim); + + if (columnDragProxy.anim) { + Ext.destroy(columnDragProxy.anim); } - delete this.columnDrag.proxy.ghost; - delete this.columnDrag.dragData.ddel; - delete this.columnDrag.dragData.header; - this.columnDrag.destroy(); - delete Ext.dd.DDM.locationCache[this.columnDrag.id]; - delete this.columnDrag._domRef; - delete this.columnDrop.proxyTop; - delete this.columnDrop.proxyBottom; - this.columnDrop.destroy(); - delete Ext.dd.DDM.locationCache["gridHeader" + this.grid.getGridEl().id]; - delete this.columnDrop._domRef; - delete Ext.dd.DDM.ids[this.columnDrop.ddGroup]; + delete columnDragProxy.ghost; + delete columnDragData.ddel; + delete columnDragData.header; + columnDrag.destroy(); + + delete Ext.dd.DDM.locationCache[columnDrag.id]; + delete columnDrag._domRef; + + delete columnDrop.proxyTop; + delete columnDrop.proxyBottom; + columnDrop.destroy(); + delete Ext.dd.DDM.locationCache["gridHeader" + gridEl.id]; + delete columnDrop._domRef; + delete Ext.dd.DDM.ids[columnDrop.ddGroup]; } - if (this.splitZone){ // enableColumnResize - this.splitZone.destroy(); - delete this.splitZone._domRef; - delete Ext.dd.DDM.ids["gridSplitters" + this.grid.getGridEl().id]; + if (splitZone) { // enableColumnResize + splitZone.destroy(); + delete splitZone._domRef; + delete Ext.dd.DDM.ids["gridSplitters" + gridEl.id]; } - Ext.fly(this.innerHd).removeAllListeners(); - Ext.removeNode(this.innerHd); - delete this.innerHd; + Ext.fly(me.innerHd).removeAllListeners(); + Ext.removeNode(me.innerHd); + delete me.innerHd; Ext.destroy( - this.el, - this.mainWrap, - this.mainHd, - this.scroller, - this.mainBody, - this.focusEl, - this.resizeMarker, - this.resizeProxy, - this.activeHdBtn, - this.dragZone, - this.splitZone, - this._flyweight + me.el, + me.mainWrap, + me.mainHd, + me.scroller, + me.mainBody, + me.focusEl, + me.resizeMarker, + me.resizeProxy, + me.activeHdBtn, + me._flyweight, + dragZone, + splitZone ); - delete this.grid.container; + delete grid.container; - if(this.dragZone){ - this.dragZone.destroy(); + if (dragZone) { + dragZone.destroy(); } Ext.dd.DDM.currentTarget = null; - delete Ext.dd.DDM.locationCache[this.grid.getGridEl().id]; + delete Ext.dd.DDM.locationCache[gridEl.id]; - Ext.EventManager.removeResizeListener(this.onWindowResize, this); + Ext.EventManager.removeResizeListener(me.onWindowResize, me); }, // private - onDenyColumnHide : function(){ + onDenyColumnHide : function() { }, // private - render : function(){ - if(this.autoFill){ + render : function() { + if (this.autoFill) { var ct = this.grid.ownerCt; - if (ct && ct.getLayout()){ - ct.on('afterlayout', function(){ + + if (ct && ct.getLayout()) { + ct.on('afterlayout', function() { this.fitColumns(true, true); - this.updateHeaders(); - }, this, {single: true}); - }else{ - this.fitColumns(true, true); + this.updateHeaders(); + this.updateHeaderSortState(); + }, this, {single: true}); } - }else if(this.forceFit){ + } else if (this.forceFit) { this.fitColumns(true, false); - }else if(this.grid.autoExpandColumn){ + } else if (this.grid.autoExpandColumn) { this.autoExpand(true); } - this.renderUI(); + this.grid.getGridEl().dom.innerHTML = this.renderUI(); + + this.afterRenderUI(); }, /* --------------------------------- Model Events and Handlers --------------------------------*/ - // private - initData : function(ds, cm){ - if(this.ds){ - this.ds.un('load', this.onLoad, this); - this.ds.un('datachanged', this.onDataChange, this); - this.ds.un('add', this.onAdd, this); - this.ds.un('remove', this.onRemove, this); - this.ds.un('update', this.onUpdate, this); - this.ds.un('clear', this.onClear, this); - if(this.ds !== ds && this.ds.autoDestroy){ - this.ds.destroy(); + + /** + * @private + * Binds a new Store and ColumnModel to this GridView. Removes any listeners from the old objects (if present) + * and adds listeners to the new ones + * @param {Ext.data.Store} newStore The new Store instance + * @param {Ext.grid.ColumnModel} newColModel The new ColumnModel instance + */ + initData : function(newStore, newColModel) { + var me = this; + + if (me.ds) { + var oldStore = me.ds; + + oldStore.un('add', me.onAdd, me); + oldStore.un('load', me.onLoad, me); + oldStore.un('clear', me.onClear, me); + oldStore.un('remove', me.onRemove, me); + oldStore.un('update', me.onUpdate, me); + oldStore.un('datachanged', me.onDataChange, me); + + if (oldStore !== newStore && oldStore.autoDestroy) { + oldStore.destroy(); } } - if(ds){ - ds.on({ - scope: this, - load: this.onLoad, - datachanged: this.onDataChange, - add: this.onAdd, - remove: this.onRemove, - update: this.onUpdate, - clear: this.onClear - }); - } - this.ds = ds; - if(this.cm){ - this.cm.un('configchange', this.onColConfigChange, this); - this.cm.un('widthchange', this.onColWidthChange, this); - this.cm.un('headerchange', this.onHeaderChange, this); - this.cm.un('hiddenchange', this.onHiddenChange, this); - this.cm.un('columnmoved', this.onColumnMove, this); - } - if(cm){ - delete this.lastViewWidth; - cm.on({ - scope: this, - configchange: this.onColConfigChange, - widthchange: this.onColWidthChange, - headerchange: this.onHeaderChange, - hiddenchange: this.onHiddenChange, - columnmoved: this.onColumnMove + if (newStore) { + newStore.on({ + scope : me, + load : me.onLoad, + add : me.onAdd, + remove : me.onRemove, + update : me.onUpdate, + clear : me.onClear, + datachanged: me.onDataChange }); } - this.cm = cm; + + if (me.cm) { + var oldColModel = me.cm; + + oldColModel.un('configchange', me.onColConfigChange, me); + oldColModel.un('widthchange', me.onColWidthChange, me); + oldColModel.un('headerchange', me.onHeaderChange, me); + oldColModel.un('hiddenchange', me.onHiddenChange, me); + oldColModel.un('columnmoved', me.onColumnMove, me); + } + + if (newColModel) { + delete me.lastViewWidth; + + newColModel.on({ + scope : me, + configchange: me.onColConfigChange, + widthchange : me.onColWidthChange, + headerchange: me.onHeaderChange, + hiddenchange: me.onHiddenChange, + columnmoved : me.onColumnMove + }); + } + + me.ds = newStore; + me.cm = newColModel; }, // private onDataChange : function(){ - this.refresh(); + this.refresh(true); this.updateHeaderSortState(); this.syncFocusEl(0); }, // private - onClear : function(){ + onClear : function() { this.refresh(); this.syncFocusEl(0); }, // private - onUpdate : function(ds, record){ + onUpdate : function(store, record) { this.refreshRow(record); }, // private - onAdd : function(ds, records, index){ - - this.insertRows(ds, index, index + (records.length-1)); + onAdd : function(store, records, index) { + this.insertRows(store, index, index + (records.length-1)); }, // private - onRemove : function(ds, record, index, isUpdate){ - if(isUpdate !== true){ + onRemove : function(store, record, index, isUpdate) { + if (isUpdate !== true) { this.fireEvent('beforerowremoved', this, index, record); } + this.removeRow(index); - if(isUpdate !== true){ + + if (isUpdate !== true) { this.processRows(index); this.applyEmptyText(); this.fireEvent('rowremoved', this, index, record); } }, - // private - onLoad : function(){ - this.scrollToTop.defer(Ext.isGecko ? 1 : 0, this); + /** + * @private + * Called when a store is loaded, scrolls to the top row + */ + onLoad : function() { + if (Ext.isGecko) { + if (!this.scrollToTopTask) { + this.scrollToTopTask = new Ext.util.DelayedTask(this.scrollToTop, this); + } + this.scrollToTopTask.delay(1); + } else { + this.scrollToTop(); + } }, // private - onColWidthChange : function(cm, col, width){ + onColWidthChange : function(cm, col, width) { this.updateColumnWidth(col, width); }, // private - onHeaderChange : function(cm, col, text){ + onHeaderChange : function(cm, col, text) { this.updateHeaders(); }, // private - onHiddenChange : function(cm, col, hidden){ + onHiddenChange : function(cm, col, hidden) { this.updateColumnHidden(col, hidden); }, // private - onColumnMove : function(cm, oldIndex, newIndex){ + onColumnMove : function(cm, oldIndex, newIndex) { this.indexMap = null; - var s = this.getScrollState(); this.refresh(true); - this.restoreScroll(s); + this.restoreScroll(this.getScrollState()); + this.afterMove(newIndex); this.grid.fireEvent('columnmove', oldIndex, newIndex); }, // private - onColConfigChange : function(){ + onColConfigChange : function() { delete this.lastViewWidth; this.indexMap = null; this.refresh(true); @@ -66493,209 +73668,318 @@ viewConfig: { /* -------------------- UI Events and Handlers ------------------------------ */ // private - initUI : function(grid){ + initUI : function(grid) { grid.on('headerclick', this.onHeaderClick, this); }, // private - initEvents : function(){ - }, + initEvents : Ext.emptyFn, // private - onHeaderClick : function(g, index){ - if(this.headersDisabled || !this.cm.isSortable(index)){ + onHeaderClick : function(g, index) { + if (this.headersDisabled || !this.cm.isSortable(index)) { return; } g.stopEditing(true); g.store.sort(this.cm.getDataIndex(index)); }, - // private - onRowOver : function(e, t){ - var row; - if((row = this.findRowIndex(t)) !== false){ - this.addRowClass(row, 'x-grid3-row-over'); + /** + * @private + * Adds the hover class to a row when hovered over + */ + onRowOver : function(e, target) { + var row = this.findRowIndex(target); + + if (row !== false) { + this.addRowClass(row, this.rowOverCls); + } + }, + + /** + * @private + * Removes the hover class from a row on mouseout + */ + onRowOut : function(e, target) { + var row = this.findRowIndex(target); + + if (row !== false && !e.within(this.getRow(row), true)) { + this.removeRowClass(row, this.rowOverCls); } }, // private - onRowOut : function(e, t){ - var row; - if((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)){ - this.removeRowClass(row, 'x-grid3-row-over'); - } - }, - - // private - handleWheel : function(e){ - e.stopPropagation(); - }, - - // private - onRowSelect : function(row){ + onRowSelect : function(row) { this.addRowClass(row, this.selectedRowClass); }, // private - onRowDeselect : function(row){ + onRowDeselect : function(row) { this.removeRowClass(row, this.selectedRowClass); }, // private - onCellSelect : function(row, col){ + onCellSelect : function(row, col) { var cell = this.getCell(row, col); - if(cell){ + if (cell) { this.fly(cell).addClass('x-grid3-cell-selected'); } }, // private - onCellDeselect : function(row, col){ + onCellDeselect : function(row, col) { var cell = this.getCell(row, col); - if(cell){ + if (cell) { this.fly(cell).removeClass('x-grid3-cell-selected'); } }, // private - onColumnSplitterMoved : function(i, w){ - this.userResized = true; - var cm = this.grid.colModel; - cm.setColumnWidth(i, w, true); + handleWheel : function(e) { + e.stopPropagation(); + }, - if(this.forceFit){ - this.fitColumns(true, false, i); + /** + * @private + * Called by the SplitDragZone when a drag has been completed. Resizes the columns + */ + onColumnSplitterMoved : function(cellIndex, width) { + this.userResized = true; + this.grid.colModel.setColumnWidth(cellIndex, width, true); + + if (this.forceFit) { + this.fitColumns(true, false, cellIndex); this.updateAllColumnWidths(); - }else{ - this.updateColumnWidth(i, w); + } else { + this.updateColumnWidth(cellIndex, width); this.syncHeaderScroll(); } - this.grid.fireEvent('columnresize', i, w); + this.grid.fireEvent('columnresize', cellIndex, width); }, - // private - handleHdMenuClick : function(item){ - var index = this.hdCtxIndex, - cm = this.cm, - ds = this.ds, - id = item.getItemId(); - switch(id){ - case 'asc': - ds.sort(cm.getDataIndex(index), 'ASC'); - break; - case 'desc': - ds.sort(cm.getDataIndex(index), 'DESC'); - break; - default: - index = cm.getIndexById(id.substr(4)); - if(index != -1){ - if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){ - this.onDenyColumnHide(); - return false; - } - cm.setHidden(index, item.checked); - } - } - return true; - }, + /** + * @private + * Click handler for the shared column dropdown menu, called on beforeshow. Builds the menu + * which displays the list of columns for the user to show or hide. + */ + beforeColMenuShow : function() { + var colModel = this.cm, + colCount = colModel.getColumnCount(), + colMenu = this.colMenu, + i; - // private - isHideableColumn : function(c){ - return !c.hidden && !c.fixed; - }, + colMenu.removeAll(); - // private - beforeColMenuShow : function(){ - var cm = this.cm, colCount = cm.getColumnCount(); - this.colMenu.removeAll(); - for(var i = 0; i < colCount; i++){ - if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){ - this.colMenu.add(new Ext.menu.CheckItem({ - itemId: 'col-'+cm.getColumnId(i), - text: cm.getColumnHeader(i), - checked: !cm.isHidden(i), - hideOnClick:false, - disabled: cm.config[i].hideable === false + for (i = 0; i < colCount; i++) { + if (colModel.config[i].hideable !== false) { + colMenu.add(new Ext.menu.CheckItem({ + text : colModel.getColumnHeader(i), + itemId : 'col-' + colModel.getColumnId(i), + checked : !colModel.isHidden(i), + disabled : colModel.config[i].hideable === false, + hideOnClick: false })); } } }, - // private - handleHdDown : function(e, t){ - if(Ext.fly(t).hasClass('x-grid3-hd-btn')){ - e.stopEvent(); - var hd = this.findHeaderCell(t); - Ext.fly(hd).addClass('x-grid3-hd-menu-open'); - var index = this.getCellIndex(hd); - this.hdCtxIndex = index; - var ms = this.hmenu.items, cm = this.cm; - ms.get('asc').setDisabled(!cm.isSortable(index)); - ms.get('desc').setDisabled(!cm.isSortable(index)); - this.hmenu.on('hide', function(){ - Ext.fly(hd).removeClass('x-grid3-hd-menu-open'); - }, this, {single:true}); - this.hmenu.show(t, 'tl-bl?'); + /** + * @private + * Attached as the 'itemclick' handler to the header menu and the column show/hide submenu (if available). + * Performs sorting if the sorter buttons were clicked, otherwise hides/shows the column that was clicked. + */ + handleHdMenuClick : function(item) { + var store = this.ds, + dataIndex = this.cm.getDataIndex(this.hdCtxIndex); + + switch (item.getItemId()) { + case 'asc': + store.sort(dataIndex, 'ASC'); + break; + case 'desc': + store.sort(dataIndex, 'DESC'); + break; + default: + this.handleHdMenuClickDefault(item); + } + return true; + }, + + /** + * Called by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides + * the column hide/show functionality based on the check state of the menu item. A different implementation can be provided + * if needed. + * @param {Ext.menu.BaseItem} item The menu item that was clicked + */ + handleHdMenuClickDefault: function(item) { + var colModel = this.cm, + itemId = item.getItemId(), + index = colModel.getIndexById(itemId.substr(4)); + + if (index != -1) { + if (item.checked && colModel.getColumnsBy(this.isHideableColumn, this).length <= 1) { + this.onDenyColumnHide(); + return; + } + colModel.setHidden(index, item.checked); } }, - // private - handleHdOver : function(e, t){ - var hd = this.findHeaderCell(t); - if(hd && !this.headersDisabled){ - this.activeHdRef = t; - this.activeHdIndex = this.getCellIndex(hd); - var fly = this.fly(hd); + /** + * @private + * Called when a header cell is clicked - shows the menu if the click happened over a trigger button + */ + handleHdDown : function(e, target) { + if (Ext.fly(target).hasClass('x-grid3-hd-btn')) { + e.stopEvent(); + + var colModel = this.cm, + header = this.findHeaderCell(target), + index = this.getCellIndex(header), + sortable = colModel.isSortable(index), + menu = this.hmenu, + menuItems = menu.items, + menuCls = this.headerMenuOpenCls; + + this.hdCtxIndex = index; + + Ext.fly(header).addClass(menuCls); + menuItems.get('asc').setDisabled(!sortable); + menuItems.get('desc').setDisabled(!sortable); + + menu.on('hide', function() { + Ext.fly(header).removeClass(menuCls); + }, this, {single:true}); + + menu.show(target, 'tl-bl?'); + } + }, + + /** + * @private + * Attached to the headers' mousemove event. This figures out the CSS cursor to use based on where the mouse is currently + * pointed. If the mouse is currently hovered over the extreme left or extreme right of any header cell and the cell next + * to it is resizable it is given the resize cursor, otherwise the cursor is set to an empty string. + */ + handleHdMove : function(e) { + var header = this.findHeaderCell(this.activeHdRef); + + if (header && !this.headersDisabled) { + var handleWidth = this.splitHandleWidth || 5, + activeRegion = this.activeHdRegion, + headerStyle = header.style, + colModel = this.cm, + cursor = '', + pageX = e.getPageX(); + + if (this.grid.enableColumnResize !== false) { + var activeHeaderIndex = this.activeHdIndex, + previousVisible = this.getPreviousVisible(activeHeaderIndex), + currentResizable = colModel.isResizable(activeHeaderIndex), + previousResizable = previousVisible && colModel.isResizable(previousVisible), + inLeftResizer = pageX - activeRegion.left <= handleWidth, + inRightResizer = activeRegion.right - pageX <= (!this.activeHdBtn ? handleWidth : 2); + + if (inLeftResizer && previousResizable) { + cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported + } else if (inRightResizer && currentResizable) { + cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize'; + } + } + + headerStyle.cursor = cursor; + } + }, + + /** + * @private + * Returns the index of the nearest currently visible header to the left of the given index. + * @param {Number} index The header index + * @return {Number/undefined} The index of the nearest visible header + */ + getPreviousVisible: function(index) { + while (index > 0) { + if (!this.cm.isHidden(index - 1)) { + return index; + } + index--; + } + return undefined; + }, + + /** + * @private + * Tied to the header element's mouseover event - adds the over class to the header cell if the menu is not disabled + * for that cell + */ + handleHdOver : function(e, target) { + var header = this.findHeaderCell(target); + + if (header && !this.headersDisabled) { + var fly = this.fly(header); + + this.activeHdRef = target; + this.activeHdIndex = this.getCellIndex(header); this.activeHdRegion = fly.getRegion(); - if(!this.cm.isMenuDisabled(this.activeHdIndex)){ + + if (!this.isMenuDisabled(this.activeHdIndex, fly)) { fly.addClass('x-grid3-hd-over'); this.activeHdBtn = fly.child('.x-grid3-hd-btn'); - if(this.activeHdBtn){ - this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px'; + + if (this.activeHdBtn) { + this.activeHdBtn.dom.style.height = (header.firstChild.offsetHeight - 1) + 'px'; } } } }, - // private - handleHdMove : function(e, t){ - var hd = this.findHeaderCell(this.activeHdRef); - if(hd && !this.headersDisabled){ - var hw = this.splitHandleWidth || 5, - r = this.activeHdRegion, - x = e.getPageX(), - ss = hd.style, - cur = ''; - if(this.grid.enableColumnResize !== false){ - if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){ - cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported - }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){ - cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize'; - } - } - ss.cursor = cur; - } - }, + /** + * @private + * Tied to the header element's mouseout event. Removes the hover class from the header cell + */ + handleHdOut : function(e, target) { + var header = this.findHeaderCell(target); - // private - handleHdOut : function(e, t){ - var hd = this.findHeaderCell(t); - if(hd && (!Ext.isIE || !e.within(hd, true))){ + if (header && (!Ext.isIE || !e.within(header, true))) { this.activeHdRef = null; - this.fly(hd).removeClass('x-grid3-hd-over'); - hd.style.cursor = ''; + this.fly(header).removeClass('x-grid3-hd-over'); + header.style.cursor = ''; } }, - // private - hasRows : function(){ + /** + * @private + * Used by {@link #handleHdOver} to determine whether or not to show the header menu class on cell hover + * @param {Number} cellIndex The header cell index + * @param {Ext.Element} el The cell element currently being hovered over + */ + isMenuDisabled: function(cellIndex, el) { + return this.cm.isMenuDisabled(cellIndex); + }, + + /** + * @private + * Returns true if there are any rows rendered into the GridView + * @return {Boolean} True if any rows have been rendered + */ + hasRows : function() { var fc = this.mainBody.dom.firstChild; return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty'; }, - // back compat - bind : function(d, c){ + /** + * @private + */ + isHideableColumn : function(c) { + return !c.hidden; + }, + + /** + * @private + * DEPRECATED - will be removed in Ext JS 5.0 + */ + bind : function(d, c) { this.initData(d, c); } }); @@ -66703,29 +73987,31 @@ viewConfig: { // private // This is a support class used internally by the Grid components -Ext.grid.GridView.SplitDragZone = function(grid, hd){ - this.grid = grid; - this.view = grid.getView(); - this.marker = this.view.resizeMarker; - this.proxy = this.view.resizeProxy; - Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd, - 'gridSplitters' + this.grid.getGridEl().id, { - dragElId : Ext.id(this.proxy.dom), resizeFrame:false - }); - this.scroll = false; - this.hw = this.view.splitHandleWidth || 5; -}; -Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { +Ext.grid.GridView.SplitDragZone = Ext.extend(Ext.dd.DDProxy, { + + constructor: function(grid, hd){ + this.grid = grid; + this.view = grid.getView(); + this.marker = this.view.resizeMarker; + this.proxy = this.view.resizeProxy; + Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd, + 'gridSplitters' + this.grid.getGridEl().id, { + dragElId : Ext.id(this.proxy.dom), resizeFrame:false + }); + this.scroll = false; + this.hw = this.view.splitHandleWidth || 5; + }, b4StartDrag : function(x, y){ + this.dragHeadersDisabled = this.view.headersDisabled; this.view.headersDisabled = true; var h = this.view.mainWrap.getHeight(); this.marker.setHeight(h); this.marker.show(); this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]); this.proxy.setHeight(h); - var w = this.cm.getColumnWidth(this.cellIndex); - var minw = Math.max(w-this.grid.minColumnWidth, 0); + var w = this.cm.getColumnWidth(this.cellIndex), + minw = Math.max(w-this.grid.minColumnWidth, 0); this.resetConstraints(); this.setXConstraint(minw, 1000); this.setYConstraint(0, 0); @@ -66734,18 +74020,21 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { this.startPos = x; Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y); }, - + allowHeaderDrag : function(e){ return true; }, - handleMouseDown : function(e){ var t = this.view.findHeaderCell(e.getTarget()); if(t && this.allowHeaderDrag(e)){ - var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1]; - var exy = e.getXY(), ex = exy[0]; - var w = t.offsetWidth, adjust = false; + var xy = this.view.fly(t).getXY(), + x = xy[0], + exy = e.getXY(), + ex = exy[0], + w = t.offsetWidth, + adjust = false; + if((ex - x) <= this.hw){ adjust = -1; }else if((x+w) - ex <= this.hw){ @@ -66778,12 +74067,14 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { endDrag : function(e){ this.marker.hide(); - var v = this.view; - var endX = Math.max(this.minX, e.getPageX()); - var diff = endX - this.startPos; + var v = this.view, + endX = Math.max(this.minX, e.getPageX()), + diff = endX - this.startPos, + disabled = this.dragHeadersDisabled; + v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff); setTimeout(function(){ - v.headersDisabled = false; + v.headersDisabled = disabled; }, 50); }, @@ -66791,6 +74082,766 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { this.setDelta(0,0); } }); +/** + * @class Ext.grid.PivotGridView + * @extends Ext.grid.GridView + * Specialised GridView for rendering Pivot Grid components. Config can be passed to the PivotGridView via the PivotGrid constructor's + * viewConfig option: +
+ *+new Ext.grid.PivotGrid({ + viewConfig: { + title: 'My Pivot Grid', + getCellCls: function(value) { + return value > 10 'red' : 'green'; + } + } +}); +Currently {@link #title} and {@link #getCellCls} are the only configuration options accepted by PivotGridView. All other + * interaction is performed via the {@link Ext.grid.PivotGrid PivotGrid} class.
+ */ +Ext.grid.PivotGridView = Ext.extend(Ext.grid.GridView, { + + /** + * The CSS class added to all group header cells. Defaults to 'grid-hd-group-cell' + * @property colHeaderCellCls + * @type String + */ + colHeaderCellCls: 'grid-hd-group-cell', + + /** + * @cfg {String} title Optional title to be placed in the top left corner of the PivotGrid. Defaults to an empty string. + */ + title: '', + + /** + * @cfg {Function} getCellCls Optional function which should return a CSS class name for each cell value. This is useful when + * color coding cells based on their value. Defaults to undefined. + */ + + /** + * Returns the headers to be rendered at the top of the grid. Should be a 2-dimensional array, where each item specifies the number + * of columns it groups (column in this case refers to normal grid columns). In the example below we have 5 city groups, which are + * each part of a continent supergroup. The colspan for each city group refers to the number of normal grid columns that group spans, + * so in this case the grid would be expected to have a total of 12 columns: +
+ * In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country -> + * State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure. + * @return {Array} A tree structure containing the headers to be rendered. Must include the colspan property at each level, which should + * be the sum of all child nodes beneath this node. + */ + getColumnHeaders: function() { + return this.grid.topAxis.buildHeaders();; + }, + + /** + * Returns the headers to be rendered on the left of the grid. Should be a 2-dimensional array, where each item specifies the number + * of rows it groups. In the example below we have 5 city groups, which are each part of a continent supergroup. The rowspan for each + * city group refers to the number of normal grid columns that group spans, so in this case the grid would be expected to have a + * total of 12 rows: ++[ + { + items: [ + {header: 'England', colspan: 5}, + {header: 'USA', colspan: 3} + ] + }, + { + items: [ + {header: 'London', colspan: 2}, + {header: 'Cambridge', colspan: 3}, + {header: 'Palo Alto', colspan: 3} + ] + } +] +
+ * In the example above we have cities nested under countries. The nesting could be deeper if desired - e.g. Continent -> Country -> + * State -> City, or any other structure. The only constaint is that the same depth must be used throughout the structure. + * @return {Array} A tree structure containing the headers to be rendered. Must include the colspan property at each level, which should + * be the sum of all child nodes beneath this node. + * Each group may specify the width it should be rendered with. + * @return {Array} The row groups + */ + getRowHeaders: function() { + return this.grid.leftAxis.buildHeaders(); + }, + + /** + * @private + * Renders rows between start and end indexes + * @param {Number} startRow Index of the first row to render + * @param {Number} endRow Index of the last row to render + */ + renderRows : function(startRow, endRow) { + var grid = this.grid, + rows = grid.extractData(), + rowCount = rows.length, + templates = this.templates, + renderer = grid.renderer, + hasRenderer = typeof renderer == 'function', + getCellCls = this.getCellCls, + hasGetCellCls = typeof getCellCls == 'function', + cellTemplate = templates.cell, + rowTemplate = templates.row, + rowBuffer = [], + meta = {}, + tstyle = 'width:' + this.getGridInnerWidth() + 'px;', + colBuffer, colCount, column, i, row; + + startRow = startRow || 0; + endRow = Ext.isDefined(endRow) ? endRow : rowCount - 1; + + for (i = 0; i < rowCount; i++) { + row = rows[i]; + colCount = row.length; + colBuffer = []; + + //build up each column's HTML + for (var j = 0; j < colCount; j++) { + + meta.id = i + '-' + j; + meta.css = j === 0 ? 'x-grid3-cell-first ' : (j == (colCount - 1) ? 'x-grid3-cell-last ' : ''); + meta.attr = meta.cellAttr = ''; + meta.value = row[j]; + + if (Ext.isEmpty(meta.value)) { + meta.value = ' '; + } + + if (hasRenderer) { + meta.value = renderer(meta.value); + } + + if (hasGetCellCls) { + meta.css += getCellCls(meta.value) + ' '; + } + + colBuffer[colBuffer.length] = cellTemplate.apply(meta); + } + + rowBuffer[rowBuffer.length] = rowTemplate.apply({ + tstyle: tstyle, + cols : colCount, + cells : colBuffer.join(""), + alt : '' + }); + } + + return rowBuffer.join(""); + }, + + /** + * The master template to use when rendering the GridView. Has a default template + * @property Ext.Template + * @type masterTpl + */ + masterTpl: new Ext.Template( + '+[ + { + width: 90, + items: [ + {header: 'England', rowspan: 5}, + {header: 'USA', rowspan: 3} + ] + }, + { + width: 50, + items: [ + {header: 'London', rowspan: 2}, + {header: 'Cambridge', rowspan: 3}, + {header: 'Palo Alto', rowspan: 3} + ] + } +] +', + '', + '' + ), + + /** + * @private + * Adds a gcell template to the internal templates object. This is used to render the headers in a multi-level column header. + */ + initTemplates: function() { + Ext.grid.PivotGridView.superclass.initTemplates.apply(this, arguments); + + var templates = this.templates || {}; + if (!templates.gcell) { + templates.gcell = new Ext.XTemplate( + '', + '', + '', + '', + ' ' + ); + } + + this.templates = templates; + this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", ""); + }, + + /** + * @private + * Sets up the reference to the row headers element + */ + initElements: function() { + Ext.grid.PivotGridView.superclass.initElements.apply(this, arguments); + + /** + * @property rowHeadersEl + * @type Ext.Element + * The element containing all row headers + */ + this.rowHeadersEl = new Ext.Element(this.scroller.child('div.x-grid3-row-headers')); + + /** + * @property headerTitleEl + * @type Ext.Element + * The element that contains the optional title (top left section of the pivot grid) + */ + this.headerTitleEl = new Ext.Element(this.mainHd.child('div.x-grid3-header-title')); + }, + + /** + * @private + * Takes row headers into account when calculating total available width + */ + getGridInnerWidth: function() { + var previousWidth = Ext.grid.PivotGridView.superclass.getGridInnerWidth.apply(this, arguments); + + return previousWidth - this.getTotalRowHeaderWidth(); + }, + + /** + * Returns the total width of all row headers as specified by {@link #getRowHeaders} + * @return {Number} The total width + */ + getTotalRowHeaderWidth: function() { + var headers = this.getRowHeaders(), + length = headers.length, + total = 0, + i; + + for (i = 0; i< length; i++) { + total += headers[i].width; + } + + return total; + }, + + /** + * @private + * Returns the total height of all column headers + * @return {Number} The total height + */ + getTotalColumnHeaderHeight: function() { + return this.getColumnHeaders().length * 21; + }, + + /** + * Inherit docs + * @private + * @param {HTMLElement} el + */ + getCellIndex : function(el) { + if (el) { + var match = el.className.match(this.colRe), + data; + + if (match && (data = match[1])) { + return parseInt(data.split('-')[1], 10); + } + } + return false; + }, + + + /** + * @private + * Slight specialisation of the GridView renderUI - just adds the row headers + */ + renderUI : function() { + var templates = this.templates, + innerWidth = this.getGridInnerWidth(); + + return templates.master.apply({ + body : templates.body.apply({rows:' '}), + ostyle: 'width:' + innerWidth + 'px', + bstyle: 'width:' + innerWidth + 'px' + }); + }, + + /** + * @private + * Make sure that the headers and rows are all sized correctly during layout + */ + onLayout: function(width, height) { + Ext.grid.PivotGridView.superclass.onLayout.apply(this, arguments); + + var width = this.getGridInnerWidth(); + + this.resizeColumnHeaders(width); + this.resizeAllRows(width); + }, + + /** + * Refreshs the grid UI + * @param {Boolean} headersToo (optional) True to also refresh the headers + */ + refresh : function(headersToo) { + this.fireEvent('beforerefresh', this); + this.grid.stopEditing(true); + + var result = this.renderBody(); + this.mainBody.update(result).setWidth(this.getGridInnerWidth()); + if (headersToo === true) { + this.updateHeaders(); + this.updateHeaderSortState(); + } + this.processRows(0, true); + this.layout(); + this.applyEmptyText(); + this.fireEvent('refresh', this); + }, + + /** + * @private + * Bypasses GridView's renderHeaders as they are taken care of separately by the PivotAxis instances + */ + renderHeaders: Ext.emptyFn, + + /** + * @private + * Taken care of by PivotAxis + */ + fitColumns: Ext.emptyFn, + + /** + * @private + * Called on layout, ensures that the width of each column header is correct. Omitting this can lead to faulty + * layouts when nested in a container. + * @param {Number} width The new width + */ + resizeColumnHeaders: function(width) { + var topAxis = this.grid.topAxis; + + if (topAxis.rendered) { + topAxis.el.setWidth(width); + } + }, + + /** + * @private + * Sets the row header div to the correct width. Should be called after rendering and reconfiguration of headers + */ + resizeRowHeaders: function() { + var rowHeaderWidth = this.getTotalRowHeaderWidth(), + marginStyle = String.format("margin-left: {0}px;", rowHeaderWidth); + + this.rowHeadersEl.setWidth(rowHeaderWidth); + this.mainBody.applyStyles(marginStyle); + Ext.fly(this.innerHd).applyStyles(marginStyle); + + this.headerTitleEl.setWidth(rowHeaderWidth); + this.headerTitleEl.setHeight(this.getTotalColumnHeaderHeight()); + }, + + /** + * @private + * Resizes all rendered rows to the given width. Usually called by onLayout + * @param {Number} width The new width + */ + resizeAllRows: function(width) { + var rows = this.getRows(), + length = rows.length, + i; + + for (i = 0; i < length; i++) { + Ext.fly(rows[i]).setWidth(width); + Ext.fly(rows[i]).child('table').setWidth(width); + } + }, + + /** + * @private + * Updates the Row Headers, deferring the updating of Column Headers to GridView + */ + updateHeaders: function() { + this.renderGroupRowHeaders(); + this.renderGroupColumnHeaders(); + }, + + /** + * @private + * Renders all row header groups at all levels based on the structure fetched from {@link #getGroupRowHeaders} + */ + renderGroupRowHeaders: function() { + var leftAxis = this.grid.leftAxis; + + this.resizeRowHeaders(); + leftAxis.rendered = false; + leftAxis.render(this.rowHeadersEl); + + this.setTitle(this.title); + }, + + /** + * Sets the title text in the top left segment of the PivotGridView + * @param {String} title The title + */ + setTitle: function(title) { + this.headerTitleEl.child('span').dom.innerHTML = title; + }, + + /** + * @private + * Renders all column header groups at all levels based on the structure fetched from {@link #getColumnHeaders} + */ + renderGroupColumnHeaders: function() { + var topAxis = this.grid.topAxis; + + topAxis.rendered = false; + topAxis.render(this.innerHd.firstChild); + }, + + /** + * @private + * Overridden to test whether the user is hovering over a group cell, in which case we don't show the menu + */ + isMenuDisabled: function(cellIndex, el) { + return true; + } +});/** + * @class Ext.grid.PivotAxis + * @extends Ext.Component + *PivotAxis is a class that supports a {@link Ext.grid.PivotGrid}. Each PivotGrid contains two PivotAxis instances - the left + * axis and the top axis. Each PivotAxis defines an ordered set of dimensions, each of which should correspond to a field in a + * Store's Record (see {@link Ext.grid.PivotGrid} documentation for further explanation).
+ *Developers should have little interaction with the PivotAxis instances directly as most of their management is performed by + * the PivotGrid. An exception is the dynamic reconfiguration of axes at run time - to achieve this we use PivotAxis's + * {@link #setDimensions} function and refresh the grid:
+
+ * This clears the previous dimensions on the axis and redraws the grid with the new dimensions. + */ +Ext.grid.PivotAxis = Ext.extend(Ext.Component, { + /** + * @cfg {String} orientation One of 'vertical' or 'horizontal'. Defaults to horizontal + */ + orientation: 'horizontal', + + /** + * @cfg {Number} defaultHeaderWidth The width to render each row header that does not have a width specified via + {@link #getRowGroupHeaders}. Defaults to 80. + */ + defaultHeaderWidth: 80, + + /** + * @private + * @cfg {Number} paddingWidth The amount of padding used by each cell. + * TODO: From 4.x onwards this can be removed as it won't be needed. For now it is used to account for the differences between + * the content box and border box measurement models + */ + paddingWidth: 7, + + /** + * Updates the dimensions used by this axis + * @param {Array} dimensions The new dimensions + */ + setDimensions: function(dimensions) { + this.dimensions = dimensions; + }, + + /** + * @private + * Builds the html table that contains the dimensions for this axis. This branches internally between vertical + * and horizontal orientations because the table structure is slightly different in each case + */ + onRender: function(ct, position) { + var rows = this.orientation == 'horizontal' + ? this.renderHorizontalRows() + : this.renderVerticalRows(); + + this.el = Ext.DomHelper.overwrite(ct.dom, {tag: 'table', cn: rows}, true); + }, + + /** + * @private + * Specialised renderer for horizontal oriented axes + * @return {Object} The HTML Domspec for a horizontal oriented axis + */ + renderHorizontalRows: function() { + var headers = this.buildHeaders(), + rowCount = headers.length, + rows = [], + cells, cols, colCount, i, j; + + for (i = 0; i < rowCount; i++) { + cells = []; + cols = headers[i].items; + colCount = cols.length; + + for (j = 0; j < colCount; j++) { + cells.push({ + tag: 'td', + html: cols[j].header, + colspan: cols[j].span + }); + } + + rows[i] = { + tag: 'tr', + cn: cells + }; + } + + return rows; + }, + + /** + * @private + * Specialised renderer for vertical oriented axes + * @return {Object} The HTML Domspec for a vertical oriented axis + */ + renderVerticalRows: function() { + var headers = this.buildHeaders(), + colCount = headers.length, + rowCells = [], + rows = [], + rowCount, col, row, colWidth, i, j; + + for (i = 0; i < colCount; i++) { + col = headers[i]; + colWidth = col.width || 80; + rowCount = col.items.length; + + for (j = 0; j < rowCount; j++) { + row = col.items[j]; + + rowCells[row.start] = rowCells[row.start] || []; + rowCells[row.start].push({ + tag : 'td', + html : row.header, + rowspan: row.span, + width : Ext.isBorderBox ? colWidth : colWidth - this.paddingWidth + }); + } + } + + rowCount = rowCells.length; + for (i = 0; i < rowCount; i++) { + rows[i] = { + tag: 'tr', + cn : rowCells[i] + }; + } + + return rows; + }, + + /** + * @private + * Returns the set of all unique tuples based on the bound store and dimension definitions. + * Internally we construct a new, temporary store to make use of the multi-sort capabilities of Store. In + * 4.x this functionality should have been moved to MixedCollection so this step should not be needed. + * @return {Array} All unique tuples + */ + getTuples: function() { + var newStore = new Ext.data.Store({}); + + newStore.data = this.store.data.clone(); + newStore.fields = this.store.fields; + + var sorters = [], + dimensions = this.dimensions, + length = dimensions.length, + i; + + for (i = 0; i < length; i++) { + sorters.push({ + field : dimensions[i].dataIndex, + direction: dimensions[i].direction || 'ASC' + }); + } + + newStore.sort(sorters); + + var records = newStore.data.items, + hashes = [], + tuples = [], + recData, hash, info, data, key; + + length = records.length; + + for (i = 0; i < length; i++) { + info = this.getRecordInfo(records[i]); + data = info.data; + hash = ""; + + for (key in data) { + hash += data[key] + '---'; + } + + if (hashes.indexOf(hash) == -1) { + hashes.push(hash); + tuples.push(info); + } + } + + newStore.destroy(); + + return tuples; + }, + + /** + * @private + */ + getRecordInfo: function(record) { + var dimensions = this.dimensions, + length = dimensions.length, + data = {}, + dimension, dataIndex, i; + + //get an object containing just the data we are interested in based on the configured dimensions + for (i = 0; i < length; i++) { + dimension = dimensions[i]; + dataIndex = dimension.dataIndex; + + data[dataIndex] = record.get(dataIndex); + } + + //creates a specialised matcher function for a given tuple. The returned function will return + //true if the record passed to it matches the dataIndex values of each dimension in this axis + var createMatcherFunction = function(data) { + return function(record) { + for (var dataIndex in data) { + if (record.get(dataIndex) != data[dataIndex]) { + return false; + } + } + + return true; + }; + }; + + return { + data: data, + matcher: createMatcherFunction(data) + }; + }, + + /** + * @private + * Uses the calculated set of tuples to build an array of headers that can be rendered into a table using rowspan or + * colspan. Basically this takes the set of tuples and spans any cells that run into one another, so if we had dimensions + * of Person and Product and several tuples containing different Products for the same Person, those Products would be + * spanned. + * @return {Array} The headers + */ + buildHeaders: function() { + var tuples = this.getTuples(), + rowCount = tuples.length, + dimensions = this.dimensions, + dimension, + colCount = dimensions.length, + headers = [], + tuple, rows, currentHeader, previousHeader, span, start, isLast, changed, i, j; + + for (i = 0; i < colCount; i++) { + dimension = dimensions[i]; + rows = []; + span = 0; + start = 0; + + for (j = 0; j < rowCount; j++) { + tuple = tuples[j]; + isLast = j == (rowCount - 1); + currentHeader = tuple.data[dimension.dataIndex]; + + /* + * 'changed' indicates that we need to create a new cell. This should be true whenever the cell + * above (previousHeader) is different from this cell, or when the cell on the previous dimension + * changed (e.g. if the current dimension is Product and the previous was Person, we need to start + * a new cell if Product is the same but Person changed, so we check the previous dimension and tuple) + */ + changed = previousHeader != undefined && previousHeader != currentHeader; + if (i > 0 && j > 0) { + changed = changed || tuple.data[dimensions[i-1].dataIndex] != tuples[j-1].data[dimensions[i-1].dataIndex]; + } + + if (changed) { + rows.push({ + header: previousHeader, + span : span, + start : start + }); + + start += span; + span = 0; + } + + if (isLast) { + rows.push({ + header: currentHeader, + span : span + 1, + start : start + }); + + start += span; + span = 0; + } + + previousHeader = currentHeader; + span++; + } + + headers.push({ + items: rows, + width: dimension.width || this.defaultHeaderWidth + }); + + previousHeader = undefined; + } + + return headers; + } +}); // private // This is a support class used internally by the Grid components Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, { @@ -66809,8 +74860,8 @@ Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, { }, getDragData : function(e){ - var t = Ext.lib.Event.getTarget(e); - var h = this.view.findHeaderCell(t); + var t = Ext.lib.Event.getTarget(e), + h = this.view.findHeaderCell(t); if(h){ return {ddel: h.firstChild, header:h}; } @@ -66818,6 +74869,8 @@ Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, { }, onInitDrag : function(e){ + // keep the value here so we can restore it; + this.dragHeadersDisabled = this.view.headersDisabled; this.view.headersDisabled = true; var clone = this.dragData.ddel.cloneNode(true); clone.id = Ext.id(); @@ -66827,16 +74880,18 @@ Ext.grid.HeaderDragZone = Ext.extend(Ext.dd.DragZone, { }, afterValidDrop : function(){ - var v = this.view; - setTimeout(function(){ - v.headersDisabled = false; - }, 50); + this.completeDrop(); }, afterInvalidDrop : function(){ - var v = this.view; + this.completeDrop(); + }, + + completeDrop: function(){ + var v = this.view, + disabled = this.dragHeadersDisabled; setTimeout(function(){ - v.headersDisabled = false; + v.headersDisabled = disabled; }, 50); } }); @@ -66868,8 +74923,8 @@ Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, { }, getTargetFromEvent : function(e){ - var t = Ext.lib.Event.getTarget(e); - var cindex = this.view.findCellIndex(t); + var t = Ext.lib.Event.getTarget(e), + cindex = this.view.findCellIndex(t); if(cindex !== false){ return this.view.getHeaderCell(cindex); } @@ -66900,9 +74955,11 @@ Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, { }, positionIndicator : function(h, n, e){ - var x = Ext.lib.Event.getPageX(e); - var r = Ext.lib.Dom.getRegion(n.firstChild); - var px, pt, py = r.top + this.proxyOffsets[1]; + var x = Ext.lib.Event.getPageX(e), + r = Ext.lib.Dom.getRegion(n.firstChild), + px, + pt, + py = r.top + this.proxyOffsets[1]; if((r.right - x) <= (r.right-r.left)/2){ px = r.right+this.view.borderWidth; pt = "after"; @@ -66952,12 +75009,12 @@ Ext.grid.HeaderDropZone = Ext.extend(Ext.dd.DropZone, { onNodeDrop : function(n, dd, e, data){ var h = data.header; if(h != n){ - var cm = this.grid.colModel; - var x = Ext.lib.Event.getPageX(e); - var r = Ext.lib.Dom.getRegion(n.firstChild); - var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before"; - var oldIndex = this.view.getCellIndex(h); - var newIndex = this.view.getCellIndex(n); + var cm = this.grid.colModel, + x = Ext.lib.Event.getPageX(e), + r = Ext.lib.Dom.getRegion(n.firstChild), + pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before", + oldIndex = this.view.getCellIndex(h), + newIndex = this.view.getCellIndex(n); if(pt == "after"){ newIndex++; } @@ -67220,24 +75277,27 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * {@link #defaults} config property. */ defaultWidth: 100, + /** * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no * sortable specified (defaults to false). This property shall preferably be configured * through the {@link #defaults} config property. */ defaultSortable: false, + /** * @cfg {Array} columns An Array of object literals. The config options defined by * {@link Ext.grid.Column} are the options which may appear in the object literal for each * individual column definition. */ + /** * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column} * configuration options to all {@link #columns}. Configuration options specified with * individual {@link Ext.grid.Column column} configs will supersede these {@link #defaults}. */ - - constructor : function(config){ + + constructor : function(config) { /** * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration * of this ColumnModel. See {@link Ext.grid.Column} for the configuration properties that may @@ -67245,12 +75305,13 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @property config * @type Array */ - if(config.columns){ + if (config.columns) { Ext.apply(this, config); this.setConfig(config.columns, true); - }else{ + } else { this.setConfig(config, true); } + this.addEvents( /** * @event widthchange @@ -67263,6 +75324,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Number} newWidth The new width */ "widthchange", + /** * @event headerchange * Fires when the text of a header changes. @@ -67271,6 +75333,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {String} newText The new header text */ "headerchange", + /** * @event hiddenchange * Fires when a column is hidden or "unhidden". @@ -67279,6 +75342,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Boolean} hidden true if hidden, false otherwise */ "hiddenchange", + /** * @event columnmoved * Fires when a column is moved. @@ -67287,6 +75351,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Number} newIndex */ "columnmoved", + /** * @event configchange * Fires when the configuration is changed @@ -67294,6 +75359,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { */ "configchange" ); + Ext.grid.ColumnModel.superclass.constructor.call(this); }, @@ -67302,11 +75368,11 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Number} index The column index * @return {String} the id */ - getColumnId : function(index){ + getColumnId : function(index) { return this.config[index].id; }, - getColumnAt : function(index){ + getColumnAt : function(index) { return this.config[index]; }, @@ -67320,12 +75386,19 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Boolean} initial Specify true to bypass cleanup which deletes the totalWidth * and destroys existing editors. */ - setConfig : function(config, initial){ + setConfig : function(config, initial) { var i, c, len; - if(!initial){ // cleanup + + if (!initial) { // cleanup delete this.totalWidth; - for(i = 0, len = this.config.length; i < len; i++){ - this.config[i].destroy(); + + for (i = 0, len = this.config.length; i < len; i++) { + c = this.config[i]; + + if (c.setEditor) { + //check here, in case we have a special column like a CheckboxSelectionModel + c.setEditor(null); + } } } @@ -67338,20 +75411,24 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { this.config = config; this.lookup = {}; - for(i = 0, len = config.length; i < len; i++){ + for (i = 0, len = config.length; i < len; i++) { c = Ext.applyIf(config[i], this.defaults); + // if no id, create one using column's ordinal position - if(Ext.isEmpty(c.id)){ + if (Ext.isEmpty(c.id)) { c.id = i; } - if(!c.isColumn){ + + if (!c.isColumn) { var Cls = Ext.grid.Column.types[c.xtype || 'gridcolumn']; c = new Cls(c); config[i] = c; } + this.lookup[c.id] = c; } - if(!initial){ + + if (!initial) { this.fireEvent('configchange', this); } }, @@ -67361,7 +75438,7 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {String} id The column id * @return {Object} the column */ - getColumnById : function(id){ + getColumnById : function(id) { return this.lookup[id]; }, @@ -67370,9 +75447,9 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {String} id The column id * @return {Number} the index, or -1 if not found */ - getIndexById : function(id){ - for(var i = 0, len = this.config.length; i < len; i++){ - if(this.config[i].id == id){ + getIndexById : function(id) { + for (var i = 0, len = this.config.length; i < len; i++) { + if (this.config[i].id == id) { return i; } } @@ -67384,10 +75461,12 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Number} oldIndex The index of the column to move. * @param {Number} newIndex The position at which to reinsert the coolumn. */ - moveColumn : function(oldIndex, newIndex){ - var c = this.config[oldIndex]; - this.config.splice(oldIndex, 1); - this.config.splice(newIndex, 0, c); + moveColumn : function(oldIndex, newIndex) { + var config = this.config, + c = config[oldIndex]; + + config.splice(oldIndex, 1); + config.splice(newIndex, 0, c); this.dataMap = null; this.fireEvent("columnmoved", this, oldIndex, newIndex); }, @@ -67397,17 +75476,22 @@ Ext.grid.ColumnModel = Ext.extend(Ext.util.Observable, { * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns. * @return {Number} */ - getColumnCount : function(visibleOnly){ - if(visibleOnly === true){ - var c = 0; - for(var i = 0, len = this.config.length; i < len; i++){ - if(!this.isHidden(i)){ + getColumnCount : function(visibleOnly) { + var length = this.config.length, + c = 0, + i; + + if (visibleOnly === true) { + for (i = 0; i < length; i++) { + if (!this.isHidden(i)) { c++; } } + return c; } - return this.config.length; + + return length; }, /** @@ -67425,15 +75509,21 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * is executed. Defaults to this ColumnModel. * @return {Array} result */ - getColumnsBy : function(fn, scope){ - var r = []; - for(var i = 0, len = this.config.length; i < len; i++){ - var c = this.config[i]; - if(fn.call(scope||this, c, i) === true){ - r[r.length] = c; + getColumnsBy : function(fn, scope) { + var config = this.config, + length = config.length, + result = [], + i, c; + + for (i = 0; i < length; i++){ + c = config[i]; + + if (fn.call(scope || this, c, i) === true) { + result[result.length] = c; } } - return r; + + return result; }, /** @@ -67441,7 +75531,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @return {Boolean} */ - isSortable : function(col){ + isSortable : function(col) { return !!this.config[col].sortable; }, @@ -67450,7 +75540,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @return {Boolean} */ - isMenuDisabled : function(col){ + isMenuDisabled : function(col) { return !!this.config[col].menuDisabled; }, @@ -67459,14 +75549,11 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index. * @return {Function} The function used to render the cell. See {@link #setRenderer}. */ - getRenderer : function(col){ - if(!this.config[col].renderer){ - return Ext.grid.ColumnModel.defaultRenderer; - } - return this.config[col].renderer; + getRenderer : function(col) { + return this.config[col].renderer || Ext.grid.ColumnModel.defaultRenderer; }, - - getRendererScope : function(col){ + + getRendererScope : function(col) { return this.config[col].scope; }, @@ -67487,7 +75574,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ *+var pivotGrid = new Ext.grid.PivotGrid({ + //some PivotGrid config here +}); + +//change the left axis dimensions +pivotGrid.leftAxis.setDimensions([ + { + dataIndex: 'person', + direction: 'DESC', + width : 100 + }, + { + dataIndex: 'product', + direction: 'ASC', + width : 80 + } +]); + +pivotGrid.view.refresh(true); +- colIndex : Number
*Column index
- store : Ext.data.Store
*/ - setRenderer : function(col, fn){ + setRenderer : function(col, fn) { this.config[col].renderer = fn; }, @@ -67496,8 +75583,12 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @return {Number} */ - getColumnWidth : function(col){ - return this.config[col].width; + getColumnWidth : function(col) { + var width = this.config[col].width; + if(typeof width != 'number'){ + width = this.defaultWidth; + } + return width; }, /** @@ -67507,10 +75598,11 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Boolean} suppressEvent True to suppress firing theThe {@link Ext.data.Store} object from which the Record was extracted.
{@link #widthchange}* event. Defaults to false. */ - setColumnWidth : function(col, width, suppressEvent){ + setColumnWidth : function(col, width, suppressEvent) { this.config[col].width = width; this.totalWidth = null; - if(!suppressEvent){ + + if (!suppressEvent) { this.fireEvent("widthchange", this, col, width); } }, @@ -67520,11 +75612,11 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Boolean} includeHidden True to include hidden column widths * @return {Number} */ - getTotalWidth : function(includeHidden){ - if(!this.totalWidth){ + getTotalWidth : function(includeHidden) { + if (!this.totalWidth) { this.totalWidth = 0; - for(var i = 0, len = this.config.length; i < len; i++){ - if(includeHidden || !this.isHidden(i)){ + for (var i = 0, len = this.config.length; i < len; i++) { + if (includeHidden || !this.isHidden(i)) { this.totalWidth += this.getColumnWidth(i); } } @@ -67537,7 +75629,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @return {String} */ - getColumnHeader : function(col){ + getColumnHeader : function(col) { return this.config[col].header; }, @@ -67546,7 +75638,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @param {String} header The new header */ - setColumnHeader : function(col, header){ + setColumnHeader : function(col, header) { this.config[col].header = header; this.fireEvent("headerchange", this, col, header); }, @@ -67556,7 +75648,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @return {String} */ - getColumnTooltip : function(col){ + getColumnTooltip : function(col) { return this.config[col].tooltip; }, /** @@ -67564,7 +75656,7 @@ var columns = grid.getColumnModel().getColumnsBy(function(c){ * @param {Number} col The column index * @param {String} tooltip The new tooltip */ - setColumnTooltip : function(col, tooltip){ + setColumnTooltip : function(col, tooltip) { this.config[col].tooltip = tooltip; }, @@ -67577,7 +75669,7 @@ var fieldName = grid.getColumnModel().getDataIndex(columnIndex); * @param {Number} col The column index * @return {String} The column's dataIndex */ - getDataIndex : function(col){ + getDataIndex : function(col) { return this.config[col].dataIndex; }, @@ -67586,7 +75678,7 @@ var fieldName = grid.getColumnModel().getDataIndex(columnIndex); * @param {Number} col The column index * @param {String} dataIndex The new dataIndex */ - setDataIndex : function(col, dataIndex){ + setDataIndex : function(col, dataIndex) { this.config[col].dataIndex = dataIndex; }, @@ -67595,7 +75687,7 @@ var fieldName = grid.getColumnModel().getDataIndex(columnIndex); * @param {String} col The dataIndex to find * @return {Number} The column index, or -1 if no match was found */ - findColumnIndex : function(dataIndex){ + findColumnIndex : function(dataIndex) { var c = this.config; for(var i = 0, len = c.length; i < len; i++){ if(c[i].dataIndex == dataIndex){ @@ -67629,10 +75721,10 @@ var grid = new Ext.grid.GridPanel({ * @param {Number} rowIndex The row index * @return {Boolean} */ - isCellEditable : function(colIndex, rowIndex){ + isCellEditable : function(colIndex, rowIndex) { var c = this.config[colIndex], ed = c.editable; - + //force boolean return !!(ed || (!Ext.isDefined(ed) && c.editor)); }, @@ -67644,7 +75736,7 @@ var grid = new Ext.grid.GridPanel({ * @return {Ext.Editor} The {@link Ext.Editor Editor} that was created to wrap * the {@link Ext.form.Field Field} used to edit the cell. */ - getCellEditor : function(colIndex, rowIndex){ + getCellEditor : function(colIndex, rowIndex) { return this.config[colIndex].getCellEditor(rowIndex); }, @@ -67653,7 +75745,7 @@ var grid = new Ext.grid.GridPanel({ * @param {Number} col The column index * @param {Boolean} editable True if the column is editable */ - setEditable : function(col, editable){ + setEditable : function(col, editable) { this.config[col].editable = editable; }, @@ -67663,7 +75755,7 @@ var grid = new Ext.grid.GridPanel({ * @param {Number} colIndex The column index * @return {Boolean} */ - isHidden : function(colIndex){ + isHidden : function(colIndex) { return !!this.config[colIndex].hidden; // ensure returns boolean }, @@ -67673,7 +75765,7 @@ var grid = new Ext.grid.GridPanel({ * @param {Number} colIndex The column index * @return {Boolean} */ - isFixed : function(colIndex){ + isFixed : function(colIndex) { return !!this.config[colIndex].fixed; }, @@ -67681,9 +75773,10 @@ var grid = new Ext.grid.GridPanel({ * Returns true if the column can be resized * @return {Boolean} */ - isResizable : function(colIndex){ + isResizable : function(colIndex) { return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true; }, + /** * Sets if a column is hidden.@@ -67692,7 +75785,7 @@ myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first colu * @param {Number} colIndex The column index * @param {Boolean} hidden True if the column is hidden */ - setHidden : function(colIndex, hidden){ + setHidden : function(colIndex, hidden) { var c = this.config[colIndex]; if(c.hidden !== hidden){ c.hidden = hidden; @@ -67706,24 +75799,38 @@ myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first colu * @param {Number} col The column index * @param {Object} editor The editor object */ - setEditor : function(col, editor){ + setEditor : function(col, editor) { this.config[col].setEditor(editor); }, /** - * Destroys this column model by purging any event listeners, and removing any editors. + * Destroys this column model by purging any event listeners. Destroys and dereferences all Columns. */ - destroy : function(){ - for(var i = 0, len = this.config.length; i < len; i++){ - this.config[i].destroy(); + destroy : function() { + var length = this.config.length, + i = 0; + + for (; i < length; i++){ + this.config[i].destroy(); // Column's destroy encapsulates all cleanup. } + delete this.config; + delete this.lookup; this.purgeListeners(); + }, + + /** + * @private + * Setup any saved state for the column, ensures that defaults are applied. + */ + setState : function(col, state) { + state = Ext.applyIf(state, this.defaults); + Ext.apply(this.config[col], state); } }); // private -Ext.grid.ColumnModel.defaultRenderer = function(value){ - if(typeof value == "string" && value.length < 1){ +Ext.grid.ColumnModel.defaultRenderer = function(value) { + if (typeof value == "string" && value.length < 1) { return " "; } return value; @@ -67740,7 +75847,7 @@ Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable, { * @type Object * @property grid */ - + constructor : function(){ this.locked = false; Ext.grid.AbstractSelectionModel.superclass.constructor.call(this); @@ -67749,6 +75856,11 @@ Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable, { /** @ignore Called by the grid automatically. Do not call directly. */ init : function(grid){ this.grid = grid; + if(this.lockOnInit){ + delete this.lockOnInit; + this.locked = false; + this.lock(); + } this.initEvents(); }, @@ -67756,14 +75868,50 @@ Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable, { * Locks the selections. */ lock : function(){ + if(!this.locked){ + this.locked = true; + // If the grid has been set, then the view is already initialized. + var g = this.grid; + if(g){ + g.getView().on({ + scope: this, + beforerefresh: this.sortUnLock, + refresh: this.sortLock + }); + }else{ + this.lockOnInit = true; + } + } + }, + + // set the lock states before and after a view refresh + sortLock : function() { this.locked = true; }, + // set the lock states before and after a view refresh + sortUnLock : function() { + this.locked = false; + }, + /** * Unlocks the selections. */ unlock : function(){ - this.locked = false; + if(this.locked){ + this.locked = false; + var g = this.grid, + gv; + + // If the grid has been set, then the view is already initialized. + if(g){ + gv = g.getView(); + gv.un('beforerefresh', this.sortUnLock, this); + gv.un('refresh', this.sortLock, this); + }else{ + delete this.lockOnInit; + } + } }, /** @@ -67773,8 +75921,9 @@ Ext.grid.AbstractSelectionModel = Ext.extend(Ext.util.Observable, { isLocked : function(){ return this.locked; }, - + destroy: function(){ + this.unlock(); this.purgeListeners(); } });/** @@ -67854,34 +76003,8 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { } this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), { - 'up' : function(e){ - if(!e.shiftKey || this.singleSelect){ - this.selectPrevious(false); - }else if(this.last !== false && this.lastActive !== false){ - var last = this.last; - this.selectRange(this.last, this.lastActive-1); - this.grid.getView().focusRow(this.lastActive); - if(last !== false){ - this.last = last; - } - }else{ - this.selectFirstRow(); - } - }, - 'down' : function(e){ - if(!e.shiftKey || this.singleSelect){ - this.selectNext(false); - }else if(this.last !== false && this.lastActive !== false){ - var last = this.last; - this.selectRange(this.last, this.lastActive+1); - this.grid.getView().focusRow(this.lastActive); - if(last !== false){ - this.last = last; - } - }else{ - this.selectFirstRow(); - } - }, + up: this.onKeyPress, + down: this.onKeyPress, scope: this }); @@ -67893,13 +76016,37 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { }); }, + onKeyPress : function(e, name){ + var up = name == 'up', + method = up ? 'selectPrevious' : 'selectNext', + add = up ? -1 : 1, + last; + if(!e.shiftKey || this.singleSelect){ + this[method](false); + }else if(this.last !== false && this.lastActive !== false){ + last = this.last; + this.selectRange(this.last, this.lastActive + add); + this.grid.getView().focusRow(this.lastActive); + if(last !== false){ + this.last = last; + } + }else{ + this.selectFirstRow(); + } + }, + // private onRefresh : function(){ - var ds = this.grid.store, index; - var s = this.getSelections(); + var ds = this.grid.store, + s = this.getSelections(), + i = 0, + len = s.length, + index, r; + + this.silent = true; this.clearSelections(true); - for(var i = 0, len = s.length; i < len; i++){ - var r = s[i]; + for(; i < len; i++){ + r = s[i]; if((index = ds.indexOfId(r.id)) != -1){ this.selectRow(index, true); } @@ -67907,6 +76054,7 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { if(s.length != this.selections.getCount()){ this.fireEvent('selectionchange', this); } + this.silent = false; }, // private @@ -67932,8 +76080,10 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { if(!keepExisting){ this.clearSelections(); } - var ds = this.grid.store; - for(var i = 0, len = records.length; i < len; i++){ + var ds = this.grid.store, + i = 0, + len = records.length; + for(; i < len; i++){ this.selectRow(ds.indexOf(records[i]), true); } }, @@ -68031,8 +76181,11 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { * @return {Boolean} true if all selections were iterated */ each : function(fn, scope){ - var s = this.getSelections(); - for(var i = 0, len = s.length; i < len; i++){ + var s = this.getSelections(), + i = 0, + len = s.length; + + for(; i < len; i++){ if(fn.call(scope || this, s[i], i) === false){ return false; } @@ -68051,8 +76204,8 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { return; } if(fast !== true){ - var ds = this.grid.store; - var s = this.selections; + var ds = this.grid.store, + s = this.selections; s.each(function(r){ this.deselectRow(ds.indexOfId(r.id)); }, this); @@ -68210,8 +76363,10 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { if(!preventViewNotify){ this.grid.getView().onRowSelect(index); } - this.fireEvent('rowselect', this, index, r); - this.fireEvent('selectionchange', this); + if(!this.silent){ + this.fireEvent('rowselect', this, index, r); + this.fireEvent('selectionchange', this); + } } }, @@ -68245,13 +76400,6 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { } }, - // private - restoreLast : function(){ - if(this._last){ - this.last = this._last; - } - }, - // private acceptsNav : function(row, col, cm){ return !cm.isHidden(col) && cm.isCellEditable(col, row); @@ -68264,8 +76412,9 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { g = this.grid, last = g.lastEdit, ed = g.activeEditor, + shift = e.shiftKey, ae, last, r, c; - var shift = e.shiftKey; + if(k == e.TAB){ e.stopEvent(); ed.completeEdit(); @@ -68287,9 +76436,7 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { r = newCell[0]; c = newCell[1]; - if(last.row != r){ - this.selectRow(r); // *** highlight newly-selected cell and update selection - } + this.onEditorSelect(r, last.row); if(g.isEditor && g.editing){ // *** handle tabbing while editorgrid is in edit mode ae = g.activeEditor; @@ -68302,21 +76449,26 @@ Ext.grid.RowSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { } }, - destroy : function(){ - if(this.rowNav){ - this.rowNav.disable(); - this.rowNav = null; + onEditorSelect: function(row, lastRow){ + if(lastRow != row){ + this.selectRow(row); // *** highlight newly-selected cell and update selection } + }, + + destroy : function(){ + Ext.destroy(this.rowNav); + this.rowNav = null; Ext.grid.RowSelectionModel.superclass.destroy.call(this); } -});/** +}); +/** * @class Ext.grid.Column *+ *This class encapsulates column configuration data to be used in the initialization of a * {@link Ext.grid.ColumnModel ColumnModel}.
*While subclasses are provided to render data in different ways, this class renders a passed * data field unchanged and is usually used for textual columns.
*/ -Ext.grid.Column = Ext.extend(Object, { +Ext.grid.Column = Ext.extend(Ext.util.Observable, { /** * @cfg {Boolean} editable Optional. Defaults to true, enabling the configured * {@link #editor}. Set to false to initially disable editing on this column. @@ -68336,7 +76488,7 @@ Ext.grid.Column = Ext.extend(Object, { /** * @cfg {String} header Optional. The header text to be used as innerHTML * (html tags are accepted) to display in the Grid view. Note: to - * have a clickable header with no text displayed use ' '. + * have a clickable header with no text displayed use ' '. */ /** * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option @@ -68416,7 +76568,7 @@ Ext.grid.Column = Ext.extend(Object, { * @cfg {Boolean} hidden * Optional. true to initially hide this column. Defaults to false. * A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}. - * If a column is never to be shown, simply do not include this column in the Column Model at all. + * If a column is never to be shown, simply do not include this column in the Column Model at all. */ /** * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips @@ -68521,10 +76673,10 @@ var grid = new Ext.grid.GridPanel({ * Defaults to true. */ isColumn : true, - + constructor : function(config){ Ext.apply(this, config); - + if(Ext.isString(this.renderer)){ this.renderer = Ext.util.Format[this.renderer]; }else if(Ext.isObject(this.renderer)){ @@ -68534,10 +76686,69 @@ var grid = new Ext.grid.GridPanel({ if(!this.scope){ this.scope = this; } - + var ed = this.editor; delete this.editor; this.setEditor(ed); + this.addEvents( + /** + * @event click + * Fires when this Column is clicked. + * @param {Column} this + * @param {Grid} The owning GridPanel + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'click', + /** + * @event contextmenu + * Fires when this Column is right clicked. + * @param {Column} this + * @param {Grid} The owning GridPanel + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'contextmenu', + /** + * @event dblclick + * Fires when this Column is double clicked. + * @param {Column} this + * @param {Grid} The owning GridPanel + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'dblclick', + /** + * @event mousedown + * Fires when this Column receives a mousedown event. + * @param {Column} this + * @param {Grid} The owning GridPanel + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'mousedown' + ); + Ext.grid.Column.superclass.constructor.call(this); + }, + + /** + * @private + * Process and refire events routed from the GridView's processEvent method. + * Returns the event handler's status to allow cancelling of GridView's bubbling process. + */ + processEvent : function(name, e, grid, rowIndex, colIndex){ + return this.fireEvent(name, this, grid, rowIndex, e); + }, + + /** + * @private + * Clean up. Remove any Editor. Remove any listeners. + */ + destroy: function() { + if(this.setEditor){ + this.setEditor(null); + } + this.purgeListeners(); }, /** @@ -68559,9 +76770,6 @@ var grid = new Ext.grid.GridPanel({ * @type Function */ renderer : function(value){ - if(Ext.isString(value) && value.length < 1){ - return ' '; - } return value; }, @@ -68569,14 +76777,20 @@ var grid = new Ext.grid.GridPanel({ getEditor: function(rowIndex){ return this.editable !== false ? this.editor : null; }, - + /** * Sets a new editor for this column. * @param {Ext.Editor/Ext.form.Field} editor The editor to set */ setEditor : function(editor){ - if(this.editor){ - this.editor.destroy(); + var ed = this.editor; + if(ed){ + if(ed.gridEditor){ + ed.gridEditor.destroy(); + delete ed.gridEditor; + }else{ + ed.destroy(); + } } this.editor = null; if(editor){ @@ -68584,17 +76798,9 @@ var grid = new Ext.grid.GridPanel({ if(!editor.isXType){ editor = Ext.create(editor, 'textfield'); } - //check if it's wrapped in an editor - if(!editor.startEdit){ - editor = new Ext.grid.GridEditor(editor); - } this.editor = editor; } }, - - destroy : function(){ - this.setEditor(null); - }, /** * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} @@ -68603,7 +76809,16 @@ var grid = new Ext.grid.GridPanel({ * @return {Ext.Editor} */ getCellEditor: function(rowIndex){ - return this.getEditor(rowIndex); + var ed = this.getEditor(rowIndex); + if(ed){ + if(!ed.startEdit){ + if(!ed.gridEditor){ + ed.gridEditor = new Ext.grid.GridEditor(ed); + } + ed = ed.gridEditor; + } + } + return ed; } }); @@ -68616,18 +76831,18 @@ var grid = new Ext.grid.GridPanel({ Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { /** * @cfg {String} trueText - * The string returned by the renderer when the column value is not falsey (defaults to 'true'). + * The string returned by the renderer when the column value is not falsy (defaults to 'true'). */ trueText: 'true', /** * @cfg {String} falseText - * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to + * The string returned by the renderer when the column value is falsy (but not undefined) (defaults to * 'false'). */ falseText: 'false', /** * @cfg {String} undefinedText - * The string returned by the renderer when the column value is undefined (defaults to ' '). + * The string returned by the renderer when the column value is undefined (defaults to ' '). */ undefinedText: ' ', @@ -68709,6 +76924,188 @@ Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { } }); +/** + * @class Ext.grid.ActionColumn + * @extends Ext.grid.Column + *A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click + * handler for each icon. Example usage:
++new Ext.grid.GridPanel({ + store: myStore, + columns: [ + { + xtype: 'actioncolumn', + width: 50, + items: [ + { + icon : 'sell.gif', // Use a URL in the icon config + tooltip: 'Sell stock', + handler: function(grid, rowIndex, colIndex) { + var rec = store.getAt(rowIndex); + alert("Sell " + rec.get('company')); + } + }, + { + getClass: function(v, meta, rec) { // Or return a class from a function + if (rec.get('change') < 0) { + this.items[1].tooltip = 'Do not buy!'; + return 'alert-col'; + } else { + this.items[1].tooltip = 'Buy stock'; + return 'buy-col'; + } + }, + handler: function(grid, rowIndex, colIndex) { + var rec = store.getAt(rowIndex); + alert("Buy " + rec.get('company')); + } + } + ] + } + //any other columns here + ] +}); +The action column can be at any index in the columns array, and a grid can have any number of + * action columns.
+ */ +Ext.grid.ActionColumn = Ext.extend(Ext.grid.Column, { + /** + * @cfg {String} icon + * The URL of an image to display as the clickable element in the column. + * Optional - defaults to{@link Ext#BLANK_IMAGE_URL Ext.BLANK_IMAGE_URL}. + */ + /** + * @cfg {String} iconCls + * A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a{@link #getClass}function. + */ + /** + * @cfg {Function} handler A function called when the icon is clicked. + * The handler is passed the following parameters:+ */ + /** + * @cfg {Object} scope The scope (this reference) in which the-
+ *
grid: GridPanelThe owning GridPanel.
+ * rowIndex: NumberThe row index clicked on.
+ * colIndex: NumberThe column index clicked on.
+ * item: ObjectThe clicked item (or this Column if multiple + * {@link #items} were not configured).
+ * e: EventThe click event.
+ *
{@link #handler}+ * and{@link #getClass}fuctions are executed. Defaults to this Column. + */ + /** + * @cfg {String} tooltip A tooltip message to be displayed on hover. {@link Ext.QuickTips#init Ext.QuickTips} must have + * been initialized. + */ + /** + * @cfg {Boolean} stopSelection Defaults totrue. Prevent grid row selection upon mousedown. + */ + /** + * @cfg {Function} getClass A function which returns the CSS class to apply to the icon image. + * The function is passed the following parameters:+ */ + /** + * @cfg {Array} items An Array which may contain multiple icon definitions, each element of which may contain: + *-
+ *
- v : Object
The value of the column's configured field (if any).
+ * - metadata : Object
An object in which you may set the following attributes:
-
+ *
- css : String
A CSS class name to add to the cell's TD element.
+ * - attr : String
An HTML attribute definition string to apply to the data container element within the table cell + * (e.g. 'style="color:red;"').
+ *
+ * - css : String
- r : Ext.data.Record
The Record providing the data.
+ * - rowIndex : Number
The row index..
+ * - colIndex : Number
The column index.
+ * - store : Ext.data.Store
The Store which is providing the data Model.
+ *
+ */ + header: ' ', + + actionIdRe: /x-action-col-(\d+)/, + + /** + * @cfg {String} altText The alt text to use for the image element. Defaults to ''. + */ + altText: '', + + constructor: function(cfg) { + var me = this, + items = cfg.items || (me.items = [me]), + l = items.length, + i, + item; + + Ext.grid.ActionColumn.superclass.constructor.call(me, cfg); + +// Renderer closure iterates through items creating an-
+ *
icon: StringThe url of an image to display as the clickable element + * in the column.
+ * iconCls: StringA CSS class to apply to the icon image. + * To determine the class dynamically, configure the item with agetClassfunction.
+ * getClass: FunctionA function which returns the CSS class to apply to the icon image. + * The function is passed the following parameters:-
+ *
- v : Object
The value of the column's configured field (if any).
+ * - metadata : Object
An object in which you may set the following attributes:
-
+ *
- css : String
A CSS class name to add to the cell's TD element.
+ * - attr : String
An HTML attribute definition string to apply to the data container element within the table cell + * (e.g. 'style="color:red;"').
+ *
+ * - css : String
- r : Ext.data.Record
The Record providing the data.
+ * - rowIndex : Number
The row index..
+ * - colIndex : Number
The column index.
+ * - store : Ext.data.Store
The Store which is providing the data Model.
+ *
+ * - v : Object
handler: FunctionA function called when the icon is clicked.
+ * scope: ScopeThe scope (thisreference) in which the + *handlerandgetClassfunctions are executed. Fallback defaults are this Column's + * configured scope, then this Column.
+ * tooltip: StringA tooltip message to be displayed on hover. + * {@link Ext.QuickTips#init Ext.QuickTips} must have been initialized.
+ *
element for each and tagging with an identifying +// class name x-action-col-{n} + me.renderer = function(v, meta) { +// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!) + v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : ''; + + meta.css += ' x-action-col-cell'; + for (i = 0; i < l; i++) { + item = items[i]; + v += '
'; + } + return v; + }; + }, + + destroy: function() { + delete this.items; + delete this.renderer; + return Ext.grid.ActionColumn.superclass.destroy.apply(this, arguments); + }, + + /** + * @private + * Process and refire events routed from the GridView's processEvent method. + * Also fires any configured click handlers. By default, cancels the mousedown event to prevent selection. + * Returns the event handler's status to allow cancelling of GridView's bubbling process. + */ + processEvent : function(name, e, grid, rowIndex, colIndex){ + var m = e.getTarget().className.match(this.actionIdRe), + item, fn; + if (m && (item = this.items[parseInt(m[1], 10)])) { + if (name == 'click') { + (fn = item.handler || this.handler) && fn.call(item.scope||this.scope||this, grid, rowIndex, colIndex, item, e); + } else if ((name == 'mousedown') && (item.stopSelection !== false)) { + return false; + } + } + return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments); + } +}); + /* * @property types * @type Object @@ -68729,7 +77126,8 @@ Ext.grid.Column.types = { booleancolumn: Ext.grid.BooleanColumn, numbercolumn: Ext.grid.NumberColumn, datecolumn: Ext.grid.DateColumn, - templatecolumn: Ext.grid.TemplateColumn + templatecolumn: Ext.grid.TemplateColumn, + actioncolumn: Ext.grid.ActionColumn };/** * @class Ext.grid.RowNumberer * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides @@ -68772,6 +77170,7 @@ Ext.grid.RowNumberer = Ext.extend(Object, { // private fixed:true, + hideable: false, menuDisabled:true, dataIndex: '', id: 'numberer', @@ -68822,12 +77221,13 @@ Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { // private menuDisabled : true, fixed : true, + hideable: false, dataIndex : '', id : 'checker', + isColumn: true, // So that ColumnModel doesn't feed this through the Column constructor constructor : function(){ Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments); - if(this.checkOnly){ this.handleMouseDown = Ext.emptyFn; } @@ -68837,13 +77237,23 @@ Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { initEvents : function(){ Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this); this.grid.on('render', function(){ - var view = this.grid.getView(); - view.mainBody.on('mousedown', this.onMouseDown, this); - Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); - + Ext.fly(this.grid.getView().innerHd).on('mousedown', this.onHdMouseDown, this); }, this); }, + /** + * @private + * Process and refire events routed from the GridView's processEvent method. + */ + processEvent : function(name, e, grid, rowIndex, colIndex){ + if (name == 'mousedown') { + this.onMouseDown(e, e.getTarget()); + return false; + } else { + return Ext.grid.Column.prototype.processEvent.apply(this, arguments); + } + }, + // private onMouseDown : function(e, t){ if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click @@ -68855,13 +77265,14 @@ Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { this.deselectRow(index); }else{ this.selectRow(index, true); + this.grid.getView().focusRow(index); } } } }, // private - onHdMouseDown : function(e, t){ + onHdMouseDown : function(e, t) { if(t.className == 'x-grid3-hd-checker'){ e.stopEvent(); var hd = Ext.fly(t.parentNode); @@ -68879,6 +77290,12 @@ Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { // private renderer : function(v, p, record){ return '
'; + }, + + onEditorSelect: function(row, lastRow){ + if(lastRow != row && !this.checkOnly){ + this.selectRow(row); // *** highlight newly-selected cell and update selection + } } });/** * @class Ext.grid.CellSelectionModel @@ -68937,7 +77354,7 @@ Ext.grid.CellSelectionModel = Ext.extend(Ext.grid.AbstractSelectionModel, { /** @ignore */ initEvents : function(){ this.grid.on('cellmousedown', this.handleMouseDown, this); - this.grid.on(Ext.EventManager.useKeydown ? 'keydown' : 'keypress', this.handleKeyDown, this); + this.grid.on(Ext.EventManager.getKeyEvent(), this.handleKeyDown, this); this.grid.getView().on({ scope: this, refresh: this.onViewChange, @@ -69358,6 +77775,7 @@ grid.on('validateedit', function(e) { // private onEditComplete : function(ed, value, startValue){ this.editing = false; + this.lastActiveEditor = this.activeEditor; this.activeEditor = null; var r = ed.record, @@ -69731,8 +78149,13 @@ Ext.grid.PropertyColumnModel = Ext.extend(Ext.grid.ColumnModel, { // inherit docs destroy : function(){ Ext.grid.PropertyColumnModel.superclass.destroy.call(this); - for(var ed in this.editors){ - Ext.destroy(this.editors[ed]); + this.destroyEditors(this.editors); + this.destroyEditors(this.grid.customEditors); + }, + + destroyEditors: function(editors){ + for(var ed in editors){ + Ext.destroy(editors[ed]); } } }); @@ -69956,10 +78379,10 @@ Ext.reg("propertygrid", Ext.grid.PropertyGrid); * Adds the ability for single level grouping to the grid. A {@link Ext.data.GroupingStore GroupingStore} * must be used to enable grouping. Some grouping characteristics may also be configured at the * {@link Ext.grid.Column Column level}*-
- *
{@link Ext.grid.Column#emptyGroupText emptyGroupText}
- * {@link Ext.grid.Column#groupable groupable}
- * {@link Ext.grid.Column#groupName groupName}
- * {@link Ext.grid.Column#groupRender groupRender}
+ * {@link Ext.grid.Column#emptyGroupText emptyGroupText}
+ * {@link Ext.grid.Column#groupable groupable}
+ * {@link Ext.grid.Column#groupName groupName}
+ * {@link Ext.grid.Column#groupRender groupRender}
*
Sample usage:
*@@ -70097,8 +78520,10 @@ var grid = new Ext.grid.GridPanel({ * each column. */ - // private - gidSeed : 1000, + /** + * @cfg {Boolean} cancelEditOnToggle True to cancel any editing when the group header is toggled. Defaults to true. + */ + cancelEditOnToggle: true, // private initTemplates : function(){ @@ -70117,11 +78542,10 @@ var grid = new Ext.grid.GridPanel({ ); } this.startGroup.compile(); - if(!this.endGroup){ + + if (!this.endGroup) { this.endGroup = ' - columns : String
",h="
",b=a+"",i=""+h,k=b+"",r=" "+i;function g(w,y,x,z,v,t){var u=p.insertHtml(z,Ext.getDom(w),q(y));return x?Ext.get(u,true):u}function q(z){var v="",u,y,x,t,A;if(Ext.isString(z)){v=z}else{if(Ext.isArray(z)){for(var w=0;w'+n.indicatorText+""}if(s.indicatorText){Ext.getDom(n.el).innerHTML=s.indicatorText}n.success=(Ext.isFunction(n.success)?n.success:function(){}).createInterceptor(function(o){Ext.getDom(n.el).innerHTML=o.responseText})}var l=n.params,k=n.url||s.url,j,q={success:s.handleResponse,failure:s.handleFailure,scope:s,argument:{options:n},timeout:n.timeout||s.timeout},m,t;if(Ext.isFunction(l)){l=l.call(n.scope||g,n)}l=Ext.urlEncode(s.extraParams,Ext.isObject(l)?Ext.urlEncode(l):l);if(Ext.isFunction(k)){k=k.call(n.scope||g,n)}if((m=Ext.getDom(n.form))){k=k||m.action;if(n.isUpload||/multipart\/form-data/i.test(m.getAttribute("enctype"))){return s.doFormUpload.call(s,n,l,k)}t=Ext.lib.Ajax.serializeForm(m);l=l?(l+"&"+t):t}j=n.method||s.method||((l||n.xmlData||n.jsonData)?i:a);if(j===a&&(s.disableCaching&&n.disableCaching!==false)||n.disableCaching===true){var r=n.disableCachingParam||s.disableCachingParam;k=Ext.urlAppend(k,r+"="+(new Date().getTime()))}n.headers=Ext.apply(n.headers||{},s.defaultHeaders||{});if(n.autoAbort===true||s.autoAbort){s.abort()}if((j==a||n.xmlData||n.jsonData)&&l){k=Ext.urlAppend(k,l);l=""}return(s.transId=Ext.lib.Ajax.request(j,k,q,l,n))}else{return n.callback?n.callback.apply(n.scope,[n,h,h]):null}},isLoading:function(j){return j?Ext.lib.Ajax.isCallInProgress(j):!!this.transId},abort:function(j){if(j||this.isLoading()){Ext.lib.Ajax.abort(j||this.transId)}},handleResponse:function(j){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(e,this,j,k);if(k.success){k.success.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,true,j)}},handleFailure:function(j,l){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(d,this,j,k,l);if(k.failure){k.failure.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,false,j)}},doFormUpload:function(q,j,k){var l=Ext.id(),v=document,r=v.createElement("iframe"),m=Ext.getDom(q.form),u=[],t,p="multipart/form-data",n={target:m.target,method:m.method,encoding:m.encoding,enctype:m.enctype,action:m.action};Ext.fly(r).set({id:l,name:l,cls:"x-hidden"});v.body.appendChild(r);Ext.fly(r).set({src:Ext.SSL_SECURE_URL});if(Ext.isIE){document.frames[l].name=l}Ext.fly(m).set({target:l,method:i,enctype:p,encoding:p,action:k||n.action});Ext.iterate(Ext.urlDecode(j,false),function(w,o){t=v.createElement("input");Ext.fly(t).set({type:"hidden",value:o,name:w});m.appendChild(t);u.push(t)});function s(){var x=this,w={responseText:"",responseXML:null,argument:q.argument},A,z;try{A=r.contentWindow.document||r.contentDocument||g.frames[l].document;if(A){if(A.body){if(/textarea/i.test((z=A.body.firstChild||{}).tagName)){w.responseText=z.value}else{w.responseText=A.body.innerHTML}}w.responseXML=A.XMLDocument||A}}catch(y){}Ext.EventManager.removeListener(r,c,s,x);x.fireEvent(e,x,w,q);function o(D,C,B){if(Ext.isFunction(D)){D.apply(C,B)}}o(q.success,q.scope,[w,q]);o(q.callback,q.scope,[q,true,w]);if(!x.debugUploads){setTimeout(function(){Ext.removeNode(r)},100)}}Ext.EventManager.on(r,c,s,this);m.submit();Ext.fly(m).set(n);Ext.each(u,function(o){Ext.removeNode(o)})}})})();Ext.Ajax=new Ext.data.Connection({autoAbort:false,serializeForm:function(a){return Ext.lib.Ajax.serializeForm(a)}});Ext.UpdateManager=Ext.Updater=Ext.extend(Ext.util.Observable,function(){var b="beforeupdate",d="update",c="failure";function a(h){var i=this;i.transaction=null;if(h.argument.form&&h.argument.reset){try{h.argument.form.reset()}catch(j){}}if(i.loadScripts){i.renderer.render(i.el,h,i,g.createDelegate(i,[h]))}else{i.renderer.render(i.el,h,i);g.call(i,h)}}function g(h,i,j){this.fireEvent(i||d,this.el,h);if(Ext.isFunction(h.argument.callback)){h.argument.callback.call(h.argument.scope,this.el,Ext.isEmpty(j)?true:false,h,h.argument.options)}}function e(h){g.call(this,h,c,!!(this.transaction=null))}return{constructor:function(i,h){var j=this;i=Ext.get(i);if(!h&&i.updateManager){return i.updateManager}j.el=i;j.defaultUrl=null;j.addEvents(b,d,c);Ext.apply(j,Ext.Updater.defaults);j.transaction=null;j.refreshDelegate=j.refresh.createDelegate(j);j.updateDelegate=j.update.createDelegate(j);j.formUpdateDelegate=(j.formUpdate||function(){}).createDelegate(j);j.renderer=j.renderer||j.getDefaultRenderer();Ext.Updater.superclass.constructor.call(j)},setRenderer:function(h){this.renderer=h},getRenderer:function(){return this.renderer},getDefaultRenderer:function(){return new Ext.Updater.BasicRenderer()},setDefaultUrl:function(h){this.defaultUrl=h},getEl:function(){return this.el},update:function(i,n,p,l){var k=this,h,j;if(k.fireEvent(b,k.el,i,n)!==false){if(Ext.isObject(i)){h=i;i=h.url;n=n||h.params;p=p||h.callback;l=l||h.discardUrl;j=h.scope;if(!Ext.isEmpty(h.nocache)){k.disableCaching=h.nocache}if(!Ext.isEmpty(h.text)){k.indicatorText=''+h.text+""}if(!Ext.isEmpty(h.scripts)){k.loadScripts=h.scripts}if(!Ext.isEmpty(h.timeout)){k.timeout=h.timeout}}k.showLoading();if(!l){k.defaultUrl=i}if(Ext.isFunction(i)){i=i.call(k)}var m=Ext.apply({},{url:i,params:(Ext.isFunction(n)&&j)?n.createDelegate(j):n,success:a,failure:e,scope:k,callback:undefined,timeout:(k.timeout*1000),disableCaching:k.disableCaching,argument:{options:h,url:i,form:null,callback:p,scope:j||window,params:n}},h);k.transaction=Ext.Ajax.request(m)}},formUpdate:function(k,h,j,l){var i=this;if(i.fireEvent(b,i.el,k,h)!==false){if(Ext.isFunction(h)){h=h.call(i)}k=Ext.getDom(k);i.transaction=Ext.Ajax.request({form:k,url:h,success:a,failure:e,scope:i,timeout:(i.timeout*1000),argument:{url:h,form:k,callback:l,reset:j}});i.showLoading.defer(1,i)}},startAutoRefresh:function(i,j,l,m,h){var k=this;if(h){k.update(j||k.defaultUrl,l,m,true)}if(k.autoRefreshProcId){clearInterval(k.autoRefreshProcId)}k.autoRefreshProcId=setInterval(k.update.createDelegate(k,[j||k.defaultUrl,l,m,true]),i*1000)},stopAutoRefresh:function(){if(this.autoRefreshProcId){clearInterval(this.autoRefreshProcId);delete this.autoRefreshProcId}},isAutoRefreshing:function(){return !!this.autoRefreshProcId},showLoading:function(){if(this.showLoadIndicator){this.el.dom.innerHTML=this.indicatorText}},abort:function(){if(this.transaction){Ext.Ajax.abort(this.transaction)}},isUpdating:function(){return this.transaction?Ext.Ajax.isLoading(this.transaction):false},refresh:function(h){if(this.defaultUrl){this.update(this.defaultUrl,null,h,true)}}}}());Ext.Updater.defaults={timeout:30,disableCaching:false,showLoadIndicator:true,indicatorText:'Loading...',loadScripts:false,sslBlankUrl:Ext.SSL_SECURE_URL};Ext.Updater.updateElement=function(d,c,e,b){var a=Ext.get(d).getUpdater();Ext.apply(a,b);a.update(c,e,b?b.callback:null)};Ext.Updater.BasicRenderer=function(){};Ext.Updater.BasicRenderer.prototype={render:function(c,a,b,d){c.update(a.responseText,b.loadScripts,d)}};(function(){Date.useStrict=false;function b(d){var c=Array.prototype.slice.call(arguments,1);return d.replace(/\{(\d+)\}/g,function(e,g){return c[g]})}Date.formatCodeToRegex=function(d,c){var e=Date.parseCodes[d];if(e){e=typeof e=="function"?e():e;Date.parseCodes[d]=e}return e?Ext.applyIf({c:e.c?b(e.c,c||"{0}"):e.c},e):{g:0,c:null,s:Ext.escapeRe(d)}};var a=Date.formatCodeToRegex;Ext.apply(Date,{parseFunctions:{"M$":function(d,c){var e=new RegExp("\\/Date\\(([-+])?(\\d+)(?:[+-]\\d{4})?\\)\\/");var g=(d||"").match(e);return g?new Date(((g[1]||"")+g[2])*1):null}},parseRegexes:[],formatFunctions:{"M$":function(){return"\\/Date("+this.getTime()+")\\/"}},y2kYear:50,MILLI:"ms",SECOND:"s",MINUTE:"mi",HOUR:"h",DAY:"d",MONTH:"mo",YEAR:"y",defaults:{},dayNames:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["January","February","March","April","May","June","July","August","September","October","November","December"],monthNumbers:{Jan:0,Feb:1,Mar:2,Apr:3,May:4,Jun:5,Jul:6,Aug:7,Sep:8,Oct:9,Nov:10,Dec:11},getShortMonthName:function(c){return Date.monthNames[c].substring(0,3)},getShortDayName:function(c){return Date.dayNames[c].substring(0,3)},getMonthNumber:function(c){return Date.monthNumbers[c.substring(0,1).toUpperCase()+c.substring(1,3).toLowerCase()]},formatCodes:{d:"String.leftPad(this.getDate(), 2, '0')",D:"Date.getShortDayName(this.getDay())",j:"this.getDate()",l:"Date.dayNames[this.getDay()]",N:"(this.getDay() ? this.getDay() : 7)",S:"this.getSuffix()",w:"this.getDay()",z:"this.getDayOfYear()",W:"String.leftPad(this.getWeekOfYear(), 2, '0')",F:"Date.monthNames[this.getMonth()]",m:"String.leftPad(this.getMonth() + 1, 2, '0')",M:"Date.getShortMonthName(this.getMonth())",n:"(this.getMonth() + 1)",t:"this.getDaysInMonth()",L:"(this.isLeapYear() ? 1 : 0)",o:"(this.getFullYear() + (this.getWeekOfYear() == 1 && this.getMonth() > 0 ? +1 : (this.getWeekOfYear() >= 52 && this.getMonth() < 11 ? -1 : 0)))",Y:"this.getFullYear()",y:"('' + this.getFullYear()).substring(2, 4)",a:"(this.getHours() < 12 ? 'am' : 'pm')",A:"(this.getHours() < 12 ? 'AM' : 'PM')",g:"((this.getHours() % 12) ? this.getHours() % 12 : 12)",G:"this.getHours()",h:"String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0')",H:"String.leftPad(this.getHours(), 2, '0')",i:"String.leftPad(this.getMinutes(), 2, '0')",s:"String.leftPad(this.getSeconds(), 2, '0')",u:"String.leftPad(this.getMilliseconds(), 3, '0')",O:"this.getGMTOffset()",P:"this.getGMTOffset(true)",T:"this.getTimezone()",Z:"(this.getTimezoneOffset() * -60)",c:function(){for(var k="Y-m-dTH:i:sP",h=[],g=0,d=k.length;g",i," "].join("");while((q=i.match(p))){var b=q[0].match(d),a=q[0].match(t),y=q[0].match(v),g=null,h=null,r=null,x=b&&b[1]?b[1]:"";if(a){g=a&&a[1]?a[1]:null;if(g){h=new Function(n,u,k,l,c+e+(Ext.util.Format.htmlDecode(g))+"; }")}}if(y){g=y&&y[1]?y[1]:null;if(g){r=new Function(n,u,k,l,c+(Ext.util.Format.htmlDecode(g))+"; }")}}if(x){switch(x){case".":x=new Function(n,u,c+e+n+"; }");break;case"..":x=new Function(n,u,c+e+u+"; }");break;default:x=new Function(n,u,c+e+x+"; }")}}j.push({id:o,target:x,exec:r,test:h,body:q[1]||""});i=i.replace(q[0],"{xtpl"+o+"}");++o}Ext.each(j,function(m){w.compileTpl(m)});w.master=j[j.length-1];w.tpls=j};Ext.extend(Ext.XTemplate,Ext.Template,{re:/\{([\w-\.\#]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\\]\s?[\d\.\+\-\*\\\(\)]+)?\}/g,codeRe:/\{\[((?:\\\]|.|\n)*?)\]\}/g,applySubTemplate:function(a,i,h,d,c){var g=this,e,k=g.tpls[a],j,b=[];if((k.test&&!k.test.call(g,i,h,d,c))||(k.exec&&k.exec.call(g,i,h,d,c))){return""}j=k.target?k.target.call(g,i,h):i;e=j.length;h=k.target?i:h;if(k.target&&Ext.isArray(j)){Ext.each(j,function(l,m){b[b.length]=k.compiled.call(g,l,h,m+1,e)});return b.join("")}return k.compiled.call(g,j,h,d,c)},compileTpl:function(tpl){var fm=Ext.util.Format,useF=this.disableFormats!==true,sep=Ext.isGecko?"+":",",body;function fn(m,name,format,args,math){if(name.substr(0,4)=="xtpl"){return"'"+sep+"this.applySubTemplate("+name.substr(4)+", values, parent, xindex, xcount)"+sep+"'"}var v;if(name==="."){v="values"}else{if(name==="#"){v="xindex"}else{if(name.indexOf(".")!=-1){v=name}else{v="values['"+name+"']"}}}if(math){v="("+v+math+")"}if(format&&useF){args=args?","+args:"";if(format.substr(0,5)!="this."){format="fm."+format+"("}else{format='this.call("'+format.substr(5)+'", ';args=", values"}}else{args="";format="("+v+" === undefined ? '' : "}return"'"+sep+format+v+args+")"+sep+"'"}function codeFn(m,code){return"'"+sep+"("+code.replace(/\\'/g,"'")+")"+sep+"'"}if(Ext.isGecko){body="tpl.compiled = function(values, parent, xindex, xcount){ return '"+tpl.body.replace(/(\r\n|\n)/g,"\\n").replace(/'/g,"\\'").replace(this.re,fn).replace(this.codeRe,codeFn)+"';};"}else{body=["tpl.compiled = function(values, parent, xindex, xcount){ return ['"];body.push(tpl.body.replace(/(\r\n|\n)/g,"\\n").replace(/'/g,"\\'").replace(this.re,fn).replace(this.codeRe,codeFn));body.push("'].join('');};");body=body.join("")}eval(body);return this},applyTemplate:function(a){return this.master.compiled.call(this,a,{},1,1)},compile:function(){return this}});Ext.XTemplate.prototype.apply=Ext.XTemplate.prototype.applyTemplate;Ext.XTemplate.from=function(a){a=Ext.getDom(a);return new Ext.XTemplate(a.value||a.innerHTML)};Ext.util.CSS=function(){var d=null;var c=document;var b=/(-[a-z])/gi;var a=function(e,g){return g.charAt(1).toUpperCase()};return{createStyleSheet:function(i,l){var h;var g=c.getElementsByTagName("head")[0];var k=c.createElement("style");k.setAttribute("type","text/css");if(l){k.setAttribute("id",l)}if(Ext.isIE){g.appendChild(k);h=k.styleSheet;h.cssText=i}else{try{k.appendChild(c.createTextNode(i))}catch(j){k.cssText=i}g.appendChild(k);h=k.styleSheet?k.styleSheet:(k.sheet||c.styleSheets[c.styleSheets.length-1])}this.cacheStyleSheet(h);return h},removeStyleSheet:function(g){var e=c.getElementById(g);if(e){e.parentNode.removeChild(e)}},swapStyleSheet:function(h,e){this.removeStyleSheet(h);var g=c.createElement("link");g.setAttribute("rel","stylesheet");g.setAttribute("type","text/css");g.setAttribute("id",h);g.setAttribute("href",e);c.getElementsByTagName("head")[0].appendChild(g)},refreshCache:function(){return this.getRules(true)},cacheStyleSheet:function(h){if(!d){d={}}try{var k=h.cssRules||h.rules;for(var g=k.length-1;g>=0;--g){d[k[g].selectorText.toLowerCase()]=k[g]}}catch(i){}},getRules:function(h){if(d===null||h){d={};var k=c.styleSheets;for(var j=0,g=k.length;j';return{pull:function(){var c=b.shift();if(!c){c=Ext.get(Ext.DomHelper.insertHtml("beforeBegin",document.body.firstChild,a));c.autoBoxAdjust=false}return c},push:function(c){b.push(c)}}}();Ext.BoxComponent=Ext.extend(Ext.Component,{initComponent:function(){Ext.BoxComponent.superclass.initComponent.call(this);this.addEvents("resize","move")},boxReady:false,deferHeight:false,setSize:function(b,d){if(typeof b=="object"){d=b.height,b=b.width}if(Ext.isDefined(b)&&Ext.isDefined(this.boxMinWidth)&&(b',''," - ',' class="{cls}
-
- *
| ',
+ ' | ',
+ '',
+ '
| ',
+ '
Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.
@@ -22632,6 +26052,8 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/** Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, { monitorResize : true, + type: 'menu', + setContainer : function(ct){ this.monitorResize = !ct.floating; // This event is only fired by the menu in IE, used so we don't couple @@ -22645,7 +26067,7 @@ Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;/** this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate( 'A specialized container representing the viewable application area (the browser viewport).
@@ -22924,7 +26350,7 @@ new Ext.Panel({ }, footerCfg: { tag: 'h2', - cls: 'x-panel-footer' // same as the Default class + cls: 'x-panel-footer', // same as the Default class html: 'footer html' }, footerCssClass: 'custom-footer', // additional css class, see {@link Ext.element#addClass addClass} @@ -23612,30 +27038,30 @@ new Ext.Panel({ if(this.tbar){ this.elements += ',tbar'; this.topToolbar = this.createToolbar(this.tbar); - delete this.tbar; + this.tbar = null; } if(this.bbar){ this.elements += ',bbar'; this.bottomToolbar = this.createToolbar(this.bbar); - delete this.bbar; + this.bbar = null; } if(this.header === true){ this.elements += ',header'; - delete this.header; + this.header = null; }else if(this.headerCfg || (this.title && this.header !== false)){ this.elements += ',header'; } if(this.footerCfg || this.footer === true){ this.elements += ',footer'; - delete this.footer; + this.footer = null; } if(this.buttons){ this.fbar = this.buttons; - delete this.buttons; + this.buttons = null; } if(this.fbar){ this.createFbar(this.fbar); @@ -23659,8 +27085,8 @@ new Ext.Panel({ }; } }); - //@compat addButton and buttons could possibly be removed - //@target 4.0 + // @compat addButton and buttons could possibly be removed + // @target 4.0 /** * This Panel's Array of buttons as created from the{@link #buttons}
* config property. Read only.
@@ -23897,9 +27323,12 @@ new Ext.Panel({
if(img){
Ext.fly(img).replaceClass(old, this.iconCls);
}else{
- Ext.DomHelper.insertBefore(hd.dom.firstChild, {
- tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
- });
+ var hdspan = hd.child('span.' + this.headerTextCls);
+ if (hdspan) {
+ Ext.DomHelper.insertBefore(hdspan.dom, {
+ tag:'img', alt: '', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
+ });
+ }
}
}
}
@@ -23933,6 +27362,14 @@ new Ext.Panel({
return this.bottomToolbar;
},
+ /**
+ * Returns the {@link Ext.Toolbar toolbar} from the footer ({@link #fbar}) section of the panel.
+ * @return {Ext.Toolbar} The toolbar
+ */
+ getFooterToolbar : function() {
+ return this.fbar;
+ },
+
/**
* Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
* approach is to add buttons via the {@link #buttons} config.
@@ -23953,7 +27390,7 @@ new Ext.Panel({
config = Ext.apply({
handler: handler,
scope: scope
- }, config)
+ }, config);
}
return this.fbar.add(config);
},
@@ -23965,7 +27402,7 @@ new Ext.Panel({
this.tools = [];
}
Ext.each(arguments, function(arg){
- this.tools.push(arg)
+ this.tools.push(arg);
}, this);
return;
}
@@ -24032,7 +27469,7 @@ new Ext.Panel({
if(h != this.getToolbarHeight()){
- h = Math.max(0, this.adjustBodyHeight(lsh - this.getFrameHeight()));
+ h = Math.max(0, lsh - this.getFrameHeight());
bd.setHeight(h);
sz = bd.getSize();
this.toolbarHeight = this.getToolbarHeight();
@@ -24141,9 +27578,7 @@ new Ext.Panel({
// private
afterEffect : function(anim){
this.syncShadow();
- if(anim !== false){
- this.el.removeClass('x-panel-animated');
- }
+ this.el.removeClass('x-panel-animated');
},
// private - wraps up an animation param with internal callbacks
@@ -24190,7 +27625,7 @@ new Ext.Panel({
Ext.apply(this.createEffect(animArg||true, this.afterCollapse, this),
this.collapseDefaults));
}else{
- this[this.collapseEl].hide();
+ this[this.collapseEl].hide(this.hideMode);
this.afterCollapse(false);
}
},
@@ -24199,7 +27634,17 @@ new Ext.Panel({
afterCollapse : function(anim){
this.collapsed = true;
this.el.addClass(this.collapsedCls);
+ if(anim !== false){
+ this[this.collapseEl].hide(this.hideMode);
+ }
this.afterEffect(anim);
+
+ // Reset lastSize of all sub-components so they KNOW they are in a collapsed container
+ this.cascade(function(c) {
+ if (c.lastSize) {
+ c.lastSize = { width: undefined, height: undefined };
+ }
+ });
this.fireEvent('collapse', this);
},
@@ -24228,7 +27673,7 @@ new Ext.Panel({
Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
this.expandDefaults));
}else{
- this[this.collapseEl].show();
+ this[this.collapseEl].show(this.hideMode);
this.afterExpand(false);
}
},
@@ -24236,6 +27681,9 @@ new Ext.Panel({
// private
afterExpand : function(anim){
this.collapsed = false;
+ if(anim !== false){
+ this[this.collapseEl].show(this.hideMode);
+ }
this.afterEffect(anim);
if (this.deferLayout) {
delete this.deferLayout;
@@ -24272,7 +27720,10 @@ new Ext.Panel({
},
// private
- onResize : function(w, h){
+ onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
+ var w = adjWidth,
+ h = adjHeight;
+
if(Ext.isDefined(w) || Ext.isDefined(h)){
if(!this.collapsed){
// First, set the the Panel's body width.
@@ -24313,7 +27764,8 @@ new Ext.Panel({
// At this point, the Toolbars must be layed out for getFrameHeight to find a result.
if(Ext.isNumber(h)){
- h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight()));
+ h = Math.max(0, h - this.getFrameHeight());
+ //h = Math.max(0, h - (this.getHeight() - this.body.getHeight()));
this.body.setHeight(h);
}else if(h == 'auto'){
this.body.setHeight(h);
@@ -24336,7 +27788,8 @@ new Ext.Panel({
this.onBodyResize(w, h);
}
this.syncShadow();
- Ext.Panel.superclass.onResize.call(this);
+ Ext.Panel.superclass.onResize.call(this, adjWidth, adjHeight, rawWidth, rawHeight);
+
},
// private
@@ -24355,7 +27808,7 @@ new Ext.Panel({
return h;
},
- // private
+ // deprecate
adjustBodyHeight : function(h){
return h;
},
@@ -24391,7 +27844,7 @@ new Ext.Panel({
* header and footer elements, but not including the body height). To retrieve the body height see {@link #getInnerHeight}.
* @return {Number} The frame height
*/
- getFrameHeight : function(){
+ getFrameHeight : function() {
var h = this.el.getFrameWidth('tb') + this.bwrap.getFrameWidth('tb');
h += (this.tbar ? this.tbar.getHeight() : 0) +
(this.bbar ? this.bbar.getHeight() : 0);
@@ -24420,7 +27873,10 @@ new Ext.Panel({
* @return {Number} The body height
*/
getInnerHeight : function(){
- return this.getSize().height - this.getFrameHeight();
+ return this.body.getHeight();
+ /* Deprecate
+ return this.getSize().height - this.getFrameHeight();
+ */
},
// private
@@ -24522,12 +27978,12 @@ panel.load({
this.ft,
this.header,
this.footer,
- this.toolbars,
this.tbar,
this.bbar,
this.body,
this.mc,
- this.bwrap
+ this.bwrap,
+ this.dd
);
if (this.fbar) {
Ext.destroy(
@@ -24535,12 +27991,8 @@ panel.load({
this.fbar.el
);
}
- }else{
- Ext.destroy(
- this.topToolbar,
- this.bottomToolbar
- );
}
+ Ext.destroy(this.toolbars);
},
// private
@@ -24628,8 +28080,9 @@ Ext.extend(Ext.Editor, Ext.Component, {
/**
* @cfg {Boolean} allowBlur
* True to {@link #completeEdit complete the editing process} if in edit mode when the
- * field is blurred. Defaults to false.
+ * field is blurred. Defaults to true.
*/
+ allowBlur: true,
/**
* @cfg {Boolean/String} autoSize
* True for the editor to automatically adopt the size of the underlying field, "width" to adopt the width only,
@@ -24860,7 +28313,8 @@ Ext.extend(Ext.Editor, Ext.Component, {
delete this.field.lastSize;
this.field.setSize(w, h);
if(this.el){
- if(Ext.isGecko2 || Ext.isOpera){
+ // IE7 in strict mode doesn't size properly.
+ if(Ext.isGecko2 || Ext.isOpera || (Ext.isIE7 && Ext.isStrict)){
// prevent layer scrollbars
this.el.setSize(w, h);
}
@@ -24887,6 +28341,10 @@ Ext.extend(Ext.Editor, Ext.Component, {
if(!this.editing){
return;
}
+ // Assert combo values first
+ if (this.field.assertValue) {
+ this.field.assertValue();
+ }
var v = this.getValue();
if(!this.field.isValid()){
if(this.revertInvalid !== false){
@@ -24944,7 +28402,7 @@ Ext.extend(Ext.Editor, Ext.Component, {
// private
onBlur : function(){
// selectSameEditor flag allows the same editor to be started without onBlur firing on itself
- if(this.allowBlur !== true && this.editing && this.selectSameEditor !== true){
+ if(this.allowBlur === true && this.editing && this.selectSameEditor !== true){
this.completeEdit();
}
},
@@ -25117,7 +28575,7 @@ cp.colors = ['000000', '993300', '333300'];
if(this.value){
var s = this.value;
this.value = null;
- this.select(s);
+ this.select(s, true);
}
},
@@ -25133,8 +28591,9 @@ cp.colors = ['000000', '993300', '333300'];
/**
* Selects the specified color in the palette (fires the {@link #select} event)
* @param {String} color A valid 6-digit color hex code (# will be stripped if included)
+ * @param {Boolean} suppressEvent (optional) True to stop the select event from firing. Defaults to false.
*/
- select : function(color){
+ select : function(color, suppressEvent){
color = color.replace('#', '');
if(color != this.value || this.allowReselect){
var el = this.el;
@@ -25143,7 +28602,9 @@ cp.colors = ['000000', '993300', '333300'];
}
el.child('a.color-'+color).addClass('x-color-palette-sel');
this.value = color;
- this.fireEvent('select', this, color);
+ if(suppressEvent !== true){
+ this.fireEvent('select', this, color);
+ }
}
}
@@ -25151,8 +28612,7 @@ cp.colors = ['000000', '993300', '333300'];
* @cfg {String} autoEl @hide
*/
});
-Ext.reg('colorpalette', Ext.ColorPalette);
-/**
+Ext.reg('colorpalette', Ext.ColorPalette);/**
* @class Ext.DatePicker
* @extends Ext.Component
* A popup date picker. This class is used by the {@link Ext.form.DateField DateField} class
@@ -25192,7 +28652,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
* @cfg {Object} scope
* The scope (this reference) in which the {@link #handler}
* function will be called. Defaults to this DatePicker instance.
- */
+ */
/**
* @cfg {String} todayTip
* A string used to format the message for displaying in a tooltip over the button that
@@ -25295,11 +28755,15 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
* In order to support regular expressions, if you are using a date format that has '.' in it, you will have to
* escape the dot when restricting dates. For example: ['03\\.08\\.03'].
*/
-
+
// private
// Set by other components to stop the picker focus being updated when the value changes.
focusOnSelect: true,
+ // default value used to initialise each date in the DatePicker
+ // (note: 12 noon was chosen because it steers well clear of all DST timezone changes)
+ initHour: 12, // 24-hour format
+
// private
initComponent : function(){
Ext.DatePicker.superclass.initComponent.call(this);
@@ -25330,7 +28794,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
var dd = this.disabledDates,
len = dd.length - 1,
re = '(?:';
-
+
Ext.each(dd, function(d, i){
re += Ext.isDate(d) ? '^' + Ext.escapeRe(d.dateFormat(this.format)) + '$' : dd[i];
if(i != len){
@@ -25406,21 +28870,21 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
focus : function(){
this.update(this.activeDate);
},
-
+
// private
onEnable: function(initial){
- Ext.DatePicker.superclass.onEnable.call(this);
+ Ext.DatePicker.superclass.onEnable.call(this);
this.doDisabled(false);
this.update(initial ? this.value : this.activeDate);
if(Ext.isIE){
this.el.repaint();
}
-
+
},
-
+
// private
onDisable : function(){
- Ext.DatePicker.superclass.onDisable.call(this);
+ Ext.DatePicker.superclass.onDisable.call(this);
this.doDisabled(true);
if(Ext.isIE && !Ext.isIE8){
/* Really strange problem in IE6/7, when disabled, have to explicitly
@@ -25432,7 +28896,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
});
}
},
-
+
// private
doDisabled : function(disabled){
this.keyNav.setDisabled(disabled);
@@ -25501,7 +28965,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
if(e.ctrlKey){
this.showPrevMonth();
}else{
- this.update(this.activeDate.add('d', -1));
+ this.update(this.activeDate.add('d', -1));
}
},
@@ -25509,7 +28973,7 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
if(e.ctrlKey){
this.showNextMonth();
}else{
- this.update(this.activeDate.add('d', 1));
+ this.update(this.activeDate.add('d', 1));
}
},
@@ -25776,141 +29240,140 @@ Ext.DatePicker = Ext.extend(Ext.BoxComponent, {
// private
update : function(date, forceRefresh){
if(this.rendered){
- var vd = this.activeDate, vis = this.isVisible();
- this.activeDate = date;
- if(!forceRefresh && vd && this.el){
- var t = date.getTime();
- if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
- this.cells.removeClass('x-date-selected');
- this.cells.each(function(c){
- if(c.dom.firstChild.dateValue == t){
- c.addClass('x-date-selected');
- if(vis && !this.cancelFocus){
- Ext.fly(c.dom.firstChild).focus(50);
- }
- return false;
- }
- }, this);
- return;
- }
- }
- var days = date.getDaysInMonth(),
- firstOfMonth = date.getFirstDateOfMonth(),
- startingPos = firstOfMonth.getDay()-this.startDay;
-
- if(startingPos < 0){
- startingPos += 7;
- }
- days += startingPos;
-
- var pm = date.add('mo', -1),
- prevStart = pm.getDaysInMonth()-startingPos,
- cells = this.cells.elements,
- textEls = this.textNodes,
- // convert everything to numbers so it's fast
- day = 86400000,
- d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart)).clearTime(),
- today = new Date().clearTime().getTime(),
- sel = date.clearTime(true).getTime(),
- min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
- max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
- ddMatch = this.disabledDatesRE,
- ddText = this.disabledDatesText,
- ddays = this.disabledDays ? this.disabledDays.join('') : false,
- ddaysText = this.disabledDaysText,
- format = this.format;
-
- if(this.showToday){
- var td = new Date().clearTime(),
- disable = (td < min || td > max ||
- (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
- (ddays && ddays.indexOf(td.getDay()) != -1));
-
- if(!this.disabled){
- this.todayBtn.setDisabled(disable);
- this.todayKeyListener[disable ? 'disable' : 'enable']();
- }
- }
-
- var setCellClass = function(cal, cell){
- cell.title = '';
- var t = d.getTime();
- cell.firstChild.dateValue = t;
- if(t == today){
- cell.className += ' x-date-today';
- cell.title = cal.todayText;
- }
- if(t == sel){
- cell.className += ' x-date-selected';
- if(vis){
- Ext.fly(cell.firstChild).focus(50);
- }
- }
- // disabling
- if(t < min) {
- cell.className = ' x-date-disabled';
- cell.title = cal.minText;
- return;
- }
- if(t > max) {
- cell.className = ' x-date-disabled';
- cell.title = cal.maxText;
- return;
- }
- if(ddays){
- if(ddays.indexOf(d.getDay()) != -1){
- cell.title = ddaysText;
- cell.className = ' x-date-disabled';
- }
- }
- if(ddMatch && format){
- var fvalue = d.dateFormat(format);
- if(ddMatch.test(fvalue)){
- cell.title = ddText.replace('%0', fvalue);
- cell.className = ' x-date-disabled';
- }
- }
- };
-
- var i = 0;
- for(; i < startingPos; i++) {
- textEls[i].innerHTML = (++prevStart);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-prevday';
- setCellClass(this, cells[i]);
- }
- for(; i < days; i++){
- var intDay = i - startingPos + 1;
- textEls[i].innerHTML = (intDay);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-active';
- setCellClass(this, cells[i]);
- }
- var extraDays = 0;
- for(; i < 42; i++) {
- textEls[i].innerHTML = (++extraDays);
- d.setDate(d.getDate()+1);
- cells[i].className = 'x-date-nextday';
- setCellClass(this, cells[i]);
- }
-
- this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
-
- if(!this.internalRender){
- var main = this.el.dom.firstChild,
- w = main.offsetWidth;
- this.el.setWidth(w + this.el.getBorderWidth('lr'));
- Ext.fly(main).setWidth(w);
- this.internalRender = true;
- // opera does not respect the auto grow header center column
- // then, after it gets a width opera refuses to recalculate
- // without a second pass
- if(Ext.isOpera && !this.secondPass){
- main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
- this.secondPass = true;
- this.update.defer(10, this, [date]);
- }
- }
+ var vd = this.activeDate, vis = this.isVisible();
+ this.activeDate = date;
+ if(!forceRefresh && vd && this.el){
+ var t = date.getTime();
+ if(vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()){
+ this.cells.removeClass('x-date-selected');
+ this.cells.each(function(c){
+ if(c.dom.firstChild.dateValue == t){
+ c.addClass('x-date-selected');
+ if(vis && !this.cancelFocus){
+ Ext.fly(c.dom.firstChild).focus(50);
+ }
+ return false;
+ }
+ }, this);
+ return;
+ }
+ }
+ var days = date.getDaysInMonth(),
+ firstOfMonth = date.getFirstDateOfMonth(),
+ startingPos = firstOfMonth.getDay()-this.startDay;
+
+ if(startingPos < 0){
+ startingPos += 7;
+ }
+ days += startingPos;
+
+ var pm = date.add('mo', -1),
+ prevStart = pm.getDaysInMonth()-startingPos,
+ cells = this.cells.elements,
+ textEls = this.textNodes,
+ // convert everything to numbers so it's fast
+ d = (new Date(pm.getFullYear(), pm.getMonth(), prevStart, this.initHour)),
+ today = new Date().clearTime().getTime(),
+ sel = date.clearTime(true).getTime(),
+ min = this.minDate ? this.minDate.clearTime(true) : Number.NEGATIVE_INFINITY,
+ max = this.maxDate ? this.maxDate.clearTime(true) : Number.POSITIVE_INFINITY,
+ ddMatch = this.disabledDatesRE,
+ ddText = this.disabledDatesText,
+ ddays = this.disabledDays ? this.disabledDays.join('') : false,
+ ddaysText = this.disabledDaysText,
+ format = this.format;
+
+ if(this.showToday){
+ var td = new Date().clearTime(),
+ disable = (td < min || td > max ||
+ (ddMatch && format && ddMatch.test(td.dateFormat(format))) ||
+ (ddays && ddays.indexOf(td.getDay()) != -1));
+
+ if(!this.disabled){
+ this.todayBtn.setDisabled(disable);
+ this.todayKeyListener[disable ? 'disable' : 'enable']();
+ }
+ }
+
+ var setCellClass = function(cal, cell){
+ cell.title = '';
+ var t = d.clearTime(true).getTime();
+ cell.firstChild.dateValue = t;
+ if(t == today){
+ cell.className += ' x-date-today';
+ cell.title = cal.todayText;
+ }
+ if(t == sel){
+ cell.className += ' x-date-selected';
+ if(vis){
+ Ext.fly(cell.firstChild).focus(50);
+ }
+ }
+ // disabling
+ if(t < min) {
+ cell.className = ' x-date-disabled';
+ cell.title = cal.minText;
+ return;
+ }
+ if(t > max) {
+ cell.className = ' x-date-disabled';
+ cell.title = cal.maxText;
+ return;
+ }
+ if(ddays){
+ if(ddays.indexOf(d.getDay()) != -1){
+ cell.title = ddaysText;
+ cell.className = ' x-date-disabled';
+ }
+ }
+ if(ddMatch && format){
+ var fvalue = d.dateFormat(format);
+ if(ddMatch.test(fvalue)){
+ cell.title = ddText.replace('%0', fvalue);
+ cell.className = ' x-date-disabled';
+ }
+ }
+ };
+
+ var i = 0;
+ for(; i < startingPos; i++) {
+ textEls[i].innerHTML = (++prevStart);
+ d.setDate(d.getDate()+1);
+ cells[i].className = 'x-date-prevday';
+ setCellClass(this, cells[i]);
+ }
+ for(; i < days; i++){
+ var intDay = i - startingPos + 1;
+ textEls[i].innerHTML = (intDay);
+ d.setDate(d.getDate()+1);
+ cells[i].className = 'x-date-active';
+ setCellClass(this, cells[i]);
+ }
+ var extraDays = 0;
+ for(; i < 42; i++) {
+ textEls[i].innerHTML = (++extraDays);
+ d.setDate(d.getDate()+1);
+ cells[i].className = 'x-date-nextday';
+ setCellClass(this, cells[i]);
+ }
+
+ this.mbtn.setText(this.monthNames[date.getMonth()] + ' ' + date.getFullYear());
+
+ if(!this.internalRender){
+ var main = this.el.dom.firstChild,
+ w = main.offsetWidth;
+ this.el.setWidth(w + this.el.getBorderWidth('lr'));
+ Ext.fly(main).setWidth(w);
+ this.internalRender = true;
+ // opera does not respect the auto grow header center column
+ // then, after it gets a width opera refuses to recalculate
+ // without a second pass
+ if(Ext.isOpera && !this.secondPass){
+ main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth+main.rows[0].cells[2].offsetWidth)) + 'px';
+ this.secondPass = true;
+ this.update.defer(10, this, [date]);
+ }
+ }
}
},
@@ -26061,12 +29524,180 @@ Ext.LoadMask.prototype = {
}
}
};/**
- * @class Ext.Slider
+ * @class Ext.slider.Thumb
+ * @extends Object
+ * Represents a single thumb element on a Slider. This would not usually be created manually and would instead
+ * be created internally by an {@link Ext.slider.MultiSlider Ext.Slider}.
+ */
+Ext.slider.Thumb = Ext.extend(Object, {
+
+ /**
+ * True while the thumb is in a drag operation
+ * @type Boolean
+ */
+ dragging: false,
+
+ /**
+ * @constructor
+ * @cfg {Ext.slider.MultiSlider} slider The Slider to render to (required)
+ */
+ constructor: function(config) {
+ /**
+ * @property slider
+ * @type Ext.slider.MultiSlider
+ * The slider this thumb is contained within
+ */
+ Ext.apply(this, config || {}, {
+ cls: 'x-slider-thumb',
+
+ /**
+ * @cfg {Boolean} constrain True to constrain the thumb so that it cannot overlap its siblings
+ */
+ constrain: false
+ });
+
+ Ext.slider.Thumb.superclass.constructor.call(this, config);
+
+ if (this.slider.vertical) {
+ Ext.apply(this, Ext.slider.Thumb.Vertical);
+ }
+ },
+
+ /**
+ * Renders the thumb into a slider
+ */
+ render: function() {
+ this.el = this.slider.innerEl.insertFirst({cls: this.cls});
+
+ this.initEvents();
+ },
+
+ /**
+ * Enables the thumb if it is currently disabled
+ */
+ enable: function() {
+ this.disabled = false;
+ this.el.removeClass(this.slider.disabledClass);
+ },
+
+ /**
+ * Disables the thumb if it is currently enabled
+ */
+ disable: function() {
+ this.disabled = true;
+ this.el.addClass(this.slider.disabledClass);
+ },
+
+ /**
+ * Sets up an Ext.dd.DragTracker for this thumb
+ */
+ initEvents: function() {
+ var el = this.el;
+
+ el.addClassOnOver('x-slider-thumb-over');
+
+ this.tracker = new Ext.dd.DragTracker({
+ onBeforeStart: this.onBeforeDragStart.createDelegate(this),
+ onStart : this.onDragStart.createDelegate(this),
+ onDrag : this.onDrag.createDelegate(this),
+ onEnd : this.onDragEnd.createDelegate(this),
+ tolerance : 3,
+ autoStart : 300
+ });
+
+ this.tracker.initEl(el);
+ },
+
+ /**
+ * @private
+ * This is tied into the internal Ext.dd.DragTracker. If the slider is currently disabled,
+ * this returns false to disable the DragTracker too.
+ * @return {Boolean} False if the slider is currently disabled
+ */
+ onBeforeDragStart : function(e) {
+ if (this.disabled) {
+ return false;
+ } else {
+ this.slider.promoteThumb(this);
+ return true;
+ }
+ },
+
+ /**
+ * @private
+ * This is tied into the internal Ext.dd.DragTracker's onStart template method. Adds the drag CSS class
+ * to the thumb and fires the 'dragstart' event
+ */
+ onDragStart: function(e){
+ this.el.addClass('x-slider-thumb-drag');
+ this.dragging = true;
+ this.dragStartValue = this.value;
+
+ this.slider.fireEvent('dragstart', this.slider, e, this);
+ },
+
+ /**
+ * @private
+ * This is tied into the internal Ext.dd.DragTracker's onDrag template method. This is called every time
+ * the DragTracker detects a drag movement. It updates the Slider's value using the position of the drag
+ */
+ onDrag: function(e) {
+ var slider = this.slider,
+ index = this.index,
+ newValue = this.getNewValue();
+
+ if (this.constrain) {
+ var above = slider.thumbs[index + 1],
+ below = slider.thumbs[index - 1];
+
+ if (below != undefined && newValue <= below.value) newValue = below.value;
+ if (above != undefined && newValue >= above.value) newValue = above.value;
+ }
+
+ slider.setValue(index, newValue, false);
+ slider.fireEvent('drag', slider, e, this);
+ },
+
+ getNewValue: function() {
+ var slider = this.slider,
+ pos = slider.innerEl.translatePoints(this.tracker.getXY());
+
+ return Ext.util.Format.round(slider.reverseValue(pos.left), slider.decimalPrecision);
+ },
+
+ /**
+ * @private
+ * This is tied to the internal Ext.dd.DragTracker's onEnd template method. Removes the drag CSS class and
+ * fires the 'changecomplete' event with the new value
+ */
+ onDragEnd: function(e) {
+ var slider = this.slider,
+ value = this.value;
+
+ this.el.removeClass('x-slider-thumb-drag');
+
+ this.dragging = false;
+ slider.fireEvent('dragend', slider, e);
+
+ if (this.dragStartValue != value) {
+ slider.fireEvent('changecomplete', slider, value, this);
+ }
+ },
+
+ /**
+ * @private
+ * Destroys the thumb
+ */
+ destroy: function(){
+ Ext.destroyMembers(this, 'tracker', 'el');
+ }
+});
+
+/**
+ * @class Ext.slider.MultiSlider
* @extends Ext.BoxComponent
- * Slider which supports vertical or horizontal orientation, keyboard adjustments,
- * configurable snapping, axis clicking and animation. Can be added as an item to
- * any container. Example usage:
-
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments, configurable snapping, axis clicking and animation. Can be added as an item to any container. Example usage:
+
new Ext.Slider({
renderTo: Ext.getBody(),
width: 200,
@@ -26075,9 +29706,22 @@ new Ext.Slider({
minValue: 0,
maxValue: 100
});
-
+new Ext.Slider({
+ renderTo: Ext.getBody(),
+ width: 200,
+ values: [25, 50, 75],
+ minValue: 0,
+ maxValue: 100,
+
+ //this defaults to true, setting to false allows the thumbs to pass each other
+ {@link #constrainThumbs}: false
+});
+
*/
-Ext.Slider = Ext.extend(Ext.BoxComponent, {
+Ext.slider.MultiSlider = Ext.extend(Ext.BoxComponent, {
/**
* @cfg {Number} value The value to initialize the slider with. Defaults to minValue.
*/
@@ -26107,8 +29751,17 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, {
* @cfg {Number} increment How many units to change the slider when adjusting by drag and drop. Use this option to enable 'snapping'.
*/
increment: 0,
- // private
+
+ /**
+ * @private
+ * @property clickRange
+ * @type Array
+ * Determines whether or not a click to the slider component is considered to be a user request to change the value. Specified as an array of [top, bottom],
+ * the click event's 'top' property is compared to these numbers and the click only considered a change request if it falls within them. e.g. if the 'top'
+ * value of the click event is 4 or 16, the click is not considered a change request as it falls outside of the [5, 15] range
+ */
clickRange: [5,15],
+
/**
* @cfg {Boolean} clickToChange Determines whether or not clicking on the Slider axis will change the slider. Defaults to true
*/
@@ -26117,169 +29770,318 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, {
* @cfg {Boolean} animate Turn on or off animation. Defaults to true
*/
animate: true,
+ /**
+ * @cfg {Boolean} constrainThumbs True to disallow thumbs from overlapping one another. Defaults to true
+ */
+ constrainThumbs: true,
/**
- * True while the thumb is in a drag operation
- * @type boolean
+ * @private
+ * @property topThumbZIndex
+ * @type Number
+ * The number used internally to set the z index of the top thumb (see promoteThumb for details)
*/
- dragging: false,
+ topThumbZIndex: 10000,
// private override
initComponent : function(){
if(!Ext.isDefined(this.value)){
this.value = this.minValue;
}
- Ext.Slider.superclass.initComponent.call(this);
+
+ /**
+ * @property thumbs
+ * @type Array
+ * Array containing references to each thumb
+ */
+ this.thumbs = [];
+
+ Ext.slider.MultiSlider.superclass.initComponent.call(this);
+
this.keyIncrement = Math.max(this.increment, this.keyIncrement);
this.addEvents(
/**
* @event beforechange
* Fires before the slider value is changed. By returning false from an event handler,
* you can cancel the event and prevent the slider from changing.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Number} newValue The new value which the slider is being changed to.
* @param {Number} oldValue The old value which the slider was previously.
*/
'beforechange',
+
/**
* @event change
* Fires when the slider value is changed.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Number} newValue The new value which the slider has been changed to.
+ * @param {Ext.slider.Thumb} thumb The thumb that was changed
*/
'change',
+
/**
* @event changecomplete
* Fires when the slider value is changed by the user and any drag operations have completed.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Number} newValue The new value which the slider has been changed to.
+ * @param {Ext.slider.Thumb} thumb The thumb that was changed
*/
'changecomplete',
+
/**
* @event dragstart
* Fires after a drag operation has started.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'dragstart',
+
/**
* @event drag
* Fires continuously during the drag operation while the mouse is moving.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'drag',
+
/**
* @event dragend
* Fires after the drag operation has completed.
- * @param {Ext.Slider} slider The slider
+ * @param {Ext.slider.MultiSlider} slider The slider
* @param {Ext.EventObject} e The event fired from Ext.dd.DragTracker
*/
'dragend'
);
+ /**
+ * @property values
+ * @type Array
+ * Array of values to initalize the thumbs with
+ */
+ if (this.values == undefined || Ext.isEmpty(this.values)) this.values = [0];
+
+ var values = this.values;
+
+ for (var i=0; i < values.length; i++) {
+ this.addThumb(values[i]);
+ }
+
if(this.vertical){
- Ext.apply(this, Ext.Slider.Vertical);
+ Ext.apply(this, Ext.slider.Vertical);
+ }
+ },
+
+ /**
+ * Creates a new thumb and adds it to the slider
+ * @param {Number} value The initial value to set on the thumb. Defaults to 0
+ */
+ addThumb: function(value) {
+ var thumb = new Ext.slider.Thumb({
+ value : value,
+ slider : this,
+ index : this.thumbs.length,
+ constrain: this.constrainThumbs
+ });
+ this.thumbs.push(thumb);
+
+ //render the thumb now if needed
+ if (this.rendered) thumb.render();
+ },
+
+ /**
+ * @private
+ * Moves the given thumb above all other by increasing its z-index. This is called when as drag
+ * any thumb, so that the thumb that was just dragged is always at the highest z-index. This is
+ * required when the thumbs are stacked on top of each other at one of the ends of the slider's
+ * range, which can result in the user not being able to move any of them.
+ * @param {Ext.slider.Thumb} topThumb The thumb to move to the top
+ */
+ promoteThumb: function(topThumb) {
+ var thumbs = this.thumbs,
+ zIndex, thumb;
+
+ for (var i = 0, j = thumbs.length; i < j; i++) {
+ thumb = thumbs[i];
+
+ if (thumb == topThumb) {
+ zIndex = this.topThumbZIndex;
+ } else {
+ zIndex = '';
+ }
+
+ thumb.el.setStyle('zIndex', zIndex);
}
},
// private override
- onRender : function(){
+ onRender : function() {
this.autoEl = {
cls: 'x-slider ' + (this.vertical ? 'x-slider-vert' : 'x-slider-horz'),
- cn:{cls:'x-slider-end',cn:{cls:'x-slider-inner',cn:[{cls:'x-slider-thumb'},{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]}}
+ cn : {
+ cls: 'x-slider-end',
+ cn : {
+ cls:'x-slider-inner',
+ cn : [{tag:'a', cls:'x-slider-focus', href:"#", tabIndex: '-1', hidefocus:'on'}]
+ }
+ }
};
- Ext.Slider.superclass.onRender.apply(this, arguments);
- this.endEl = this.el.first();
+
+ Ext.slider.MultiSlider.superclass.onRender.apply(this, arguments);
+
+ this.endEl = this.el.first();
this.innerEl = this.endEl.first();
- this.thumb = this.innerEl.first();
- this.halfThumb = (this.vertical ? this.thumb.getHeight() : this.thumb.getWidth())/2;
- this.focusEl = this.thumb.next();
+ this.focusEl = this.innerEl.child('.x-slider-focus');
+
+ //render each thumb
+ for (var i=0; i < this.thumbs.length; i++) {
+ this.thumbs[i].render();
+ }
+
+ //calculate the size of half a thumb
+ var thumb = this.innerEl.child('.x-slider-thumb');
+ this.halfThumb = (this.vertical ? thumb.getHeight() : thumb.getWidth()) / 2;
+
this.initEvents();
},
- // private override
+ /**
+ * @private
+ * Adds keyboard and mouse listeners on this.el. Ignores click events on the internal focus element.
+ * Creates a new DragTracker which is used to control what happens when the user drags the thumb around.
+ */
initEvents : function(){
- this.thumb.addClassOnOver('x-slider-thumb-over');
this.mon(this.el, {
- scope: this,
+ scope : this,
mousedown: this.onMouseDown,
- keydown: this.onKeyDown
+ keydown : this.onKeyDown
});
this.focusEl.swallowEvent("click", true);
-
- this.tracker = new Ext.dd.DragTracker({
- onBeforeStart: this.onBeforeDragStart.createDelegate(this),
- onStart: this.onDragStart.createDelegate(this),
- onDrag: this.onDrag.createDelegate(this),
- onEnd: this.onDragEnd.createDelegate(this),
- tolerance: 3,
- autoStart: 300
- });
- this.tracker.initEl(this.thumb);
},
- // private override
+ /**
+ * @private
+ * Mousedown handler for the slider. If the clickToChange is enabled and the click was not on the draggable 'thumb',
+ * this calculates the new value of the slider and tells the implementation (Horizontal or Vertical) to move the thumb
+ * @param {Ext.EventObject} e The click event
+ */
onMouseDown : function(e){
if(this.disabled){
return;
}
- if(this.clickToChange && e.target != this.thumb.dom){
+
+ //see if the click was on any of the thumbs
+ var thumbClicked = false;
+ for (var i=0; i < this.thumbs.length; i++) {
+ thumbClicked = thumbClicked || e.target == this.thumbs[i].el.dom;
+ }
+
+ if (this.clickToChange && !thumbClicked) {
var local = this.innerEl.translatePoints(e.getXY());
this.onClickChange(local);
}
this.focus();
},
- // private
- onClickChange : function(local){
- if(local.top > this.clickRange[0] && local.top < this.clickRange[1]){
- this.setValue(Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
+ /**
+ * @private
+ * Moves the thumb to the indicated position. Note that a Vertical implementation is provided in Ext.slider.Vertical.
+ * Only changes the value if the click was within this.clickRange.
+ * @param {Object} local Object containing top and left values for the click event.
+ */
+ onClickChange : function(local) {
+ if (local.top > this.clickRange[0] && local.top < this.clickRange[1]) {
+ //find the nearest thumb to the click event
+ var thumb = this.getNearest(local, 'left'),
+ index = thumb.index;
+
+ this.setValue(index, Ext.util.Format.round(this.reverseValue(local.left), this.decimalPrecision), undefined, true);
}
},
- // private
+ /**
+ * @private
+ * Returns the nearest thumb to a click event, along with its distance
+ * @param {Object} local Object containing top and left values from a click event
+ * @param {String} prop The property of local to compare on. Use 'left' for horizontal sliders, 'top' for vertical ones
+ * @return {Object} The closest thumb object and its distance from the click event
+ */
+ getNearest: function(local, prop) {
+ var localValue = prop == 'top' ? this.innerEl.getHeight() - local[prop] : local[prop],
+ clickValue = this.reverseValue(localValue),
+ nearestDistance = (this.maxValue - this.minValue) + 5, //add a small fudge for the end of the slider
+ index = 0,
+ nearest = null;
+
+ for (var i=0; i < this.thumbs.length; i++) {
+ var thumb = this.thumbs[i],
+ value = thumb.value,
+ dist = Math.abs(value - clickValue);
+
+ if (Math.abs(dist <= nearestDistance)) {
+ nearest = thumb;
+ index = i;
+ nearestDistance = dist;
+ }
+ }
+ return nearest;
+ },
+
+ /**
+ * @private
+ * Handler for any keypresses captured by the slider. If the key is UP or RIGHT, the thumb is moved along to the right
+ * by this.keyIncrement. If DOWN or LEFT it is moved left. Pressing CTRL moves the slider to the end in either direction
+ * @param {Ext.EventObject} e The Event object
+ */
onKeyDown : function(e){
- if(this.disabled){e.preventDefault();return;}
- var k = e.getKey();
+ /*
+ * The behaviour for keyboard handling with multiple thumbs is currently undefined.
+ * There's no real sane default for it, so leave it like this until we come up
+ * with a better way of doing it.
+ */
+ if(this.disabled || this.thumbs.length !== 1){
+ e.preventDefault();
+ return;
+ }
+ var k = e.getKey(),
+ val;
switch(k){
case e.UP:
case e.RIGHT:
e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.maxValue, undefined, true);
- }else{
- this.setValue(this.value+this.keyIncrement, undefined, true);
- }
+ val = e.ctrlKey ? this.maxValue : this.getValue(0) + this.keyIncrement;
+ this.setValue(0, val, undefined, true);
break;
case e.DOWN:
case e.LEFT:
e.stopEvent();
- if(e.ctrlKey){
- this.setValue(this.minValue, undefined, true);
- }else{
- this.setValue(this.value-this.keyIncrement, undefined, true);
- }
+ val = e.ctrlKey ? this.minValue : this.getValue(0) - this.keyIncrement;
+ this.setValue(0, val, undefined, true);
break;
default:
e.preventDefault();
}
},
- // private
+ /**
+ * @private
+ * If using snapping, this takes a desired new value and returns the closest snapped
+ * value to it
+ * @param {Number} value The unsnapped value
+ * @return {Number} The value of the nearest snap target
+ */
doSnap : function(value){
- if(!(this.increment && value)){
+ if (!(this.increment && value)) {
return value;
}
var newValue = value,
inc = this.increment,
m = value % inc;
- if(m != 0){
+ if (m != 0) {
newValue -= m;
- if(m * 2 > inc){
+ if (m * 2 >= inc) {
newValue += inc;
- }else if(m * 2 < -inc){
+ } else if (m * 2 < -inc) {
newValue -= inc;
}
}
@@ -26288,94 +30090,144 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, {
// private
afterRender : function(){
- Ext.Slider.superclass.afterRender.apply(this, arguments);
- if(this.value !== undefined){
- var v = this.normalizeValue(this.value);
- if(v !== this.value){
- delete this.value;
- this.setValue(v, false);
- }else{
- this.moveThumb(this.translateValue(v), false);
+ Ext.slider.MultiSlider.superclass.afterRender.apply(this, arguments);
+
+ for (var i=0; i < this.thumbs.length; i++) {
+ var thumb = this.thumbs[i];
+
+ if (thumb.value !== undefined) {
+ var v = this.normalizeValue(thumb.value);
+
+ if (v !== thumb.value) {
+ // delete this.value;
+ this.setValue(i, v, false);
+ } else {
+ this.moveThumb(i, this.translateValue(v), false);
+ }
}
- }
+ };
},
- // private
+ /**
+ * @private
+ * Returns the ratio of pixels to mapped values. e.g. if the slider is 200px wide and maxValue - minValue is 100,
+ * the ratio is 2
+ * @return {Number} The ratio of pixels to mapped values
+ */
getRatio : function(){
var w = this.innerEl.getWidth(),
v = this.maxValue - this.minValue;
return v == 0 ? w : (w/v);
},
- // private
+ /**
+ * @private
+ * Returns a snapped, constrained value when given a desired value
+ * @param {Number} value Raw number value
+ * @return {Number} The raw value rounded to the correct d.p. and constrained within the set max and min values
+ */
normalizeValue : function(v){
v = this.doSnap(v);
v = Ext.util.Format.round(v, this.decimalPrecision);
v = v.constrain(this.minValue, this.maxValue);
return v;
},
-
+
/**
- * Sets the minimum value for the slider instance. If the current value is less than the
+ * Sets the minimum value for the slider instance. If the current value is less than the
* minimum value, the current value will be changed.
* @param {Number} val The new minimum value
*/
setMinValue : function(val){
this.minValue = val;
- this.syncThumb();
- if(this.value < val){
- this.setValue(val);
+ var i = 0,
+ thumbs = this.thumbs,
+ len = thumbs.length,
+ t;
+
+ for(; i < len; ++i){
+ t = thumbs[i];
+ t.value = t.value < val ? val : t.value;
}
+ this.syncThumb();
},
-
+
/**
- * Sets the maximum value for the slider instance. If the current value is more than the
+ * Sets the maximum value for the slider instance. If the current value is more than the
* maximum value, the current value will be changed.
* @param {Number} val The new maximum value
*/
setMaxValue : function(val){
this.maxValue = val;
- this.syncThumb();
- if(this.value > val){
- this.setValue(val);
+ var i = 0,
+ thumbs = this.thumbs,
+ len = thumbs.length,
+ t;
+
+ for(; i < len; ++i){
+ t = thumbs[i];
+ t.value = t.value > val ? val : t.value;
}
+ this.syncThumb();
},
/**
* Programmatically sets the value of the Slider. Ensures that the value is constrained within
* the minValue and maxValue.
+ * @param {Number} index Index of the thumb to move
* @param {Number} value The value to set the slider to. (This will be constrained within minValue and maxValue)
* @param {Boolean} animate Turn on or off animation, defaults to true
*/
- setValue : function(v, animate, changeComplete){
+ setValue : function(index, v, animate, changeComplete) {
+ var thumb = this.thumbs[index],
+ el = thumb.el;
+
v = this.normalizeValue(v);
- if(v !== this.value && this.fireEvent('beforechange', this, v, this.value) !== false){
- this.value = v;
- this.moveThumb(this.translateValue(v), animate !== false);
- this.fireEvent('change', this, v);
- if(changeComplete){
- this.fireEvent('changecomplete', this, v);
+
+ if (v !== thumb.value && this.fireEvent('beforechange', this, v, thumb.value, thumb) !== false) {
+ thumb.value = v;
+ if(this.rendered){
+ this.moveThumb(index, this.translateValue(v), animate !== false);
+ this.fireEvent('change', this, v, thumb);
+ if(changeComplete){
+ this.fireEvent('changecomplete', this, v, thumb);
+ }
}
}
},
- // private
- translateValue : function(v){
+ /**
+ * @private
+ */
+ translateValue : function(v) {
var ratio = this.getRatio();
return (v * ratio) - (this.minValue * ratio) - this.halfThumb;
},
+ /**
+ * @private
+ * Given a pixel location along the slider, returns the mapped slider value for that pixel.
+ * E.g. if we have a slider 200px wide with minValue = 100 and maxValue = 500, reverseValue(50)
+ * returns 200
+ * @param {Number} pos The position along the slider to return a mapped value for
+ * @return {Number} The mapped value for the given position
+ */
reverseValue : function(pos){
var ratio = this.getRatio();
return (pos + (this.minValue * ratio)) / ratio;
},
- // private
- moveThumb: function(v, animate){
+ /**
+ * @private
+ * @param {Number} index Index of the thumb to move
+ */
+ moveThumb: function(index, v, animate){
+ var thumb = this.thumbs[index].el;
+
if(!animate || this.animate === false){
- this.thumb.setLeft(v);
+ thumb.setLeft(v);
}else{
- this.thumb.shift({left: v, stopFx: true, duration:.35});
+ thumb.shift({left: v, stopFx: true, duration:.35});
}
},
@@ -26384,71 +30236,72 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, {
this.focusEl.focus(10);
},
- // private
- onBeforeDragStart : function(e){
- return !this.disabled;
- },
-
- // private
- onDragStart: function(e){
- this.thumb.addClass('x-slider-thumb-drag');
- this.dragging = true;
- this.dragStartValue = this.value;
- this.fireEvent('dragstart', this, e);
- },
-
- // private
- onDrag: function(e){
- var pos = this.innerEl.translatePoints(this.tracker.getXY());
- this.setValue(Ext.util.Format.round(this.reverseValue(pos.left), this.decimalPrecision), false);
- this.fireEvent('drag', this, e);
- },
-
- // private
- onDragEnd: function(e){
- this.thumb.removeClass('x-slider-thumb-drag');
- this.dragging = false;
- this.fireEvent('dragend', this, e);
- if(this.dragStartValue != this.value){
- this.fireEvent('changecomplete', this, this.value);
- }
- },
-
// private
onResize : function(w, h){
- this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+ var thumbs = this.thumbs,
+ len = thumbs.length,
+ i = 0;
+
+ /*
+ * If we happen to be animating during a resize, the position of the thumb will likely be off
+ * when the animation stops. As such, just stop any animations before syncing the thumbs.
+ */
+ for(; i < len; ++i){
+ thumbs[i].el.stopFx();
+ }
+ // check to see if we're using an auto width
+ if(Ext.isNumber(w)){
+ this.innerEl.setWidth(w - (this.el.getPadding('l') + this.endEl.getPadding('r')));
+ }
this.syncThumb();
- Ext.Slider.superclass.onResize.apply(this, arguments);
+ Ext.slider.MultiSlider.superclass.onResize.apply(this, arguments);
},
//private
onDisable: function(){
- Ext.Slider.superclass.onDisable.call(this);
- this.thumb.addClass(this.disabledClass);
- if(Ext.isIE){
- //IE breaks when using overflow visible and opacity other than 1.
- //Create a place holder for the thumb and display it.
- var xy = this.thumb.getXY();
- this.thumb.hide();
- this.innerEl.addClass(this.disabledClass).dom.disabled = true;
- if (!this.thumbHolder){
- this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
+ Ext.slider.MultiSlider.superclass.onDisable.call(this);
+
+ for (var i=0; i < this.thumbs.length; i++) {
+ var thumb = this.thumbs[i],
+ el = thumb.el;
+
+ thumb.disable();
+
+ if(Ext.isIE){
+ //IE breaks when using overflow visible and opacity other than 1.
+ //Create a place holder for the thumb and display it.
+ var xy = el.getXY();
+ el.hide();
+
+ this.innerEl.addClass(this.disabledClass).dom.disabled = true;
+
+ if (!this.thumbHolder) {
+ this.thumbHolder = this.endEl.createChild({cls: 'x-slider-thumb ' + this.disabledClass});
+ }
+
+ this.thumbHolder.show().setXY(xy);
}
- this.thumbHolder.show().setXY(xy);
}
},
//private
onEnable: function(){
- Ext.Slider.superclass.onEnable.call(this);
- this.thumb.removeClass(this.disabledClass);
- if(Ext.isIE){
- this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
- if(this.thumbHolder){
- this.thumbHolder.hide();
+ Ext.slider.MultiSlider.superclass.onEnable.call(this);
+
+ for (var i=0; i < this.thumbs.length; i++) {
+ var thumb = this.thumbs[i],
+ el = thumb.el;
+
+ thumb.enable();
+
+ if (Ext.isIE) {
+ this.innerEl.removeClass(this.disabledClass).dom.disabled = false;
+
+ if (this.thumbHolder) this.thumbHolder.hide();
+
+ el.show();
+ this.syncThumb();
}
- this.thumb.show();
- this.syncThumb();
}
},
@@ -26458,30 +30311,133 @@ Ext.Slider = Ext.extend(Ext.BoxComponent, {
* is resized by a layout, but if it is rendered auto width, this method can be called from
* another resize handler to sync the Slider if necessary.
*/
- syncThumb : function(){
- if(this.rendered){
- this.moveThumb(this.translateValue(this.value));
+ syncThumb : function() {
+ if (this.rendered) {
+ for (var i=0; i < this.thumbs.length; i++) {
+ this.moveThumb(i, this.translateValue(this.thumbs[i].value));
+ }
}
},
+ /**
+ * Returns the current value of the slider
+ * @param {Number} index The index of the thumb to return a value for
+ * @return {Number} The current value of the slider
+ */
+ getValue : function(index) {
+ return this.thumbs[index].value;
+ },
+
+ /**
+ * Returns an array of values - one for the location of each thumb
+ * @return {Array} The set of thumb values
+ */
+ getValues: function() {
+ var values = [];
+
+ for (var i=0; i < this.thumbs.length; i++) {
+ values.push(this.thumbs[i].value);
+ }
+
+ return values;
+ },
+
+ // private
+ beforeDestroy : function(){
+ var thumbs = this.thumbs;
+ for(var i = 0, len = thumbs.length; i < len; ++i){
+ thumbs[i].destroy();
+ thumbs[i] = null;
+ }
+ Ext.destroyMembers(this, 'endEl', 'innerEl', 'focusEl', 'thumbHolder');
+ Ext.slider.MultiSlider.superclass.beforeDestroy.call(this);
+ }
+});
+
+Ext.reg('multislider', Ext.slider.MultiSlider);
+
+/**
+ * @class Ext.slider.SingleSlider
+ * @extends Ext.slider.MultiSlider
+ * Slider which supports vertical or horizontal orientation, keyboard adjustments,
+ * configurable snapping, axis clicking and animation. Can be added as an item to
+ * any container. Example usage:
+
+new Ext.slider.SingleSlider({
+ renderTo: Ext.getBody(),
+ width: 200,
+ value: 50,
+ increment: 10,
+ minValue: 0,
+ maxValue: 100
+});
+An updateable progress bar component. The progress bar supports two different modes: manual and automatic.
@@ -26581,8 +30549,8 @@ Ext.ProgressBar = Ext.extend(Ext.BoxComponent, { ); this.el = position ? tpl.insertBefore(position, {cls: this.baseCls}, true) - : tpl.append(ct, {cls: this.baseCls}, true); - + : tpl.append(ct, {cls: this.baseCls}, true); + if(this.id){ this.el.dom.id = this.id; } @@ -26905,7 +30873,7 @@ Ext.dd.DragDrop.prototype = { /** * The id of the element that will be dragged. By default this is same - * as the linked element , but could be changed to another element. Ex: + * as the linked element, but could be changed to another element. Ex: * Ext.dd.DDProxy * @property dragElId * @type String @@ -26996,7 +30964,9 @@ Ext.dd.DragDrop.prototype = { * Lock this instance * @method lock */ - lock: function() { this.locked = true; }, + lock: function() { + this.locked = true; + }, /** * When set to true, other DD objects in cooperating DDGroups do not receive @@ -27010,7 +30980,9 @@ Ext.dd.DragDrop.prototype = { * Unlock this instace * @method unlock */ - unlock: function() { this.locked = false; }, + unlock: function() { + this.locked = false; + }, /** * By default, all instances can be a drop target. This can be disabled by @@ -27078,7 +31050,6 @@ Ext.dd.DragDrop.prototype = { * The up constraint * @property minY * @type int - * @type int * @private */ minY: 0, @@ -27130,7 +31101,7 @@ Ext.dd.DragDrop.prototype = { primaryButtonOnly: true, /** - * The availabe property is false until the linked dom element is accessible. + * The available property is false until the linked dom element is accessible. * @property available * @type boolean */ @@ -27521,7 +31492,6 @@ Ext.dd.DragDrop.prototype = { this.lastPageX = p[0]; this.lastPageY = p[1]; - this.setStartPosition(p); }, @@ -27663,7 +31633,6 @@ Ext.dd.DragDrop.prototype = { // set the initial element position this.setStartPosition(); - this.b4MouseDown(e); this.onMouseDown(e); @@ -27914,8 +31883,6 @@ Ext.dd.DragDrop.prototype = { * @param {boolean} maintainOffset */ resetConstraints: function() { - - // Maintain offsets if necessary if (this.initPageX || this.initPageX === 0) { // figure out how much this thing has moved @@ -27953,7 +31920,6 @@ Ext.dd.DragDrop.prototype = { * @private */ getTick: function(val, tickArray) { - if (!tickArray) { // If tick interval is not defined, it is effectively 1 pixel, // so we return the value passed to us. @@ -27990,7 +31956,7 @@ Ext.dd.DragDrop.prototype = { }; })(); -/** +/* * The drag and drop utility provides a framework for building drag and drop * applications. In addition to enabling drag and drop for specific elements, * the drag and drop elements are tracked by the manager class, and the @@ -28021,7 +31987,7 @@ Ext.dd.DragDropMgr = function() { * dimension is the DragDrop item group, the second the DragDrop * object. * @property ids - * @type {string: string} + * @type String[] * @private * @static */ @@ -28032,7 +31998,7 @@ Ext.dd.DragDropMgr = function() { * if the element that generated the mousedown event is actually the * handle and not the html element itself. * @property handleIds - * @type {string: string} + * @type String[] * @private * @static */ @@ -28402,8 +32368,8 @@ Ext.dd.DragDropMgr = function() { * Returns true if the specified dd target is a legal target for * the specifice drag obj * @method isLegalTarget - * @param {DragDrop} the drag obj - * @param {DragDrop} the target + * @param {DragDrop} oDD the drag obj + * @param {DragDrop} oTargetDD the target * @return {boolean} true if the target is a legal target for the * dd obj * @static @@ -28475,7 +32441,7 @@ Ext.dd.DragDropMgr = function() { */ handleMouseDown: function(e, oDD) { if(Ext.QuickTips){ - Ext.QuickTips.disable(); + Ext.QuickTips.ddDisable(); } if(this.dragCurrent){ // the original browser mouseup wasn't handled (e.g. outside FF browser window) @@ -28533,7 +32499,7 @@ Ext.dd.DragDropMgr = function() { handleMouseUp: function(e) { if(Ext.QuickTips){ - Ext.QuickTips.enable(); + Ext.QuickTips.ddEnable(); } if (! this.dragCurrent) { return; @@ -28908,7 +32874,7 @@ Ext.dd.DragDropMgr = function() { return null; } - var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l; + var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l, region; try { pos= Ext.lib.Dom.getXY(el); @@ -28928,7 +32894,22 @@ Ext.dd.DragDropMgr = function() { b = y2 + oDD.padding[2]; l = x1 - oDD.padding[3]; - return new Ext.lib.Region( t, r, b, l ); + region = new Ext.lib.Region( t, r, b, l ); + /* + * The code below is to ensure that large scrolling elements will + * only have their visible area recognized as a drop target, otherwise it + * can potentially erronously register as a target when the element scrolls + * over the top of something below it. + */ + el = Ext.get(el.parentNode); + while (el && region) { + if (el.isScrollable()) { + // check whether our element is visible in the view port: + region = region.intersect(el.getRegion()); + } + el = el.parent(); + } + return region; }, /** @@ -28997,6 +32978,9 @@ Ext.dd.DragDropMgr = function() { * @static */ _onUnload: function(e, me) { + Event.removeListener(document, "mouseup", this.handleMouseUp, this); + Event.removeListener(document, "mousemove", this.handleMouseMove, this); + Event.removeListener(window, "resize", this._onResize, this); Ext.dd.DragDropMgr.unregAll(); }, @@ -29190,7 +33174,9 @@ Ext.dd.DragDropMgr = function() { * @return {int} the document's scrollTop * @static */ - getScrollTop: function () { return this.getScroll().top; }, + getScrollTop: function () { + return this.getScroll().top; + }, /** * Gets the scrollLeft @@ -29198,7 +33184,9 @@ Ext.dd.DragDropMgr = function() { * @return {int} the document's scrollTop * @static */ - getScrollLeft: function () { return this.getScroll().left; }, + getScrollLeft: function () { + return this.getScroll().left; + }, /** * Sets the x/y position of an element to the location of the @@ -29218,7 +33206,9 @@ Ext.dd.DragDropMgr = function() { * @method numericSort * @static */ - numericSort: function(a, b) { return (a - b); }, + numericSort: function(a, b) { + return (a - b); + }, /** * Internal counter @@ -29493,8 +33483,6 @@ Ext.extend(Ext.dd.DD, Ext.dd.DragDrop, { * @private */ getTargetCoord: function(iPageX, iPageY) { - - var x = iPageX - this.deltaX; var y = iPageY - this.deltaY; @@ -29965,6 +33953,12 @@ Ext.extend(Ext.dd.DDTarget, Ext.dd.DragDrop, { });/** * @class Ext.dd.DragTracker * @extends Ext.util.Observable + * A DragTracker listens for drag events on an Element and fires events at the start and end of the drag, + * as well as during the drag. This is useful for components such as {@link Ext.slider.MultiSlider}, where there is + * an element that can be dragged around to change the Slider's value. + * DragTracker provides a series of template methods that should be overridden to provide functionality + * in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd. + * See {@link Ext.slider.MultiSlider}'s initEvents function for an example implementation. */ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { /** @@ -29974,7 +33968,7 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { active: false, /** * @cfg {Number} tolerance - * Defaults to 5. + * Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to 5. */ tolerance: 5, /** @@ -30008,7 +34002,7 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { /** * @event dragstart * @param {Object} this - * @param {Object} startXY the page coordinates of the event + * @param {Object} e event object */ 'dragstart', /** @@ -30041,6 +34035,7 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { destroy : function(){ this.el.un('mousedown', this.onMouseDown, this); + delete this.el; }, onMouseDown: function(e, target){ @@ -30050,12 +34045,14 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { if(this.preventDefault !== false){ e.preventDefault(); } - var doc = Ext.getDoc(); - doc.on('mouseup', this.onMouseUp, this); - doc.on('mousemove', this.onMouseMove, this); - doc.on('selectstart', this.stopSelect, this); + Ext.getDoc().on({ + scope: this, + mouseup: this.onMouseUp, + mousemove: this.onMouseMove, + selectstart: this.stopSelect + }); if(this.autoStart){ - this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this); + this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this, [e]); } } }, @@ -30073,7 +34070,7 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { this.lastXY = xy; if(!this.active){ if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){ - this.triggerStart(); + this.triggerStart(e); }else{ return; } @@ -30083,14 +34080,15 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { this.fireEvent('drag', this, e); }, - onMouseUp: function(e){ - var doc = Ext.getDoc(); + onMouseUp: function(e) { + var doc = Ext.getDoc(), + wasActive = this.active; + doc.un('mousemove', this.onMouseMove, this); doc.un('mouseup', this.onMouseUp, this); doc.un('selectstart', this.stopSelect, this); e.preventDefault(); this.clearStart(); - var wasActive = this.active; this.active = false; delete this.elRegion; this.fireEvent('mouseup', this, e); @@ -30100,41 +34098,64 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { } }, - triggerStart: function(isTimer){ + triggerStart: function(e) { this.clearStart(); this.active = true; - this.onStart(this.startXY); - this.fireEvent('dragstart', this, this.startXY); + this.onStart(e); + this.fireEvent('dragstart', this, e); }, - clearStart : function(){ + clearStart : function() { if(this.timer){ clearTimeout(this.timer); delete this.timer; } }, - stopSelect : function(e){ + stopSelect : function(e) { e.stopEvent(); return false; }, - onBeforeStart : function(e){ + /** + * Template method which should be overridden by each DragTracker instance. Called when the user first clicks and + * holds the mouse button down. Return false to disallow the drag + * @param {Ext.EventObject} e The event object + */ + onBeforeStart : function(e) { }, - onStart : function(xy){ + /** + * Template method which should be overridden by each DragTracker instance. Called when a drag operation starts + * (e.g. the user has moved the tracked element beyond the specified tolerance) + * @param {Ext.EventObject} e The event object + */ + onStart : function(xy) { }, - onDrag : function(e){ + /** + * Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected. + * @param {Ext.EventObject} e The event object + */ + onDrag : function(e) { }, - onEnd : function(e){ + /** + * Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed + * (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button) + * @param {Ext.EventObject} e The event object + */ + onEnd : function(e) { }, + /** + * Returns the drag target + * @return {Ext.Element} The element currently being tracked + */ getDragTarget : function(){ return this.dragTarget; }, @@ -30149,8 +34170,8 @@ Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, { }, getOffset : function(constrain){ - var xy = this.getXY(constrain); - var s = this.startXY; + var xy = this.getXY(constrain), + s = this.startXY; return [s[0]-xy[0], s[1]-xy[1]]; }, @@ -30233,14 +34254,19 @@ Ext.dd.ScrollManager = function(){ proc.el = null; proc.dir = ""; }; - + var startProc = function(el, dir){ clearProc(); proc.el = el; proc.dir = dir; - var freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) ? - el.ddScrollConfig.frequency : Ext.dd.ScrollManager.frequency; - proc.id = setInterval(doScroll, freq); + var group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup : undefined, + freq = (el.ddScrollConfig && el.ddScrollConfig.frequency) + ? el.ddScrollConfig.frequency + : Ext.dd.ScrollManager.frequency; + + if (group === undefined || ddm.dragCurrent.ddGroup == group) { + proc.id = setInterval(doScroll, freq); + } }; var onFire = function(e, isDrop){ @@ -30332,7 +34358,7 @@ Ext.dd.ScrollManager = function(){ hthresh : 25, /** - * The number of pixels to scroll in each scroll increment (defaults to 50) + * The number of pixels to scroll in each scroll increment (defaults to 100) * @type Number */ increment : 100, @@ -30356,6 +34382,13 @@ Ext.dd.ScrollManager = function(){ */ animDuration: .4, + /** + * The named drag drop {@link Ext.dd.DragSource#ddGroup group} to which this container belongs (defaults to undefined). + * If a ddGroup is specified, then container scrolling will only occur when a dragged object is in the same ddGroup. + * @type String + */ + ddGroup: undefined, + /** * Manually trigger a cache refresh. */ @@ -30393,7 +34426,7 @@ Ext.dd.Registry = function(){ return { /** * Resgister a drag drop element - * @param {String/HTMLElement) element The id or DOM node to register + * @param {String/HTMLElement} element The id or DOM node to register * @param {Object} data (optional) An custom data object that will be passed between the elements that are involved * in drag drop operations. You can populate this object with any arbitrary properties that your own code * knows how to interpret, plus there are some specific properties known to the Registry that should be @@ -30427,7 +34460,7 @@ isHandle True if the element passed in triggers/** * Unregister a drag drop element - * @param {String/HTMLElement) element The id or DOM node to unregister + * @param {String/HTMLElement} element The id or DOM node to unregister */ unregister : function(el){ var id = getId(el, false); @@ -31027,21 +35060,21 @@ Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, { * @param {Mixed} el The container element * @param {Object} config */ -Ext.dd.DropTarget = function(el, config){ - this.el = Ext.get(el); +Ext.dd.DropTarget = Ext.extend(Ext.dd.DDTarget, { - Ext.apply(this, config); + constructor : function(el, config){ + this.el = Ext.get(el); - if(this.containerScroll){ - Ext.dd.ScrollManager.register(this.el); - } - - Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, - {isTarget: true}); + Ext.apply(this, config); -}; + if(this.containerScroll){ + Ext.dd.ScrollManager.register(this.el); + } -Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, { + Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, + {isTarget: true}); + }, + /** * @cfg {String} ddGroup * A named drag drop group to which this object belongs. If a group is specified, then this object will only @@ -31125,6 +35158,13 @@ Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, { */ notifyDrop : function(dd, e, data){ return false; + }, + + destroy : function(){ + Ext.dd.DropTarget.superclass.destroy.call(this); + if(this.containerScroll){ + Ext.dd.ScrollManager.unregister(this.el); + } } });/** * @class Ext.dd.DragZone @@ -31184,14 +35224,15 @@ myDataView.on('render', function(v) { * @param {Mixed} el The container element * @param {Object} config */ -Ext.dd.DragZone = function(el, config){ - Ext.dd.DragZone.superclass.constructor.call(this, el, config); - if(this.containerScroll){ - Ext.dd.ScrollManager.register(this.el); - } -}; +Ext.dd.DragZone = Ext.extend(Ext.dd.DragSource, { + + constructor : function(el, config){ + Ext.dd.DragZone.superclass.constructor.call(this, el, config); + if(this.containerScroll){ + Ext.dd.ScrollManager.register(this.el); + } + }, -Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, { /** * This property contains the data representing the dragged object. This data is set up by the implementation * of the {@link #getDragData} method. It must contain a ddel property, but can contain @@ -31251,6 +35292,13 @@ Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, { */ getRepairXY : function(e){ return Ext.Element.fly(this.dragData.ddel).getXY(); + }, + + destroy : function(){ + Ext.dd.DragZone.superclass.destroy.call(this); + if(this.containerScroll){ + Ext.dd.ScrollManager.unregister(this.el); + } } });/** * @class Ext.dd.DropZone @@ -31607,8 +35655,7 @@ restActions : { /** * Returns true if supplied action-name is a valid API action defined in
{@link #actions} constants
- * @param {String} action
- * @param {String[]}(Optional) List of available CRUD actions. Pass in list when executing multiple times for efficiency.
+ * @param {String} action Action to test for availability.
* @return {Boolean}
*/
isAction : function(action) {
@@ -31640,7 +35687,7 @@ restActions : {
/**
* Returns true if the supplied API is valid; that is, check that all keys match defined actions
* otherwise returns an array of mistakes.
- * @return {String[]||true}
+ * @return {String[]|true}
*/
isValid : function(api){
var invalid = [];
@@ -31980,7 +36027,7 @@ var myNewRecord = new TopicRecord(
myStore.{@link Ext.data.Store#add add}(myNewRecord);
* @method create
- * @return {function} A constructor which is used to create new Records according
+ * @return {Function} A constructor which is used to create new Records according
* to the definition. The constructor has the same signature as {@link #Record}.
* @static
*/
@@ -32142,7 +36189,7 @@ rec.{@link #commit}(); // updates the view
// private
afterEdit : function(){
- if(this.store){
+ if (this.store != undefined && typeof this.store.afterEdit == "function") {
this.store.afterEdit(this);
}
},
@@ -32638,10 +36685,25 @@ sortInfo: {
dir : 'dir'
},
+ isDestroyed: false,
+ hasMultiSort: false,
+
// private
batchKey : '_ext_batch_',
constructor : function(config){
+ /**
+ * @property multiSort
+ * @type Boolean
+ * True if this store is currently sorted by more than one field/direction combination.
+ */
+
+ /**
+ * @property isDestroyed
+ * @type Boolean
+ * True if the store has been destroyed already. Read only
+ */
+
this.data = new Ext.util.MixedCollection(false);
this.data.getKey = function(o){
return o.id;
@@ -32819,7 +36881,7 @@ sortInfo: {
* @event clear
* Fires when the data cache has been cleared.
* @param {Store} this
- * @param {Record[]} The records that were cleared.
+ * @param {Record[]} records The records that were cleared.
*/
'clear',
/**
@@ -32863,7 +36925,7 @@ sortInfo: {
* @event beforewrite
* @param {Ext.data.Store} store
* @param {String} action [Ext.data.Api.actions.create|update|destroy]
- * @param {Record/Array[Record]} rs
+ * @param {Record/Record[]} rs The Record(s) being written.
* @param {Object} options The loading options that were specified. Edit options.params to add Http parameters to the request. (see {@link #save} for details)
* @param {Object} arg The callback's arg object passed to the {@link #request} function
*/
@@ -32990,19 +37052,31 @@ sortInfo: {
* @param {Ext.data.Record[]} records An Array of Ext.data.Record objects
* to add to the cache. See {@link #recordType}.
*/
- add : function(records){
+ add : function(records) {
+ var i, len, record, index;
+
records = [].concat(records);
- if(records.length < 1){
+ if (records.length < 1) {
return;
}
- for(var i = 0, len = records.length; i < len; i++){
- records[i].join(this);
+
+ for (i = 0, len = records.length; i < len; i++) {
+ record = records[i];
+
+ record.join(this);
+
+ if (record.dirty || record.phantom) {
+ this.modified.push(record);
+ }
}
- var index = this.data.length;
+
+ index = this.data.length;
this.data.addAll(records);
- if(this.snapshot){
+
+ if (this.snapshot) {
this.snapshot.addAll(records);
}
+
this.fireEvent('add', this, records, index);
},
@@ -33016,6 +37090,23 @@ sortInfo: {
this.insert(index, record);
},
+ /**
+ * @private
+ * Update a record within the store with a new reference
+ */
+ doUpdate: function(rec){
+ var id = rec.id;
+ // unjoin the old record
+ this.getById(id).join(null);
+
+ this.data.replace(id, rec);
+ if (this.snapshot) {
+ this.snapshot.replace(id, rec);
+ }
+ rec.join(this);
+ this.fireEvent('update', this, rec, Ext.data.Record.COMMIT);
+ },
+
/**
* Remove Records from the Store and fires the {@link #remove} event.
* @param {Ext.data.Record/Ext.data.Record[]} record The record object or array of records to remove from the cache.
@@ -33025,6 +37116,7 @@ sortInfo: {
Ext.each(record, function(r){
this.remove(r);
}, this);
+ return;
}
var index = this.data.indexOf(record);
if(index > -1){
@@ -33084,15 +37176,25 @@ sortInfo: {
* @param {Number} index The start index at which to insert the passed Records.
* @param {Ext.data.Record[]} records An Array of Ext.data.Record objects to add to the cache.
*/
- insert : function(index, records){
+ insert : function(index, records) {
+ var i, len, record;
+
records = [].concat(records);
- for(var i = 0, len = records.length; i < len; i++){
- this.data.insert(index, records[i]);
- records[i].join(this);
+ for (i = 0, len = records.length; i < len; i++) {
+ record = records[i];
+
+ this.data.insert(index + i, record);
+ record.join(this);
+
+ if (record.dirty || record.phantom) {
+ this.modified.push(record);
+ }
}
- if(this.snapshot){
+
+ if (this.snapshot) {
this.snapshot.addAll(records);
}
+
this.fireEvent('add', this, records, index);
},
@@ -33190,11 +37292,11 @@ sortInfo: {
* false, the load call will abort and will return false; otherwise will return true.
*/
load : function(options) {
- options = options || {};
+ options = Ext.apply({}, options);
this.storeOptions(options);
if(this.sortInfo && this.remoteSort){
var pn = this.paramNames;
- options.params = options.params || {};
+ options.params = Ext.apply({}, options.params);
options.params[pn.sort] = this.sortInfo.field;
options.params[pn.dir] = this.sortInfo.direction;
}
@@ -33221,17 +37323,26 @@ sortInfo: {
},
/**
+ * @private
* Should not be used directly. Store#add will call this automatically if a Writer is set
* @param {Object} store
- * @param {Object} rs
+ * @param {Object} records
* @param {Object} index
- * @private
*/
- createRecords : function(store, rs, index) {
- for (var i = 0, len = rs.length; i < len; i++) {
- if (rs[i].phantom && rs[i].isValid()) {
- rs[i].markDirty(); // <-- Mark new records dirty
- this.modified.push(rs[i]); // <-- add to modified
+ createRecords : function(store, records, index) {
+ var modified = this.modified,
+ length = records.length,
+ record, i;
+
+ for (i = 0; i < length; i++) {
+ record = records[i];
+
+ if (record.phantom && record.isValid()) {
+ record.markDirty(); // <-- Mark new records dirty (Ed: why?)
+
+ if (modified.indexOf(record) == -1) {
+ modified.push(record);
+ }
}
}
if (this.autoSave === true) {
@@ -33240,9 +37351,9 @@ sortInfo: {
},
/**
- * Destroys a record or records. Should not be used directly. It's called by Store#remove if a Writer is set.
- * @param {Store} this
- * @param {Ext.data.Record/Ext.data.Record[]}
+ * Destroys a Record. Should not be used directly. It's called by Store#remove if a Writer is set.
+ * @param {Store} store this
+ * @param {Ext.data.Record} record
* @param {Number} index
* @private
*/
@@ -33348,7 +37459,8 @@ sortInfo: {
len,
trans,
batch,
- data = {};
+ data = {},
+ i;
// DESTROY: First check for removed records. Records in this.removed are guaranteed non-phantoms. @see Store#remove
if(this.removed.length){
queue.push(['destroy', this.removed]);
@@ -33359,7 +37471,7 @@ sortInfo: {
if(rs.length){
// CREATE: Next check for phantoms within rs. splice-off and execute create.
var phantoms = [];
- for(var i = rs.length-1; i >= 0; i--){
+ for(i = rs.length-1; i >= 0; i--){
if(rs[i].phantom === true){
var rec = rs.splice(i, 1).shift();
if(rec.isValid()){
@@ -33382,12 +37494,12 @@ sortInfo: {
len = queue.length;
if(len){
batch = ++this.batchCounter;
- for(var i = 0; i < len; ++i){
+ for(i = 0; i < len; ++i){
trans = queue[i];
data[trans[0]] = trans[1];
}
if(this.fireEvent('beforesave', this, data) !== false){
- for(var i = 0; i < len; ++i){
+ for(i = 0; i < len; ++i){
trans = queue[i];
this.doTransaction(trans[0], trans[1], batch);
}
@@ -33426,7 +37538,7 @@ sortInfo: {
id: batch,
count: 0,
data: {}
- }
+ };
}
++o.count;
},
@@ -33435,7 +37547,6 @@ sortInfo: {
var b = this.batches,
key = this.batchKey + batch,
o = b[key],
- data,
arr;
@@ -33500,7 +37611,6 @@ sortInfo: {
if (success === true) {
try {
this.reader.realize(rs, data);
- this.reMap(rs);
}
catch (e) {
this.handleException(e);
@@ -33574,6 +37684,8 @@ myStore.reload(lastOptions);
// private
// Called as a callback by the Reader during a load operation.
loadRecords : function(o, options, success){
+ var i, len;
+
if (this.isDestroyed === true) {
return;
}
@@ -33591,7 +37703,7 @@ myStore.reload(lastOptions);
if(this.pruneModifiedRecords){
this.modified = [];
}
- for(var i = 0, len = r.length; i < len; i++){
+ for(i = 0, len = r.length; i < len; i++){
r[i].join(this);
}
if(this.snapshot){
@@ -33604,8 +37716,20 @@ myStore.reload(lastOptions);
this.applySort();
this.fireEvent('datachanged', this);
}else{
- this.totalLength = Math.max(t, this.data.length+r.length);
- this.add(r);
+ var toAdd = [],
+ rec,
+ cnt = 0;
+ for(i = 0, len = r.length; i < len; ++i){
+ rec = r[i];
+ if(this.indexOfId(rec.id) > -1){
+ this.doUpdate(rec);
+ }else{
+ toAdd.push(rec);
+ ++cnt;
+ }
+ }
+ this.totalLength = Math.max(t, this.data.length + cnt);
+ this.add(toAdd);
}
this.fireEvent('load', this, r, options);
if(options.callback){
@@ -33668,34 +37792,96 @@ myStore.reload(lastOptions);
return this.sortInfo;
},
- // private
+ /**
+ * @private
+ * Invokes sortData if we have sortInfo to sort on and are not sorting remotely
+ */
applySort : function(){
- if(this.sortInfo && !this.remoteSort){
- var s = this.sortInfo, f = s.field;
- this.sortData(f, s.direction);
+ if ((this.sortInfo || this.multiSortInfo) && !this.remoteSort) {
+ this.sortData();
}
},
- // private
- sortData : function(f, direction){
- direction = direction || 'ASC';
- var st = this.fields.get(f).sortType;
- var fn = function(r1, r2){
- var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
- return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
+ /**
+ * @private
+ * Performs the actual sorting of data. This checks to see if we currently have a multi sort or not. It applies
+ * each sorter field/direction pair in turn by building an OR'ed master sorting function and running it against
+ * the full dataset
+ */
+ sortData : function() {
+ var sortInfo = this.hasMultiSort ? this.multiSortInfo : this.sortInfo,
+ direction = sortInfo.direction || "ASC",
+ sorters = sortInfo.sorters,
+ sortFns = [];
+
+ //if we just have a single sorter, pretend it's the first in an array
+ if (!this.hasMultiSort) {
+ sorters = [{direction: direction, field: sortInfo.field}];
+ }
+
+ //create a sorter function for each sorter field/direction combo
+ for (var i=0, j = sorters.length; i < j; i++) {
+ sortFns.push(this.createSortFunction(sorters[i].field, sorters[i].direction));
+ }
+
+ if (sortFns.length == 0) {
+ return;
+ }
+
+ //the direction modifier is multiplied with the result of the sorting functions to provide overall sort direction
+ //(as opposed to direction per field)
+ var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;
+
+ //create a function which ORs each sorter together to enable multi-sort
+ var fn = function(r1, r2) {
+ var result = sortFns[0].call(this, r1, r2);
+
+ //if we have more than one sorter, OR any additional sorter functions together
+ if (sortFns.length > 1) {
+ for (var i=1, j = sortFns.length; i < j; i++) {
+ result = result || sortFns[i].call(this, r1, r2);
+ }
+ }
+
+ return directionModifier * result;
};
+
+ //sort the data
this.data.sort(direction, fn);
- if(this.snapshot && this.snapshot != this.data){
+ if (this.snapshot && this.snapshot != this.data) {
this.snapshot.sort(direction, fn);
}
},
+ /**
+ * @private
+ * Creates and returns a function which sorts an array by the given field and direction
+ * @param {String} field The field to create the sorter for
+ * @param {String} direction The direction to sort by (defaults to "ASC")
+ * @return {Function} A function which sorts by the field/direction combination provided
+ */
+ createSortFunction: function(field, direction) {
+ direction = direction || "ASC";
+ var directionModifier = direction.toUpperCase() == "DESC" ? -1 : 1;
+
+ var sortType = this.fields.get(field).sortType;
+
+ //create a comparison function. Takes 2 records, returns 1 if record 1 is greater,
+ //-1 if record 2 is greater or 0 if they are equal
+ return function(r1, r2) {
+ var v1 = sortType(r1.data[field]),
+ v2 = sortType(r2.data[field]);
+
+ return directionModifier * (v1 > v2 ? 1 : (v1 < v2 ? -1 : 0));
+ };
+ },
+
/**
* Sets the default sort column and order to be used by the next {@link #load} operation.
* @param {String} fieldName The name of the field to sort by.
* @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
*/
- setDefaultSort : function(field, dir){
+ setDefaultSort : function(field, dir) {
dir = dir ? dir.toUpperCase() : 'ASC';
this.sortInfo = {field: field, direction: dir};
this.sortToggle[field] = dir;
@@ -33705,38 +37891,112 @@ myStore.reload(lastOptions);
* Sort the Records.
* If remote sorting is used, the sort is performed on the server, and the cache is reloaded. If local
* sorting is used, the cache is sorted internally. See also {@link #remoteSort} and {@link #paramNames}.
+ * This function accepts two call signatures - pass in a field name as the first argument to sort on a single
+ * field, or pass in an array of sort configuration objects to sort by multiple fields.
+ * Single sort example:
+ * store.sort('name', 'ASC');
+ * Multi sort example:
+ * store.sort([
+ * {
+ * field : 'name',
+ * direction: 'ASC'
+ * },
+ * {
+ * field : 'salary',
+ * direction: 'DESC'
+ * }
+ * ], 'ASC');
+ * In this second form, the sort configs are applied in order, with later sorters sorting within earlier sorters' results.
+ * For example, if two records with the same name are present they will also be sorted by salary if given the sort configs
+ * above. Any number of sort configs can be added.
+ * @param {String/Array} fieldName The name of the field to sort by, or an array of ordered sort configs
+ * @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
+ */
+ sort : function(fieldName, dir) {
+ if (Ext.isArray(arguments[0])) {
+ return this.multiSort.call(this, fieldName, dir);
+ } else {
+ return this.singleSort(fieldName, dir);
+ }
+ },
+
+ /**
+ * Sorts the store contents by a single field and direction. This is called internally by {@link sort} and would
+ * not usually be called manually
* @param {String} fieldName The name of the field to sort by.
* @param {String} dir (optional) The sort order, 'ASC' or 'DESC' (case-sensitive, defaults to 'ASC')
*/
- sort : function(fieldName, dir){
- var f = this.fields.get(fieldName);
- if(!f){
+ singleSort: function(fieldName, dir) {
+ var field = this.fields.get(fieldName);
+ if (!field) {
return false;
}
- if(!dir){
- if(this.sortInfo && this.sortInfo.field == f.name){ // toggle sort dir
- dir = (this.sortToggle[f.name] || 'ASC').toggle('ASC', 'DESC');
- }else{
- dir = f.sortDir;
+
+ var name = field.name,
+ sortInfo = this.sortInfo || null,
+ sortToggle = this.sortToggle ? this.sortToggle[name] : null;
+
+ if (!dir) {
+ if (sortInfo && sortInfo.field == name) { // toggle sort dir
+ dir = (this.sortToggle[name] || 'ASC').toggle('ASC', 'DESC');
+ } else {
+ dir = field.sortDir;
}
}
- var st = (this.sortToggle) ? this.sortToggle[f.name] : null;
- var si = (this.sortInfo) ? this.sortInfo : null;
- this.sortToggle[f.name] = dir;
- this.sortInfo = {field: f.name, direction: dir};
- if(!this.remoteSort){
- this.applySort();
- this.fireEvent('datachanged', this);
- }else{
+ this.sortToggle[name] = dir;
+ this.sortInfo = {field: name, direction: dir};
+ this.hasMultiSort = false;
+
+ if (this.remoteSort) {
if (!this.load(this.lastOptions)) {
- if (st) {
- this.sortToggle[f.name] = st;
+ if (sortToggle) {
+ this.sortToggle[name] = sortToggle;
}
- if (si) {
- this.sortInfo = si;
+ if (sortInfo) {
+ this.sortInfo = sortInfo;
}
}
+ } else {
+ this.applySort();
+ this.fireEvent('datachanged', this);
+ }
+ return true;
+ },
+
+ /**
+ * Sorts the contents of this store by multiple field/direction sorters. This is called internally by {@link sort}
+ * and would not usually be called manually.
+ * Multi sorting only currently applies to local datasets - multiple sort data is not currently sent to a proxy
+ * if remoteSort is used.
+ * @param {Array} sorters Array of sorter objects (field and direction)
+ * @param {String} direction Overall direction to sort the ordered results by (defaults to "ASC")
+ */
+ multiSort: function(sorters, direction) {
+ this.hasMultiSort = true;
+ direction = direction || "ASC";
+
+ //toggle sort direction
+ if (this.multiSortInfo && direction == this.multiSortInfo.direction) {
+ direction = direction.toggle("ASC", "DESC");
+ }
+
+ /**
+ * Object containing overall sort direction and an ordered array of sorter configs used when sorting on multiple fields
+ * @property multiSortInfo
+ * @type Object
+ */
+ this.multiSortInfo = {
+ sorters : sorters,
+ direction: direction
+ };
+
+ if (this.remoteSort) {
+ this.singleSort(sorters[0].field, sorters[0].direction);
+
+ } else {
+ this.applySort();
+ this.fireEvent('datachanged', this);
}
},
@@ -33764,17 +38024,6 @@ myStore.reload(lastOptions);
return this.modified;
},
- // private
- createFilterFn : function(property, value, anyMatch, caseSensitive){
- if(Ext.isEmpty(value, false)){
- return false;
- }
- value = this.data.createValueMatcher(value, anyMatch, caseSensitive);
- return function(r){
- return value.test(r.data[property]);
- };
- },
-
/**
* Sums the value of property for each {@link Ext.data.Record record} between start
* and end and returns the result.
@@ -33795,15 +38044,109 @@ myStore.reload(lastOptions);
},
/**
- * Filter the {@link Ext.data.Record records} by a specified property.
- * @param {String} field A field on your records
+ * @private
+ * Returns a filter function used to test a the given property's value. Defers most of the work to
+ * Ext.util.MixedCollection's createValueMatcher function
+ * @param {String} property The property to create the filter function for
+ * @param {String/RegExp} value The string/regex to compare the property value to
+ * @param {Boolean} anyMatch True if we don't care if the filter value is not the full value (defaults to false)
+ * @param {Boolean} caseSensitive True to create a case-sensitive regex (defaults to false)
+ * @param {Boolean} exactMatch True to force exact match (^ and $ characters added to the regex). Defaults to false. Ignored if anyMatch is true.
+ */
+ createFilterFn : function(property, value, anyMatch, caseSensitive, exactMatch){
+ if(Ext.isEmpty(value, false)){
+ return false;
+ }
+ value = this.data.createValueMatcher(value, anyMatch, caseSensitive, exactMatch);
+ return function(r) {
+ return value.test(r.data[property]);
+ };
+ },
+
+ /**
+ * @private
+ * Given an array of filter functions (each with optional scope), constructs and returns a single function that returns
+ * the result of all of the filters ANDed together
+ * @param {Array} filters The array of filter objects (each object should contain an 'fn' and optional scope)
+ * @return {Function} The multiple filter function
+ */
+ createMultipleFilterFn: function(filters) {
+ return function(record) {
+ var isMatch = true;
+
+ for (var i=0, j = filters.length; i < j; i++) {
+ var filter = filters[i],
+ fn = filter.fn,
+ scope = filter.scope;
+
+ isMatch = isMatch && fn.call(scope, record);
+ }
+
+ return isMatch;
+ };
+ },
+
+ /**
+ * Filter the {@link Ext.data.Record records} by a specified property. Alternatively, pass an array of filter
+ * options to filter by more than one property.
+ * Single filter example:
+ * store.filter('name', 'Ed', true, true); //finds all records containing the substring 'Ed'
+ * Multiple filter example:
+ *
+ * store.filter([
+ * {
+ * property : 'name',
+ * value : 'Ed',
+ * anyMatch : true, //optional, defaults to true
+ * caseSensitive: true //optional, defaults to true
+ * },
+ *
+ * //filter functions can also be passed
+ * {
+ * fn : function(record) {
+ * return record.get('age') == 24
+ * },
+ * scope: this
+ * }
+ * ]);
+ * Developers do not need to instantiate this class. Instances are created by {@link Ext.data.Record.create} * and cached in the {@link Ext.data.Record#fields fields} property of the created Record constructor's prototype.
*/ -Ext.data.Field = function(config){ - if(typeof config == "string"){ - config = {name: config}; - } - Ext.apply(this, config); +Ext.data.Field = Ext.extend(Object, { - if(!this.type){ - this.type = "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; + constructor : function(config){ + if(Ext.isString(config)){ + config = {name: config}; } - } + Ext.apply(this, config); - // define once - var stripRe = /[\$,%]/g; - - // prebuilt conversion function for this field, instead of - // switching every time we're reading a value - if(!this.convert){ - var cv, dateFormat = this.dateFormat; - switch(this.type){ - case "": - case "auto": - case undefined: - cv = function(v){ return v; }; - break; - case "string": - cv = function(v){ return (v === undefined || v === null) ? '' : String(v); }; - break; - case "int": - cv = function(v){ - return v !== undefined && v !== null && v !== '' ? - parseInt(String(v).replace(stripRe, ""), 10) : ''; - }; - break; - case "float": - cv = function(v){ - return v !== undefined && v !== null && v !== '' ? - parseFloat(String(v).replace(stripRe, ""), 10) : ''; - }; - break; - case "bool": - cv = function(v){ return v === true || v === "true" || v == 1; }; - break; - case "date": - cv = function(v){ - if(!v){ - return ''; - } - if(Ext.isDate(v)){ - return v; - } - if(dateFormat){ - if(dateFormat == "timestamp"){ - return new Date(v*1000); - } - if(dateFormat == "time"){ - return new Date(parseInt(v, 10)); - } - return Date.parseDate(v, dateFormat); - } - var parsed = Date.parse(v); - return parsed ? new Date(parsed) : null; - }; - break; - default: - cv = function(v){ return v; }; - break; + var types = Ext.data.Types, + st = this.sortType, + t; + if(this.type){ + if(Ext.isString(this.type)){ + this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO; + } + }else{ + this.type = types.AUTO; } - this.convert = cv; - } -}; -Ext.data.Field.prototype = { + // named sortTypes are supported, here we look them up + if(Ext.isString(st)){ + this.sortType = Ext.data.SortTypes[st]; + }else if(Ext.isEmpty(st)){ + this.sortType = this.type.sortType; + } + + if(!this.convert){ + this.convert = this.type.convert; + } + }, + /** * @cfg {String} name * The name by which the field is referenced within the Record. This is referenced by, for example, - * the dataIndex property in column definition objects passed to {@link Ext.grid.ColumnModel}. - *Note: In the simplest case, if no properties other than name are required, a field
+ * the dataIndex property in column definition objects passed to {@link Ext.grid.ColumnModel}.
+ *
Note: In the simplest case, if no properties other than name are required, a field
* definition may consist of just a String for the field name.
{@link Ext.data.Field#convert convert}
+ * has not been specified. This may be specified as a string value. Possible values are
* -
*
This may also be specified by referencing a member of the {@link Ext.data.Types} class.
+ *Developers may create their own application-specific data types by defining new members of the + * {@link Ext.data.Types} class.
*/ /** * @cfg {Function} convert * (Optional) A function which converts the value provided by the Reader into an object that will be stored * in the Record. It is passed the following parameters:-
*
{@link Ext.data.Field#defaultValue defaultValue}.(Optional) Used when converting received data into a Date when the {@link #type} is specified as "date".
A format string for the {@link Date#parseDate Date.parseDate} function, or "timestamp" if the * value provided by the Reader is a UNIX timestamp, or "time" if the value provided by the Reader is a - * javascript millisecond timestamp. + * javascript millisecond timestamp. See {@link Date}
*/ dateFormat: null, + + /** + * @cfg {Boolean} useNull + *(Optional) Use when converting received data into a Number type (either int or float). If the value cannot be parsed,
+ * null will be used if useNull is true, otherwise the value will be 0. Defaults to false
+ */
+ useNull: false,
+
/**
* @cfg {Mixed} defaultValue
* (Optional) The default value used when a Record is being created by a {@link Ext.data.Reader Reader}
- * when the item referenced by the {@link Ext.data.Field#mapping mapping} does not exist in the data
+ * when the item referenced by the {@link Ext.data.Field#mapping mapping} does not exist in the data
* object (i.e. undefined). (defaults to "")
*/
defaultValue: "",
@@ -34285,18 +38591,19 @@ sortType: function(value) {
sortType : null,
/**
* @cfg {String} sortDir
- * (Optional) Initial direction to sort ("ASC" or "DESC"). Defaults to
- * "ASC".
+ * (Optional) Initial direction to sort ("ASC" or "DESC"). Defaults to
+ * "ASC".
*/
sortDir : "ASC",
/**
* @cfg {Boolean} allowBlank
- * (Optional) Used for validating a {@link Ext.data.Record record}, defaults to true.
+ * (Optional) Used for validating a {@link Ext.data.Record record}, defaults to true.
* An empty value here will cause {@link Ext.data.Record}.{@link Ext.data.Record#isValid isValid}
- * to evaluate to false.
+ * to evaluate to false.
*/
allowBlank : true
-};/**
+});
+/**
* @class Ext.data.DataReader
* Abstract base class for reading structured data from a data source and converting
* it into an object containing {@link Ext.data.Record} objects and metadata for use
@@ -34360,10 +38667,6 @@ Ext.data.DataReader.prototype = {
* Abstract method, overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
*/
buildExtractors : Ext.emptyFn,
- /**
- * Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
- */
- extractData : Ext.emptyFn,
/**
* Abstract method overridden in DataReader extensions such as {@link Ext.data.JsonReader} and {@link Ext.data.XmlReader}
*/
@@ -34405,13 +38708,10 @@ Ext.data.DataReader.prototype = {
rs.phantom = false; // <-- That's what it's all about
rs._phid = rs.id; // <-- copy phantom-id -> _phid, so we can remap in Store#onCreateRecords
rs.id = this.getId(data);
+ rs.data = data;
- rs.fields.each(function(f) {
- if (data[f.name] !== f.defaultValue) {
- rs.data[f.name] = data[f.name];
- }
- });
rs.commit();
+ rs.store.reMap(rs);
}
},
@@ -34442,11 +38742,7 @@ Ext.data.DataReader.prototype = {
data = data.shift();
}
if (this.isData(data)) {
- rs.fields.each(function(f) {
- if (data[f.name] !== f.defaultValue) {
- rs.data[f.name] = data[f.name];
- }
- });
+ rs.data = Ext.apply(rs.data, data);
}
rs.commit();
}
@@ -34687,7 +38983,7 @@ Ext.data.DataWriter.prototype = {
* Converts a Record to a hash, taking into account the state of the Ext.data.Record along with configuration properties
* related to its rendering, such as {@link #writeAllFields}, {@link Ext.data.Record#phantom phantom}, {@link Ext.data.Record#getChanges getChanges} and
* {@link Ext.data.DataReader#idProperty idProperty}
- * @param {Ext.data.Record}
+ * @param {Ext.data.Record} rec The Record from which to create a hash.
* @param {Object} config NOT YET IMPLEMENTED. Will implement an exlude/only configuration for fine-control over which fields do/don't get rendered.
* @return {Object}
* @protected
@@ -34711,7 +39007,7 @@ Ext.data.DataWriter.prototype = {
delete data[this.meta.idProperty];
}
} else {
- data[this.meta.idProperty] = rec.id
+ data[this.meta.idProperty] = rec.id;
}
return data;
},
@@ -34782,7 +39078,7 @@ Ext.data.DataProxy.on('write', function(proxy, action, data, res, rs) {
});
// Listen to "exception" event fired by all proxies
-Ext.data.DataProxy.on('exception', function(proxy, type, action) {
+Ext.data.DataProxy.on('exception', function(proxy, type, action, exception) {
console.error(type + action + ' exception);
});
*
@@ -34881,7 +39177,7 @@ myStore.on({
* so any Store instance may observe this event.
In addition to being fired through the DataProxy instance that raised the event, this event is also fired * through the Ext.data.DataProxy class to allow for centralized processing of exception events from all - * DataProxies by attaching a listener to the Ext.data.Proxy class itself.
+ * DataProxies by attaching a listener to the Ext.data.DataProxy class itself. *This event can be fired for one of two reasons:
*-
*
| ',Date.getShortMonthName(b)," | ",'',Date.getShortMonthName(b+6)," | ",b===0?'')}a.push(' | |
','",'
","");this.el=a?c.insertBefore(a,{cls:this.baseCls},true):c.append(d,{cls:this.baseCls},true);if(this.id){this.el.dom.id=this.id}var b=this.el.dom.firstChild;this.progressBar=Ext.get(b.firstChild);if(this.textEl){this.textEl=Ext.get(this.textEl);delete this.textTopEl}else{this.textTopEl=Ext.get(this.progressBar.dom.firstChild);var e=Ext.get(b.childNodes[1]);this.textTopEl.setStyle("z-index",99).addClass("x-hidden");this.textEl=new Ext.CompositeElement([this.textTopEl.dom.firstChild,e.dom.firstChild]);this.textEl.setWidth(b.offsetWidth)}this.progressBar.setHeight(b.offsetHeight)},afterRender:function(){Ext.ProgressBar.superclass.afterRender.call(this);if(this.value){this.updateProgress(this.value,this.text)}else{this.updateText(this.text)}},updateProgress:function(c,d,b){this.value=c||0;if(d){this.updateText(d)}if(this.rendered&&!this.isDestroyed){var a=Math.floor(c*this.el.dom.firstChild.offsetWidth);this.progressBar.setWidth(a,b===true||(b!==false&&this.animate));if(this.textTopEl){this.textTopEl.removeClass("x-hidden").setWidth(a)}}this.fireEvent("update",this,c,d);return this},wait:function(b){if(!this.waitTimer){var a=this;b=b||{};this.updateText(b.text);this.waitTimer=Ext.TaskMgr.start({run:function(c){var d=b.increment||10;c-=1;this.updateProgress(((((c+d)%d)+1)*(100/d))*0.01,null,b.animate)},interval:b.interval||1000,duration:b.duration,onStop:function(){if(b.fn){b.fn.apply(b.scope||this)}this.reset()},scope:a})}return this},isWaiting:function(){return this.waitTimer!==null},updateText:function(a){this.text=a||" ";if(this.rendered){this.textEl.update(this.text)}return this},syncProgressBar:function(){if(this.value){this.updateProgress(this.value,this.text)}return this},setSize:function(a,c){Ext.ProgressBar.superclass.setSize.call(this,a,c);if(this.textTopEl){var b=this.el.dom.firstChild;this.textEl.setSize(b.offsetWidth,b.offsetHeight)}this.syncProgressBar();return this},reset:function(a){this.updateProgress(0);if(this.textTopEl){this.textTopEl.addClass("x-hidden")}this.clearTimer();if(a===true){this.hide()}return this},clearTimer:function(){if(this.waitTimer){this.waitTimer.onStop=null;Ext.TaskMgr.stop(this.waitTimer);this.waitTimer=null}},onDestroy:function(){this.clearTimer();if(this.rendered){if(this.textEl.isComposite){this.textEl.clear()}Ext.destroyMembers(this,"textEl","progressBar","textTopEl")}Ext.ProgressBar.superclass.onDestroy.call(this)}});Ext.reg("progress",Ext.ProgressBar);(function(){var a=Ext.EventManager;var b=Ext.lib.Dom;Ext.dd.DragDrop=function(e,c,d){if(e){this.init(e,c,d)}};Ext.dd.DragDrop.prototype={id:null,config:null,dragElId:null,handleElId:null,invalidHandleTypes:null,invalidHandleIds:null,invalidHandleClasses:null,startPageX:0,startPageY:0,groups:null,locked:false,lock:function(){this.locked=true},moveOnly:false,unlock:function(){this.locked=false},isTarget:true,padding:null,_domRef:null,__ygDragDrop:true,constrainX:false,constrainY:false,minX:0,maxX:0,minY:0,maxY:0,maintainOffset:false,xTicks:null,yTicks:null,primaryButtonOnly:true,available:false,hasOuterHandles:false,b4StartDrag:function(c,d){},startDrag:function(c,d){},b4Drag:function(c){},onDrag:function(c){},onDragEnter:function(c,d){},b4DragOver:function(c){},onDragOver:function(c,d){},b4DragOut:function(c){},onDragOut:function(c,d){},b4DragDrop:function(c){},onDragDrop:function(c,d){},onInvalidDrop:function(c){},b4EndDrag:function(c){},endDrag:function(c){},b4MouseDown:function(c){},onMouseDown:function(c){},onMouseUp:function(c){},onAvailable:function(){},defaultPadding:{left:0,right:0,top:0,bottom:0},constrainTo:function(j,h,o){if(Ext.isNumber(h)){h={left:h,right:h,top:h,bottom:h}}h=h||this.defaultPadding;var l=Ext.get(this.getEl()).getBox(),d=Ext.get(j),n=d.getScroll(),k,e=d.dom;if(e==document.body){k={x:n.left,y:n.top,width:Ext.lib.Dom.getViewWidth(),height:Ext.lib.Dom.getViewHeight()}}else{var m=d.getXY();k={x:m[0],y:m[1],width:e.clientWidth,height:e.clientHeight}}var i=l.y-k.y,g=l.x-k.x;this.resetConstraints();this.setXConstraint(g-(h.left||0),k.width-g-l.width-(h.right||0),this.xTickSize);this.setYConstraint(i-(h.top||0),k.height-i-l.height-(h.bottom||0),this.yTickSize)},getEl:function(){if(!this._domRef){this._domRef=Ext.getDom(this.id)}return this._domRef},getDragEl:function(){return Ext.getDom(this.dragElId)},init:function(e,c,d){this.initTarget(e,c,d);a.on(this.id,"mousedown",this.handleMouseDown,this)},initTarget:function(e,c,d){this.config=d||{};this.DDM=Ext.dd.DDM;this.groups={};if(typeof e!=="string"){e=Ext.id(e)}this.id=e;this.addToGroup((c)?c:"default");this.handleElId=e;this.setDragElId(e);this.invalidHandleTypes={A:"A"};this.invalidHandleIds={};this.invalidHandleClasses=[];this.applyConfig();this.handleOnAvailable()},applyConfig:function(){this.padding=this.config.padding||[0,0,0,0];this.isTarget=(this.config.isTarget!==false);this.maintainOffset=(this.config.maintainOffset);this.primaryButtonOnly=(this.config.primaryButtonOnly!==false)},handleOnAvailable:function(){this.available=true;this.resetConstraints();this.onAvailable()},setPadding:function(e,c,g,d){if(!c&&0!==c){this.padding=[e,e,e,e]}else{if(!g&&0!==g){this.padding=[e,c,e,c]}else{this.padding=[e,c,g,d]}}},setInitPosition:function(g,e){var h=this.getEl();if(!this.DDM.verifyEl(h)){return}var d=g||0;var c=e||0;var i=b.getXY(h);this.initPageX=i[0]-d;this.initPageY=i[1]-c;this.lastPageX=i[0];this.lastPageY=i[1];this.setStartPosition(i)},setStartPosition:function(d){var c=d||b.getXY(this.getEl());this.deltaSetXY=null;this.startPageX=c[0];this.startPageY=c[1]},addToGroup:function(c){this.groups[c]=true;this.DDM.regDragDrop(this,c)},removeFromGroup:function(c){if(this.groups[c]){delete this.groups[c]}this.DDM.removeDDFromGroup(this,c)},setDragElId:function(c){this.dragElId=c},setHandleElId:function(c){if(typeof c!=="string"){c=Ext.id(c)}this.handleElId=c;this.DDM.regHandle(this.id,c)},setOuterHandleElId:function(c){if(typeof c!=="string"){c=Ext.id(c)}a.on(c,"mousedown",this.handleMouseDown,this);this.setHandleElId(c);this.hasOuterHandles=true},unreg:function(){a.un(this.id,"mousedown",this.handleMouseDown);this._domRef=null;this.DDM._remove(this)},destroy:function(){this.unreg()},isLocked:function(){return(this.DDM.isLocked()||this.locked)},handleMouseDown:function(g,d){if(this.primaryButtonOnly&&g.button!=0){return}if(this.isLocked()){return}this.DDM.refreshCache(this.groups);var c=new Ext.lib.Point(Ext.lib.Event.getPageX(g),Ext.lib.Event.getPageY(g));if(!this.hasOuterHandles&&!this.DDM.isOverTarget(c,this)){}else{if(this.clickValidator(g)){this.setStartPosition();this.b4MouseDown(g);this.onMouseDown(g);this.DDM.handleMouseDown(g,this);this.DDM.stopEvent(g)}else{}}},clickValidator:function(d){var c=d.getTarget();return(this.isValidHandleChild(c)&&(this.id==this.handleElId||this.DDM.handleWasClicked(c,this.id)))},addInvalidHandleType:function(c){var d=c.toUpperCase();this.invalidHandleTypes[d]=d},addInvalidHandleId:function(c){if(typeof c!=="string"){c=Ext.id(c)}this.invalidHandleIds[c]=c},addInvalidHandleClass:function(c){this.invalidHandleClasses.push(c)},removeInvalidHandleType:function(c){var d=c.toUpperCase();delete this.invalidHandleTypes[d]},removeInvalidHandleId:function(c){if(typeof c!=="string"){c=Ext.id(c)}delete this.invalidHandleIds[c]},removeInvalidHandleClass:function(d){for(var e=0,c=this.invalidHandleClasses.length;e'," ","
","'+this.loadingText+"
");this.all.clear()}},onDestroy:function(){this.all.clear();this.selected.clear();Ext.DataView.superclass.onDestroy.call(this);this.bindStore(null)}});Ext.DataView.prototype.setStore=Ext.DataView.prototype.bindStore;Ext.reg("dataview",Ext.DataView);Ext.list.ListView=Ext.extend(Ext.DataView,{itemSelector:"dl",selectedClass:"x-list-selected",overClass:"x-list-over",scrollOffset:undefined,columnResize:true,columnSort:true,maxWidth:Ext.isIE?99:100,initComponent:function(){if(this.columnResize){this.colResizer=new Ext.list.ColumnResizer(this.colResizer);this.colResizer.init(this)}if(this.columnSort){this.colSorter=new Ext.list.Sorter(this.columnSort);this.colSorter.init(this)}if(!this.internalTpl){this.internalTpl=new Ext.XTemplate('','',' ",'',"
',"{header}","
","',"
- ",'
',Ext.util.Format.htmlEncode(m),"
"].join("");try{var o=e.contentWindow.document;o.open();o.write(l);o.close();return true}catch(n){return false}}function b(){if(!e.contentWindow||!e.contentWindow.document){setTimeout(b,10);return}var o=e.contentWindow.document;var m=o.getElementById("state");var l=m?m.innerText:null;var n=g();setInterval(function(){o=e.contentWindow.document;m=o.getElementById("state");var q=m?m.innerText:null;var p=g();if(q!==l){l=q;h(l);top.location.hash=l;n=l;a()}else{if(p!==n){n=p;i(p)}}},50);k=true;Ext.History.fireEvent("ready",Ext.History)}function j(){d=c.value?c.value:g();if(Ext.isIE){b()}else{var l=g();setInterval(function(){var m=g();if(m!==l){l=m;h(l);a()}},50);k=true;Ext.History.fireEvent("ready",Ext.History)}}return{fieldId:"x-history-field",iframeId:"x-history-frame",events:{},init:function(m,l){if(k){Ext.callback(m,l,[this]);return}if(!Ext.isReady){Ext.onReady(function(){Ext.History.init(m,l)});return}c=Ext.getDom(Ext.History.fieldId);if(Ext.isIE){e=Ext.getDom(Ext.History.iframeId)}this.addEvents("ready","change");if(m){this.on("ready",m,l,{single:true})}j()},add:function(l,m){if(m!==false){if(this.getToken()==l){return true}}if(Ext.isIE){return i(l)}else{top.location.hash=l;return true}},back:function(){history.go(-1)},forward:function(){history.go(1)},getToken:function(){return k?d:g()}}})();Ext.apply(Ext.History,new Ext.util.Observable());Ext.Tip=Ext.extend(Ext.Panel,{minWidth:40,maxWidth:300,shadow:"sides",defaultAlign:"tl-bl?",autoRender:true,quickShowInterval:250,frame:true,hidden:true,baseCls:"x-tip",floating:{shadow:true,shim:true,useDisplay:true,constrain:false},autoHeight:true,closeAction:"hide",initComponent:function(){Ext.Tip.superclass.initComponent.call(this);if(this.closable&&!this.title){this.elements+=",header"}},afterRender:function(){Ext.Tip.superclass.afterRender.call(this);if(this.closable){this.addTool({id:"close",handler:this[this.closeAction],scope:this})}},showAt:function(a){Ext.Tip.superclass.show.call(this);if(this.measureWidth!==false&&(!this.initialConfig||typeof this.initialConfig.width!="number")){this.doAutoWidth()}if(this.constrainPosition){a=this.el.adjustForConstraints(a)}this.setPagePosition(a[0],a[1])},doAutoWidth:function(a){a=a||0;var b=this.body.getTextWidth();if(this.title){b=Math.max(b,this.header.child("span").getTextWidth(this.title))}b+=this.getFrameWidth()+(this.closable?20:0)+this.body.getPadding("lr")+a;this.setWidth(b.constrain(this.minWidth,this.maxWidth));if(Ext.isIE7&&!this.repainted){this.el.repaint();this.repainted=true}},showBy:function(a,b){if(!this.rendered){this.render(Ext.getBody())}this.showAt(this.el.getAlignToXY(a,b||this.defaultAlign))},initDraggable:function(){this.dd=new Ext.Tip.DD(this,typeof this.draggable=="boolean"?null:this.draggable);this.header.addClass("x-tip-draggable")}});Ext.reg("tip",Ext.Tip);Ext.Tip.DD=function(b,a){Ext.apply(this,a);this.tip=b;Ext.Tip.DD.superclass.constructor.call(this,b.el.id,"WindowDD-"+b.id);this.setHandleElId(b.header.id);this.scroll=false};Ext.extend(Ext.Tip.DD,Ext.dd.DD,{moveOnly:true,scroll:false,headerOffsets:[100,25],startDrag:function(){this.tip.el.disableShadow()},endDrag:function(a){this.tip.el.enableShadow(true)}});Ext.ToolTip=Ext.extend(Ext.Tip,{showDelay:500,hideDelay:200,dismissDelay:5000,trackMouse:false,anchorToTarget:true,anchorOffset:0,targetCounter:0,constrainPosition:false,initComponent:function(){Ext.ToolTip.superclass.initComponent.call(this);this.lastActive=new Date();this.initTarget(this.target);this.origAnchor=this.anchor},onRender:function(b,a){Ext.ToolTip.superclass.onRender.call(this,b,a);this.anchorCls="x-tip-anchor-"+this.getAnchorPosition();this.anchorEl=this.el.createChild({cls:"x-tip-anchor "+this.anchorCls})},afterRender:function(){Ext.ToolTip.superclass.afterRender.call(this);this.anchorEl.setStyle("z-index",this.el.getZIndex()+1)},initTarget:function(c){var a;if((a=Ext.get(c))){if(this.target){var b=Ext.get(this.target);this.mun(b,"mouseover",this.onTargetOver,this);this.mun(b,"mouseout",this.onTargetOut,this);this.mun(b,"mousemove",this.onMouseMove,this)}this.mon(a,{mouseover:this.onTargetOver,mouseout:this.onTargetOut,mousemove:this.onMouseMove,scope:this});this.target=a}if(this.anchor){this.anchorTarget=this.target}},onMouseMove:function(b){var a=this.delegate?b.getTarget(this.delegate):this.triggerElement=true;if(a){this.targetXY=b.getXY();if(a===this.triggerElement){if(!this.hidden&&this.trackMouse){this.setPagePosition(this.getTargetXY())}}else{this.hide();this.lastActive=new Date(0);this.onTargetOver(b)}}else{if(!this.closable&&this.isVisible()){this.hide()}}},getTargetXY:function(){if(this.delegate){this.anchorTarget=this.triggerElement}if(this.anchor){this.targetCounter++;var c=this.getOffsets(),l=(this.anchorToTarget&&!this.trackMouse)?this.el.getAlignToXY(this.anchorTarget,this.getAnchorAlign()):this.targetXY,a=Ext.lib.Dom.getViewWidth()-5,h=Ext.lib.Dom.getViewHeight()-5,i=document.documentElement,e=document.body,k=(i.scrollLeft||e.scrollLeft||0)+5,j=(i.scrollTop||e.scrollTop||0)+5,b=[l[0]+c[0],l[1]+c[1]],g=this.getSize();this.anchorEl.removeClass(this.anchorCls);if(this.targetCounter<2){if(b[0]'+n.indicatorText+"
"}if(s.indicatorText){Ext.getDom(n.el).innerHTML=s.indicatorText}n.success=(Ext.isFunction(n.success)?n.success:function(){}).createInterceptor(function(o){Ext.getDom(n.el).innerHTML=o.responseText})}var l=n.params,k=n.url||s.url,j,q={success:s.handleResponse,failure:s.handleFailure,scope:s,argument:{options:n},timeout:Ext.num(n.timeout,s.timeout)},m,t;if(Ext.isFunction(l)){l=l.call(n.scope||g,n)}l=Ext.urlEncode(s.extraParams,Ext.isObject(l)?Ext.urlEncode(l):l);if(Ext.isFunction(k)){k=k.call(n.scope||g,n)}if((m=Ext.getDom(n.form))){k=k||m.action;if(n.isUpload||(/multipart\/form-data/i.test(m.getAttribute("enctype")))){return s.doFormUpload.call(s,n,l,k)}t=Ext.lib.Ajax.serializeForm(m);l=l?(l+"&"+t):t}j=n.method||s.method||((l||n.xmlData||n.jsonData)?i:a);if(j===a&&(s.disableCaching&&n.disableCaching!==false)||n.disableCaching===true){var r=n.disableCachingParam||s.disableCachingParam;k=Ext.urlAppend(k,r+"="+(new Date().getTime()))}n.headers=Ext.applyIf(n.headers||{},s.defaultHeaders||{});if(n.autoAbort===true||s.autoAbort){s.abort()}if((j==a||n.xmlData||n.jsonData)&&l){k=Ext.urlAppend(k,l);l=""}return(s.transId=Ext.lib.Ajax.request(j,k,q,l,n))}else{return n.callback?n.callback.apply(n.scope,[n,h,h]):null}},isLoading:function(j){return j?Ext.lib.Ajax.isCallInProgress(j):!!this.transId},abort:function(j){if(j||this.isLoading()){Ext.lib.Ajax.abort(j||this.transId)}},handleResponse:function(j){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(e,this,j,k);if(k.success){k.success.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,true,j)}},handleFailure:function(j,l){this.transId=false;var k=j.argument.options;j.argument=k?k.argument:null;this.fireEvent(d,this,j,k,l);if(k.failure){k.failure.call(k.scope,j,k)}if(k.callback){k.callback.call(k.scope,k,false,j)}},doFormUpload:function(q,j,k){var l=Ext.id(),v=document,r=v.createElement("iframe"),m=Ext.getDom(q.form),u=[],t,p="multipart/form-data",n={target:m.target,method:m.method,encoding:m.encoding,enctype:m.enctype,action:m.action};Ext.fly(r).set({id:l,name:l,cls:"x-hidden",src:Ext.SSL_SECURE_URL});v.body.appendChild(r);if(Ext.isIE){document.frames[l].name=l}Ext.fly(m).set({target:l,method:i,enctype:p,encoding:p,action:k||n.action});Ext.iterate(Ext.urlDecode(j,false),function(w,o){t=v.createElement("input");Ext.fly(t).set({type:"hidden",value:o,name:w});m.appendChild(t);u.push(t)});function s(){var x=this,w={responseText:"",responseXML:null,argument:q.argument},A,z;try{A=r.contentWindow.document||r.contentDocument||g.frames[l].document;if(A){if(A.body){if(/textarea/i.test((z=A.body.firstChild||{}).tagName)){w.responseText=z.value}else{w.responseText=A.body.innerHTML}}w.responseXML=A.XMLDocument||A}}catch(y){}Ext.EventManager.removeListener(r,c,s,x);x.fireEvent(e,x,w,q);function o(D,C,B){if(Ext.isFunction(D)){D.apply(C,B)}}o(q.success,q.scope,[w,q]);o(q.callback,q.scope,[q,true,w]);if(!x.debugUploads){setTimeout(function(){Ext.removeNode(r)},100)}}Ext.EventManager.on(r,c,s,this);m.submit();Ext.fly(m).set(n);Ext.each(u,function(o){Ext.removeNode(o)})}})})();Ext.Ajax=new Ext.data.Connection({autoAbort:false,serializeForm:function(a){return Ext.lib.Ajax.serializeForm(a)}});Ext.util.JSON=new (function(){var useHasOwn=!!{}.hasOwnProperty,isNative=function(){var useNative=null;return function(){if(useNative===null){useNative=Ext.USE_NATIVE_JSON&&window.JSON&&JSON.toString()=="[object JSON]"}return useNative}}(),pad=function(n){return n<10?"0"+n:n},doDecode=function(json){return json?eval("("+json+")"):""},doEncode=function(o){if(!Ext.isDefined(o)||o===null){return"null"}else{if(Ext.isArray(o)){return encodeArray(o)}else{if(Ext.isDate(o)){return Ext.util.JSON.encodeDate(o)}else{if(Ext.isString(o)){return encodeString(o)}else{if(typeof o=="number"){return isFinite(o)?String(o):"null"}else{if(Ext.isBoolean(o)){return String(o)}else{var a=["{"],b,i,v;for(i in o){if(!o.getElementsByTagName){if(!useHasOwn||o.hasOwnProperty(i)){v=o[i];switch(typeof v){case"undefined":case"function":case"unknown":break;default:if(b){a.push(",")}a.push(doEncode(i),":",v===null?"null":doEncode(v));b=true}}}}a.push("}");return a.join("")}}}}}}},m={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},encodeString=function(s){if(/["\\\x00-\x1f]/.test(s)){return'"'+s.replace(/([\x00-\x1f\\"])/g,function(a,b){var c=m[b];if(c){return c}c=b.charCodeAt();return"\\u00"+Math.floor(c/16).toString(16)+(c%16).toString(16)})+'"'}return'"'+s+'"'},encodeArray=function(o){var a=["["],b,i,l=o.length,v;for(i=0;i