examples/docs/source/ux-all-debug.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 Ext.ns('Ext.ux.grid');
  16
  17 /**
  18  * @class Ext.ux.grid.BufferView
  19  * @extends Ext.grid.GridView
  20  * A custom GridView which renders rows on an as-needed basis.
  21  */
  22 Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
  23         <div id="cfg-Ext.ux.grid.BufferView-rowHeight"></div>/**
  24          * @cfg {Number} rowHeight
  25          * The height of a row in the grid.
  26          */
  27         rowHeight: 19,
  28
  29         <div id="cfg-Ext.ux.grid.BufferView-borderHeight"></div>/**
  30          * @cfg {Number} borderHeight
  31          * The combined height of border-top and border-bottom of a row.
  32          */
  33         borderHeight: 2,
  34
  35         <div id="cfg-Ext.ux.grid.BufferView-scrollDelay"></div>/**
  36          * @cfg {Boolean/Number} scrollDelay
  37          * The number of milliseconds before rendering rows out of the visible
  38          * viewing area. Defaults to 100. Rows will render immediately with a config
  39          * of false.
  40          */
  41         scrollDelay: 100,
  42
  43         <div id="cfg-Ext.ux.grid.BufferView-cacheSize"></div>/**
  44          * @cfg {Number} cacheSize
  45          * The number of rows to look forward and backwards from the currently viewable
  46          * area.  The cache applies only to rows that have been rendered already.
  47          */
  48         cacheSize: 20,
  49
  50         <div id="cfg-Ext.ux.grid.BufferView-cleanDelay"></div>/**
  51          * @cfg {Number} cleanDelay
  52          * The number of milliseconds to buffer cleaning of extra rows not in the
  53          * cache.
  54          */
  55         cleanDelay: 500,
  56
  57         initTemplates : function(){
  58                 Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
  59                 var ts = this.templates;
  60                 // empty div to act as a place holder for a row
  61                 ts.rowHolder = new Ext.Template(
  62                         '<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
  63                 );
  64                 ts.rowHolder.disableFormats = true;
  65                 ts.rowHolder.compile();
  66
  67                 ts.rowBody = new Ext.Template(
  68                         '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
  69                         '<tbody><tr>{cells}</tr>',
  70                         (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
  71                         '</tbody></table>'
  72                 );
  73                 ts.rowBody.disableFormats = true;
  74                 ts.rowBody.compile();
  75         },
  76
  77         getStyleRowHeight : function(){
  78                 return Ext.isBorderBox ? (this.rowHeight + this.borderHeight) : this.rowHeight;
  79         },
  80
  81         getCalculatedRowHeight : function(){
  82                 return this.rowHeight + this.borderHeight;
  83         },
  84
  85         getVisibleRowCount : function(){
  86                 var rh = this.getCalculatedRowHeight(),
  87                     visibleHeight = this.scroller.dom.clientHeight;
  88                 return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
  89         },
  90
  91         getVisibleRows: function(){
  92                 var count = this.getVisibleRowCount(),
  93                     sc = this.scroller.dom.scrollTop,
  94                     start = (sc === 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
  95                 return {
  96                         first: Math.max(start, 0),
  97                         last: Math.min(start + count + 2, this.ds.getCount()-1)
  98                 };
  99         },
 100
 101         doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
 102                 var ts = this.templates,
 103             ct = ts.cell,
 104             rt = ts.row,
 105             rb = ts.rowBody,
 106             last = colCount-1,
 107                     rh = this.getStyleRowHeight(),
 108                     vr = this.getVisibleRows(),
 109                     tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;',
 110                     // buffers
 111                     buf = [],
 112             cb,
 113             c,
 114             p = {},
 115             rp = {tstyle: tstyle},
 116             r;
 117                 for (var j = 0, len = rs.length; j < len; j++) {
 118                         r = rs[j]; cb = [];
 119                         var rowIndex = (j+startRow),
 120                             visible = rowIndex >= vr.first && rowIndex <= vr.last;
 121                         if (visible) {
 122                                 for (var i = 0; i < colCount; i++) {
 123                                         c = cs[i];
 124                                         p.id = c.id;
 125                                         p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
 126                                         p.attr = p.cellAttr = "";
 127                                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
 128                                         p.style = c.style;
 129                                         if (p.value === undefined || p.value === "") {
 130                                                 p.value = "&#160;";
 131                                         }
 132                                         if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
 133                                                 p.css += ' x-grid3-dirty-cell';
 134                                         }
 135                                         cb[cb.length] = ct.apply(p);
 136                                 }
 137                         }
 138                         var alt = [];
 139                         if(stripe && ((rowIndex+1) % 2 === 0)){
 140                             alt[0] = "x-grid3-row-alt";
 141                         }
 142                         if(r.dirty){
 143                             alt[1] = " x-grid3-dirty-row";
 144                         }
 145                         rp.cols = colCount;
 146                         if(this.getRowClass){
 147                             alt[2] = this.getRowClass(r, rowIndex, rp, ds);
 148                         }
 149                         rp.alt = alt.join(" ");
 150                         rp.cells = cb.join("");
 151                         buf[buf.length] =  !visible ? ts.rowHolder.apply(rp) : (onlyBody ? rb.apply(rp) : rt.apply(rp));
 152                 }
 153                 return buf.join("");
 154         },
 155
 156         isRowRendered: function(index){
 157                 var row = this.getRow(index);
 158                 return row && row.childNodes.length > 0;
 159         },
 160
 161         syncScroll: function(){
 162                 Ext.ux.grid.BufferView.superclass.syncScroll.apply(this, arguments);
 163                 this.update();
 164         },
 165
 166         // a (optionally) buffered method to update contents of gridview
 167         update: function(){
 168                 if (this.scrollDelay) {
 169                         if (!this.renderTask) {
 170                                 this.renderTask = new Ext.util.DelayedTask(this.doUpdate, this);
 171                         }
 172                         this.renderTask.delay(this.scrollDelay);
 173                 }else{
 174                         this.doUpdate();
 175                 }
 176         },
 177
 178     onRemove : function(ds, record, index, isUpdate){
 179         Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
 180         if(isUpdate !== true){
 181             this.update();
 182         }
 183     },
 184
 185         doUpdate: function(){
 186                 if (this.getVisibleRowCount() > 0) {
 187                         var g = this.grid,
 188                 cm = g.colModel,
 189                 ds = g.store,
 190                 cs = this.getColumnData(),
 191                         vr = this.getVisibleRows(),
 192                 row;
 193                         for (var i = vr.first; i <= vr.last; i++) {
 194                                 // if row is NOT rendered and is visible, render it
 195                                 if(!this.isRowRendered(i) && (row = this.getRow(i))){
 196                                         var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
 197                                         row.innerHTML = html;
 198                                 }
 199                         }
 200                         this.clean();
 201                 }
 202         },
 203
 204         // a buffered method to clean rows
 205         clean : function(){
 206                 if(!this.cleanTask){
 207                         this.cleanTask = new Ext.util.DelayedTask(this.doClean, this);
 208                 }
 209                 this.cleanTask.delay(this.cleanDelay);
 210         },
 211
 212         doClean: function(){
 213                 if (this.getVisibleRowCount() > 0) {
 214                         var vr = this.getVisibleRows();
 215                         vr.first -= this.cacheSize;
 216                         vr.last += this.cacheSize;
 217
 218                         var i = 0, rows = this.getRows();
 219                         // if first is less than 0, all rows have been rendered
 220                         // so lets clean the end...
 221                         if(vr.first <= 0){
 222                                 i = vr.last + 1;
 223                         }
 224                         for(var len = this.ds.getCount(); i < len; i++){
 225                                 // if current row is outside of first and last and
 226                                 // has content, update the innerHTML to nothing
 227                                 if ((i < vr.first || i > vr.last) && rows[i].innerHTML) {
 228                                         rows[i].innerHTML = '';
 229                                 }
 230                         }
 231                 }
 232         },
 233
 234     removeTask: function(name){
 235         var task = this[name];
 236         if(task && task.cancel){
 237             task.cancel();
 238             this[name] = null;
 239         }
 240     },
 241
 242     destroy : function(){
 243         this.removeTask('cleanTask');
 244         this.removeTask('renderTask');
 245         Ext.ux.grid.BufferView.superclass.destroy.call(this);
 246     },
 247
 248         layout: function(){
 249                 Ext.ux.grid.BufferView.superclass.layout.call(this);
 250                 this.update();
 251         }
 252 });// We are adding these custom layouts to a namespace that does not
 253 // exist by default in Ext, so we have to add the namespace first:
 254 Ext.ns('Ext.ux.layout');
 255
 256 <div id="cls-Ext.ux.layout.CenterLayout"></div>/**
 257  * @class Ext.ux.layout.CenterLayout
 258  * @extends Ext.layout.FitLayout
 259  * <p>This is a very simple layout style used to center contents within a container.  This layout works within
 260  * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
 261  * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
 262  * the layout.  The layout does not require any config options, although the child panel contained within the
 263  * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
 264  * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
 265  * Example usage:</p>
 266  * <pre><code>
 267 // The content panel is centered in the container
 268 var p = new Ext.Panel({
 269     title: 'Center Layout',
 270     layout: 'ux.center',
 271     items: [{
 272         title: 'Centered Content',
 273         width: '75%',
 274         html: 'Some content'
 275     }]
 276 });
 277
 278 // If you leave the title blank and specify no border
 279 // you'll create a non-visual, structural panel just
 280 // for centering the contents in the main container.
 281 var p = new Ext.Panel({
 282     layout: 'ux.center',
 283     border: false,
 284     items: [{
 285         title: 'Centered Content',
 286         width: 300,
 287         autoHeight: true,
 288         html: 'Some content'
 289     }]
 290 });
 291 </code></pre>
 292  */
 293 Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
 294         // private
 295     setItemSize : function(item, size){
 296         this.container.addClass('ux-layout-center');
 297         item.addClass('ux-layout-center-item');
 298         if(item && size.height > 0){
 299             if(item.width){
 300                 size.width = item.width;
 301             }
 302             item.setSize(size);
 303         }
 304     }
 305 });
 306
 307 Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
 308 Ext.ns('Ext.ux.grid');
 309
 310 <div id="cls-Ext.ux.grid.CheckColumn"></div>/**
 311  * @class Ext.ux.grid.CheckColumn
 312  * @extends Ext.grid.Column
 313  * <p>A Column subclass which renders a checkbox in each column cell which toggles the truthiness of the associated data field on click.</p>
 314  * <p><b>Note. As of ExtJS 3.3 this no longer has to be configured as a plugin of the GridPanel.</b></p>
 315  * <p>Example usage:</p>
 316  * <pre><code>
 317 var cm = new Ext.grid.ColumnModel([{
 318        header: 'Foo',
 319        ...
 320     },{
 321        xtype: 'checkcolumn',
 322        header: 'Indoor?',
 323        dataIndex: 'indoor',
 324        width: 55
 325     }
 326 ]);
 327
 328 // create the grid
 329 var grid = new Ext.grid.EditorGridPanel({
 330     ...
 331     colModel: cm,
 332     ...
 333 });
 334  * </code></pre>
 335  * In addition to toggling a Boolean value within the record data, this
 336  * class toggles a css class between <tt>'x-grid3-check-col'</tt> and
 337  * <tt>'x-grid3-check-col-on'</tt> to alter the background image used for
 338  * a column.
 339  */
 340 Ext.ux.grid.CheckColumn = Ext.extend(Ext.grid.Column, {
 341
 342     /**
 343      * @private
 344      * Process and refire events routed from the GridView's processEvent method.
 345      */
 346     processEvent : function(name, e, grid, rowIndex, colIndex){
 347         if (name == 'mousedown') {
 348             var record = grid.store.getAt(rowIndex);
 349             record.set(this.dataIndex, !record.data[this.dataIndex]);
 350             return false; // Cancel row selection.
 351         } else {
 352             return Ext.grid.ActionColumn.superclass.processEvent.apply(this, arguments);
 353         }
 354     },
 355
 356     renderer : function(v, p, record){
 357         p.css += ' x-grid3-check-col-td';
 358         return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', v ? '-on' : '');
 359     },
 360
 361     // Deprecate use as a plugin. Remove in 4.0
 362     init: Ext.emptyFn
 363 });
 364
 365 // register ptype. Deprecate. Remove in 4.0
 366 Ext.preg('checkcolumn', Ext.ux.grid.CheckColumn);
 367
 368 // backwards compat. Remove in 4.0
 369 Ext.grid.CheckColumn = Ext.ux.grid.CheckColumn;
 370
 371 // register Column xtype
 372 Ext.grid.Column.types.checkcolumn = Ext.ux.grid.CheckColumn;Ext.ns('Ext.ux.grid');
 373
 374 Ext.ux.grid.ColumnHeaderGroup = Ext.extend(Ext.util.Observable, {
 375
 376     constructor: function(config){
 377         this.config = config;
 378     },
 379
 380     init: function(grid){
 381         Ext.applyIf(grid.colModel, this.config);
 382         Ext.apply(grid.getView(), this.viewConfig);
 383     },
 384
 385     viewConfig: {
 386         initTemplates: function(){
 387             this.constructor.prototype.initTemplates.apply(this, arguments);
 388             var ts = this.templates || {};
 389             if(!ts.gcell){
 390                 ts.gcell = new Ext.XTemplate('<td class="x-grid3-hd x-grid3-gcell x-grid3-td-{id} ux-grid-hd-group-row-{row} {cls}" style="{style}">', '<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', '{value}</div></td>');
 391             }
 392             this.templates = ts;
 393             this.hrowRe = new RegExp("ux-grid-hd-group-row-(\\d+)", "");
 394         },
 395
 396         renderHeaders: function(){
 397             var ts = this.templates, headers = [], cm = this.cm, rows = cm.rows, tstyle = 'width:' + this.getTotalWidth() + ';';
 398
 399             for(var row = 0, rlen = rows.length; row < rlen; row++){
 400                 var r = rows[row], cells = [];
 401                 for(var i = 0, gcol = 0, len = r.length; i < len; i++){
 402                     var group = r[i];
 403                     group.colspan = group.colspan || 1;
 404                     var id = this.getColumnId(group.dataIndex ? cm.findColumnIndex(group.dataIndex) : gcol), gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
 405                     cells[i] = ts.gcell.apply({
 406                         cls: 'ux-grid-hd-group-cell',
 407                         id: id,
 408                         row: row,
 409                         style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (group.align ? 'text-align:' + group.align + ';' : ''),
 410                         tooltip: group.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + group.tooltip + '"' : '',
 411                         istyle: group.align == 'right' ? 'padding-right:16px' : '',
 412                         btn: this.grid.enableHdMenu && group.header,
 413                         value: group.header || '&nbsp;'
 414                     });
 415                     gcol += group.colspan;
 416                 }
 417                 headers[row] = ts.header.apply({
 418                     tstyle: tstyle,
 419                     cells: cells.join('')
 420                 });
 421             }
 422             headers.push(this.constructor.prototype.renderHeaders.apply(this, arguments));
 423             return headers.join('');
 424         },
 425
 426         onColumnWidthUpdated: function(){
 427             this.constructor.prototype.onColumnWidthUpdated.apply(this, arguments);
 428             Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
 429         },
 430
 431         onAllColumnWidthsUpdated: function(){
 432             this.constructor.prototype.onAllColumnWidthsUpdated.apply(this, arguments);
 433             Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
 434         },
 435
 436         onColumnHiddenUpdated: function(){
 437             this.constructor.prototype.onColumnHiddenUpdated.apply(this, arguments);
 438             Ext.ux.grid.ColumnHeaderGroup.prototype.updateGroupStyles.call(this);
 439         },
 440
 441         getHeaderCell: function(index){
 442             return this.mainHd.query(this.cellSelector)[index];
 443         },
 444
 445         findHeaderCell: function(el){
 446             return el ? this.fly(el).findParent('td.x-grid3-hd', this.cellSelectorDepth) : false;
 447         },
 448
 449         findHeaderIndex: function(el){
 450             var cell = this.findHeaderCell(el);
 451             return cell ? this.getCellIndex(cell) : false;
 452         },
 453
 454         updateSortIcon: function(col, dir){
 455             var sc = this.sortClasses, hds = this.mainHd.select(this.cellSelector).removeClass(sc);
 456             hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
 457         },
 458
 459         handleHdDown: function(e, t){
 460             var el = Ext.get(t);
 461             if(el.hasClass('x-grid3-hd-btn')){
 462                 e.stopEvent();
 463                 var hd = this.findHeaderCell(t);
 464                 Ext.fly(hd).addClass('x-grid3-hd-menu-open');
 465                 var index = this.getCellIndex(hd);
 466                 this.hdCtxIndex = index;
 467                 var ms = this.hmenu.items, cm = this.cm;
 468                 ms.get('asc').setDisabled(!cm.isSortable(index));
 469                 ms.get('desc').setDisabled(!cm.isSortable(index));
 470                 this.hmenu.on('hide', function(){
 471                     Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
 472                 }, this, {
 473                     single: true
 474                 });
 475                 this.hmenu.show(t, 'tl-bl?');
 476             }else if(el.hasClass('ux-grid-hd-group-cell') || Ext.fly(t).up('.ux-grid-hd-group-cell')){
 477                 e.stopEvent();
 478             }
 479         },
 480
 481         handleHdMove: function(e, t){
 482             var hd = this.findHeaderCell(this.activeHdRef);
 483             if(hd && !this.headersDisabled && !Ext.fly(hd).hasClass('ux-grid-hd-group-cell')){
 484                 var hw = this.splitHandleWidth || 5, r = this.activeHdRegion, x = e.getPageX(), ss = hd.style, cur = '';
 485                 if(this.grid.enableColumnResize !== false){
 486                     if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex - 1)){
 487                         cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize
 488                                                                                                 // not
 489                                                                                                 // always
 490                                                                                                 // supported
 491                     }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
 492                         cur = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize';
 493                     }
 494                 }
 495                 ss.cursor = cur;
 496             }
 497         },
 498
 499         handleHdOver: function(e, t){
 500             var hd = this.findHeaderCell(t);
 501             if(hd && !this.headersDisabled){
 502                 this.activeHdRef = t;
 503                 this.activeHdIndex = this.getCellIndex(hd);
 504                 var fly = this.fly(hd);
 505                 this.activeHdRegion = fly.getRegion();
 506                 if(!(this.cm.isMenuDisabled(this.activeHdIndex) || fly.hasClass('ux-grid-hd-group-cell'))){
 507                     fly.addClass('x-grid3-hd-over');
 508                     this.activeHdBtn = fly.child('.x-grid3-hd-btn');
 509                     if(this.activeHdBtn){
 510                         this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';
 511                     }
 512                 }
 513             }
 514         },
 515
 516         handleHdOut: function(e, t){
 517             var hd = this.findHeaderCell(t);
 518             if(hd && (!Ext.isIE || !e.within(hd, true))){
 519                 this.activeHdRef = null;
 520                 this.fly(hd).removeClass('x-grid3-hd-over');
 521                 hd.style.cursor = '';
 522             }
 523         },
 524
 525         handleHdMenuClick: function(item){
 526             var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();
 527             switch(id){
 528                 case 'asc':
 529                     ds.sort(cm.getDataIndex(index), 'ASC');
 530                     break;
 531                 case 'desc':
 532                     ds.sort(cm.getDataIndex(index), 'DESC');
 533                     break;
 534                 default:
 535                     if(id.substr(0, 6) == 'group-'){
 536                         var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;
 537                         for(var i = 0, len = r.length; i < len; i++){
 538                             group = r[i];
 539                             if(col >= gcol && col < gcol + group.colspan){
 540                                 break;
 541                             }
 542                             gcol += group.colspan;
 543                         }
 544                         if(item.checked){
 545                             var max = cm.getColumnsBy(this.isHideableColumn, this).length;
 546                             for(var i = gcol, len = gcol + group.colspan; i < len; i++){
 547                                 if(!cm.isHidden(i)){
 548                                     max--;
 549                                 }
 550                             }
 551                             if(max < 1){
 552                                 this.onDenyColumnHide();
 553                                 return false;
 554                             }
 555                         }
 556                         for(var i = gcol, len = gcol + group.colspan; i < len; i++){
 557                             if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
 558                                 cm.setHidden(i, item.checked);
 559                             }
 560                         }
 561                     }else if(id.substr(0, 4) == 'col-'){
 562                         index = cm.getIndexById(id.substr(4));
 563                         if(index != -1){
 564                             if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
 565                                 this.onDenyColumnHide();
 566                                 return false;
 567                             }
 568                             cm.setHidden(index, item.checked);
 569                         }
 570                     }
 571                     if(id.substr(0, 6) == 'group-' || id.substr(0, 4) == 'col-'){
 572                         item.checked = !item.checked;
 573                         if(item.menu){
 574                             var updateChildren = function(menu){
 575                                 menu.items.each(function(childItem){
 576                                     if(!childItem.disabled){
 577                                         childItem.setChecked(item.checked, false);
 578                                         if(childItem.menu){
 579                                             updateChildren(childItem.menu);
 580                                         }
 581                                     }
 582                                 });
 583                             }
 584                             updateChildren(item.menu);
 585                         }
 586                         var parentMenu = item, parentItem;
 587                         while(parentMenu = parentMenu.parentMenu){
 588                             if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
 589                                 break;
 590                             }
 591                             var checked = parentMenu.items.findIndexBy(function(m){
 592                                 return m.checked;
 593                             }) >= 0;
 594                             parentItem.setChecked(checked, true);
 595                         }
 596                         item.checked = !item.checked;
 597                     }
 598             }
 599             return true;
 600         },
 601
 602         beforeColMenuShow: function(){
 603             var cm = this.cm, rows = this.cm.rows;
 604             this.colMenu.removeAll();
 605             for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
 606                 var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];
 607                 if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
 608                     for(var row = 0, rlen = rows.length; row < rlen; row++){
 609                         var r = rows[row], group, gcol = 0;
 610                         for(var i = 0, len = r.length; i < len; i++){
 611                             group = r[i];
 612                             if(col >= gcol && col < gcol + group.colspan){
 613                                 break;
 614                             }
 615                             gcol += group.colspan;
 616                         }
 617                         if(group && group.header){
 618                             if(cm.hierarchicalColMenu){
 619                                 var gid = 'group-' + row + '-' + gcol,
 620                                     item = menu.items ? menu.getComponent(gid) : null,
 621                                     submenu = item ? item.menu : null;
 622                                 if(!submenu){
 623                                     submenu = new Ext.menu.Menu({
 624                                         itemId: gid
 625                                     });
 626                                     submenu.on("itemclick", this.handleHdMenuClick, this);
 627                                     var checked = false, disabled = true;
 628                                     for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){
 629                                         if(!cm.isHidden(c)){
 630                                             checked = true;
 631                                         }
 632                                         if(cm.config[c].hideable !== false){
 633                                             disabled = false;
 634                                         }
 635                                     }
 636                                     menu.add({
 637                                         itemId: gid,
 638                                         text: group.header,
 639                                         menu: submenu,
 640                                         hideOnClick: false,
 641                                         checked: checked,
 642                                         disabled: disabled
 643                                     });
 644                                 }
 645                                 menu = submenu;
 646                             }else{
 647                                 text.push(group.header);
 648                             }
 649                         }
 650                     }
 651                     text.push(title);
 652                     menu.add(new Ext.menu.CheckItem({
 653                         itemId: "col-" + cm.getColumnId(col),
 654                         text: text.join(' '),
 655                         checked: !cm.isHidden(col),
 656                         hideOnClick: false,
 657                         disabled: cm.config[col].hideable === false
 658                     }));
 659                 }
 660             }
 661         },
 662
 663         afterRenderUI: function(){
 664             this.constructor.prototype.afterRenderUI.apply(this, arguments);
 665             Ext.apply(this.columnDrop, Ext.ux.grid.ColumnHeaderGroup.prototype.columnDropConfig);
 666             Ext.apply(this.splitZone, Ext.ux.grid.ColumnHeaderGroup.prototype.splitZoneConfig);
 667         }
 668     },
 669
 670     splitZoneConfig: {
 671         allowHeaderDrag: function(e){
 672             return !e.getTarget(null, null, true).hasClass('ux-grid-hd-group-cell');
 673         }
 674     },
 675
 676     columnDropConfig: {
 677         getTargetFromEvent: function(e){
 678             var t = Ext.lib.Event.getTarget(e);
 679             return this.view.findHeaderCell(t);
 680         },
 681
 682         positionIndicator: function(h, n, e){
 683             var data = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
 684             if(data === false){
 685                 return false;
 686             }
 687             var px = data.px + this.proxyOffsets[0];
 688             this.proxyTop.setLeftTop(px, data.r.top + this.proxyOffsets[1]);
 689             this.proxyTop.show();
 690             this.proxyBottom.setLeftTop(px, data.r.bottom);
 691             this.proxyBottom.show();
 692             return data.pt;
 693         },
 694
 695         onNodeDrop: function(n, dd, e, data){
 696             var h = data.header;
 697             if(h != n){
 698                 var d = Ext.ux.grid.ColumnHeaderGroup.prototype.getDragDropData.call(this, h, n, e);
 699                 if(d === false){
 700                     return false;
 701                 }
 702                 var cm = this.grid.colModel, right = d.oldIndex < d.newIndex, rows = cm.rows;
 703                 for(var row = d.row, rlen = rows.length; row < rlen; row++){
 704                     var r = rows[row], len = r.length, fromIx = 0, span = 1, toIx = len;
 705                     for(var i = 0, gcol = 0; i < len; i++){
 706                         var group = r[i];
 707                         if(d.oldIndex >= gcol && d.oldIndex < gcol + group.colspan){
 708                             fromIx = i;
 709                         }
 710                         if(d.oldIndex + d.colspan - 1 >= gcol && d.oldIndex + d.colspan - 1 < gcol + group.colspan){
 711                             span = i - fromIx + 1;
 712                         }
 713                         if(d.newIndex >= gcol && d.newIndex < gcol + group.colspan){
 714                             toIx = i;
 715                         }
 716                         gcol += group.colspan;
 717                     }
 718                     var groups = r.splice(fromIx, span);
 719                     rows[row] = r.splice(0, toIx - (right ? span : 0)).concat(groups).concat(r);
 720                 }
 721                 for(var c = 0; c < d.colspan; c++){
 722                     var oldIx = d.oldIndex + (right ? 0 : c), newIx = d.newIndex + (right ? -1 : c);
 723                     cm.moveColumn(oldIx, newIx);
 724                     this.grid.fireEvent("columnmove", oldIx, newIx);
 725                 }
 726                 return true;
 727             }
 728             return false;
 729         }
 730     },
 731
 732     getGroupStyle: function(group, gcol){
 733         var width = 0, hidden = true;
 734         for(var i = gcol, len = gcol + group.colspan; i < len; i++){
 735             if(!this.cm.isHidden(i)){
 736                 var cw = this.cm.getColumnWidth(i);
 737                 if(typeof cw == 'number'){
 738                     width += cw;
 739                 }
 740                 hidden = false;
 741             }
 742         }
 743         return {
 744             width: (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? width : Math.max(width - this.borderWidth, 0)) + 'px',
 745             hidden: hidden
 746         };
 747     },
 748
 749     updateGroupStyles: function(col){
 750         var tables = this.mainHd.query('.x-grid3-header-offset > table'), tw = this.getTotalWidth(), rows = this.cm.rows;
 751         for(var row = 0; row < tables.length; row++){
 752             tables[row].style.width = tw;
 753             if(row < rows.length){
 754                 var cells = tables[row].firstChild.firstChild.childNodes;
 755                 for(var i = 0, gcol = 0; i < cells.length; i++){
 756                     var group = rows[row][i];
 757                     if((typeof col != 'number') || (col >= gcol && col < gcol + group.colspan)){
 758                         var gs = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupStyle.call(this, group, gcol);
 759                         cells[i].style.width = gs.width;
 760                         cells[i].style.display = gs.hidden ? 'none' : '';
 761                     }
 762                     gcol += group.colspan;
 763                 }
 764             }
 765         }
 766     },
 767
 768     getGroupRowIndex: function(el){
 769         if(el){
 770             var m = el.className.match(this.hrowRe);
 771             if(m && m[1]){
 772                 return parseInt(m[1], 10);
 773             }
 774         }
 775         return this.cm.rows.length;
 776     },
 777
 778     getGroupSpan: function(row, col){
 779         if(row < 0){
 780             return {
 781                 col: 0,
 782                 colspan: this.cm.getColumnCount()
 783             };
 784         }
 785         var r = this.cm.rows[row];
 786         if(r){
 787             for(var i = 0, gcol = 0, len = r.length; i < len; i++){
 788                 var group = r[i];
 789                 if(col >= gcol && col < gcol + group.colspan){
 790                     return {
 791                         col: gcol,
 792                         colspan: group.colspan
 793                     };
 794                 }
 795                 gcol += group.colspan;
 796             }
 797             return {
 798                 col: gcol,
 799                 colspan: 0
 800             };
 801         }
 802         return {
 803             col: col,
 804             colspan: 1
 805         };
 806     },
 807
 808     getDragDropData: function(h, n, e){
 809         if(h.parentNode != n.parentNode){
 810             return false;
 811         }
 812         var cm = this.grid.colModel, x = Ext.lib.Event.getPageX(e), r = Ext.lib.Dom.getRegion(n.firstChild), px, pt;
 813         if((r.right - x) <= (r.right - r.left) / 2){
 814             px = r.right + this.view.borderWidth;
 815             pt = "after";
 816         }else{
 817             px = r.left;
 818             pt = "before";
 819         }
 820         var oldIndex = this.view.getCellIndex(h), newIndex = this.view.getCellIndex(n);
 821         if(cm.isFixed(newIndex)){
 822             return false;
 823         }
 824         var row = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupRowIndex.call(this.view, h),
 825             oldGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, oldIndex),
 826             newGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row, newIndex),
 827             oldIndex = oldGroup.col;
 828             newIndex = newGroup.col + (pt == "after" ? newGroup.colspan : 0);
 829         if(newIndex >= oldGroup.col && newIndex <= oldGroup.col + oldGroup.colspan){
 830             return false;
 831         }
 832         var parentGroup = Ext.ux.grid.ColumnHeaderGroup.prototype.getGroupSpan.call(this.view, row - 1, oldIndex);
 833         if(newIndex < parentGroup.col || newIndex > parentGroup.col + parentGroup.colspan){
 834             return false;
 835         }
 836         return {
 837             r: r,
 838             px: px,
 839             pt: pt,
 840             row: row,
 841             oldIndex: oldIndex,
 842             newIndex: newIndex,
 843             colspan: oldGroup.colspan
 844         };
 845     }
 846 });Ext.ns('Ext.ux.tree');
 847
 848 <div id="cls-Ext.ux.tree.ColumnTree"></div>/**
 849  * @class Ext.ux.tree.ColumnTree
 850  * @extends Ext.tree.TreePanel
 851  *
 852  * @xtype columntree
 853  */
 854 Ext.ux.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
 855     lines : false,
 856     borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
 857     cls : 'x-column-tree',
 858
 859     onRender : function(){
 860         Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
 861         this.headers = this.header.createChild({cls:'x-tree-headers'});
 862
 863         var cols = this.columns, c;
 864         var totalWidth = 0;
 865         var scrollOffset = 19; // similar to Ext.grid.GridView default
 866
 867         for(var i = 0, len = cols.length; i < len; i++){
 868              c = cols[i];
 869              totalWidth += c.width;
 870              this.headers.createChild({
 871                  cls:'x-tree-hd ' + (c.cls?c.cls+'-hd':''),
 872                  cn: {
 873                      cls:'x-tree-hd-text',
 874                      html: c.header
 875                  },
 876                  style:'width:'+(c.width-this.borderWidth)+'px;'
 877              });
 878         }
 879         this.headers.createChild({cls:'x-clear'});
 880         // prevent floats from wrapping when clipped
 881         this.headers.setWidth(totalWidth+scrollOffset);
 882         this.innerCt.setWidth(totalWidth);
 883     }
 884 });
 885
 886 Ext.reg('columntree', Ext.ux.tree.ColumnTree);
 887
 888 //backwards compat
 889 Ext.tree.ColumnTree = Ext.ux.tree.ColumnTree;
 890
 891
 892 <div id="cls-Ext.ux.tree.ColumnNodeUI"></div>/**
 893  * @class Ext.ux.tree.ColumnNodeUI
 894  * @extends Ext.tree.TreeNodeUI
 895  */
 896 Ext.ux.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
 897     focus: Ext.emptyFn, // prevent odd scrolling behavior
 898
 899     renderElements : function(n, a, targetNode, bulkRender){
 900         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
 901
 902         var t = n.getOwnerTree();
 903         var cols = t.columns;
 904         var bw = t.borderWidth;
 905         var c = cols[0];
 906
 907         var buf = [
 908              '<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
 909                 '<div class="x-tree-col" style="width:',c.width-bw,'px;">',
 910                     '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
 911                     '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">',
 912                     '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on">',
 913                     '<a hidefocus="on" class="x-tree-node-anchor" href="',a.href ? a.href : "#",'" tabIndex="1" ',
 914                     a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
 915                     '<span unselectable="on">', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</span></a>",
 916                 "</div>"];
 917          for(var i = 1, len = cols.length; i < len; i++){
 918              c = cols[i];
 919
 920              buf.push('<div class="x-tree-col ',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
 921                         '<div class="x-tree-col-text">',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"</div>",
 922                       "</div>");
 923          }
 924          buf.push(
 925             '<div class="x-clear"></div></div>',
 926             '<ul class="x-tree-node-ct" style="display:none;"></ul>',
 927             "</li>");
 928
 929         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
 930             this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
 931                                 n.nextSibling.ui.getEl(), buf.join(""));
 932         }else{
 933             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
 934         }
 935
 936         this.elNode = this.wrap.childNodes[0];
 937         this.ctNode = this.wrap.childNodes[1];
 938         var cs = this.elNode.firstChild.childNodes;
 939         this.indentNode = cs[0];
 940         this.ecNode = cs[1];
 941         this.iconNode = cs[2];
 942         this.anchor = cs[3];
 943         this.textNode = cs[3].firstChild;
 944     }
 945 });
 946
 947 //backwards compat
 948 Ext.tree.ColumnNodeUI = Ext.ux.tree.ColumnNodeUI;
 949 <div id="cls-Ext.DataView.LabelEditor"></div>/**
 950  * @class Ext.DataView.LabelEditor
 951  * @extends Ext.Editor
 952  *
 953  */
 954 Ext.DataView.LabelEditor = Ext.extend(Ext.Editor, {
 955     alignment: "tl-tl",
 956     hideEl : false,
 957     cls: "x-small-editor",
 958     shim: false,
 959     completeOnEnter: true,
 960     cancelOnEsc: true,
 961     labelSelector: 'span.x-editable',
 962
 963     constructor: function(cfg, field){
 964         Ext.DataView.LabelEditor.superclass.constructor.call(this,
 965             field || new Ext.form.TextField({
 966                 allowBlank: false,
 967                 growMin:90,
 968                 growMax:240,
 969                 grow:true,
 970                 selectOnFocus:true
 971             }), cfg
 972         );
 973     },
 974
 975     init : function(view){
 976         this.view = view;
 977         view.on('render', this.initEditor, this);
 978         this.on('complete', this.onSave, this);
 979     },
 980
 981     initEditor : function(){
 982         this.view.on({
 983             scope: this,
 984             containerclick: this.doBlur,
 985             click: this.doBlur
 986         });
 987         this.view.getEl().on('mousedown', this.onMouseDown, this, {delegate: this.labelSelector});
 988     },
 989
 990     doBlur: function(){
 991         if(this.editing){
 992             this.field.blur();
 993         }
 994     },
 995
 996     onMouseDown : function(e, target){
 997         if(!e.ctrlKey && !e.shiftKey){
 998             var item = this.view.findItemFromChild(target);
 999             e.stopEvent();
1000             var record = this.view.store.getAt(this.view.indexOf(item));
1001             this.startEdit(target, record.data[this.dataIndex]);
1002             this.activeRecord = record;
1003         }else{
1004             e.preventDefault();
1005         }
1006     },
1007
1008     onSave : function(ed, value){
1009         this.activeRecord.set(this.dataIndex, value);
1010     }
1011 });
1012
1013
1014 Ext.DataView.DragSelector = function(cfg){
1015     cfg = cfg || {};
1016     var view, proxy, tracker;
1017     var rs, bodyRegion, dragRegion = new Ext.lib.Region(0,0,0,0);
1018     var dragSafe = cfg.dragSafe === true;
1019
1020     this.init = function(dataView){
1021         view = dataView;
1022         view.on('render', onRender);
1023     };
1024
1025     function fillRegions(){
1026         rs = [];
1027         view.all.each(function(el){
1028             rs[rs.length] = el.getRegion();
1029         });
1030         bodyRegion = view.el.getRegion();
1031     }
1032
1033     function cancelClick(){
1034         return false;
1035     }
1036
1037     function onBeforeStart(e){
1038         return !dragSafe || e.target == view.el.dom;
1039     }
1040
1041     function onStart(e){
1042         view.on('containerclick', cancelClick, view, {single:true});
1043         if(!proxy){
1044             proxy = view.el.createChild({cls:'x-view-selector'});
1045         }else{
1046             if(proxy.dom.parentNode !== view.el.dom){
1047                 view.el.dom.appendChild(proxy.dom);
1048             }
1049             proxy.setDisplayed('block');
1050         }
1051         fillRegions();
1052         view.clearSelections();
1053     }
1054
1055     function onDrag(e){
1056         var startXY = tracker.startXY;
1057         var xy = tracker.getXY();
1058
1059         var x = Math.min(startXY[0], xy[0]);
1060         var y = Math.min(startXY[1], xy[1]);
1061         var w = Math.abs(startXY[0] - xy[0]);
1062         var h = Math.abs(startXY[1] - xy[1]);
1063
1064         dragRegion.left = x;
1065         dragRegion.top = y;
1066         dragRegion.right = x+w;
1067         dragRegion.bottom = y+h;
1068
1069         dragRegion.constrainTo(bodyRegion);
1070         proxy.setRegion(dragRegion);
1071
1072         for(var i = 0, len = rs.length; i < len; i++){
1073             var r = rs[i], sel = dragRegion.intersect(r);
1074             if(sel && !r.selected){
1075                 r.selected = true;
1076                 view.select(i, true);
1077             }else if(!sel && r.selected){
1078                 r.selected = false;
1079                 view.deselect(i);
1080             }
1081         }
1082     }
1083
1084     function onEnd(e){
1085         if (!Ext.isIE) {
1086             view.un('containerclick', cancelClick, view);
1087         }
1088         if(proxy){
1089             proxy.setDisplayed(false);
1090         }
1091     }
1092
1093     function onRender(view){
1094         tracker = new Ext.dd.DragTracker({
1095             onBeforeStart: onBeforeStart,
1096             onStart: onStart,
1097             onDrag: onDrag,
1098             onEnd: onEnd
1099         });
1100         tracker.initEl(view.el);
1101     }
1102 };Ext.ns('Ext.ux.form');
1103
1104 <div id="cls-Ext.ux.form.FileUploadField"></div>/**
1105  * @class Ext.ux.form.FileUploadField
1106  * @extends Ext.form.TextField
1107  * Creates a file upload field.
1108  * @xtype fileuploadfield
1109  */
1110 Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
1111     <div id="cfg-Ext.ux.form.FileUploadField-buttonText"></div>/**
1112      * @cfg {String} buttonText The button text to display on the upload button (defaults to
1113      * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text
1114      * value will be used instead if available.
1115      */
1116     buttonText: 'Browse...',
1117     <div id="cfg-Ext.ux.form.FileUploadField-buttonOnly"></div>/**
1118      * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
1119      * text field (defaults to false).  If true, all inherited TextField members will still be available.
1120      */
1121     buttonOnly: false,
1122     <div id="cfg-Ext.ux.form.FileUploadField-buttonOffset"></div>/**
1123      * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field
1124      * (defaults to 3).  Note that this only applies if {@link #buttonOnly} = false.
1125      */
1126     buttonOffset: 3,
1127     <div id="cfg-Ext.ux.form.FileUploadField-buttonCfg"></div>/**
1128      * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
1129      */
1130
1131     // private
1132     readOnly: true,
1133
1134     <div id="method-Ext.ux.form.FileUploadField-autoSize"></div>/**
1135      * @hide
1136      * @method autoSize
1137      */
1138     autoSize: Ext.emptyFn,
1139
1140     // private
1141     initComponent: function(){
1142         Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
1143
1144         this.addEvents(
1145             <div id="event-Ext.ux.form.FileUploadField-fileselected"></div>/**
1146              * @event fileselected
1147              * Fires when the underlying file input field's value has changed from the user
1148              * selecting a new file from the system file selection dialog.
1149              * @param {Ext.ux.form.FileUploadField} this
1150              * @param {String} value The file value returned by the underlying file input field
1151              */
1152             'fileselected'
1153         );
1154     },
1155
1156     // private
1157     onRender : function(ct, position){
1158         Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
1159
1160         this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
1161         this.el.addClass('x-form-file-text');
1162         this.el.dom.removeAttribute('name');
1163         this.createFileInput();
1164
1165         var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
1166             text: this.buttonText
1167         });
1168         this.button = new Ext.Button(Ext.apply(btnCfg, {
1169             renderTo: this.wrap,
1170             cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
1171         }));
1172
1173         if(this.buttonOnly){
1174             this.el.hide();
1175             this.wrap.setWidth(this.button.getEl().getWidth());
1176         }
1177
1178         this.bindListeners();
1179         this.resizeEl = this.positionEl = this.wrap;
1180     },
1181
1182     bindListeners: function(){
1183         this.fileInput.on({
1184             scope: this,
1185             mouseenter: function() {
1186                 this.button.addClass(['x-btn-over','x-btn-focus'])
1187             },
1188             mouseleave: function(){
1189                 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
1190             },
1191             mousedown: function(){
1192                 this.button.addClass('x-btn-click')
1193             },
1194             mouseup: function(){
1195                 this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])
1196             },
1197             change: function(){
1198                 var v = this.fileInput.dom.value;
1199                 this.setValue(v);
1200                 this.fireEvent('fileselected', this, v);
1201             }
1202         });
1203     },
1204
1205     createFileInput : function() {
1206         this.fileInput = this.wrap.createChild({
1207             id: this.getFileInputId(),
1208             name: this.name||this.getId(),
1209             cls: 'x-form-file',
1210             tag: 'input',
1211             type: 'file',
1212             size: 1
1213         });
1214     },
1215
1216     reset : function(){
1217         this.fileInput.remove();
1218         this.createFileInput();
1219         this.bindListeners();
1220         Ext.ux.form.FileUploadField.superclass.reset.call(this);
1221     },
1222
1223     // private
1224     getFileInputId: function(){
1225         return this.id + '-file';
1226     },
1227
1228     // private
1229     onResize : function(w, h){
1230         Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
1231
1232         this.wrap.setWidth(w);
1233
1234         if(!this.buttonOnly){
1235             var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
1236             this.el.setWidth(w);
1237         }
1238     },
1239
1240     // private
1241     onDestroy: function(){
1242         Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
1243         Ext.destroy(this.fileInput, this.button, this.wrap);
1244     },
1245
1246     onDisable: function(){
1247         Ext.ux.form.FileUploadField.superclass.onDisable.call(this);
1248         this.doDisable(true);
1249     },
1250
1251     onEnable: function(){
1252         Ext.ux.form.FileUploadField.superclass.onEnable.call(this);
1253         this.doDisable(false);
1254
1255     },
1256
1257     // private
1258     doDisable: function(disabled){
1259         this.fileInput.dom.disabled = disabled;
1260         this.button.setDisabled(disabled);
1261     },
1262
1263
1264     // private
1265     preFocus : Ext.emptyFn,
1266
1267     // private
1268     alignErrorIcon : function(){
1269         this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
1270     }
1271
1272 });
1273
1274 Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);
1275
1276 // backwards compat
1277 Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
1278 <div id="cls-Ext.ux.GMapPanel"></div>/**
1279  * @class Ext.ux.GMapPanel
1280  * @extends Ext.Panel
1281  * @author Shea Frederick
1282  */
1283 Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
1284     initComponent : function(){
1285
1286         var defConfig = {
1287             plain: true,
1288             zoomLevel: 3,
1289             yaw: 180,
1290             pitch: 0,
1291             zoom: 0,
1292             gmapType: 'map',
1293             border: false
1294         };
1295
1296         Ext.applyIf(this,defConfig);
1297
1298         Ext.ux.GMapPanel.superclass.initComponent.call(this);
1299
1300     },
1301     afterRender : function(){
1302
1303         var wh = this.ownerCt.getSize();
1304         Ext.applyIf(this, wh);
1305
1306         Ext.ux.GMapPanel.superclass.afterRender.call(this);
1307
1308         if (this.gmapType === 'map'){
1309             this.gmap = new GMap2(this.body.dom);
1310         }
1311
1312         if (this.gmapType === 'panorama'){
1313             this.gmap = new GStreetviewPanorama(this.body.dom);
1314         }
1315
1316         if (typeof this.addControl == 'object' && this.gmapType === 'map') {
1317             this.gmap.addControl(this.addControl);
1318         }
1319
1320         if (typeof this.setCenter === 'object') {
1321             if (typeof this.setCenter.geoCodeAddr === 'string'){
1322                 this.geoCodeLookup(this.setCenter.geoCodeAddr);
1323             }else{
1324                 if (this.gmapType === 'map'){
1325                     var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
1326                     this.gmap.setCenter(point, this.zoomLevel);
1327                 }
1328                 if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
1329                     this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
1330                 }
1331             }
1332             if (this.gmapType === 'panorama'){
1333                 this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
1334             }
1335         }
1336
1337         GEvent.bind(this.gmap, 'load', this, function(){
1338             this.onMapReady();
1339         });
1340
1341     },
1342     onMapReady : function(){
1343         this.addMarkers(this.markers);
1344         this.addMapControls();
1345         this.addOptions();
1346     },
1347     onResize : function(w, h){
1348
1349         if (typeof this.getMap() == 'object') {
1350             this.gmap.checkResize();
1351         }
1352
1353         Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
1354
1355     },
1356     setSize : function(width, height, animate){
1357
1358         if (typeof this.getMap() == 'object') {
1359             this.gmap.checkResize();
1360         }
1361
1362         Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
1363
1364     },
1365     getMap : function(){
1366
1367         return this.gmap;
1368
1369     },
1370     getCenter : function(){
1371
1372         return this.getMap().getCenter();
1373
1374     },
1375     getCenterLatLng : function(){
1376
1377         var ll = this.getCenter();
1378         return {lat: ll.lat(), lng: ll.lng()};
1379
1380     },
1381     addMarkers : function(markers) {
1382
1383         if (Ext.isArray(markers)){
1384             for (var i = 0; i < markers.length; i++) {
1385                 var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
1386                 this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
1387             }
1388         }
1389
1390     },
1391     addMarker : function(point, marker, clear, center, listeners){
1392
1393         Ext.applyIf(marker,G_DEFAULT_ICON);
1394
1395         if (clear === true){
1396             this.getMap().clearOverlays();
1397         }
1398         if (center === true) {
1399             this.getMap().setCenter(point, this.zoomLevel);
1400         }
1401
1402         var mark = new GMarker(point,marker);
1403         if (typeof listeners === 'object'){
1404             for (evt in listeners) {
1405                 GEvent.bind(mark, evt, this, listeners[evt]);
1406             }
1407         }
1408         this.getMap().addOverlay(mark);
1409
1410     },
1411     addMapControls : function(){
1412
1413         if (this.gmapType === 'map') {
1414             if (Ext.isArray(this.mapControls)) {
1415                 for(i=0;i<this.mapControls.length;i++){
1416                     this.addMapControl(this.mapControls[i]);
1417                 }
1418             }else if(typeof this.mapControls === 'string'){
1419                 this.addMapControl(this.mapControls);
1420             }else if(typeof this.mapControls === 'object'){
1421                 this.getMap().addControl(this.mapControls);
1422             }
1423         }
1424
1425     },
1426     addMapControl : function(mc){
1427
1428         var mcf = window[mc];
1429         if (typeof mcf === 'function') {
1430             this.getMap().addControl(new mcf());
1431         }
1432
1433     },
1434     addOptions : function(){
1435
1436         if (Ext.isArray(this.mapConfOpts)) {
1437             var mc;
1438             for(i=0;i<this.mapConfOpts.length;i++){
1439                 this.addOption(this.mapConfOpts[i]);
1440             }
1441         }else if(typeof this.mapConfOpts === 'string'){
1442             this.addOption(this.mapConfOpts);
1443         }
1444
1445     },
1446     addOption : function(mc){
1447
1448         var mcf = this.getMap()[mc];
1449         if (typeof mcf === 'function') {
1450             this.getMap()[mc]();
1451         }
1452
1453     },
1454     geoCodeLookup : function(addr) {
1455
1456         this.geocoder = new GClientGeocoder();
1457         this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
1458
1459     },
1460     addAddressToMap : function(response) {
1461
1462         if (!response || response.Status.code != 200) {
1463             Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
1464         }else{
1465             place = response.Placemark[0];
1466             addressinfo = place.AddressDetails;
1467             accuracy = addressinfo.Accuracy;
1468             if (accuracy === 0) {
1469                 Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
1470             }else{
1471                 if (accuracy < 7) {
1472                     Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
1473                 }else{
1474                     point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
1475                     if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
1476                         this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
1477                     }
1478                 }
1479             }
1480         }
1481
1482     }
1483
1484 });
1485
1486 Ext.reg('gmappanel', Ext.ux.GMapPanel); Ext.namespace('Ext.ux.grid');
1487
1488 /**
1489  * @class Ext.ux.grid.GridFilters
1490  * @extends Ext.util.Observable
1491  * <p>GridFilter is a plugin (<code>ptype='gridfilters'</code>) for grids that
1492  * allow for a slightly more robust representation of filtering than what is
1493  * provided by the default store.</p>
1494  * <p>Filtering is adjusted by the user using the grid's column header menu
1495  * (this menu can be disabled through configuration). Through this menu users
1496  * can configure, enable, and disable filters for each column.</p>
1497  * <p><b><u>Features:</u></b></p>
1498  * <div class="mdetail-params"><ul>
1499  * <li><b>Filtering implementations</b> :
1500  * <div class="sub-desc">
1501  * Default filtering for Strings, Numeric Ranges, Date Ranges, Lists (which can
1502  * be backed by a Ext.data.Store), and Boolean. Additional custom filter types
1503  * and menus are easily created by extending Ext.ux.grid.filter.Filter.
1504  * </div></li>
1505  * <li><b>Graphical indicators</b> :
1506  * <div class="sub-desc">
1507  * Columns that are filtered have {@link #filterCls a configurable css class}
1508  * applied to the column headers.
1509  * </div></li>
1510  * <li><b>Paging</b> :
1511  * <div class="sub-desc">
1512  * If specified as a plugin to the grid's configured PagingToolbar, the current page
1513  * will be reset to page 1 whenever you update the filters.
1514  * </div></li>
1515  * <li><b>Automatic Reconfiguration</b> :
1516  * <div class="sub-desc">
1517  * Filters automatically reconfigure when the grid 'reconfigure' event fires.
1518  * </div></li>
1519  * <li><b>Stateful</b> :
1520  * Filter information will be persisted across page loads by specifying a
1521  * <code>stateId</code> in the Grid configuration.
1522  * <div class="sub-desc">
1523  * The filter collection binds to the
1524  * <code>{@link Ext.grid.GridPanel#beforestaterestore beforestaterestore}</code>
1525  * and <code>{@link Ext.grid.GridPanel#beforestatesave beforestatesave}</code>
1526  * events in order to be stateful.
1527  * </div></li>
1528  * <li><b>Grid Changes</b> :
1529  * <div class="sub-desc"><ul>
1530  * <li>A <code>filters</code> <i>property</i> is added to the grid pointing to
1531  * this plugin.</li>
1532  * <li>A <code>filterupdate</code> <i>event</i> is added to the grid and is
1533  * fired upon onStateChange completion.</li>
1534  * </ul></div></li>
1535  * <li><b>Server side code examples</b> :
1536  * <div class="sub-desc"><ul>
1537  * <li><a href="http://www.vinylfox.com/extjs/grid-filter-php-backend-code.php">PHP</a> - (Thanks VinylFox)</li>
1538  * <li><a href="http://extjs.com/forum/showthread.php?p=77326#post77326">Ruby on Rails</a> - (Thanks Zyclops)</li>
1539  * <li><a href="http://extjs.com/forum/showthread.php?p=176596#post176596">Ruby on Rails</a> - (Thanks Rotomaul)</li>
1540  * <li><a href="http://www.debatablybeta.com/posts/using-extjss-grid-filtering-with-django/">Python</a> - (Thanks Matt)</li>
1541  * <li><a href="http://mcantrell.wordpress.com/2008/08/22/extjs-grids-and-grails/">Grails</a> - (Thanks Mike)</li>
1542  * </ul></div></li>
1543  * </ul></div>
1544  * <p><b><u>Example usage:</u></b></p>
1545  * <pre><code>
1546 var store = new Ext.data.GroupingStore({
1547     ...
1548 });
1549
1550 var filters = new Ext.ux.grid.GridFilters({
1551     autoReload: false, //don&#39;t reload automatically
1552     local: true, //only filter locally
1553     // filters may be configured through the plugin,
1554     // or in the column definition within the column model configuration
1555     filters: [{
1556         type: 'numeric',
1557         dataIndex: 'id'
1558     }, {
1559         type: 'string',
1560         dataIndex: 'name'
1561     }, {
1562         type: 'numeric',
1563         dataIndex: 'price'
1564     }, {
1565         type: 'date',
1566         dataIndex: 'dateAdded'
1567     }, {
1568         type: 'list',
1569         dataIndex: 'size',
1570         options: ['extra small', 'small', 'medium', 'large', 'extra large'],
1571         phpMode: true
1572     }, {
1573         type: 'boolean',
1574         dataIndex: 'visible'
1575     }]
1576 });
1577 var cm = new Ext.grid.ColumnModel([{
1578     ...
1579 }]);
1580
1581 var grid = new Ext.grid.GridPanel({
1582      ds: store,
1583      cm: cm,
1584      view: new Ext.grid.GroupingView(),
1585      plugins: [filters],
1586      height: 400,
1587      width: 700,
1588      bbar: new Ext.PagingToolbar({
1589          store: store,
1590          pageSize: 15,
1591          plugins: [filters] //reset page to page 1 if filters change
1592      })
1593  });
1594
1595 store.load({params: {start: 0, limit: 15}});
1596
1597 // a filters property is added to the grid
1598 grid.filters
1599  * </code></pre>
1600  */
1601 Ext.ux.grid.GridFilters = Ext.extend(Ext.util.Observable, {
1602     <div id="cfg-Ext.ux.grid.GridFilters-autoReload"></div>/**
1603      * @cfg {Boolean} autoReload
1604      * Defaults to true, reloading the datasource when a filter change happens.
1605      * Set this to false to prevent the datastore from being reloaded if there
1606      * are changes to the filters.  See <code>{@link updateBuffer}</code>.
1607      */
1608     autoReload : true,
1609     <div id="cfg-Ext.ux.grid.GridFilters-encode"></div>/**
1610      * @cfg {Boolean} encode
1611      * Specify true for {@link #buildQuery} to use Ext.util.JSON.encode to
1612      * encode the filter query parameter sent with a remote request.
1613      * Defaults to false.
1614      */
1615     <div id="cfg-Ext.ux.grid.GridFilters-filters"></div>/**
1616      * @cfg {Array} filters
1617      * An Array of filters config objects. Refer to each filter type class for
1618      * configuration details specific to each filter type. Filters for Strings,
1619      * Numeric Ranges, Date Ranges, Lists, and Boolean are the standard filters
1620      * available.
1621      */
1622     <div id="cfg-Ext.ux.grid.GridFilters-filterCls"></div>/**
1623      * @cfg {String} filterCls
1624      * The css class to be applied to column headers with active filters.
1625      * Defaults to <tt>'ux-filterd-column'</tt>.
1626      */
1627     filterCls : 'ux-filtered-column',
1628     <div id="cfg-Ext.ux.grid.GridFilters-local"></div>/**
1629      * @cfg {Boolean} local
1630      * <tt>true</tt> to use Ext.data.Store filter functions (local filtering)
1631      * instead of the default (<tt>false</tt>) server side filtering.
1632      */
1633     local : false,
1634     <div id="cfg-Ext.ux.grid.GridFilters-menuFilterText"></div>/**
1635      * @cfg {String} menuFilterText
1636      * defaults to <tt>'Filters'</tt>.
1637      */
1638     menuFilterText : 'Filters',
1639     <div id="cfg-Ext.ux.grid.GridFilters-paramPrefix"></div>/**
1640      * @cfg {String} paramPrefix
1641      * The url parameter prefix for the filters.
1642      * Defaults to <tt>'filter'</tt>.
1643      */
1644     paramPrefix : 'filter',
1645     <div id="cfg-Ext.ux.grid.GridFilters-showMenu"></div>/**
1646      * @cfg {Boolean} showMenu
1647      * Defaults to true, including a filter submenu in the default header menu.
1648      */
1649     showMenu : true,
1650     <div id="cfg-Ext.ux.grid.GridFilters-stateId"></div>/**
1651      * @cfg {String} stateId
1652      * Name of the value to be used to store state information.
1653      */
1654     stateId : undefined,
1655     <div id="cfg-Ext.ux.grid.GridFilters-updateBuffer"></div>/**
1656      * @cfg {Integer} updateBuffer
1657      * Number of milliseconds to defer store updates since the last filter change.
1658      */
1659     updateBuffer : 500,
1660
1661     /** @private */
1662     constructor : function (config) {
1663         config = config || {};
1664         this.deferredUpdate = new Ext.util.DelayedTask(this.reload, this);
1665         this.filters = new Ext.util.MixedCollection();
1666         this.filters.getKey = function (o) {
1667             return o ? o.dataIndex : null;
1668         };
1669         this.addFilters(config.filters);
1670         delete config.filters;
1671         Ext.apply(this, config);
1672     },
1673
1674     /** @private */
1675     init : function (grid) {
1676         if (grid instanceof Ext.grid.GridPanel) {
1677             this.grid = grid;
1678
1679             this.bindStore(this.grid.getStore(), true);
1680             // assumes no filters were passed in the constructor, so try and use ones from the colModel
1681             if(this.filters.getCount() == 0){
1682                 this.addFilters(this.grid.getColumnModel());
1683             }
1684
1685             this.grid.filters = this;
1686
1687             this.grid.addEvents({'filterupdate': true});
1688
1689             grid.on({
1690                 scope: this,
1691                 beforestaterestore: this.applyState,
1692                 beforestatesave: this.saveState,
1693                 beforedestroy: this.destroy,
1694                 reconfigure: this.onReconfigure
1695             });
1696
1697             if (grid.rendered){
1698                 this.onRender();
1699             } else {
1700                 grid.on({
1701                     scope: this,
1702                     single: true,
1703                     render: this.onRender
1704                 });
1705             }
1706
1707         } else if (grid instanceof Ext.PagingToolbar) {
1708             this.toolbar = grid;
1709         }
1710     },
1711
1712     /**
1713      * @private
1714      * Handler for the grid's beforestaterestore event (fires before the state of the
1715      * grid is restored).
1716      * @param {Object} grid The grid object
1717      * @param {Object} state The hash of state values returned from the StateProvider.
1718      */
1719     applyState : function (grid, state) {
1720         var key, filter;
1721         this.applyingState = true;
1722         this.clearFilters();
1723         if (state.filters) {
1724             for (key in state.filters) {
1725                 filter = this.filters.get(key);
1726                 if (filter) {
1727                     filter.setValue(state.filters[key]);
1728                     filter.setActive(true);
1729                 }
1730             }
1731         }
1732         this.deferredUpdate.cancel();
1733         if (this.local) {
1734             this.reload();
1735         }
1736         delete this.applyingState;
1737         delete state.filters;
1738     },
1739
1740     <div id="method-Ext.ux.grid.GridFilters-saveState"></div>/**
1741      * Saves the state of all active filters
1742      * @param {Object} grid
1743      * @param {Object} state
1744      * @return {Boolean}
1745      */
1746     saveState : function (grid, state) {
1747         var filters = {};
1748         this.filters.each(function (filter) {
1749             if (filter.active) {
1750                 filters[filter.dataIndex] = filter.getValue();
1751             }
1752         });
1753         return (state.filters = filters);
1754     },
1755
1756     /**
1757      * @private
1758      * Handler called when the grid is rendered
1759      */
1760     onRender : function () {
1761         this.grid.getView().on('refresh', this.onRefresh, this);
1762         this.createMenu();
1763     },
1764
1765     /**
1766      * @private
1767      * Handler called by the grid 'beforedestroy' event
1768      */
1769     destroy : function () {
1770         this.removeAll();
1771         this.purgeListeners();
1772
1773         if(this.filterMenu){
1774             Ext.menu.MenuMgr.unregister(this.filterMenu);
1775             this.filterMenu.destroy();
1776              this.filterMenu = this.menu.menu = null;
1777         }
1778     },
1779
1780     <div id="method-Ext.ux.grid.GridFilters-removeAll"></div>/**
1781      * Remove all filters, permanently destroying them.
1782      */
1783     removeAll : function () {
1784         if(this.filters){
1785             Ext.destroy.apply(Ext, this.filters.items);
1786             // remove all items from the collection
1787             this.filters.clear();
1788         }
1789     },
1790
1791
1792     <div id="method-Ext.ux.grid.GridFilters-bindStore"></div>/**
1793      * Changes the data store bound to this view and refreshes it.
1794      * @param {Store} store The store to bind to this view
1795      */
1796     bindStore : function(store, initial){
1797         if(!initial && this.store){
1798             if (this.local) {
1799                 store.un('load', this.onLoad, this);
1800             } else {
1801                 store.un('beforeload', this.onBeforeLoad, this);
1802             }
1803         }
1804         if(store){
1805             if (this.local) {
1806                 store.on('load', this.onLoad, this);
1807             } else {
1808                 store.on('beforeload', this.onBeforeLoad, this);
1809             }
1810         }
1811         this.store = store;
1812     },
1813
1814     /**
1815      * @private
1816      * Handler called when the grid reconfigure event fires
1817      */
1818     onReconfigure : function () {
1819         this.bindStore(this.grid.getStore());
1820         this.store.clearFilter();
1821         this.removeAll();
1822         this.addFilters(this.grid.getColumnModel());
1823         this.updateColumnHeadings();
1824     },
1825
1826     createMenu : function () {
1827         var view = this.grid.getView(),
1828             hmenu = view.hmenu;
1829
1830         if (this.showMenu && hmenu) {
1831
1832             this.sep  = hmenu.addSeparator();
1833             this.filterMenu = new Ext.menu.Menu({
1834                 id: this.grid.id + '-filters-menu'
1835             });
1836             this.menu = hmenu.add({
1837                 checked: false,
1838                 itemId: 'filters',
1839                 text: this.menuFilterText,
1840                 menu: this.filterMenu
1841             });
1842
1843             this.menu.on({
1844                 scope: this,
1845                 checkchange: this.onCheckChange,
1846                 beforecheckchange: this.onBeforeCheck
1847             });
1848             hmenu.on('beforeshow', this.onMenu, this);
1849         }
1850         this.updateColumnHeadings();
1851     },
1852
1853     /**
1854      * @private
1855      * Get the filter menu from the filters MixedCollection based on the clicked header
1856      */
1857     getMenuFilter : function () {
1858         var view = this.grid.getView();
1859         if (!view || view.hdCtxIndex === undefined) {
1860             return null;
1861         }
1862         return this.filters.get(
1863             view.cm.config[view.hdCtxIndex].dataIndex
1864         );
1865     },
1866
1867     /**
1868      * @private
1869      * Handler called by the grid's hmenu beforeshow event
1870      */
1871     onMenu : function (filterMenu) {
1872         var filter = this.getMenuFilter();
1873
1874         if (filter) {
1875 /*
1876 TODO: lazy rendering
1877             if (!filter.menu) {
1878                 filter.menu = filter.createMenu();
1879             }
1880 */
1881             this.menu.menu = filter.menu;
1882             this.menu.setChecked(filter.active, false);
1883             // disable the menu if filter.disabled explicitly set to true
1884             this.menu.setDisabled(filter.disabled === true);
1885         }
1886
1887         this.menu.setVisible(filter !== undefined);
1888         this.sep.setVisible(filter !== undefined);
1889     },
1890
1891     /** @private */
1892     onCheckChange : function (item, value) {
1893         this.getMenuFilter().setActive(value);
1894     },
1895
1896     /** @private */
1897     onBeforeCheck : function (check, value) {
1898         return !value || this.getMenuFilter().isActivatable();
1899     },
1900
1901     /**
1902      * @private
1903      * Handler for all events on filters.
1904      * @param {String} event Event name
1905      * @param {Object} filter Standard signature of the event before the event is fired
1906      */
1907     onStateChange : function (event, filter) {
1908         if (event === 'serialize') {
1909             return;
1910         }
1911
1912         if (filter == this.getMenuFilter()) {
1913             this.menu.setChecked(filter.active, false);
1914         }
1915
1916         if ((this.autoReload || this.local) && !this.applyingState) {
1917             this.deferredUpdate.delay(this.updateBuffer);
1918         }
1919         this.updateColumnHeadings();
1920
1921         if (!this.applyingState) {
1922             this.grid.saveState();
1923         }
1924         this.grid.fireEvent('filterupdate', this, filter);
1925     },
1926
1927     /**
1928      * @private
1929      * Handler for store's beforeload event when configured for remote filtering
1930      * @param {Object} store
1931      * @param {Object} options
1932      */
1933     onBeforeLoad : function (store, options) {
1934         options.params = options.params || {};
1935         this.cleanParams(options.params);
1936         var params = this.buildQuery(this.getFilterData());
1937         Ext.apply(options.params, params);
1938     },
1939
1940     /**
1941      * @private
1942      * Handler for store's load event when configured for local filtering
1943      * @param {Object} store
1944      * @param {Object} options
1945      */
1946     onLoad : function (store, options) {
1947         store.filterBy(this.getRecordFilter());
1948     },
1949
1950     /**
1951      * @private
1952      * Handler called when the grid's view is refreshed
1953      */
1954     onRefresh : function () {
1955         this.updateColumnHeadings();
1956     },
1957
1958     <div id="method-Ext.ux.grid.GridFilters-updateColumnHeadings"></div>/**
1959      * Update the styles for the header row based on the active filters
1960      */
1961     updateColumnHeadings : function () {
1962         var view = this.grid.getView(),
1963             i, len, filter;
1964         if (view.mainHd) {
1965             for (i = 0, len = view.cm.config.length; i < len; i++) {
1966                 filter = this.getFilter(view.cm.config[i].dataIndex);
1967                 Ext.fly(view.getHeaderCell(i))[filter && filter.active ? 'addClass' : 'removeClass'](this.filterCls);
1968             }
1969         }
1970     },
1971
1972     /** @private */
1973     reload : function () {
1974         if (this.local) {
1975             this.grid.store.clearFilter(true);
1976             this.grid.store.filterBy(this.getRecordFilter());
1977         } else {
1978             var start,
1979                 store = this.grid.store;
1980             this.deferredUpdate.cancel();
1981             if (this.toolbar) {
1982                 start = store.paramNames.start;
1983                 if (store.lastOptions && store.lastOptions.params && store.lastOptions.params[start]) {
1984                     store.lastOptions.params[start] = 0;
1985                 }
1986             }
1987             store.reload();
1988         }
1989     },
1990
1991     /**
1992      * Method factory that generates a record validator for the filters active at the time
1993      * of invokation.
1994      * @private
1995      */
1996     getRecordFilter : function () {
1997         var f = [], len, i;
1998         this.filters.each(function (filter) {
1999             if (filter.active) {
2000                 f.push(filter);
2001             }
2002         });
2003
2004         len = f.length;
2005         return function (record) {
2006             for (i = 0; i < len; i++) {
2007                 if (!f[i].validateRecord(record)) {
2008                     return false;
2009                 }
2010             }
2011             return true;
2012         };
2013     },
2014
2015     <div id="method-Ext.ux.grid.GridFilters-addFilter"></div>/**
2016      * Adds a filter to the collection and observes it for state change.
2017      * @param {Object/Ext.ux.grid.filter.Filter} config A filter configuration or a filter object.
2018      * @return {Ext.ux.grid.filter.Filter} The existing or newly created filter object.
2019      */
2020     addFilter : function (config) {
2021         var Cls = this.getFilterClass(config.type),
2022             filter = config.menu ? config : (new Cls(config));
2023         this.filters.add(filter);
2024
2025         Ext.util.Observable.capture(filter, this.onStateChange, this);
2026         return filter;
2027     },
2028
2029     <div id="method-Ext.ux.grid.GridFilters-addFilters"></div>/**
2030      * Adds filters to the collection.
2031      * @param {Array/Ext.grid.ColumnModel} filters Either an Array of
2032      * filter configuration objects or an Ext.grid.ColumnModel.  The columns
2033      * of a passed Ext.grid.ColumnModel will be examined for a <code>filter</code>
2034      * property and, if present, will be used as the filter configuration object.
2035      */
2036     addFilters : function (filters) {
2037         if (filters) {
2038             var i, len, filter, cm = false, dI;
2039             if (filters instanceof Ext.grid.ColumnModel) {
2040                 filters = filters.config;
2041                 cm = true;
2042             }
2043             for (i = 0, len = filters.length; i < len; i++) {
2044                 filter = false;
2045                 if (cm) {
2046                     dI = filters[i].dataIndex;
2047                     filter = filters[i].filter || filters[i].filterable;
2048                     if (filter){
2049                         filter = (filter === true) ? {} : filter;
2050                         Ext.apply(filter, {dataIndex:dI});
2051                         // filter type is specified in order of preference:
2052                         //     filter type specified in config
2053                         //     type specified in store's field's type config
2054                         filter.type = filter.type || this.store.fields.get(dI).type.type;
2055                     }
2056                 } else {
2057                     filter = filters[i];
2058                 }
2059                 // if filter config found add filter for the column
2060                 if (filter) {
2061                     this.addFilter(filter);
2062                 }
2063             }
2064         }
2065     },
2066
2067     <div id="method-Ext.ux.grid.GridFilters-getFilter"></div>/**
2068      * Returns a filter for the given dataIndex, if one exists.
2069      * @param {String} dataIndex The dataIndex of the desired filter object.
2070      * @return {Ext.ux.grid.filter.Filter}
2071      */
2072     getFilter : function (dataIndex) {
2073         return this.filters.get(dataIndex);
2074     },
2075
2076     <div id="method-Ext.ux.grid.GridFilters-clearFilters"></div>/**
2077      * Turns all filters off. This does not clear the configuration information
2078      * (see {@link #removeAll}).
2079      */
2080     clearFilters : function () {
2081         this.filters.each(function (filter) {
2082             filter.setActive(false);
2083         });
2084     },
2085
2086     <div id="method-Ext.ux.grid.GridFilters-getFilterData"></div>/**
2087      * Returns an Array of the currently active filters.
2088      * @return {Array} filters Array of the currently active filters.
2089      */
2090     getFilterData : function () {
2091         var filters = [], i, len;
2092
2093         this.filters.each(function (f) {
2094             if (f.active) {
2095                 var d = [].concat(f.serialize());
2096                 for (i = 0, len = d.length; i < len; i++) {
2097                     filters.push({
2098                         field: f.dataIndex,
2099                         data: d[i]
2100                     });
2101                 }
2102             }
2103         });
2104         return filters;
2105     },
2106
2107     <div id="method-Ext.ux.grid.GridFilters-buildQuery"></div>/**
2108      * Function to take the active filters data and build it into a query.
2109      * The format of the query depends on the <code>{@link #encode}</code>
2110      * configuration:
2111      * <div class="mdetail-params"><ul>
2112      *
2113      * <li><b><tt>false</tt></b> : <i>Default</i>
2114      * <div class="sub-desc">
2115      * Flatten into query string of the form (assuming <code>{@link #paramPrefix}='filters'</code>:
2116      * <pre><code>
2117 filters[0][field]="someDataIndex"&
2118 filters[0][data][comparison]="someValue1"&
2119 filters[0][data][type]="someValue2"&
2120 filters[0][data][value]="someValue3"&
2121      * </code></pre>
2122      * </div></li>
2123      * <li><b><tt>true</tt></b> :
2124      * <div class="sub-desc">
2125      * JSON encode the filter data
2126      * <pre><code>
2127 filters[0][field]="someDataIndex"&
2128 filters[0][data][comparison]="someValue1"&
2129 filters[0][data][type]="someValue2"&
2130 filters[0][data][value]="someValue3"&
2131      * </code></pre>
2132      * </div></li>
2133      * </ul></div>
2134      * Override this method to customize the format of the filter query for remote requests.
2135      * @param {Array} filters A collection of objects representing active filters and their configuration.
2136      *    Each element will take the form of {field: dataIndex, data: filterConf}. dataIndex is not assured
2137      *    to be unique as any one filter may be a composite of more basic filters for the same dataIndex.
2138      * @return {Object} Query keys and values
2139      */
2140     buildQuery : function (filters) {
2141         var p = {}, i, f, root, dataPrefix, key, tmp,
2142             len = filters.length;
2143
2144         if (!this.encode){
2145             for (i = 0; i < len; i++) {
2146                 f = filters[i];
2147                 root = [this.paramPrefix, '[', i, ']'].join('');
2148                 p[root + '[field]'] = f.field;
2149
2150                 dataPrefix = root + '[data]';
2151                 for (key in f.data) {
2152                     p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
2153                 }
2154             }
2155         } else {
2156             tmp = [];
2157             for (i = 0; i < len; i++) {
2158                 f = filters[i];
2159                 tmp.push(Ext.apply(
2160                     {},
2161                     {field: f.field},
2162                     f.data
2163                 ));
2164             }
2165             // only build if there is active filter
2166             if (tmp.length > 0){
2167                 p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
2168             }
2169         }
2170         return p;
2171     },
2172
2173     <div id="method-Ext.ux.grid.GridFilters-cleanParams"></div>/**
2174      * Removes filter related query parameters from the provided object.
2175      * @param {Object} p Query parameters that may contain filter related fields.
2176      */
2177     cleanParams : function (p) {
2178         // if encoding just delete the property
2179         if (this.encode) {
2180             delete p[this.paramPrefix];
2181         // otherwise scrub the object of filter data
2182         } else {
2183             var regex, key;
2184             regex = new RegExp('^' + this.paramPrefix + '\[[0-9]+\]');
2185             for (key in p) {
2186                 if (regex.test(key)) {
2187                     delete p[key];
2188                 }
2189             }
2190         }
2191     },
2192
2193     <div id="method-Ext.ux.grid.GridFilters-getFilterClass"></div>/**
2194      * Function for locating filter classes, overwrite this with your favorite
2195      * loader to provide dynamic filter loading.
2196      * @param {String} type The type of filter to load ('Filter' is automatically
2197      * appended to the passed type; eg, 'string' becomes 'StringFilter').
2198      * @return {Class} The Ext.ux.grid.filter.Class
2199      */
2200     getFilterClass : function (type) {
2201         // map the supported Ext.data.Field type values into a supported filter
2202         switch(type) {
2203             case 'auto':
2204               type = 'string';
2205               break;
2206             case 'int':
2207             case 'float':
2208               type = 'numeric';
2209               break;
2210             case 'bool':
2211               type = 'boolean';
2212               break;
2213         }
2214         return Ext.ux.grid.filter[type.substr(0, 1).toUpperCase() + type.substr(1) + 'Filter'];
2215     }
2216 });
2217
2218 // register ptype
2219 Ext.preg('gridfilters', Ext.ux.grid.GridFilters);
2220 Ext.namespace('Ext.ux.grid.filter');
2221
2222 /**
2223  * @class Ext.ux.grid.filter.Filter
2224  * @extends Ext.util.Observable
2225  * Abstract base class for filter implementations.
2226  */
2227 Ext.ux.grid.filter.Filter = Ext.extend(Ext.util.Observable, {
2228     <div id="cfg-Ext.ux.grid.filter.Filter-active"></div>/**
2229      * @cfg {Boolean} active
2230      * Indicates the initial status of the filter (defaults to false).
2231      */
2232     active : false,
2233     <div id="prop-Ext.ux.grid.filter.Filter-active"></div>/**
2234      * True if this filter is active.  Use setActive() to alter after configuration.
2235      * @type Boolean
2236      * @property active
2237      */
2238     <div id="cfg-Ext.ux.grid.filter.Filter-dataIndex"></div>/**
2239      * @cfg {String} dataIndex
2240      * The {@link Ext.data.Store} dataIndex of the field this filter represents.
2241      * The dataIndex does not actually have to exist in the store.
2242      */
2243     dataIndex : null,
2244     <div id="prop-Ext.ux.grid.filter.Filter-menu"></div>/**
2245      * The filter configuration menu that will be installed into the filter submenu of a column menu.
2246      * @type Ext.menu.Menu
2247      * @property
2248      */
2249     menu : null,
2250     <div id="cfg-Ext.ux.grid.filter.Filter-updateBuffer"></div>/**
2251      * @cfg {Number} updateBuffer
2252      * Number of milliseconds to wait after user interaction to fire an update. Only supported
2253      * by filters: 'list', 'numeric', and 'string'. Defaults to 500.
2254      */
2255     updateBuffer : 500,
2256
2257     constructor : function (config) {
2258         Ext.apply(this, config);
2259
2260         this.addEvents(
2261             <div id="event-Ext.ux.grid.filter.Filter-activate"></div>/**
2262              * @event activate
2263              * Fires when an inactive filter becomes active
2264              * @param {Ext.ux.grid.filter.Filter} this
2265              */
2266             'activate',
2267             <div id="event-Ext.ux.grid.filter.Filter-deactivate"></div>/**
2268              * @event deactivate
2269              * Fires when an active filter becomes inactive
2270              * @param {Ext.ux.grid.filter.Filter} this
2271              */
2272             'deactivate',
2273             <div id="event-Ext.ux.grid.filter.Filter-serialize"></div>/**
2274              * @event serialize
2275              * Fires after the serialization process. Use this to attach additional parameters to serialization
2276              * data before it is encoded and sent to the server.
2277              * @param {Array/Object} data A map or collection of maps representing the current filter configuration.
2278              * @param {Ext.ux.grid.filter.Filter} filter The filter being serialized.
2279              */
2280             'serialize',
2281             <div id="event-Ext.ux.grid.filter.Filter-update"></div>/**
2282              * @event update
2283              * Fires when a filter configuration has changed
2284              * @param {Ext.ux.grid.filter.Filter} this The filter object.
2285              */
2286             'update'
2287         );
2288         Ext.ux.grid.filter.Filter.superclass.constructor.call(this);
2289
2290         this.menu = new Ext.menu.Menu();
2291         this.init(config);
2292         if(config && config.value){
2293             this.setValue(config.value);
2294             this.setActive(config.active !== false, true);
2295             delete config.value;
2296         }
2297     },
2298
2299     <div id="method-Ext.ux.grid.filter.Filter-destroy"></div>/**
2300      * Destroys this filter by purging any event listeners, and removing any menus.
2301      */
2302     destroy : function(){
2303         if (this.menu){
2304             this.menu.destroy();
2305         }
2306         this.purgeListeners();
2307     },
2308
2309     <div id="prop-Ext.ux.grid.filter.Filter-init"></div>/**
2310      * Template method to be implemented by all subclasses that is to
2311      * initialize the filter and install required menu items.
2312      * Defaults to Ext.emptyFn.
2313      */
2314     init : Ext.emptyFn,
2315
2316     <div id="method-Ext.ux.grid.filter.Filter-getValue"></div>/**
2317      * Template method to be implemented by all subclasses that is to
2318      * get and return the value of the filter.
2319      * Defaults to Ext.emptyFn.
2320      * @return {Object} The 'serialized' form of this filter
2321      * @methodOf Ext.ux.grid.filter.Filter
2322      */
2323     getValue : Ext.emptyFn,
2324
2325     <div id="method-Ext.ux.grid.filter.Filter-setValue"></div>/**
2326      * Template method to be implemented by all subclasses that is to
2327      * set the value of the filter and fire the 'update' event.
2328      * Defaults to Ext.emptyFn.
2329      * @param {Object} data The value to set the filter
2330      * @methodOf Ext.ux.grid.filter.Filter
2331      */
2332     setValue : Ext.emptyFn,
2333
2334     <div id="method-Ext.ux.grid.filter.Filter-isActivatable"></div>/**
2335      * Template method to be implemented by all subclasses that is to
2336      * return <tt>true</tt> if the filter has enough configuration information to be activated.
2337      * Defaults to <tt>return true</tt>.
2338      * @return {Boolean}
2339      */
2340     isActivatable : function(){
2341         return true;
2342     },
2343
2344     <div id="prop-Ext.ux.grid.filter.Filter-getSerialArgs"></div>/**
2345      * Template method to be implemented by all subclasses that is to
2346      * get and return serialized filter data for transmission to the server.
2347      * Defaults to Ext.emptyFn.
2348      */
2349     getSerialArgs : Ext.emptyFn,
2350
2351     <div id="method-Ext.ux.grid.filter.Filter-validateRecord"></div>/**
2352      * Template method to be implemented by all subclasses that is to
2353      * validates the provided Ext.data.Record against the filters configuration.
2354      * Defaults to <tt>return true</tt>.
2355      * @param {Ext.data.Record} record The record to validate
2356      * @return {Boolean} true if the record is valid within the bounds
2357      * of the filter, false otherwise.
2358      */
2359     validateRecord : function(){
2360         return true;
2361     },
2362
2363     <div id="method-Ext.ux.grid.filter.Filter-serialize"></div>/**
2364      * Returns the serialized filter data for transmission to the server
2365      * and fires the 'serialize' event.
2366      * @return {Object/Array} An object or collection of objects containing
2367      * key value pairs representing the current configuration of the filter.
2368      * @methodOf Ext.ux.grid.filter.Filter
2369      */
2370     serialize : function(){
2371         var args = this.getSerialArgs();
2372         this.fireEvent('serialize', args, this);
2373         return args;
2374     },
2375
2376     /** @private */
2377     fireUpdate : function(){
2378         if (this.active) {
2379             this.fireEvent('update', this);
2380         }
2381         this.setActive(this.isActivatable());
2382     },
2383
2384     <div id="method-Ext.ux.grid.filter.Filter-setActive"></div>/**
2385      * Sets the status of the filter and fires the appropriate events.
2386      * @param {Boolean} active        The new filter state.
2387      * @param {Boolean} suppressEvent True to prevent events from being fired.
2388      * @methodOf Ext.ux.grid.filter.Filter
2389      */
2390     setActive : function(active, suppressEvent){
2391         if(this.active != active){
2392             this.active = active;
2393             if (suppressEvent !== true) {
2394                 this.fireEvent(active ? 'activate' : 'deactivate', this);
2395             }
2396         }
2397     }
2398 });/**
2399  * @class Ext.ux.grid.filter.BooleanFilter
2400  * @extends Ext.ux.grid.filter.Filter
2401  * Boolean filters use unique radio group IDs (so you can have more than one!)
2402  * <p><b><u>Example Usage:</u></b></p>
2403  * <pre><code>
2404 var filters = new Ext.ux.grid.GridFilters({
2405     ...
2406     filters: [{
2407         // required configs
2408         type: 'boolean',
2409         dataIndex: 'visible'
2410
2411         // optional configs
2412         defaultValue: null, // leave unselected (false selected by default)
2413         yesText: 'Yes',     // default
2414         noText: 'No'        // default
2415     }]
2416 });
2417  * </code></pre>
2418  */
2419 Ext.ux.grid.filter.BooleanFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2420         <div id="cfg-Ext.ux.grid.filter.BooleanFilter-defaultValue"></div>/**
2421          * @cfg {Boolean} defaultValue
2422          * Set this to null if you do not want either option to be checked by default. Defaults to false.
2423          */
2424         defaultValue : false,
2425         <div id="cfg-Ext.ux.grid.filter.BooleanFilter-yesText"></div>/**
2426          * @cfg {String} yesText
2427          * Defaults to 'Yes'.
2428          */
2429         yesText : 'Yes',
2430         <div id="cfg-Ext.ux.grid.filter.BooleanFilter-noText"></div>/**
2431          * @cfg {String} noText
2432          * Defaults to 'No'.
2433          */
2434         noText : 'No',
2435
2436     /**
2437      * @private
2438      * Template method that is to initialize the filter and install required menu items.
2439      */
2440     init : function (config) {
2441         var gId = Ext.id();
2442                 this.options = [
2443                         new Ext.menu.CheckItem({text: this.yesText, group: gId, checked: this.defaultValue === true}),
2444                         new Ext.menu.CheckItem({text: this.noText, group: gId, checked: this.defaultValue === false})];
2445
2446                 this.menu.add(this.options[0], this.options[1]);
2447
2448                 for(var i=0; i<this.options.length; i++){
2449                         this.options[i].on('click', this.fireUpdate, this);
2450                         this.options[i].on('checkchange', this.fireUpdate, this);
2451                 }
2452         },
2453
2454     /**
2455      * @private
2456      * Template method that is to get and return the value of the filter.
2457      * @return {String} The value of this filter
2458      */
2459     getValue : function () {
2460                 return this.options[0].checked;
2461         },
2462
2463     /**
2464      * @private
2465      * Template method that is to set the value of the filter.
2466      * @param {Object} value The value to set the filter
2467      */
2468         setValue : function (value) {
2469                 this.options[value ? 0 : 1].setChecked(true);
2470         },
2471
2472     /**
2473      * @private
2474      * Template method that is to get and return serialized filter data for
2475      * transmission to the server.
2476      * @return {Object/Array} An object or collection of objects containing
2477      * key value pairs representing the current configuration of the filter.
2478      */
2479     getSerialArgs : function () {
2480                 var args = {type: 'boolean', value: this.getValue()};
2481                 return args;
2482         },
2483
2484     <div id="method-Ext.ux.grid.filter.BooleanFilter-validateRecord"></div>/**
2485      * Template method that is to validate the provided Ext.data.Record
2486      * against the filters configuration.
2487      * @param {Ext.data.Record} record The record to validate
2488      * @return {Boolean} true if the record is valid within the bounds
2489      * of the filter, false otherwise.
2490      */
2491     validateRecord : function (record) {
2492                 return record.get(this.dataIndex) == this.getValue();
2493         }
2494 });/**
2495  * @class Ext.ux.grid.filter.DateFilter
2496  * @extends Ext.ux.grid.filter.Filter
2497  * Filter by a configurable Ext.menu.DateMenu
2498  * <p><b><u>Example Usage:</u></b></p>
2499  * <pre><code>
2500 var filters = new Ext.ux.grid.GridFilters({
2501     ...
2502     filters: [{
2503         // required configs
2504         type: 'date',
2505         dataIndex: 'dateAdded',
2506
2507         // optional configs
2508         dateFormat: 'm/d/Y',  // default
2509         beforeText: 'Before', // default
2510         afterText: 'After',   // default
2511         onText: 'On',         // default
2512         pickerOpts: {
2513             // any DateMenu configs
2514         },
2515
2516         active: true // default is false
2517     }]
2518 });
2519  * </code></pre>
2520  */
2521 Ext.ux.grid.filter.DateFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2522     <div id="cfg-Ext.ux.grid.filter.DateFilter-afterText"></div>/**
2523      * @cfg {String} afterText
2524      * Defaults to 'After'.
2525      */
2526     afterText : 'After',
2527     <div id="cfg-Ext.ux.grid.filter.DateFilter-beforeText"></div>/**
2528      * @cfg {String} beforeText
2529      * Defaults to 'Before'.
2530      */
2531     beforeText : 'Before',
2532     <div id="cfg-Ext.ux.grid.filter.DateFilter-compareMap"></div>/**
2533      * @cfg {Object} compareMap
2534      * Map for assigning the comparison values used in serialization.
2535      */
2536     compareMap : {
2537         before: 'lt',
2538         after:  'gt',
2539         on:     'eq'
2540     },
2541     <div id="cfg-Ext.ux.grid.filter.DateFilter-dateFormat"></div>/**
2542      * @cfg {String} dateFormat
2543      * The date format to return when using getValue.
2544      * Defaults to 'm/d/Y'.
2545      */
2546     dateFormat : 'm/d/Y',
2547
2548     <div id="cfg-Ext.ux.grid.filter.DateFilter-maxDate"></div>/**
2549      * @cfg {Date} maxDate
2550      * Allowable date as passed to the Ext.DatePicker
2551      * Defaults to undefined.
2552      */
2553     <div id="cfg-Ext.ux.grid.filter.DateFilter-minDate"></div>/**
2554      * @cfg {Date} minDate
2555      * Allowable date as passed to the Ext.DatePicker
2556      * Defaults to undefined.
2557      */
2558     <div id="cfg-Ext.ux.grid.filter.DateFilter-menuItems"></div>/**
2559      * @cfg {Array} menuItems
2560      * The items to be shown in this menu
2561      * Defaults to:<pre>
2562      * menuItems : ['before', 'after', '-', 'on'],
2563      * </pre>
2564      */
2565     menuItems : ['before', 'after', '-', 'on'],
2566
2567     <div id="cfg-Ext.ux.grid.filter.DateFilter-menuItemCfgs"></div>/**
2568      * @cfg {Object} menuItemCfgs
2569      * Default configuration options for each menu item
2570      */
2571     menuItemCfgs : {
2572         selectOnFocus: true,
2573         width: 125
2574     },
2575
2576     <div id="cfg-Ext.ux.grid.filter.DateFilter-onText"></div>/**
2577      * @cfg {String} onText
2578      * Defaults to 'On'.
2579      */
2580     onText : 'On',
2581
2582     <div id="cfg-Ext.ux.grid.filter.DateFilter-pickerOpts"></div>/**
2583      * @cfg {Object} pickerOpts
2584      * Configuration options for the date picker associated with each field.
2585      */
2586     pickerOpts : {},
2587
2588     /**
2589      * @private
2590      * Template method that is to initialize the filter and install required menu items.
2591      */
2592     init : function (config) {
2593         var menuCfg, i, len, item, cfg, Cls;
2594
2595         menuCfg = Ext.apply(this.pickerOpts, {
2596             minDate: this.minDate,
2597             maxDate: this.maxDate,
2598             format:  this.dateFormat,
2599             listeners: {
2600                 scope: this,
2601                 select: this.onMenuSelect
2602             }
2603         });
2604
2605         this.fields = {};
2606         for (i = 0, len = this.menuItems.length; i < len; i++) {
2607             item = this.menuItems[i];
2608             if (item !== '-') {
2609                 cfg = {
2610                     itemId: 'range-' + item,
2611                     text: this[item + 'Text'],
2612                     menu: new Ext.menu.DateMenu(
2613                         Ext.apply(menuCfg, {
2614                             itemId: item
2615                         })
2616                     ),
2617                     listeners: {
2618                         scope: this,
2619                         checkchange: this.onCheckChange
2620                     }
2621                 };
2622                 Cls = Ext.menu.CheckItem;
2623                 item = this.fields[item] = new Cls(cfg);
2624             }
2625             //this.add(item);
2626             this.menu.add(item);
2627         }
2628     },
2629
2630     onCheckChange : function () {
2631         this.setActive(this.isActivatable());
2632         this.fireEvent('update', this);
2633     },
2634
2635     /**
2636      * @private
2637      * Handler method called when there is a keyup event on an input
2638      * item of this menu.
2639      */
2640     onInputKeyUp : function (field, e) {
2641         var k = e.getKey();
2642         if (k == e.RETURN && field.isValid()) {
2643             e.stopEvent();
2644             this.menu.hide(true);
2645             return;
2646         }
2647     },
2648
2649     <div id="method-Ext.ux.grid.filter.DateFilter-onMenuSelect"></div>/**
2650      * Handler for when the menu for a field fires the 'select' event
2651      * @param {Object} date
2652      * @param {Object} menuItem
2653      * @param {Object} value
2654      * @param {Object} picker
2655      */
2656     onMenuSelect : function (menuItem, value, picker) {
2657         var fields = this.fields,
2658             field = this.fields[menuItem.itemId];
2659
2660         field.setChecked(true);
2661
2662         if (field == fields.on) {
2663             fields.before.setChecked(false, true);
2664             fields.after.setChecked(false, true);
2665         } else {
2666             fields.on.setChecked(false, true);
2667             if (field == fields.after && fields.before.menu.picker.value < value) {
2668                 fields.before.setChecked(false, true);
2669             } else if (field == fields.before && fields.after.menu.picker.value > value) {
2670                 fields.after.setChecked(false, true);
2671             }
2672         }
2673         this.fireEvent('update', this);
2674     },
2675
2676     /**
2677      * @private
2678      * Template method that is to get and return the value of the filter.
2679      * @return {String} The value of this filter
2680      */
2681     getValue : function () {
2682         var key, result = {};
2683         for (key in this.fields) {
2684             if (this.fields[key].checked) {
2685                 result[key] = this.fields[key].menu.picker.getValue();
2686             }
2687         }
2688         return result;
2689     },
2690
2691     /**
2692      * @private
2693      * Template method that is to set the value of the filter.
2694      * @param {Object} value The value to set the filter
2695      * @param {Boolean} preserve true to preserve the checked status
2696      * of the other fields.  Defaults to false, unchecking the
2697      * other fields
2698      */
2699     setValue : function (value, preserve) {
2700         var key;
2701         for (key in this.fields) {
2702             if(value[key]){
2703                 this.fields[key].menu.picker.setValue(value[key]);
2704                 this.fields[key].setChecked(true);
2705             } else if (!preserve) {
2706                 this.fields[key].setChecked(false);
2707             }
2708         }
2709         this.fireEvent('update', this);
2710     },
2711
2712     /**
2713      * @private
2714      * Template method that is to return <tt>true</tt> if the filter
2715      * has enough configuration information to be activated.
2716      * @return {Boolean}
2717      */
2718     isActivatable : function () {
2719         var key;
2720         for (key in this.fields) {
2721             if (this.fields[key].checked) {
2722                 return true;
2723             }
2724         }
2725         return false;
2726     },
2727
2728     /**
2729      * @private
2730      * Template method that is to get and return serialized filter data for
2731      * transmission to the server.
2732      * @return {Object/Array} An object or collection of objects containing
2733      * key value pairs representing the current configuration of the filter.
2734      */
2735     getSerialArgs : function () {
2736         var args = [];
2737         for (var key in this.fields) {
2738             if(this.fields[key].checked){
2739                 args.push({
2740                     type: 'date',
2741                     comparison: this.compareMap[key],
2742                     value: this.getFieldValue(key).format(this.dateFormat)
2743                 });
2744             }
2745         }
2746         return args;
2747     },
2748
2749     <div id="method-Ext.ux.grid.filter.DateFilter-getFieldValue"></div>/**
2750      * Get and return the date menu picker value
2751      * @param {String} item The field identifier ('before', 'after', 'on')
2752      * @return {Date} Gets the current selected value of the date field
2753      */
2754     getFieldValue : function(item){
2755         return this.fields[item].menu.picker.getValue();
2756     },
2757
2758     <div id="method-Ext.ux.grid.filter.DateFilter-getPicker"></div>/**
2759      * Gets the menu picker associated with the passed field
2760      * @param {String} item The field identifier ('before', 'after', 'on')
2761      * @return {Object} The menu picker
2762      */
2763     getPicker : function(item){
2764         return this.fields[item].menu.picker;
2765     },
2766
2767     <div id="method-Ext.ux.grid.filter.DateFilter-validateRecord"></div>/**
2768      * Template method that is to validate the provided Ext.data.Record
2769      * against the filters configuration.
2770      * @param {Ext.data.Record} record The record to validate
2771      * @return {Boolean} true if the record is valid within the bounds
2772      * of the filter, false otherwise.
2773      */
2774     validateRecord : function (record) {
2775         var key,
2776             pickerValue,
2777             val = record.get(this.dataIndex);
2778
2779         if(!Ext.isDate(val)){
2780             return false;
2781         }
2782         val = val.clearTime(true).getTime();
2783
2784         for (key in this.fields) {
2785             if (this.fields[key].checked) {
2786                 pickerValue = this.getFieldValue(key).clearTime(true).getTime();
2787                 if (key == 'before' && pickerValue <= val) {
2788                     return false;
2789                 }
2790                 if (key == 'after' && pickerValue >= val) {
2791                     return false;
2792                 }
2793                 if (key == 'on' && pickerValue != val) {
2794                     return false;
2795                 }
2796             }
2797         }
2798         return true;
2799     }
2800 });/**
2801  * @class Ext.ux.grid.filter.ListFilter
2802  * @extends Ext.ux.grid.filter.Filter
2803  * <p>List filters are able to be preloaded/backed by an Ext.data.Store to load
2804  * their options the first time they are shown. ListFilter utilizes the
2805  * {@link Ext.ux.menu.ListMenu} component.</p>
2806  * <p>Although not shown here, this class accepts all configuration options
2807  * for {@link Ext.ux.menu.ListMenu}.</p>
2808  *
2809  * <p><b><u>Example Usage:</u></b></p>
2810  * <pre><code>
2811 var filters = new Ext.ux.grid.GridFilters({
2812     ...
2813     filters: [{
2814         type: 'list',
2815         dataIndex: 'size',
2816         phpMode: true,
2817         // options will be used as data to implicitly creates an ArrayStore
2818         options: ['extra small', 'small', 'medium', 'large', 'extra large']
2819     }]
2820 });
2821  * </code></pre>
2822  *
2823  */
2824 Ext.ux.grid.filter.ListFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2825
2826     <div id="cfg-Ext.ux.grid.filter.ListFilter-options"></div>/**
2827      * @cfg {Array} options
2828      * <p><code>data</code> to be used to implicitly create a data store
2829      * to back this list when the data source is <b>local</b>. If the
2830      * data for the list is remote, use the <code>{@link #store}</code>
2831      * config instead.</p>
2832      * <br><p>Each item within the provided array may be in one of the
2833      * following formats:</p>
2834      * <div class="mdetail-params"><ul>
2835      * <li><b>Array</b> :
2836      * <pre><code>
2837 options: [
2838     [11, 'extra small'],
2839     [18, 'small'],
2840     [22, 'medium'],
2841     [35, 'large'],
2842     [44, 'extra large']
2843 ]
2844      * </code></pre>
2845      * </li>
2846      * <li><b>Object</b> :
2847      * <pre><code>
2848 labelField: 'name', // override default of 'text'
2849 options: [
2850     {id: 11, name:'extra small'},
2851     {id: 18, name:'small'},
2852     {id: 22, name:'medium'},
2853     {id: 35, name:'large'},
2854     {id: 44, name:'extra large'}
2855 ]
2856      * </code></pre>
2857      * </li>
2858      * <li><b>String</b> :
2859      * <pre><code>
2860      * options: ['extra small', 'small', 'medium', 'large', 'extra large']
2861      * </code></pre>
2862      * </li>
2863      */
2864     <div id="cfg-Ext.ux.grid.filter.ListFilter-phpMode"></div>/**
2865      * @cfg {Boolean} phpMode
2866      * <p>Adjust the format of this filter. Defaults to false.</p>
2867      * <br><p>When GridFilters <code>@cfg encode = false</code> (default):</p>
2868      * <pre><code>
2869 // phpMode == false (default):
2870 filter[0][data][type] list
2871 filter[0][data][value] value1
2872 filter[0][data][value] value2
2873 filter[0][field] prod
2874
2875 // phpMode == true:
2876 filter[0][data][type] list
2877 filter[0][data][value] value1, value2
2878 filter[0][field] prod
2879      * </code></pre>
2880      * When GridFilters <code>@cfg encode = true</code>:
2881      * <pre><code>
2882 // phpMode == false (default):
2883 filter : [{"type":"list","value":["small","medium"],"field":"size"}]
2884
2885 // phpMode == true:
2886 filter : [{"type":"list","value":"small,medium","field":"size"}]
2887      * </code></pre>
2888      */
2889     phpMode : false,
2890     <div id="cfg-Ext.ux.grid.filter.ListFilter-store"></div>/**
2891      * @cfg {Ext.data.Store} store
2892      * The {@link Ext.data.Store} this list should use as its data source
2893      * when the data source is <b>remote</b>. If the data for the list
2894      * is local, use the <code>{@link #options}</code> config instead.
2895      */
2896
2897     /**
2898      * @private
2899      * Template method that is to initialize the filter and install required menu items.
2900      * @param {Object} config
2901      */
2902     init : function (config) {
2903         this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
2904
2905         // if a menu already existed, do clean up first
2906         if (this.menu){
2907             this.menu.destroy();
2908         }
2909         this.menu = new Ext.ux.menu.ListMenu(config);
2910         this.menu.on('checkchange', this.onCheckChange, this);
2911     },
2912
2913     /**
2914      * @private
2915      * Template method that is to get and return the value of the filter.
2916      * @return {String} The value of this filter
2917      */
2918     getValue : function () {
2919         return this.menu.getSelected();
2920     },
2921     /**
2922      * @private
2923      * Template method that is to set the value of the filter.
2924      * @param {Object} value The value to set the filter
2925      */
2926     setValue : function (value) {
2927         this.menu.setSelected(value);
2928         this.fireEvent('update', this);
2929     },
2930
2931     /**
2932      * @private
2933      * Template method that is to return <tt>true</tt> if the filter
2934      * has enough configuration information to be activated.
2935      * @return {Boolean}
2936      */
2937     isActivatable : function () {
2938         return this.getValue().length > 0;
2939     },
2940
2941     /**
2942      * @private
2943      * Template method that is to get and return serialized filter data for
2944      * transmission to the server.
2945      * @return {Object/Array} An object or collection of objects containing
2946      * key value pairs representing the current configuration of the filter.
2947      */
2948     getSerialArgs : function () {
2949         var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
2950         return args;
2951     },
2952
2953     /** @private */
2954     onCheckChange : function(){
2955         this.dt.delay(this.updateBuffer);
2956     },
2957
2958
2959     <div id="method-Ext.ux.grid.filter.ListFilter-validateRecord"></div>/**
2960      * Template method that is to validate the provided Ext.data.Record
2961      * against the filters configuration.
2962      * @param {Ext.data.Record} record The record to validate
2963      * @return {Boolean} true if the record is valid within the bounds
2964      * of the filter, false otherwise.
2965      */
2966     validateRecord : function (record) {
2967         return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
2968     }
2969 });/**
2970  * @class Ext.ux.grid.filter.NumericFilter
2971  * @extends Ext.ux.grid.filter.Filter
2972  * Filters using an Ext.ux.menu.RangeMenu.
2973  * <p><b><u>Example Usage:</u></b></p>
2974  * <pre><code>
2975 var filters = new Ext.ux.grid.GridFilters({
2976     ...
2977     filters: [{
2978         type: 'numeric',
2979         dataIndex: 'price'
2980     }]
2981 });
2982  * </code></pre>
2983  */
2984 Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
2985
2986     <div id="cfg-Ext.ux.grid.filter.NumericFilter-fieldCls"></div>/**
2987      * @cfg {Object} fieldCls
2988      * The Class to use to construct each field item within this menu
2989      * Defaults to:<pre>
2990      * fieldCls : Ext.form.NumberField
2991      * </pre>
2992      */
2993     fieldCls : Ext.form.NumberField,
2994     <div id="cfg-Ext.ux.grid.filter.NumericFilter-fieldCfg"></div>/**
2995      * @cfg {Object} fieldCfg
2996      * The default configuration options for any field item unless superseded
2997      * by the <code>{@link #fields}</code> configuration.
2998      * Defaults to:<pre>
2999      * fieldCfg : {}
3000      * </pre>
3001      * Example usage:
3002      * <pre><code>
3003 fieldCfg : {
3004     width: 150,
3005 },
3006      * </code></pre>
3007      */
3008     <div id="cfg-Ext.ux.grid.filter.NumericFilter-fields"></div>/**
3009      * @cfg {Object} fields
3010      * The field items may be configured individually
3011      * Defaults to <tt>undefined</tt>.
3012      * Example usage:
3013      * <pre><code>
3014 fields : {
3015     gt: { // override fieldCfg options
3016         width: 200,
3017         fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
3018     }
3019 },
3020      * </code></pre>
3021      */
3022     <div id="cfg-Ext.ux.grid.filter.NumericFilter-iconCls"></div>/**
3023      * @cfg {Object} iconCls
3024      * The iconCls to be applied to each comparator field item.
3025      * Defaults to:<pre>
3026 iconCls : {
3027     gt : 'ux-rangemenu-gt',
3028     lt : 'ux-rangemenu-lt',
3029     eq : 'ux-rangemenu-eq'
3030 }
3031      * </pre>
3032      */
3033     iconCls : {
3034         gt : 'ux-rangemenu-gt',
3035         lt : 'ux-rangemenu-lt',
3036         eq : 'ux-rangemenu-eq'
3037     },
3038
3039     <div id="cfg-Ext.ux.grid.filter.NumericFilter-menuItemCfgs"></div>/**
3040      * @cfg {Object} menuItemCfgs
3041      * Default configuration options for each menu item
3042      * Defaults to:<pre>
3043 menuItemCfgs : {
3044     emptyText: 'Enter Filter Text...',
3045     selectOnFocus: true,
3046     width: 125
3047 }
3048      * </pre>
3049      */
3050     menuItemCfgs : {
3051         emptyText: 'Enter Filter Text...',
3052         selectOnFocus: true,
3053         width: 125
3054     },
3055
3056     <div id="cfg-Ext.ux.grid.filter.NumericFilter-menuItems"></div>/**
3057      * @cfg {Array} menuItems
3058      * The items to be shown in this menu.  Items are added to the menu
3059      * according to their position within this array. Defaults to:<pre>
3060      * menuItems : ['lt','gt','-','eq']
3061      * </pre>
3062      */
3063     menuItems : ['lt', 'gt', '-', 'eq'],
3064
3065     /**
3066      * @private
3067      * Template method that is to initialize the filter and install required menu items.
3068      */
3069     init : function (config) {
3070         // if a menu already existed, do clean up first
3071         if (this.menu){
3072             this.menu.destroy();
3073         }
3074         this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
3075             // pass along filter configs to the menu
3076             fieldCfg : this.fieldCfg || {},
3077             fieldCls : this.fieldCls,
3078             fields : this.fields || {},
3079             iconCls: this.iconCls,
3080             menuItemCfgs: this.menuItemCfgs,
3081             menuItems: this.menuItems,
3082             updateBuffer: this.updateBuffer
3083         }));
3084         // relay the event fired by the menu
3085         this.menu.on('update', this.fireUpdate, this);
3086     },
3087
3088     /**
3089      * @private
3090      * Template method that is to get and return the value of the filter.
3091      * @return {String} The value of this filter
3092      */
3093     getValue : function () {
3094         return this.menu.getValue();
3095     },
3096
3097     /**
3098      * @private
3099      * Template method that is to set the value of the filter.
3100      * @param {Object} value The value to set the filter
3101      */
3102     setValue : function (value) {
3103         this.menu.setValue(value);
3104     },
3105
3106     /**
3107      * @private
3108      * Template method that is to return <tt>true</tt> if the filter
3109      * has enough configuration information to be activated.
3110      * @return {Boolean}
3111      */
3112     isActivatable : function () {
3113         var values = this.getValue();
3114         for (key in values) {
3115             if (values[key] !== undefined) {
3116                 return true;
3117             }
3118         }
3119         return false;
3120     },
3121
3122     /**
3123      * @private
3124      * Template method that is to get and return serialized filter data for
3125      * transmission to the server.
3126      * @return {Object/Array} An object or collection of objects containing
3127      * key value pairs representing the current configuration of the filter.
3128      */
3129     getSerialArgs : function () {
3130         var key,
3131             args = [],
3132             values = this.menu.getValue();
3133         for (key in values) {
3134             args.push({
3135                 type: 'numeric',
3136                 comparison: key,
3137                 value: values[key]
3138             });
3139         }
3140         return args;
3141     },
3142
3143     <div id="method-Ext.ux.grid.filter.NumericFilter-validateRecord"></div>/**
3144      * Template method that is to validate the provided Ext.data.Record
3145      * against the filters configuration.
3146      * @param {Ext.data.Record} record The record to validate
3147      * @return {Boolean} true if the record is valid within the bounds
3148      * of the filter, false otherwise.
3149      */
3150     validateRecord : function (record) {
3151         var val = record.get(this.dataIndex),
3152             values = this.getValue();
3153         if (values.eq !== undefined && val != values.eq) {
3154             return false;
3155         }
3156         if (values.lt !== undefined && val >= values.lt) {
3157             return false;
3158         }
3159         if (values.gt !== undefined && val <= values.gt) {
3160             return false;
3161         }
3162         return true;
3163     }
3164 });/**
3165  * @class Ext.ux.grid.filter.StringFilter
3166  * @extends Ext.ux.grid.filter.Filter
3167  * Filter by a configurable Ext.form.TextField
3168  * <p><b><u>Example Usage:</u></b></p>
3169  * <pre><code>
3170 var filters = new Ext.ux.grid.GridFilters({
3171     ...
3172     filters: [{
3173         // required configs
3174         type: 'string',
3175         dataIndex: 'name',
3176
3177         // optional configs
3178         value: 'foo',
3179         active: true, // default is false
3180         iconCls: 'ux-gridfilter-text-icon' // default
3181         // any Ext.form.TextField configs accepted
3182     }]
3183 });
3184  * </code></pre>
3185  */
3186 Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
3187
3188     <div id="cfg-Ext.ux.grid.filter.StringFilter-iconCls"></div>/**
3189      * @cfg {String} iconCls
3190      * The iconCls to be applied to the menu item.
3191      * Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
3192      */
3193     iconCls : 'ux-gridfilter-text-icon',
3194
3195     emptyText: 'Enter Filter Text...',
3196     selectOnFocus: true,
3197     width: 125,
3198
3199     /**
3200      * @private
3201      * Template method that is to initialize the filter and install required menu items.
3202      */
3203     init : function (config) {
3204         Ext.applyIf(config, {
3205             enableKeyEvents: true,
3206             iconCls: this.iconCls,
3207             listeners: {
3208                 scope: this,
3209                 keyup: this.onInputKeyUp
3210             }
3211         });
3212
3213         this.inputItem = new Ext.form.TextField(config);
3214         this.menu.add(this.inputItem);
3215         this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
3216     },
3217
3218     /**
3219      * @private
3220      * Template method that is to get and return the value of the filter.
3221      * @return {String} The value of this filter
3222      */
3223     getValue : function () {
3224         return this.inputItem.getValue();
3225     },
3226
3227     /**
3228      * @private
3229      * Template method that is to set the value of the filter.
3230      * @param {Object} value The value to set the filter
3231      */
3232     setValue : function (value) {
3233         this.inputItem.setValue(value);
3234         this.fireEvent('update', this);
3235     },
3236
3237     /**
3238      * @private
3239      * Template method that is to return <tt>true</tt> if the filter
3240      * has enough configuration information to be activated.
3241      * @return {Boolean}
3242      */
3243     isActivatable : function () {
3244         return this.inputItem.getValue().length > 0;
3245     },
3246
3247     /**
3248      * @private
3249      * Template method that is to get and return serialized filter data for
3250      * transmission to the server.
3251      * @return {Object/Array} An object or collection of objects containing
3252      * key value pairs representing the current configuration of the filter.
3253      */
3254     getSerialArgs : function () {
3255         return {type: 'string', value: this.getValue()};
3256     },
3257
3258     <div id="method-Ext.ux.grid.filter.StringFilter-validateRecord"></div>/**
3259      * Template method that is to validate the provided Ext.data.Record
3260      * against the filters configuration.
3261      * @param {Ext.data.Record} record The record to validate
3262      * @return {Boolean} true if the record is valid within the bounds
3263      * of the filter, false otherwise.
3264      */
3265     validateRecord : function (record) {
3266         var val = record.get(this.dataIndex);
3267
3268         if(typeof val != 'string') {
3269             return (this.getValue().length === 0);
3270         }
3271
3272         return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
3273     },
3274
3275     /**
3276      * @private
3277      * Handler method called when there is a keyup event on this.inputItem
3278      */
3279     onInputKeyUp : function (field, e) {
3280         var k = e.getKey();
3281         if (k == e.RETURN && field.isValid()) {
3282             e.stopEvent();
3283             this.menu.hide(true);
3284             return;
3285         }
3286         // restart the timer
3287         this.updateTask.delay(this.updateBuffer);
3288     }
3289 });
3290 Ext.namespace('Ext.ux.menu');
3291
3292 /**
3293  * @class Ext.ux.menu.ListMenu
3294  * @extends Ext.menu.Menu
3295  * This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
3296  * Although not listed as configuration options for this class, this class
3297  * also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
3298  */
3299 Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
3300     <div id="cfg-Ext.ux.menu.ListMenu-labelField"></div>/**
3301      * @cfg {String} labelField
3302      * Defaults to 'text'.
3303      */
3304     labelField :  'text',
3305     <div id="cfg-Ext.ux.menu.ListMenu-paramPrefix"></div>/**
3306      * @cfg {String} paramPrefix
3307      * Defaults to 'Loading...'.
3308      */
3309     loadingText : 'Loading...',
3310     <div id="cfg-Ext.ux.menu.ListMenu-loadOnShow"></div>/**
3311      * @cfg {Boolean} loadOnShow
3312      * Defaults to true.
3313      */
3314     loadOnShow : true,
3315     <div id="cfg-Ext.ux.menu.ListMenu-single"></div>/**
3316      * @cfg {Boolean} single
3317      * Specify true to group all items in this list into a single-select
3318      * radio button group. Defaults to false.
3319      */
3320     single : false,
3321
3322     constructor : function (cfg) {
3323         this.selected = [];
3324         this.addEvents(
3325             <div id="event-Ext.ux.menu.ListMenu-checkchange"></div>/**
3326              * @event checkchange
3327              * Fires when there is a change in checked items from this list
3328              * @param {Object} item Ext.menu.CheckItem
3329              * @param {Object} checked The checked value that was set
3330              */
3331             'checkchange'
3332         );
3333
3334         Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
3335
3336         if(!cfg.store && cfg.options){
3337             var options = [];
3338             for(var i=0, len=cfg.options.length; i<len; i++){
3339                 var value = cfg.options[i];
3340                 switch(Ext.type(value)){
3341                     case 'array':  options.push(value); break;
3342                     case 'object': options.push([value.id, value[this.labelField]]); break;
3343                     case 'string': options.push([value, value]); break;
3344                 }
3345             }
3346
3347             this.store = new Ext.data.Store({
3348                 reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
3349                 data:   options,
3350                 listeners: {
3351                     'load': this.onLoad,
3352                     scope:  this
3353                 }
3354             });
3355             this.loaded = true;
3356         } else {
3357             this.add({text: this.loadingText, iconCls: 'loading-indicator'});
3358             this.store.on('load', this.onLoad, this);
3359         }
3360     },
3361
3362     destroy : function () {
3363         if (this.store) {
3364             this.store.destroy();
3365         }
3366         Ext.ux.menu.ListMenu.superclass.destroy.call(this);
3367     },
3368
3369     <div id="method-Ext.ux.menu.ListMenu-show"></div>/**
3370      * Lists will initially show a 'loading' item while the data is retrieved from the store.
3371      * In some cases the loaded data will result in a list that goes off the screen to the
3372      * right (as placement calculations were done with the loading item). This adapter will
3373      * allow show to be called with no arguments to show with the previous arguments and
3374      * thus recalculate the width and potentially hang the menu from the left.
3375      */
3376     show : function () {
3377         var lastArgs = null;
3378         return function(){
3379             if(arguments.length === 0){
3380                 Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
3381             } else {
3382                 lastArgs = arguments;
3383                 if (this.loadOnShow && !this.loaded) {
3384                     this.store.load();
3385                 }
3386                 Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
3387             }
3388         };
3389     }(),
3390
3391     /** @private */
3392     onLoad : function (store, records) {
3393         var visible = this.isVisible();
3394         this.hide(false);
3395
3396         this.removeAll(true);
3397
3398         var gid = this.single ? Ext.id() : null;
3399         for(var i=0, len=records.length; i<len; i++){
3400             var item = new Ext.menu.CheckItem({
3401                 text:    records[i].get(this.labelField),
3402                 group:   gid,
3403                 checked: this.selected.indexOf(records[i].id) > -1,
3404                 hideOnClick: false});
3405
3406             item.itemId = records[i].id;
3407             item.on('checkchange', this.checkChange, this);
3408
3409             this.add(item);
3410         }
3411
3412         this.loaded = true;
3413
3414         if (visible) {
3415             this.show();
3416         }
3417         this.fireEvent('load', this, records);
3418     },
3419
3420     <div id="method-Ext.ux.menu.ListMenu-getSelected"></div>/**
3421      * Get the selected items.
3422      * @return {Array} selected
3423      */
3424     getSelected : function () {
3425         return this.selected;
3426     },
3427
3428     /** @private */
3429     setSelected : function (value) {
3430         value = this.selected = [].concat(value);
3431
3432         if (this.loaded) {
3433             this.items.each(function(item){
3434                 item.setChecked(false, true);
3435                 for (var i = 0, len = value.length; i < len; i++) {
3436                     if (item.itemId == value[i]) {
3437                         item.setChecked(true, true);
3438                     }
3439                 }
3440             }, this);
3441         }
3442     },
3443
3444     <div id="method-Ext.ux.menu.ListMenu-checkChange"></div>/**
3445      * Handler for the 'checkchange' event from an check item in this menu
3446      * @param {Object} item Ext.menu.CheckItem
3447      * @param {Object} checked The checked value that was set
3448      */
3449     checkChange : function (item, checked) {
3450         var value = [];
3451         this.items.each(function(item){
3452             if (item.checked) {
3453                 value.push(item.itemId);
3454             }
3455         },this);
3456         this.selected = value;
3457
3458         this.fireEvent('checkchange', item, checked);
3459     }
3460 });Ext.ns('Ext.ux.menu');
3461
3462 /**
3463  * @class Ext.ux.menu.RangeMenu
3464  * @extends Ext.menu.Menu
3465  * Custom implementation of Ext.menu.Menu that has preconfigured
3466  * items for gt, lt, eq.
3467  * <p><b><u>Example Usage:</u></b></p>
3468  * <pre><code>
3469
3470  * </code></pre>
3471  */
3472 Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
3473
3474     constructor : function (config) {
3475
3476         Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
3477
3478         this.addEvents(
3479             <div id="event-Ext.ux.menu.RangeMenu-update"></div>/**
3480              * @event update
3481              * Fires when a filter configuration has changed
3482              * @param {Ext.ux.grid.filter.Filter} this The filter object.
3483              */
3484             'update'
3485         );
3486
3487         this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
3488
3489         var i, len, item, cfg, Cls;
3490
3491         for (i = 0, len = this.menuItems.length; i < len; i++) {
3492             item = this.menuItems[i];
3493             if (item !== '-') {
3494                 // defaults
3495                 cfg = {
3496                     itemId: 'range-' + item,
3497                     enableKeyEvents: true,
3498                     iconCls: this.iconCls[item] || 'no-icon',
3499                     listeners: {
3500                         scope: this,
3501                         keyup: this.onInputKeyUp
3502                     }
3503                 };
3504                 Ext.apply(
3505                     cfg,
3506                     // custom configs
3507                     Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
3508                     // configurable defaults
3509                     this.menuItemCfgs
3510                 );
3511                 Cls = cfg.fieldCls || this.fieldCls;
3512                 item = this.fields[item] = new Cls(cfg);
3513             }
3514             this.add(item);
3515         }
3516     },
3517
3518     /**
3519      * @private
3520      * called by this.updateTask
3521      */
3522     fireUpdate : function () {
3523         this.fireEvent('update', this);
3524     },
3525
3526     <div id="method-Ext.ux.menu.RangeMenu-getValue"></div>/**
3527      * Get and return the value of the filter.
3528      * @return {String} The value of this filter
3529      */
3530     getValue : function () {
3531         var result = {}, key, field;
3532         for (key in this.fields) {
3533             field = this.fields[key];
3534             if (field.isValid() && String(field.getValue()).length > 0) {
3535                 result[key] = field.getValue();
3536             }
3537         }
3538         return result;
3539     },
3540
3541     <div id="method-Ext.ux.menu.RangeMenu-setValue"></div>/**
3542      * Set the value of this menu and fires the 'update' event.
3543      * @param {Object} data The data to assign to this menu
3544      */
3545     setValue : function (data) {
3546         var key;
3547         for (key in this.fields) {
3548             this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
3549         }
3550         this.fireEvent('update', this);
3551     },
3552
3553     /**
3554      * @private
3555      * Handler method called when there is a keyup event on an input
3556      * item of this menu.
3557      */
3558     onInputKeyUp : function (field, e) {
3559         var k = e.getKey();
3560         if (k == e.RETURN && field.isValid()) {
3561             e.stopEvent();
3562             this.hide(true);
3563             return;
3564         }
3565
3566         if (field == this.fields.eq) {
3567             if (this.fields.gt) {
3568                 this.fields.gt.setValue(null);
3569             }
3570             if (this.fields.lt) {
3571                 this.fields.lt.setValue(null);
3572             }
3573         }
3574         else {
3575             this.fields.eq.setValue(null);
3576         }
3577
3578         // restart the timer
3579         this.updateTask.delay(this.updateBuffer);
3580     }
3581 });
3582 Ext.ns('Ext.ux.grid');
3583
3584 /**
3585  * @class Ext.ux.grid.GroupSummary
3586  * @extends Ext.util.Observable
3587  * A GridPanel plugin that enables dynamic column calculations and a dynamically
3588  * updated grouped summary row.
3589  */
3590 Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
3591     <div id="cfg-Ext.ux.grid.GroupSummary-summaryRenderer"></div>/**
3592      * @cfg {Function} summaryRenderer Renderer example:<pre><code>
3593 summaryRenderer: function(v, params, data){
3594     return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
3595 },
3596      * </code></pre>
3597      */
3598     <div id="cfg-Ext.ux.grid.GroupSummary-summaryType"></div>/**
3599      * @cfg {String} summaryType (Optional) The type of
3600      * calculation to be used for the column.  For options available see
3601      * {@link #Calculations}.
3602      */
3603
3604     constructor : function(config){
3605         Ext.apply(this, config);
3606         Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
3607     },
3608     init : function(grid){
3609         this.grid = grid;
3610         var v = this.view = grid.getView();
3611         v.doGroupEnd = this.doGroupEnd.createDelegate(this);
3612
3613         v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
3614         v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
3615         v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
3616         v.afterMethod('onUpdate', this.doUpdate, this);
3617         v.afterMethod('onRemove', this.doRemove, this);
3618
3619         if(!this.rowTpl){
3620             this.rowTpl = new Ext.Template(
3621                 '<div class="x-grid3-summary-row" style="{tstyle}">',
3622                 '<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
3623                     '<tbody><tr>{cells}</tr></tbody>',
3624                 '</table></div>'
3625             );
3626             this.rowTpl.disableFormats = true;
3627         }
3628         this.rowTpl.compile();
3629
3630         if(!this.cellTpl){
3631             this.cellTpl = new Ext.Template(
3632                 '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
3633                 '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
3634                 "</td>"
3635             );
3636             this.cellTpl.disableFormats = true;
3637         }
3638         this.cellTpl.compile();
3639     },
3640
3641     <div id="method-Ext.ux.grid.GroupSummary-toggleSummaries"></div>/**
3642      * Toggle the display of the summary row on/off
3643      * @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
3644      */
3645     toggleSummaries : function(visible){
3646         var el = this.grid.getGridEl();
3647         if(el){
3648             if(visible === undefined){
3649                 visible = el.hasClass('x-grid-hide-summary');
3650             }
3651             el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
3652         }
3653     },
3654
3655     renderSummary : function(o, cs){
3656         cs = cs || this.view.getColumnData();
3657         var cfg = this.grid.getColumnModel().config,
3658             buf = [], c, p = {}, cf, last = cs.length-1;
3659         for(var i = 0, len = cs.length; i < len; i++){
3660             c = cs[i];
3661             cf = cfg[i];
3662             p.id = c.id;
3663             p.style = c.style;
3664             p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
3665             if(cf.summaryType || cf.summaryRenderer){
3666                 p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
3667             }else{
3668                 p.value = '';
3669             }
3670             if(p.value == undefined || p.value === "") p.value = "&#160;";
3671             buf[buf.length] = this.cellTpl.apply(p);
3672         }
3673
3674         return this.rowTpl.apply({
3675             tstyle: 'width:'+this.view.getTotalWidth()+';',
3676             cells: buf.join('')
3677         });
3678     },
3679
3680     /**
3681      * @private
3682      * @param {Object} rs
3683      * @param {Object} cs
3684      */
3685     calculate : function(rs, cs){
3686         var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
3687         for(var j = 0, jlen = rs.length; j < jlen; j++){
3688             r = rs[j];
3689             for(var i = 0, len = cs.length; i < len; i++){
3690                 c = cs[i];
3691                 cf = cfg[i];
3692                 if(cf.summaryType){
3693                     data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
3694                 }
3695             }
3696         }
3697         return data;
3698     },
3699
3700     doGroupEnd : function(buf, g, cs, ds, colCount){
3701         var data = this.calculate(g.rs, cs);
3702         buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
3703     },
3704
3705     doWidth : function(col, w, tw){
3706         if(!this.isGrouped()){
3707             return;
3708         }
3709         var gs = this.view.getGroups(),
3710             len = gs.length,
3711             i = 0,
3712             s;
3713         for(; i < len; ++i){
3714             s = gs[i].childNodes[2];
3715             s.style.width = tw;
3716             s.firstChild.style.width = tw;
3717             s.firstChild.rows[0].childNodes[col].style.width = w;
3718         }
3719     },
3720
3721     doAllWidths : function(ws, tw){
3722         if(!this.isGrouped()){
3723             return;
3724         }
3725         var gs = this.view.getGroups(),
3726             len = gs.length,
3727             i = 0,
3728             j,
3729             s,
3730             cells,
3731             wlen = ws.length;
3732
3733         for(; i < len; i++){
3734             s = gs[i].childNodes[2];
3735             s.style.width = tw;
3736             s.firstChild.style.width = tw;
3737             cells = s.firstChild.rows[0].childNodes;
3738             for(j = 0; j < wlen; j++){
3739                 cells[j].style.width = ws[j];
3740             }
3741         }
3742     },
3743
3744     doHidden : function(col, hidden, tw){
3745         if(!this.isGrouped()){
3746             return;
3747         }
3748         var gs = this.view.getGroups(),
3749             len = gs.length,
3750             i = 0,
3751             s,
3752             display = hidden ? 'none' : '';
3753         for(; i < len; i++){
3754             s = gs[i].childNodes[2];
3755             s.style.width = tw;
3756             s.firstChild.style.width = tw;
3757             s.firstChild.rows[0].childNodes[col].style.display = display;
3758         }
3759     },
3760
3761     isGrouped : function(){
3762         return !Ext.isEmpty(this.grid.getStore().groupField);
3763     },
3764
3765     // Note: requires that all (or the first) record in the
3766     // group share the same group value. Returns false if the group
3767     // could not be found.
3768     refreshSummary : function(groupValue){
3769         return this.refreshSummaryById(this.view.getGroupId(groupValue));
3770     },
3771
3772     getSummaryNode : function(gid){
3773         var g = Ext.fly(gid, '_gsummary');
3774         if(g){
3775             return g.down('.x-grid3-summary-row', true);
3776         }
3777         return null;
3778     },
3779
3780     refreshSummaryById : function(gid){
3781         var g = Ext.getDom(gid);
3782         if(!g){
3783             return false;
3784         }
3785         var rs = [];
3786         this.grid.getStore().each(function(r){
3787             if(r._groupId == gid){
3788                 rs[rs.length] = r;
3789             }
3790         });
3791         var cs = this.view.getColumnData(),
3792             data = this.calculate(rs, cs),
3793             markup = this.renderSummary({data: data}, cs),
3794             existing = this.getSummaryNode(gid);
3795
3796         if(existing){
3797             g.removeChild(existing);
3798         }
3799         Ext.DomHelper.append(g, markup);
3800         return true;
3801     },
3802
3803     doUpdate : function(ds, record){
3804         this.refreshSummaryById(record._groupId);
3805     },
3806
3807     doRemove : function(ds, record, index, isUpdate){
3808         if(!isUpdate){
3809             this.refreshSummaryById(record._groupId);
3810         }
3811     },
3812
3813     <div id="method-Ext.ux.grid.GroupSummary-showSummaryMsg"></div>/**
3814      * Show a message in the summary row.
3815      * <pre><code>
3816 grid.on('afteredit', function(){
3817     var groupValue = 'Ext Forms: Field Anchoring';
3818     summary.showSummaryMsg(groupValue, 'Updating Summary...');
3819 });
3820      * </code></pre>
3821      * @param {String} groupValue
3822      * @param {String} msg Text to use as innerHTML for the summary row.
3823      */
3824     showSummaryMsg : function(groupValue, msg){
3825         var gid = this.view.getGroupId(groupValue),
3826              node = this.getSummaryNode(gid);
3827         if(node){
3828             node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
3829         }
3830     }
3831 });
3832
3833 //backwards compat
3834 Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
3835
3836
3837 <div id="prop-Ext.ux.grid.GroupSummary-Calculations"></div>/**
3838  * Calculation types for summary row:</p><div class="mdetail-params"><ul>
3839  * <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
3840  * <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
3841  * <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
3842  * <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
3843  * <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
3844  * </ul></div>
3845  * <p>Custom calculations may be implemented.  An example of
3846  * custom <code>summaryType=totalCost</code>:</p><pre><code>
3847 // define a custom summary function
3848 Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
3849     return v + (record.data.estimate * record.data.rate);
3850 };
3851  * </code></pre>
3852  * @property Calculations
3853  */
3854
3855 Ext.ux.grid.GroupSummary.Calculations = {
3856     'sum' : function(v, record, field){
3857         return v + (record.data[field]||0);
3858     },
3859
3860     'count' : function(v, record, field, data){
3861         return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
3862     },
3863
3864     'max' : function(v, record, field, data){
3865         var v = record.data[field];
3866         var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
3867         return v > max ? (data[field+'max'] = v) : max;
3868     },
3869
3870     'min' : function(v, record, field, data){
3871         var v = record.data[field];
3872         var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
3873         return v < min ? (data[field+'min'] = v) : min;
3874     },
3875
3876     'average' : function(v, record, field, data){
3877         var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
3878         var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
3879         return t === 0 ? 0 : t / c;
3880     }
3881 };
3882 Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
3883
3884 /**
3885  * @class Ext.ux.grid.HybridSummary
3886  * @extends Ext.ux.grid.GroupSummary
3887  * Adds capability to specify the summary data for the group via json as illustrated here:
3888  * <pre><code>
3889 {
3890     data: [
3891         {
3892             projectId: 100,     project: 'House',
3893             taskId:    112, description: 'Paint',
3894             estimate:    6,        rate:     150,
3895             due:'06/24/2007'
3896         },
3897         ...
3898     ],
3899
3900     summaryData: {
3901         'House': {
3902             description: 14, estimate: 9,
3903                    rate: 99, due: new Date(2009, 6, 29),
3904                    cost: 999
3905         }
3906     }
3907 }
3908  * </code></pre>
3909  *
3910  */
3911 Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
3912     /**
3913      * @private
3914      * @param {Object} rs
3915      * @param {Object} cs
3916      */
3917     calculate : function(rs, cs){
3918         var gcol = this.view.getGroupField(),
3919             gvalue = rs[0].data[gcol],
3920             gdata = this.getSummaryData(gvalue);
3921         return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
3922     },
3923
3924     <div id="method-Ext.ux.grid.HybridSummary-updateSummaryData"></div>/**
3925      * <pre><code>
3926 grid.on('afteredit', function(){
3927     var groupValue = 'Ext Forms: Field Anchoring';
3928     summary.showSummaryMsg(groupValue, 'Updating Summary...');
3929     setTimeout(function(){ // simulate server call
3930         // HybridSummary class implements updateSummaryData
3931         summary.updateSummaryData(groupValue,
3932             // create data object based on configured dataIndex
3933             {description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
3934     }, 2000);
3935 });
3936      * </code></pre>
3937      * @param {String} groupValue
3938      * @param {Object} data data object
3939      * @param {Boolean} skipRefresh (Optional) Defaults to false
3940      */
3941     updateSummaryData : function(groupValue, data, skipRefresh){
3942         var json = this.grid.getStore().reader.jsonData;
3943         if(!json.summaryData){
3944             json.summaryData = {};
3945         }
3946         json.summaryData[groupValue] = data;
3947         if(!skipRefresh){
3948             this.refreshSummary(groupValue);
3949         }
3950     },
3951
3952     <div id="method-Ext.ux.grid.HybridSummary-getSummaryData"></div>/**
3953      * Returns the summaryData for the specified groupValue or null.
3954      * @param {String} groupValue
3955      * @return {Object} summaryData
3956      */
3957     getSummaryData : function(groupValue){
3958         var reader = this.grid.getStore().reader,
3959             json = reader.jsonData,
3960             fields = reader.recordType.prototype.fields,
3961             v;
3962
3963         if(json && json.summaryData){
3964             v = json.summaryData[groupValue];
3965             if(v){
3966                 return reader.extractValues(v, fields.items, fields.length);
3967             }
3968         }
3969         return null;
3970     }
3971 });
3972
3973 //backwards compat
3974 Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
3975 Ext.ux.GroupTab = Ext.extend(Ext.Container, {
3976     mainItem: 0,
3977
3978     expanded: true,
3979
3980     deferredRender: true,
3981
3982     activeTab: null,
3983
3984     idDelimiter: '__',
3985
3986     headerAsText: false,
3987
3988     frame: false,
3989
3990     hideBorders: true,
3991
3992     initComponent: function(config){
3993         Ext.apply(this, config);
3994         this.frame = false;
3995
3996         Ext.ux.GroupTab.superclass.initComponent.call(this);
3997
3998         this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
3999
4000         this.setLayout(new Ext.layout.CardLayout({
4001             deferredRender: this.deferredRender
4002         }));
4003
4004         if (!this.stack) {
4005             this.stack = Ext.TabPanel.AccessStack();
4006         }
4007
4008         this.initItems();
4009
4010         this.on('beforerender', function(){
4011             this.groupEl = this.ownerCt.getGroupEl(this);
4012         }, this);
4013
4014         this.on('add', this.onAdd, this, {
4015             target: this
4016         });
4017         this.on('remove', this.onRemove, this, {
4018             target: this
4019         });
4020
4021         if (this.mainItem !== undefined) {
4022             var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
4023             delete this.mainItem;
4024             this.setMainItem(item);
4025         }
4026     },
4027
4028     <div id="method-Ext.ux.grid.HybridSummary-setActiveTab"></div>/**
4029      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
4030      * can return false to cancel the tab change.
4031      * @param {String/Panel} tab The id or tab Panel to activate
4032      */
4033     setActiveTab : function(item){
4034         item = this.getComponent(item);
4035         if(!item){
4036             return false;
4037         }
4038         if(!this.rendered){
4039             this.activeTab = item;
4040             return true;
4041         }
4042         if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
4043             if(this.activeTab && this.activeTab != this.mainItem){
4044                 var oldEl = this.getTabEl(this.activeTab);
4045                 if(oldEl){
4046                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
4047                 }
4048             }
4049             var el = this.getTabEl(item);
4050             Ext.fly(el).addClass('x-grouptabs-strip-active');
4051             this.activeTab = item;
4052             this.stack.add(item);
4053
4054             this.layout.setActiveItem(item);
4055             if(this.layoutOnTabChange && item.doLayout){
4056                 item.doLayout();
4057             }
4058             if(this.scrolling){
4059                 this.scrollToTab(item, this.animScroll);
4060             }
4061
4062             this.fireEvent('tabchange', this, item);
4063             return true;
4064         }
4065         return false;
4066     },
4067
4068     getTabEl: function(item){
4069         if (item == this.mainItem) {
4070             return this.groupEl;
4071         }
4072         return Ext.TabPanel.prototype.getTabEl.call(this, item);
4073     },
4074
4075     onRender: function(ct, position){
4076         Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
4077
4078         this.strip = Ext.fly(this.groupEl).createChild({
4079             tag: 'ul',
4080             cls: 'x-grouptabs-sub'
4081         });
4082
4083         this.tooltip = new Ext.ToolTip({
4084            target: this.groupEl,
4085            delegate: 'a.x-grouptabs-text',
4086            trackMouse: true,
4087            renderTo: document.body,
4088            listeners: {
4089                beforeshow: function(tip) {
4090                    var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
4091                        ? this.mainItem
4092                        : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
4093
4094                    if(!item.tabTip) {
4095                        return false;
4096                    }
4097                    tip.body.dom.innerHTML = item.tabTip;
4098                },
4099                scope: this
4100            }
4101         });
4102
4103         if (!this.itemTpl) {
4104             var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
4105             tt.disableFormats = true;
4106             tt.compile();
4107             Ext.ux.GroupTab.prototype.itemTpl = tt;
4108         }
4109
4110         this.items.each(this.initTab, this);
4111     },
4112
4113     afterRender: function(){
4114         Ext.ux.GroupTab.superclass.afterRender.call(this);
4115
4116         if (this.activeTab !== undefined) {
4117             var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
4118             delete this.activeTab;
4119             this.setActiveTab(item);
4120         }
4121     },
4122
4123     // private
4124     initTab: function(item, index){
4125         var before = this.strip.dom.childNodes[index];
4126         var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
4127
4128         if (item === this.mainItem) {
4129             item.tabEl = this.groupEl;
4130             p.cls += ' x-grouptabs-main-item';
4131         }
4132
4133         var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
4134
4135         item.tabEl = item.tabEl || el;
4136
4137         item.on('disable', this.onItemDisabled, this);
4138         item.on('enable', this.onItemEnabled, this);
4139         item.on('titlechange', this.onItemTitleChanged, this);
4140         item.on('iconchange', this.onItemIconChanged, this);
4141         item.on('beforeshow', this.onBeforeShowItem, this);
4142     },
4143
4144     setMainItem: function(item){
4145         item = this.getComponent(item);
4146         if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
4147             return;
4148         }
4149
4150         this.mainItem = item;
4151     },
4152
4153     getMainItem: function(){
4154         return this.mainItem || null;
4155     },
4156
4157     // private
4158     onBeforeShowItem: function(item){
4159         if (item != this.activeTab) {
4160             this.setActiveTab(item);
4161             return false;
4162         }
4163     },
4164
4165     // private
4166     onAdd: function(gt, item, index){
4167         if (this.rendered) {
4168             this.initTab.call(this, item, index);
4169         }
4170     },
4171
4172     // private
4173     onRemove: function(tp, item){
4174         Ext.destroy(Ext.get(this.getTabEl(item)));
4175         this.stack.remove(item);
4176         item.un('disable', this.onItemDisabled, this);
4177         item.un('enable', this.onItemEnabled, this);
4178         item.un('titlechange', this.onItemTitleChanged, this);
4179         item.un('iconchange', this.onItemIconChanged, this);
4180         item.un('beforeshow', this.onBeforeShowItem, this);
4181         if (item == this.activeTab) {
4182             var next = this.stack.next();
4183             if (next) {
4184                 this.setActiveTab(next);
4185             }
4186             else if (this.items.getCount() > 0) {
4187                 this.setActiveTab(0);
4188             }
4189             else {
4190                 this.activeTab = null;
4191             }
4192         }
4193     },
4194
4195     // private
4196     onBeforeAdd: function(item){
4197         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
4198         if (existing) {
4199             this.setActiveTab(item);
4200             return false;
4201         }
4202         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
4203         var es = item.elements;
4204         item.elements = es ? es.replace(',header', '') : es;
4205         item.border = (item.border === true);
4206     },
4207
4208     // private
4209     onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
4210     onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
4211
4212     // private
4213     onItemTitleChanged: function(item){
4214         var el = this.getTabEl(item);
4215         if (el) {
4216             Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
4217         }
4218     },
4219
4220     //private
4221     onItemIconChanged: function(item, iconCls, oldCls){
4222         var el = this.getTabEl(item);
4223         if (el) {
4224             Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
4225         }
4226     },
4227
4228     beforeDestroy: function(){
4229         Ext.TabPanel.prototype.beforeDestroy.call(this);
4230         this.tooltip.destroy();
4231     }
4232 });
4233
4234 Ext.reg('grouptab', Ext.ux.GroupTab);
4235 Ext.ns('Ext.ux');
4236
4237 Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
4238     tabPosition: 'left',
4239
4240     alternateColor: false,
4241
4242     alternateCls: 'x-grouptabs-panel-alt',
4243
4244     defaultType: 'grouptab',
4245
4246     deferredRender: false,
4247
4248     activeGroup : null,
4249
4250     initComponent: function(){
4251         Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
4252
4253         this.addEvents(
4254             'beforegroupchange',
4255             'groupchange'
4256         );
4257         this.elements = 'body,header';
4258         this.stripTarget = 'header';
4259
4260         this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
4261
4262         this.addClass('x-grouptabs-panel');
4263
4264         if (this.tabStyle && this.tabStyle != '') {
4265             this.addClass('x-grouptabs-panel-' + this.tabStyle);
4266         }
4267
4268         if (this.alternateColor) {
4269             this.addClass(this.alternateCls);
4270         }
4271
4272         this.on('beforeadd', function(gtp, item, index){
4273             this.initGroup(item, index);
4274         });
4275         this.items.each(function(item){
4276             item.on('tabchange',function(item){
4277                 this.fireEvent('tabchange', this, item.activeTab);
4278             }, this);
4279         },this);
4280     },
4281
4282     initEvents : function() {
4283         this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
4284     },
4285
4286     onRender: function(ct, position){
4287         Ext.TabPanel.superclass.onRender.call(this, ct, position);
4288         if(this.plain){
4289             var pos = this.tabPosition == 'top' ? 'header' : 'footer';
4290             this[pos].addClass('x-tab-panel-'+pos+'-plain');
4291         }
4292
4293         var st = this[this.stripTarget];
4294
4295         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
4296             tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
4297
4298         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
4299         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
4300
4301         this.header.addClass('x-grouptabs-panel-header');
4302         this.bwrap.addClass('x-grouptabs-bwrap');
4303         this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
4304
4305         if (!this.groupTpl) {
4306             var tt = new Ext.Template(
4307                 '<li class="{cls}" id="{id}">',
4308                 '<a class="x-grouptabs-expand" onclick="return false;"></a>',
4309                 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
4310                 '<span>{text}</span></a>',
4311                 '</li>'
4312             );
4313             tt.disableFormats = true;
4314             tt.compile();
4315             Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
4316         }
4317         this.items.each(this.initGroup, this);
4318     },
4319
4320     afterRender: function(){
4321         Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
4322
4323         this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
4324             cls: 'x-tab-joint'
4325         });
4326
4327         this.addClass('x-tab-panel-' + this.tabPosition);
4328         this.header.setWidth(this.tabWidth);
4329
4330         if (this.activeGroup !== undefined) {
4331             var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
4332             delete this.activeGroup;
4333             this.setActiveGroup(group);
4334             group.setActiveTab(group.getMainItem());
4335         }
4336     },
4337
4338     getGroupEl : Ext.TabPanel.prototype.getTabEl,
4339
4340     // private
4341     findTargets: function(e){
4342         var item = null,
4343             itemEl = e.getTarget('li', this.strip);
4344         if (itemEl) {
4345             item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
4346             if (item.disabled) {
4347                 return {
4348                     expand: null,
4349                     item: null,
4350                     el: null
4351                 };
4352             }
4353         }
4354         return {
4355             expand: e.getTarget('.x-grouptabs-expand', this.strip),
4356             isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
4357             item: item,
4358             el: itemEl
4359         };
4360     },
4361
4362     // private
4363     onStripMouseDown: function(e){
4364         if (e.button != 0) {
4365             return;
4366         }
4367         e.preventDefault();
4368         var t = this.findTargets(e);
4369         if (t.expand) {
4370             this.toggleGroup(t.el);
4371         }
4372         else if (t.item) {
4373             if(t.isGroup) {
4374                 t.item.setActiveTab(t.item.getMainItem());
4375             }
4376             else {
4377                 t.item.ownerCt.setActiveTab(t.item);
4378             }
4379         }
4380     },
4381
4382     expandGroup: function(groupEl){
4383         if(groupEl.isXType) {
4384             groupEl = this.getGroupEl(groupEl);
4385         }
4386         Ext.fly(groupEl).addClass('x-grouptabs-expanded');
4387         this.syncTabJoint();
4388     },
4389
4390     toggleGroup: function(groupEl){
4391         if(groupEl.isXType) {
4392             groupEl = this.getGroupEl(groupEl);
4393         }
4394         Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
4395         this.syncTabJoint();
4396     },
4397
4398     collapseGroup: function(groupEl){
4399         if(groupEl.isXType) {
4400             groupEl = this.getGroupEl(groupEl);
4401         }
4402         Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
4403         this.syncTabJoint();
4404     },
4405
4406     syncTabJoint: function(groupEl){
4407         if (!this.tabJoint) {
4408             return;
4409         }
4410
4411         groupEl = groupEl || this.getGroupEl(this.activeGroup);
4412         if(groupEl) {
4413             this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
4414
4415             var y = Ext.isGecko2 ? 0 : 1;
4416             if (this.tabPosition == 'left'){
4417                 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
4418             }
4419             else {
4420                 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
4421             }
4422         }
4423         else {
4424             this.tabJoint.hide();
4425         }
4426     },
4427
4428     getActiveTab : function() {
4429         if(!this.activeGroup) return null;
4430         return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
4431     },
4432
4433     onResize: function(){
4434         Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
4435         this.syncTabJoint();
4436     },
4437
4438     createCorner: function(el, pos){
4439         return Ext.fly(el).createChild({
4440             cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
4441         });
4442     },
4443
4444     initGroup: function(group, index){
4445         var before = this.strip.dom.childNodes[index],
4446             p = this.getTemplateArgs(group);
4447         if (index === 0) {
4448             p.cls += ' x-tab-first';
4449         }
4450         p.cls += ' x-grouptabs-main';
4451         p.text = group.getMainItem().title;
4452
4453         var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
4454             tl = this.createCorner(el, 'top-' + this.tabPosition),
4455             bl = this.createCorner(el, 'bottom-' + this.tabPosition);
4456
4457         group.tabEl = el;
4458         if (group.expanded) {
4459             this.expandGroup(el);
4460         }
4461
4462         if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
4463             bl.setLeft('-10px');
4464             bl.setBottom('-5px');
4465             tl.setLeft('-10px');
4466             tl.setTop('-5px');
4467         }
4468
4469         this.mon(group, {
4470             scope: this,
4471             changemainitem: this.onGroupChangeMainItem,
4472             beforetabchange: this.onGroupBeforeTabChange
4473         });
4474     },
4475
4476     setActiveGroup : function(group) {
4477         group = this.getComponent(group);
4478         if(!group){
4479             return false;
4480         }
4481         if(!this.rendered){
4482             this.activeGroup = group;
4483             return true;
4484         }
4485         if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
4486             if(this.activeGroup){
4487                 this.activeGroup.activeTab = null;
4488                 var oldEl = this.getGroupEl(this.activeGroup);
4489                 if(oldEl){
4490                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
4491                 }
4492             }
4493
4494             var groupEl = this.getGroupEl(group);
4495             Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
4496
4497             this.activeGroup = group;
4498             this.stack.add(group);
4499
4500             this.layout.setActiveItem(group);
4501             this.syncTabJoint(groupEl);
4502
4503             this.fireEvent('groupchange', this, group);
4504             return true;
4505         }
4506         return false;
4507     },
4508
4509     onGroupBeforeTabChange: function(group, newTab, oldTab){
4510         if(group !== this.activeGroup || newTab !== oldTab) {
4511             this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
4512         }
4513         this.expandGroup(this.getGroupEl(group));
4514         if(group !== this.activeGroup) {
4515             return this.setActiveGroup(group);
4516         }
4517     },
4518
4519     getFrameHeight: function(){
4520         var h = this.el.getFrameWidth('tb');
4521         h += (this.tbar ? this.tbar.getHeight() : 0) +
4522         (this.bbar ? this.bbar.getHeight() : 0);
4523
4524         return h;
4525     },
4526
4527     adjustBodyWidth: function(w){
4528         return w - this.tabWidth;
4529     }
4530 });
4531
4532 Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
4533 /*
4534  * Note that this control will most likely remain as an example, and not as a core Ext form
4535  * control.  However, the API will be changing in a future release and so should not yet be
4536  * treated as a final, stable API at this time.
4537  */
4538
4539 /**
4540  * @class Ext.ux.form.ItemSelector
4541  * @extends Ext.form.Field
4542  * A control that allows selection of between two Ext.ux.form.MultiSelect controls.
4543  *
4544  *  @history
4545  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
4546  *
4547  * @constructor
4548  * Create a new ItemSelector
4549  * @param {Object} config Configuration options
4550  * @xtype itemselector
4551  */
4552 Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field,  {
4553     hideNavIcons:false,
4554     imagePath:"",
4555     iconUp:"up2.gif",
4556     iconDown:"down2.gif",
4557     iconLeft:"left2.gif",
4558     iconRight:"right2.gif",
4559     iconTop:"top2.gif",
4560     iconBottom:"bottom2.gif",
4561     drawUpIcon:true,
4562     drawDownIcon:true,
4563     drawLeftIcon:true,
4564     drawRightIcon:true,
4565     drawTopIcon:true,
4566     drawBotIcon:true,
4567     delimiter:',',
4568     bodyStyle:null,
4569     border:false,
4570     defaultAutoCreate:{tag: "div"},
4571     <div id="cfg-Ext.ux.form.ItemSelector-multiselects"></div>/**
4572      * @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
4573      */
4574     multiselects:null,
4575
4576     initComponent: function(){
4577         Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
4578         this.addEvents({
4579             'rowdblclick' : true,
4580             'change' : true
4581         });
4582     },
4583
4584     onRender: function(ct, position){
4585         Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
4586
4587         // Internal default configuration for both multiselects
4588         var msConfig = [{
4589             legend: 'Available',
4590             draggable: true,
4591             droppable: true,
4592             width: 100,
4593             height: 100
4594         },{
4595             legend: 'Selected',
4596             droppable: true,
4597             draggable: true,
4598             width: 100,
4599             height: 100
4600         }];
4601
4602         this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
4603         this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
4604
4605         this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
4606         this.toMultiselect.on('dblclick', this.onRowDblClick, this);
4607
4608         var p = new Ext.Panel({
4609             bodyStyle:this.bodyStyle,
4610             border:this.border,
4611             layout:"table",
4612             layoutConfig:{columns:3}
4613         });
4614
4615         p.add(this.fromMultiselect);
4616         var icons = new Ext.Panel({header:false});
4617         p.add(icons);
4618         p.add(this.toMultiselect);
4619         p.render(this.el);
4620         icons.el.down('.'+icons.bwrapCls).remove();
4621
4622         // ICON HELL!!!
4623         if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
4624             this.imagePath+="/";
4625         this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
4626         this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
4627         this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
4628         this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
4629         this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
4630         this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
4631         var el=icons.getEl();
4632         this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
4633         el.createChild({tag: 'br'});
4634         this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
4635         el.createChild({tag: 'br'});
4636         this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
4637         el.createChild({tag: 'br'});
4638         this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
4639         el.createChild({tag: 'br'});
4640         this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
4641         el.createChild({tag: 'br'});
4642         this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
4643         this.toTopIcon.on('click', this.toTop, this);
4644         this.upIcon.on('click', this.up, this);
4645         this.downIcon.on('click', this.down, this);
4646         this.toBottomIcon.on('click', this.toBottom, this);
4647         this.addIcon.on('click', this.fromTo, this);
4648         this.removeIcon.on('click', this.toFrom, this);
4649         if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
4650         if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
4651         if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
4652         if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
4653         if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
4654         if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
4655
4656         var tb = p.body.first();
4657         this.el.setWidth(p.body.first().getWidth());
4658         p.body.removeClass();
4659
4660         this.hiddenName = this.name;
4661         var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
4662         this.hiddenField = this.el.createChild(hiddenTag);
4663     },
4664
4665     doLayout: function(){
4666         if(this.rendered){
4667             this.fromMultiselect.fs.doLayout();
4668             this.toMultiselect.fs.doLayout();
4669         }
4670     },
4671
4672     afterRender: function(){
4673         Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
4674
4675         this.toStore = this.toMultiselect.store;
4676         this.toStore.on('add', this.valueChanged, this);
4677         this.toStore.on('remove', this.valueChanged, this);
4678         this.toStore.on('load', this.valueChanged, this);
4679         this.valueChanged(this.toStore);
4680     },
4681
4682     toTop : function() {
4683         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4684         var records = [];
4685         if (selectionsArray.length > 0) {
4686             selectionsArray.sort();
4687             for (var i=0; i<selectionsArray.length; i++) {
4688                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4689                 records.push(record);
4690             }
4691             selectionsArray = [];
4692             for (var i=records.length-1; i>-1; i--) {
4693                 record = records[i];
4694                 this.toMultiselect.view.store.remove(record);
4695                 this.toMultiselect.view.store.insert(0, record);
4696                 selectionsArray.push(((records.length - 1) - i));
4697             }
4698         }
4699         this.toMultiselect.view.refresh();
4700         this.toMultiselect.view.select(selectionsArray);
4701     },
4702
4703     toBottom : function() {
4704         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4705         var records = [];
4706         if (selectionsArray.length > 0) {
4707             selectionsArray.sort();
4708             for (var i=0; i<selectionsArray.length; i++) {
4709                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4710                 records.push(record);
4711             }
4712             selectionsArray = [];
4713             for (var i=0; i<records.length; i++) {
4714                 record = records[i];
4715                 this.toMultiselect.view.store.remove(record);
4716                 this.toMultiselect.view.store.add(record);
4717                 selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
4718             }
4719         }
4720         this.toMultiselect.view.refresh();
4721         this.toMultiselect.view.select(selectionsArray);
4722     },
4723
4724     up : function() {
4725         var record = null;
4726         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4727         selectionsArray.sort();
4728         var newSelectionsArray = [];
4729         if (selectionsArray.length > 0) {
4730             for (var i=0; i<selectionsArray.length; i++) {
4731                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4732                 if ((selectionsArray[i] - 1) >= 0) {
4733                     this.toMultiselect.view.store.remove(record);
4734                     this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
4735                     newSelectionsArray.push(selectionsArray[i] - 1);
4736                 }
4737             }
4738             this.toMultiselect.view.refresh();
4739             this.toMultiselect.view.select(newSelectionsArray);
4740         }
4741     },
4742
4743     down : function() {
4744         var record = null;
4745         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4746         selectionsArray.sort();
4747         selectionsArray.reverse();
4748         var newSelectionsArray = [];
4749         if (selectionsArray.length > 0) {
4750             for (var i=0; i<selectionsArray.length; i++) {
4751                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4752                 if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
4753                     this.toMultiselect.view.store.remove(record);
4754                     this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
4755                     newSelectionsArray.push(selectionsArray[i] + 1);
4756                 }
4757             }
4758             this.toMultiselect.view.refresh();
4759             this.toMultiselect.view.select(newSelectionsArray);
4760         }
4761     },
4762
4763     fromTo : function() {
4764         var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
4765         var records = [];
4766         if (selectionsArray.length > 0) {
4767             for (var i=0; i<selectionsArray.length; i++) {
4768                 record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
4769                 records.push(record);
4770             }
4771             if(!this.allowDup)selectionsArray = [];
4772             for (var i=0; i<records.length; i++) {
4773                 record = records[i];
4774                 if(this.allowDup){
4775                     var x=new Ext.data.Record();
4776                     record.id=x.id;
4777                     delete x;
4778                     this.toMultiselect.view.store.add(record);
4779                 }else{
4780                     this.fromMultiselect.view.store.remove(record);
4781                     this.toMultiselect.view.store.add(record);
4782                     selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
4783                 }
4784             }
4785         }
4786         this.toMultiselect.view.refresh();
4787         this.fromMultiselect.view.refresh();
4788         var si = this.toMultiselect.store.sortInfo;
4789         if(si){
4790             this.toMultiselect.store.sort(si.field, si.direction);
4791         }
4792         this.toMultiselect.view.select(selectionsArray);
4793     },
4794
4795     toFrom : function() {
4796         var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
4797         var records = [];
4798         if (selectionsArray.length > 0) {
4799             for (var i=0; i<selectionsArray.length; i++) {
4800                 record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
4801                 records.push(record);
4802             }
4803             selectionsArray = [];
4804             for (var i=0; i<records.length; i++) {
4805                 record = records[i];
4806                 this.toMultiselect.view.store.remove(record);
4807                 if(!this.allowDup){
4808                     this.fromMultiselect.view.store.add(record);
4809                     selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
4810                 }
4811             }
4812         }
4813         this.fromMultiselect.view.refresh();
4814         this.toMultiselect.view.refresh();
4815         var si = this.fromMultiselect.store.sortInfo;
4816         if (si){
4817             this.fromMultiselect.store.sort(si.field, si.direction);
4818         }
4819         this.fromMultiselect.view.select(selectionsArray);
4820     },
4821
4822     valueChanged: function(store) {
4823         var record = null;
4824         var values = [];
4825         for (var i=0; i<store.getCount(); i++) {
4826             record = store.getAt(i);
4827             values.push(record.get(this.toMultiselect.valueField));
4828         }
4829         this.hiddenField.dom.value = values.join(this.delimiter);
4830         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
4831     },
4832
4833     getValue : function() {
4834         return this.hiddenField.dom.value;
4835     },
4836
4837     onRowDblClick : function(vw, index, node, e) {
4838         if (vw == this.toMultiselect.view){
4839             this.toFrom();
4840         } else if (vw == this.fromMultiselect.view) {
4841             this.fromTo();
4842         }
4843         return this.fireEvent('rowdblclick', vw, index, node, e);
4844     },
4845
4846     reset: function(){
4847         range = this.toMultiselect.store.getRange();
4848         this.toMultiselect.store.removeAll();
4849         this.fromMultiselect.store.add(range);
4850         var si = this.fromMultiselect.store.sortInfo;
4851         if (si){
4852             this.fromMultiselect.store.sort(si.field, si.direction);
4853         }
4854         this.valueChanged(this.toMultiselect.store);
4855     }
4856 });
4857
4858 Ext.reg('itemselector', Ext.ux.form.ItemSelector);
4859
4860 //backwards compat
4861 Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
4862 /*!
4863  * Ext JS Library 3.3.0
4864  * Copyright(c) 2006-2010 Ext JS, Inc.
4865  * licensing@extjs.com
4866  * http://www.extjs.com/license
4867  */
4868 Ext.ns('Ext.ux.grid');
4869
4870 Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
4871     lockText : 'Lock',
4872     unlockText : 'Unlock',
4873     rowBorderWidth : 1,
4874     lockedBorderWidth : 1,
4875
4876     /*
4877      * This option ensures that height between the rows is synchronized
4878      * between the locked and unlocked sides. This option only needs to be used
4879      * when the row heights aren't predictable.
4880      */
4881     syncHeights: false,
4882
4883     initTemplates : function(){
4884         var ts = this.templates || {};
4885
4886         if (!ts.masterTpl) {
4887             ts.masterTpl = new Ext.Template(
4888                 '<div class="x-grid3" hidefocus="true">',
4889                     '<div class="x-grid3-locked">',
4890                         '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{lstyle}">{lockedHeader}</div></div><div class="x-clear"></div></div>',
4891                         '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
4892                     '</div>',
4893                     '<div class="x-grid3-viewport x-grid3-unlocked">',
4894                         '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
4895                         '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
4896                     '</div>',
4897                     '<div class="x-grid3-resize-marker">&#160;</div>',
4898                     '<div class="x-grid3-resize-proxy">&#160;</div>',
4899                 '</div>'
4900             );
4901         }
4902
4903         this.templates = ts;
4904
4905         Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
4906     },
4907
4908     getEditorParent : function(ed){
4909         return this.el.dom;
4910     },
4911
4912     initElements : function(){
4913         var el             = Ext.get(this.grid.getGridEl().dom.firstChild),
4914             lockedWrap     = el.child('div.x-grid3-locked'),
4915             lockedHd       = lockedWrap.child('div.x-grid3-header'),
4916             lockedScroller = lockedWrap.child('div.x-grid3-scroller'),
4917             mainWrap       = el.child('div.x-grid3-viewport'),
4918             mainHd         = mainWrap.child('div.x-grid3-header'),
4919             scroller       = mainWrap.child('div.x-grid3-scroller');
4920
4921         if (this.grid.hideHeaders) {
4922             lockedHd.setDisplayed(false);
4923             mainHd.setDisplayed(false);
4924         }
4925
4926         if(this.forceFit){
4927             scroller.setStyle('overflow-x', 'hidden');
4928         }
4929
4930         Ext.apply(this, {
4931             el      : el,
4932             mainWrap: mainWrap,
4933             mainHd  : mainHd,
4934             innerHd : mainHd.dom.firstChild,
4935             scroller: scroller,
4936             mainBody: scroller.child('div.x-grid3-body'),
4937             focusEl : scroller.child('a'),
4938             resizeMarker: el.child('div.x-grid3-resize-marker'),
4939             resizeProxy : el.child('div.x-grid3-resize-proxy'),
4940             lockedWrap: lockedWrap,
4941             lockedHd: lockedHd,
4942             lockedScroller: lockedScroller,
4943             lockedBody: lockedScroller.child('div.x-grid3-body'),
4944             lockedInnerHd: lockedHd.child('div.x-grid3-header-inner', true)
4945         });
4946
4947         this.focusEl.swallowEvent('click', true);
4948     },
4949
4950     getLockedRows : function(){
4951         return this.hasRows() ? this.lockedBody.dom.childNodes : [];
4952     },
4953
4954     getLockedRow : function(row){
4955         return this.getLockedRows()[row];
4956     },
4957
4958     getCell : function(row, col){
4959         var lockedLen = this.cm.getLockedCount();
4960         if(col < lockedLen){
4961             return this.getLockedRow(row).getElementsByTagName('td')[col];
4962         }
4963         return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - lockedLen);
4964     },
4965
4966     getHeaderCell : function(index){
4967         var lockedLen = this.cm.getLockedCount();
4968         if(index < lockedLen){
4969             return this.lockedHd.dom.getElementsByTagName('td')[index];
4970         }
4971         return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - lockedLen);
4972     },
4973
4974     addRowClass : function(row, cls){
4975         var lockedRow = this.getLockedRow(row);
4976         if(lockedRow){
4977             this.fly(lockedRow).addClass(cls);
4978         }
4979         Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
4980     },
4981
4982     removeRowClass : function(row, cls){
4983         var lockedRow = this.getLockedRow(row);
4984         if(lockedRow){
4985             this.fly(lockedRow).removeClass(cls);
4986         }
4987         Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
4988     },
4989
4990     removeRow : function(row) {
4991         Ext.removeNode(this.getLockedRow(row));
4992         Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
4993     },
4994
4995     removeRows : function(firstRow, lastRow){
4996         var lockedBody = this.lockedBody.dom,
4997             rowIndex = firstRow;
4998         for(; rowIndex <= lastRow; rowIndex++){
4999             Ext.removeNode(lockedBody.childNodes[firstRow]);
5000         }
5001         Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
5002     },
5003
5004     syncScroll : function(e){
5005         this.lockedScroller.dom.scrollTop = this.scroller.dom.scrollTop;
5006         Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
5007     },
5008
5009     updateSortIcon : function(col, dir){
5010         var sortClasses = this.sortClasses,
5011             lockedHeaders = this.lockedHd.select('td').removeClass(sortClasses),
5012             headers = this.mainHd.select('td').removeClass(sortClasses),
5013             lockedLen = this.cm.getLockedCount(),
5014             cls = sortClasses[dir == 'DESC' ? 1 : 0];
5015
5016         if(col < lockedLen){
5017             lockedHeaders.item(col).addClass(cls);
5018         }else{
5019             headers.item(col - lockedLen).addClass(cls);
5020         }
5021     },
5022
5023     updateAllColumnWidths : function(){
5024         var tw = this.getTotalWidth(),
5025             clen = this.cm.getColumnCount(),
5026             lw = this.getLockedWidth(),
5027             llen = this.cm.getLockedCount(),
5028             ws = [], len, i;
5029         this.updateLockedWidth();
5030         for(i = 0; i < clen; i++){
5031             ws[i] = this.getColumnWidth(i);
5032             var hd = this.getHeaderCell(i);
5033             hd.style.width = ws[i];
5034         }
5035         var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
5036         for(i = 0, len = ns.length; i < len; i++){
5037             row = lns[i];
5038             row.style.width = lw;
5039             if(row.firstChild){
5040                 row.firstChild.style.width = lw;
5041                 trow = row.firstChild.rows[0];
5042                 for (j = 0; j < llen; j++) {
5043                    trow.childNodes[j].style.width = ws[j];
5044                 }
5045             }
5046             row = ns[i];
5047             row.style.width = tw;
5048             if(row.firstChild){
5049                 row.firstChild.style.width = tw;
5050                 trow = row.firstChild.rows[0];
5051                 for (j = llen; j < clen; j++) {
5052                    trow.childNodes[j - llen].style.width = ws[j];
5053                 }
5054             }
5055         }
5056         this.onAllColumnWidthsUpdated(ws, tw);
5057         this.syncHeaderHeight();
5058     },
5059
5060     updateColumnWidth : function(col, width){
5061         var w = this.getColumnWidth(col),
5062             llen = this.cm.getLockedCount(),
5063             ns, rw, c, row;
5064         this.updateLockedWidth();
5065         if(col < llen){
5066             ns = this.getLockedRows();
5067             rw = this.getLockedWidth();
5068             c = col;
5069         }else{
5070             ns = this.getRows();
5071             rw = this.getTotalWidth();
5072             c = col - llen;
5073         }
5074         var hd = this.getHeaderCell(col);
5075         hd.style.width = w;
5076         for(var i = 0, len = ns.length; i < len; i++){
5077             row = ns[i];
5078             row.style.width = rw;
5079             if(row.firstChild){
5080                 row.firstChild.style.width = rw;
5081                 row.firstChild.rows[0].childNodes[c].style.width = w;
5082             }
5083         }
5084         this.onColumnWidthUpdated(col, w, this.getTotalWidth());
5085         this.syncHeaderHeight();
5086     },
5087
5088     updateColumnHidden : function(col, hidden){
5089         var llen = this.cm.getLockedCount(),
5090             ns, rw, c, row,
5091             display = hidden ? 'none' : '';
5092         this.updateLockedWidth();
5093         if(col < llen){
5094             ns = this.getLockedRows();
5095             rw = this.getLockedWidth();
5096             c = col;
5097         }else{
5098             ns = this.getRows();
5099             rw = this.getTotalWidth();
5100             c = col - llen;
5101         }
5102         var hd = this.getHeaderCell(col);
5103         hd.style.display = display;
5104         for(var i = 0, len = ns.length; i < len; i++){
5105             row = ns[i];
5106             row.style.width = rw;
5107             if(row.firstChild){
5108                 row.firstChild.style.width = rw;
5109                 row.firstChild.rows[0].childNodes[c].style.display = display;
5110             }
5111         }
5112         this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
5113         delete this.lastViewWidth;
5114         this.layout();
5115     },
5116
5117     doRender : function(cs, rs, ds, startRow, colCount, stripe){
5118         var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
5119             tstyle = 'width:'+this.getTotalWidth()+';',
5120             lstyle = 'width:'+this.getLockedWidth()+';',
5121             buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
5122         for(var j = 0, len = rs.length; j < len; j++){
5123             r = rs[j]; cb = []; lcb = [];
5124             var rowIndex = (j+startRow);
5125             for(var i = 0; i < colCount; i++){
5126                 c = cs[i];
5127                 p.id = c.id;
5128                 p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
5129                     (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
5130                 p.attr = p.cellAttr = '';
5131                 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
5132                 p.style = c.style;
5133                 if(Ext.isEmpty(p.value)){
5134                     p.value = '&#160;';
5135                 }
5136                 if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
5137                     p.css += ' x-grid3-dirty-cell';
5138                 }
5139                 if(c.locked){
5140                     lcb[lcb.length] = ct.apply(p);
5141                 }else{
5142                     cb[cb.length] = ct.apply(p);
5143                 }
5144             }
5145             var alt = [];
5146             if(stripe && ((rowIndex+1) % 2 === 0)){
5147                 alt[0] = 'x-grid3-row-alt';
5148             }
5149             if(r.dirty){
5150                 alt[1] = ' x-grid3-dirty-row';
5151             }
5152             rp.cols = colCount;
5153             if(this.getRowClass){
5154                 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
5155             }
5156             rp.alt = alt.join(' ');
5157             rp.cells = cb.join('');
5158             rp.tstyle = tstyle;
5159             buf[buf.length] = rt.apply(rp);
5160             rp.cells = lcb.join('');
5161             rp.tstyle = lstyle;
5162             lbuf[lbuf.length] = rt.apply(rp);
5163         }
5164         return [buf.join(''), lbuf.join('')];
5165     },
5166     processRows : function(startRow, skipStripe){
5167         if(!this.ds || this.ds.getCount() < 1){
5168             return;
5169         }
5170         var rows = this.getRows(),
5171             lrows = this.getLockedRows(),
5172             row, lrow;
5173         skipStripe = skipStripe || !this.grid.stripeRows;
5174         startRow = startRow || 0;
5175         for(var i = 0, len = rows.length; i < len; ++i){
5176             row = rows[i];
5177             lrow = lrows[i];
5178             row.rowIndex = i;
5179             lrow.rowIndex = i;
5180             if(!skipStripe){
5181                 row.className = row.className.replace(this.rowClsRe, ' ');
5182                 lrow.className = lrow.className.replace(this.rowClsRe, ' ');
5183                 if ((i + 1) % 2 === 0){
5184                     row.className += ' x-grid3-row-alt';
5185                     lrow.className += ' x-grid3-row-alt';
5186                 }
5187             }
5188             this.syncRowHeights(row, lrow);
5189         }
5190         if(startRow === 0){
5191             Ext.fly(rows[0]).addClass(this.firstRowCls);
5192             Ext.fly(lrows[0]).addClass(this.firstRowCls);
5193         }
5194         Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
5195         Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
5196     },
5197
5198     syncRowHeights: function(row1, row2){
5199         if(this.syncHeights){
5200             var el1 = Ext.get(row1),
5201                 el2 = Ext.get(row2),
5202                 h1 = el1.getHeight(),
5203                 h2 = el2.getHeight();
5204
5205             if(h1 > h2){
5206                 el2.setHeight(h1);
5207             }else if(h2 > h1){
5208                 el1.setHeight(h2);
5209             }
5210         }
5211     },
5212
5213     afterRender : function(){
5214         if(!this.ds || !this.cm){
5215             return;
5216         }
5217         var bd = this.renderRows() || ['&#160;', '&#160;'];
5218         this.mainBody.dom.innerHTML = bd[0];
5219         this.lockedBody.dom.innerHTML = bd[1];
5220         this.processRows(0, true);
5221         if(this.deferEmptyText !== true){
5222             this.applyEmptyText();
5223         }
5224         this.grid.fireEvent('viewready', this.grid);
5225     },
5226
5227     renderUI : function(){
5228         var templates = this.templates,
5229             header = this.renderHeaders(),
5230             body = templates.body.apply({rows:'&#160;'});
5231
5232         return templates.masterTpl.apply({
5233             body  : body,
5234             header: header[0],
5235             ostyle: 'width:' + this.getOffsetWidth() + ';',
5236             bstyle: 'width:' + this.getTotalWidth()  + ';',
5237             lockedBody: body,
5238             lockedHeader: header[1],
5239             lstyle: 'width:'+this.getLockedWidth()+';'
5240         });
5241     },
5242
5243     afterRenderUI: function(){
5244         var g = this.grid;
5245         this.initElements();
5246         Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
5247         Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
5248         this.mainHd.on({
5249             scope: this,
5250             mouseover: this.handleHdOver,
5251             mouseout: this.handleHdOut,
5252             mousemove: this.handleHdMove
5253         });
5254         this.lockedHd.on({
5255             scope: this,
5256             mouseover: this.handleHdOver,
5257             mouseout: this.handleHdOut,
5258             mousemove: this.handleHdMove
5259         });
5260         this.scroller.on('scroll', this.syncScroll,  this);
5261         if(g.enableColumnResize !== false){
5262             this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
5263             this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
5264             this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
5265         }
5266         if(g.enableColumnMove){
5267             this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
5268             this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
5269             this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
5270             this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
5271         }
5272         if(g.enableHdMenu !== false){
5273             this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
5274             this.hmenu.add(
5275                 {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
5276                 {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
5277             );
5278             if(this.grid.enableColLock !== false){
5279                 this.hmenu.add('-',
5280                     {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
5281                     {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
5282                 );
5283             }
5284             if(g.enableColumnHide !== false){
5285                 this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
5286                 this.colMenu.on({
5287                     scope: this,
5288                     beforeshow: this.beforeColMenuShow,
5289                     itemclick: this.handleHdMenuClick
5290                 });
5291                 this.hmenu.add('-', {
5292                     itemId:'columns',
5293                     hideOnClick: false,
5294                     text: this.columnsText,
5295                     menu: this.colMenu,
5296                     iconCls: 'x-cols-icon'
5297                 });
5298             }
5299             this.hmenu.on('itemclick', this.handleHdMenuClick, this);
5300         }
5301         if(g.trackMouseOver){
5302             this.mainBody.on({
5303                 scope: this,
5304                 mouseover: this.onRowOver,
5305                 mouseout: this.onRowOut
5306             });
5307             this.lockedBody.on({
5308                 scope: this,
5309                 mouseover: this.onRowOver,
5310                 mouseout: this.onRowOut
5311             });
5312         }
5313
5314         if(g.enableDragDrop || g.enableDrag){
5315             this.dragZone = new Ext.grid.GridDragZone(g, {
5316                 ddGroup : g.ddGroup || 'GridDD'
5317             });
5318         }
5319         this.updateHeaderSortState();
5320     },
5321
5322     layout : function(){
5323         if(!this.mainBody){
5324             return;
5325         }
5326         var g = this.grid;
5327         var c = g.getGridEl();
5328         var csize = c.getSize(true);
5329         var vw = csize.width;
5330         if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
5331             return;
5332         }
5333         this.syncHeaderHeight();
5334         if(g.autoHeight){
5335             this.scroller.dom.style.overflow = 'visible';
5336             this.lockedScroller.dom.style.overflow = 'visible';
5337             if(Ext.isWebKit){
5338                 this.scroller.dom.style.position = 'static';
5339                 this.lockedScroller.dom.style.position = 'static';
5340             }
5341         }else{
5342             this.el.setSize(csize.width, csize.height);
5343             var hdHeight = this.mainHd.getHeight();
5344             var vh = csize.height - (hdHeight);
5345         }
5346         this.updateLockedWidth();
5347         if(this.forceFit){
5348             if(this.lastViewWidth != vw){
5349                 this.fitColumns(false, false);
5350                 this.lastViewWidth = vw;
5351             }
5352         }else {
5353             this.autoExpand();
5354             this.syncHeaderScroll();
5355         }
5356         this.onLayout(vw, vh);
5357     },
5358
5359     getOffsetWidth : function() {
5360         return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
5361     },
5362
5363     renderHeaders : function(){
5364         var cm = this.cm,
5365             ts = this.templates,
5366             ct = ts.hcell,
5367             cb = [], lcb = [],
5368             p = {},
5369             len = cm.getColumnCount(),
5370             last = len - 1;
5371         for(var i = 0; i < len; i++){
5372             p.id = cm.getColumnId(i);
5373             p.value = cm.getColumnHeader(i) || '';
5374             p.style = this.getColumnStyle(i, true);
5375             p.tooltip = this.getColumnTooltip(i);
5376             p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
5377                 (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
5378             if(cm.config[i].align == 'right'){
5379                 p.istyle = 'padding-right:16px';
5380             } else {
5381                 delete p.istyle;
5382             }
5383             if(cm.isLocked(i)){
5384                 lcb[lcb.length] = ct.apply(p);
5385             }else{
5386                 cb[cb.length] = ct.apply(p);
5387             }
5388         }
5389         return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
5390                 ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
5391     },
5392
5393     updateHeaders : function(){
5394         var hd = this.renderHeaders();
5395         this.innerHd.firstChild.innerHTML = hd[0];
5396         this.innerHd.firstChild.style.width = this.getOffsetWidth();
5397         this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
5398         this.lockedInnerHd.firstChild.innerHTML = hd[1];
5399         var lw = this.getLockedWidth();
5400         this.lockedInnerHd.firstChild.style.width = lw;
5401         this.lockedInnerHd.firstChild.firstChild.style.width = lw;
5402     },
5403
5404     getResolvedXY : function(resolved){
5405         if(!resolved){
5406             return null;
5407         }
5408         var c = resolved.cell, r = resolved.row;
5409         return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
5410     },
5411
5412     syncFocusEl : function(row, col, hscroll){
5413         Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
5414     },
5415
5416     ensureVisible : function(row, col, hscroll){
5417         return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
5418     },
5419
5420     insertRows : function(dm, firstRow, lastRow, isUpdate){
5421         var last = dm.getCount() - 1;
5422         if(!isUpdate && firstRow === 0 && lastRow >= last){
5423             this.refresh();
5424         }else{
5425             if(!isUpdate){
5426                 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
5427             }
5428             var html = this.renderRows(firstRow, lastRow),
5429                 before = this.getRow(firstRow);
5430             if(before){
5431                 if(firstRow === 0){
5432                     this.removeRowClass(0, this.firstRowCls);
5433                 }
5434                 Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
5435                 before = this.getLockedRow(firstRow);
5436                 Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
5437             }else{
5438                 this.removeRowClass(last - 1, this.lastRowCls);
5439                 Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
5440                 Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
5441             }
5442             if(!isUpdate){
5443                 this.fireEvent('rowsinserted', this, firstRow, lastRow);
5444                 this.processRows(firstRow);
5445             }else if(firstRow === 0 || firstRow >= last){
5446                 this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
5447             }
5448         }
5449         this.syncFocusEl(firstRow);
5450     },
5451
5452     getColumnStyle : function(col, isHeader){
5453         var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
5454         style += 'width:'+this.getColumnWidth(col)+';';
5455         if(this.cm.isHidden(col)){
5456             style += 'display:none;';
5457         }
5458         var align = this.cm.config[col].align;
5459         if(align){
5460             style += 'text-align:'+align+';';
5461         }
5462         return style;
5463     },
5464
5465     getLockedWidth : function() {
5466         return this.cm.getTotalLockedWidth() + 'px';
5467     },
5468
5469     getTotalWidth : function() {
5470         return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
5471     },
5472
5473     getColumnData : function(){
5474         var cs = [], cm = this.cm, colCount = cm.getColumnCount();
5475         for(var i = 0; i < colCount; i++){
5476             var name = cm.getDataIndex(i);
5477             cs[i] = {
5478                 name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
5479                 renderer : cm.getRenderer(i),
5480                 id : cm.getColumnId(i),
5481                 style : this.getColumnStyle(i),
5482                 locked : cm.isLocked(i)
5483             };
5484         }
5485         return cs;
5486     },
5487
5488     renderBody : function(){
5489         var markup = this.renderRows() || ['&#160;', '&#160;'];
5490         return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
5491     },
5492
5493     refreshRow: function(record){
5494         var store = this.ds,
5495             colCount = this.cm.getColumnCount(),
5496             columns = this.getColumnData(),
5497             last = colCount - 1,
5498             cls = ['x-grid3-row'],
5499             rowParams = {
5500                 tstyle: String.format("width: {0};", this.getTotalWidth())
5501             },
5502             lockedRowParams = {
5503                 tstyle: String.format("width: {0};", this.getLockedWidth())
5504             },
5505             colBuffer = [],
5506             lockedColBuffer = [],
5507             cellTpl = this.templates.cell,
5508             rowIndex,
5509             row,
5510             lockedRow,
5511             column,
5512             meta,
5513             css,
5514             i;
5515
5516         if (Ext.isNumber(record)) {
5517             rowIndex = record;
5518             record = store.getAt(rowIndex);
5519         } else {
5520             rowIndex = store.indexOf(record);
5521         }
5522
5523         if (!record || rowIndex < 0) {
5524             return;
5525         }
5526
5527         for (i = 0; i < colCount; i++) {
5528             column = columns[i];
5529
5530             if (i == 0) {
5531                 css = 'x-grid3-cell-first';
5532             } else {
5533                 css = (i == last) ? 'x-grid3-cell-last ' : '';
5534             }
5535
5536             meta = {
5537                 id: column.id,
5538                 style: column.style,
5539                 css: css,
5540                 attr: "",
5541                 cellAttr: ""
5542             };
5543
5544             meta.value = column.renderer.call(column.scope, record.data[column.name], meta, record, rowIndex, i, store);
5545
5546             if (Ext.isEmpty(meta.value)) {
5547                 meta.value = ' ';
5548             }
5549
5550             if (this.markDirty && record.dirty && typeof record.modified[column.name] != 'undefined') {
5551                 meta.css += ' x-grid3-dirty-cell';
5552             }
5553
5554             if (column.locked) {
5555                 lockedColBuffer[i] = cellTpl.apply(meta);
5556             } else {
5557                 colBuffer[i] = cellTpl.apply(meta);
5558             }
5559         }
5560
5561         row = this.getRow(rowIndex);
5562         row.className = '';
5563         lockedRow = this.getLockedRow(rowIndex);
5564         lockedRow.className = '';
5565
5566         if (this.grid.stripeRows && ((rowIndex + 1) % 2 === 0)) {
5567             cls.push('x-grid3-row-alt');
5568         }
5569
5570         if (this.getRowClass) {
5571             rowParams.cols = colCount;
5572             cls.push(this.getRowClass(record, rowIndex, rowParams, store));
5573         }
5574
5575         // Unlocked rows
5576         this.fly(row).addClass(cls).setStyle(rowParams.tstyle);
5577         rowParams.cells = colBuffer.join("");
5578         row.innerHTML = this.templates.rowInner.apply(rowParams);
5579
5580         // Locked rows
5581         this.fly(lockedRow).addClass(cls).setStyle(lockedRowParams.tstyle);
5582         lockedRowParams.cells = lockedColBuffer.join("");
5583         lockedRow.innerHTML = this.templates.rowInner.apply(lockedRowParams);
5584         lockedRow.rowIndex = rowIndex;
5585         this.syncRowHeights(row, lockedRow);
5586         this.fireEvent('rowupdated', this, rowIndex, record);
5587     },
5588
5589     refresh : function(headersToo){
5590         this.fireEvent('beforerefresh', this);
5591         this.grid.stopEditing(true);
5592         var result = this.renderBody();
5593         this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
5594         this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
5595         if(headersToo === true){
5596             this.updateHeaders();
5597             this.updateHeaderSortState();
5598         }
5599         this.processRows(0, true);
5600         this.layout();
5601         this.applyEmptyText();
5602         this.fireEvent('refresh', this);
5603     },
5604
5605     onDenyColumnLock : function(){
5606
5607     },
5608
5609     initData : function(ds, cm){
5610         if(this.cm){
5611             this.cm.un('columnlockchange', this.onColumnLock, this);
5612         }
5613         Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
5614         if(this.cm){
5615             this.cm.on('columnlockchange', this.onColumnLock, this);
5616         }
5617     },
5618
5619     onColumnLock : function(){
5620         this.refresh(true);
5621     },
5622
5623     handleHdMenuClick : function(item){
5624         var index = this.hdCtxIndex,
5625             cm = this.cm,
5626             id = item.getItemId(),
5627             llen = cm.getLockedCount();
5628         switch(id){
5629             case 'lock':
5630                 if(cm.getColumnCount(true) <= llen + 1){
5631                     this.onDenyColumnLock();
5632                     return undefined;
5633                 }
5634                 cm.setLocked(index, true);
5635                 if(llen != index){
5636                     cm.moveColumn(index, llen);
5637                     this.grid.fireEvent('columnmove', index, llen);
5638                 }
5639             break;
5640             case 'unlock':
5641                 if(llen - 1 != index){
5642                     cm.setLocked(index, false, true);
5643                     cm.moveColumn(index, llen - 1);
5644                     this.grid.fireEvent('columnmove', index, llen - 1);
5645                 }else{
5646                     cm.setLocked(index, false);
5647                 }
5648             break;
5649             default:
5650                 return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
5651         }
5652         return true;
5653     },
5654
5655     handleHdDown : function(e, t){
5656         Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
5657         if(this.grid.enableColLock !== false){
5658             if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
5659                 var hd = this.findHeaderCell(t),
5660                     index = this.getCellIndex(hd),
5661                     ms = this.hmenu.items, cm = this.cm;
5662                 ms.get('lock').setDisabled(cm.isLocked(index));
5663                 ms.get('unlock').setDisabled(!cm.isLocked(index));
5664             }
5665         }
5666     },
5667
5668     syncHeaderHeight: function(){
5669         var hrow = Ext.fly(this.innerHd).child('tr', true),
5670             lhrow = Ext.fly(this.lockedInnerHd).child('tr', true);
5671
5672         hrow.style.height = 'auto';
5673         lhrow.style.height = 'auto';
5674         var hd = hrow.offsetHeight,
5675             lhd = lhrow.offsetHeight,
5676             height = Math.max(lhd, hd) + 'px';
5677
5678         hrow.style.height = height;
5679         lhrow.style.height = height;
5680
5681     },
5682
5683     updateLockedWidth: function(){
5684         var lw = this.cm.getTotalLockedWidth(),
5685             tw = this.cm.getTotalWidth() - lw,
5686             csize = this.grid.getGridEl().getSize(true),
5687             lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
5688             rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
5689             vw = (csize.width - lw - lp - rp) + 'px',
5690             so = this.getScrollOffset();
5691         if(!this.grid.autoHeight){
5692             var vh = (csize.height - this.mainHd.getHeight()) + 'px';
5693             this.lockedScroller.dom.style.height = vh;
5694             this.scroller.dom.style.height = vh;
5695         }
5696         this.lockedWrap.dom.style.width = (lw + rp) + 'px';
5697         this.scroller.dom.style.width = vw;
5698         this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
5699         if(this.innerHd){
5700             this.lockedInnerHd.firstChild.style.width = lw + 'px';
5701             this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
5702             this.innerHd.style.width = vw;
5703             this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
5704             this.innerHd.firstChild.firstChild.style.width = tw + 'px';
5705         }
5706         if(this.mainBody){
5707             this.lockedBody.dom.style.width = (lw + rp) + 'px';
5708             this.mainBody.dom.style.width = (tw + rp) + 'px';
5709         }
5710     }
5711 });
5712
5713 Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
5714     <div id="method-Ext.ux.form.ItemSelector-isLocked"></div>/**
5715      * Returns true if the given column index is currently locked
5716      * @param {Number} colIndex The column index
5717      * @return {Boolean} True if the column is locked
5718      */
5719     isLocked : function(colIndex){
5720         return this.config[colIndex].locked === true;
5721     },
5722
5723     <div id="method-Ext.ux.form.ItemSelector-setLocked"></div>/**
5724      * Locks or unlocks a given column
5725      * @param {Number} colIndex The column index
5726      * @param {Boolean} value True to lock, false to unlock
5727      * @param {Boolean} suppressEvent Pass false to cause the columnlockchange event not to fire
5728      */
5729     setLocked : function(colIndex, value, suppressEvent){
5730         if (this.isLocked(colIndex) == value) {
5731             return;
5732         }
5733         this.config[colIndex].locked = value;
5734         if (!suppressEvent) {
5735             this.fireEvent('columnlockchange', this, colIndex, value);
5736         }
5737     },
5738
5739     <div id="method-Ext.ux.form.ItemSelector-getTotalLockedWidth"></div>/**
5740      * Returns the total width of all locked columns
5741      * @return {Number} The width of all locked columns
5742      */
5743     getTotalLockedWidth : function(){
5744         var totalWidth = 0;
5745         for (var i = 0, len = this.config.length; i < len; i++) {
5746             if (this.isLocked(i) && !this.isHidden(i)) {
5747                 totalWidth += this.getColumnWidth(i);
5748             }
5749         }
5750
5751         return totalWidth;
5752     },
5753
5754     <div id="method-Ext.ux.form.ItemSelector-getLockedCount"></div>/**
5755      * Returns the total number of locked columns
5756      * @return {Number} The number of locked columns
5757      */
5758     getLockedCount : function() {
5759         var len = this.config.length;
5760
5761         for (var i = 0; i < len; i++) {
5762             if (!this.isLocked(i)) {
5763                 return i;
5764             }
5765         }
5766
5767         //if we get to this point all of the columns are locked so we return the total
5768         return len;
5769     },
5770
5771     <div id="method-Ext.ux.form.ItemSelector-moveColumn"></div>/**
5772      * Moves a column from one position to another
5773      * @param {Number} oldIndex The current column index
5774      * @param {Number} newIndex The destination column index
5775      */
5776     moveColumn : function(oldIndex, newIndex){
5777         var oldLocked = this.isLocked(oldIndex),
5778             newLocked = this.isLocked(newIndex);
5779
5780         if (oldIndex < newIndex && oldLocked && !newLocked) {
5781             this.setLocked(oldIndex, false, true);
5782         } else if (oldIndex > newIndex && !oldLocked && newLocked) {
5783             this.setLocked(oldIndex, true, true);
5784         }
5785
5786         Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
5787     }
5788 });Ext.ns('Ext.ux.form');
5789
5790 /**
5791  * @class Ext.ux.form.MultiSelect
5792  * @extends Ext.form.Field
5793  * A control that allows selection and form submission of multiple list items.
5794  *
5795  *  @history
5796  *    2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
5797  *    2008-06-19 bpm Docs and demo code clean up
5798  *
5799  * @constructor
5800  * Create a new MultiSelect
5801  * @param {Object} config Configuration options
5802  * @xtype multiselect
5803  */
5804 Ext.ux.form.MultiSelect = Ext.extend(Ext.form.Field,  {
5805     <div id="cfg-Ext.ux.form.MultiSelect-legend"></div>/**
5806      * @cfg {String} legend Wraps the object with a fieldset and specified legend.
5807      */
5808     <div id="cfg-Ext.ux.form.MultiSelect-view"></div>/**
5809      * @cfg {Ext.ListView} view The {@link Ext.ListView} used to render the multiselect list.
5810      */
5811     <div id="cfg-Ext.ux.form.MultiSelect-dragGroup"></div>/**
5812      * @cfg {String/Array} dragGroup The ddgroup name(s) for the MultiSelect DragZone (defaults to undefined).
5813      */
5814     <div id="cfg-Ext.ux.form.MultiSelect-dropGroup"></div>/**
5815      * @cfg {String/Array} dropGroup The ddgroup name(s) for the MultiSelect DropZone (defaults to undefined).
5816      */
5817     <div id="cfg-Ext.ux.form.MultiSelect-ddReorder"></div>/**
5818      * @cfg {Boolean} ddReorder Whether the items in the MultiSelect list are drag/drop reorderable (defaults to false).
5819      */
5820     ddReorder:false,
5821     <div id="cfg-Ext.ux.form.MultiSelect-tbar"></div>/**
5822      * @cfg {Object/Array} tbar The top toolbar of the control. This can be a {@link Ext.Toolbar} object, a
5823      * toolbar config, or an array of buttons/button configs to be added to the toolbar.
5824      */
5825     <div id="cfg-Ext.ux.form.MultiSelect-appendOnly"></div>/**
5826      * @cfg {String} appendOnly True if the list should only allow append drops when drag/drop is enabled
5827      * (use for lists which are sorted, defaults to false).
5828      */
5829     appendOnly:false,
5830     <div id="cfg-Ext.ux.form.MultiSelect-width"></div>/**
5831      * @cfg {Number} width Width in pixels of the control (defaults to 100).
5832      */
5833     width:100,
5834     <div id="cfg-Ext.ux.form.MultiSelect-height"></div>/**
5835      * @cfg {Number} height Height in pixels of the control (defaults to 100).
5836      */
5837     height:100,
5838     <div id="cfg-Ext.ux.form.MultiSelect-displayField"></div>/**
5839      * @cfg {String/Number} displayField Name/Index of the desired display field in the dataset (defaults to 0).
5840      */
5841     displayField:0,
5842     <div id="cfg-Ext.ux.form.MultiSelect-valueField"></div>/**
5843      * @cfg {String/Number} valueField Name/Index of the desired value field in the dataset (defaults to 1).
5844      */
5845     valueField:1,
5846     <div id="cfg-Ext.ux.form.MultiSelect-allowBlank"></div>/**
5847      * @cfg {Boolean} allowBlank False to require at least one item in the list to be selected, true to allow no
5848      * selection (defaults to true).
5849      */
5850     allowBlank:true,
5851     <div id="cfg-Ext.ux.form.MultiSelect-minSelections"></div>/**
5852      * @cfg {Number} minSelections Minimum number of selections allowed (defaults to 0).
5853      */
5854     minSelections:0,
5855     <div id="cfg-Ext.ux.form.MultiSelect-maxSelections"></div>/**
5856      * @cfg {Number} maxSelections Maximum number of selections allowed (defaults to Number.MAX_VALUE).
5857      */
5858     maxSelections:Number.MAX_VALUE,
5859     <div id="cfg-Ext.ux.form.MultiSelect-blankText"></div>/**
5860      * @cfg {String} blankText Default text displayed when the control contains no items (defaults to the same value as
5861      * {@link Ext.form.TextField#blankText}.
5862      */
5863     blankText:Ext.form.TextField.prototype.blankText,
5864     <div id="cfg-Ext.ux.form.MultiSelect-minSelectionsText"></div>/**
5865      * @cfg {String} minSelectionsText Validation message displayed when {@link #minSelections} is not met (defaults to 'Minimum {0}
5866      * item(s) required').  The {0} token will be replaced by the value of {@link #minSelections}.
5867      */
5868     minSelectionsText:'Minimum {0} item(s) required',
5869     <div id="cfg-Ext.ux.form.MultiSelect-maxSelectionsText"></div>/**
5870      * @cfg {String} maxSelectionsText Validation message displayed when {@link #maxSelections} is not met (defaults to 'Maximum {0}
5871      * item(s) allowed').  The {0} token will be replaced by the value of {@link #maxSelections}.
5872      */
5873     maxSelectionsText:'Maximum {0} item(s) allowed',
5874     <div id="cfg-Ext.ux.form.MultiSelect-delimiter"></div>/**
5875      * @cfg {String} delimiter The string used to delimit between items when set or returned as a string of values
5876      * (defaults to ',').
5877      */
5878     delimiter:',',
5879     <div id="cfg-Ext.ux.form.MultiSelect-store"></div>/**
5880      * @cfg {Ext.data.Store/Array} store The data source to which this MultiSelect is bound (defaults to <tt>undefined</tt>).
5881      * Acceptable values for this property are:
5882      * <div class="mdetail-params"><ul>
5883      * <li><b>any {@link Ext.data.Store Store} subclass</b></li>
5884      * <li><b>an Array</b> : Arrays will be converted to a {@link Ext.data.ArrayStore} internally.
5885      * <div class="mdetail-params"><ul>
5886      * <li><b>1-dimensional array</b> : (e.g., <tt>['Foo','Bar']</tt>)<div class="sub-desc">
5887      * A 1-dimensional array will automatically be expanded (each array item will be the combo
5888      * {@link #valueField value} and {@link #displayField text})</div></li>
5889      * <li><b>2-dimensional array</b> : (e.g., <tt>[['f','Foo'],['b','Bar']]</tt>)<div class="sub-desc">
5890      * For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo
5891      * {@link #valueField value}, while the value at index 1 is assumed to be the combo {@link #displayField text}.
5892      * </div></li></ul></div></li></ul></div>
5893      */
5894
5895     // private
5896     defaultAutoCreate : {tag: "div"},
5897
5898     // private
5899     initComponent: function(){
5900         Ext.ux.form.MultiSelect.superclass.initComponent.call(this);
5901
5902         if(Ext.isArray(this.store)){
5903             if (Ext.isArray(this.store[0])){
5904                 this.store = new Ext.data.ArrayStore({
5905                     fields: ['value','text'],
5906                     data: this.store
5907                 });
5908                 this.valueField = 'value';
5909             }else{
5910                 this.store = new Ext.data.ArrayStore({
5911                     fields: ['text'],
5912                     data: this.store,
5913                     expandData: true
5914                 });
5915                 this.valueField = 'text';
5916             }
5917             this.displayField = 'text';
5918         } else {
5919             this.store = Ext.StoreMgr.lookup(this.store);
5920         }
5921
5922         this.addEvents({
5923             'dblclick' : true,
5924             'click' : true,
5925             'change' : true,
5926             'drop' : true
5927         });
5928     },
5929
5930     // private
5931     onRender: function(ct, position){
5932         Ext.ux.form.MultiSelect.superclass.onRender.call(this, ct, position);
5933
5934         var fs = this.fs = new Ext.form.FieldSet({
5935             renderTo: this.el,
5936             title: this.legend,
5937             height: this.height,
5938             width: this.width,
5939             style: "padding:0;",
5940             tbar: this.tbar
5941         });
5942         fs.body.addClass('ux-mselect');
5943
5944         this.view = new Ext.ListView({
5945             multiSelect: true,
5946             store: this.store,
5947             columns: [{ header: 'Value', width: 1, dataIndex: this.displayField }],
5948             hideHeaders: true
5949         });
5950
5951         fs.add(this.view);
5952
5953         this.view.on('click', this.onViewClick, this);
5954         this.view.on('beforeclick', this.onViewBeforeClick, this);
5955         this.view.on('dblclick', this.onViewDblClick, this);
5956
5957         this.hiddenName = this.name || Ext.id();
5958         var hiddenTag = { tag: "input", type: "hidden", value: "", name: this.hiddenName };
5959         this.hiddenField = this.el.createChild(hiddenTag);
5960         this.hiddenField.dom.disabled = this.hiddenName != this.name;
5961         fs.doLayout();
5962     },
5963
5964     // private
5965     afterRender: function(){
5966         Ext.ux.form.MultiSelect.superclass.afterRender.call(this);
5967
5968         if (this.ddReorder && !this.dragGroup && !this.dropGroup){
5969             this.dragGroup = this.dropGroup = 'MultiselectDD-' + Ext.id();
5970         }
5971
5972         if (this.draggable || this.dragGroup){
5973             this.dragZone = new Ext.ux.form.MultiSelect.DragZone(this, {
5974                 ddGroup: this.dragGroup
5975             });
5976         }
5977         if (this.droppable || this.dropGroup){
5978             this.dropZone = new Ext.ux.form.MultiSelect.DropZone(this, {
5979                 ddGroup: this.dropGroup
5980             });
5981         }
5982     },
5983
5984     // private
5985     onViewClick: function(vw, index, node, e) {
5986         this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
5987         this.hiddenField.dom.value = this.getValue();
5988         this.fireEvent('click', this, e);
5989         this.validate();
5990     },
5991
5992     // private
5993     onViewBeforeClick: function(vw, index, node, e) {
5994         if (this.disabled || this.readOnly) {
5995             return false;
5996         }
5997     },
5998
5999     // private
6000     onViewDblClick : function(vw, index, node, e) {
6001         return this.fireEvent('dblclick', vw, index, node, e);
6002     },
6003
6004     <div id="method-Ext.ux.form.MultiSelect-getValue"></div>/**
6005      * Returns an array of data values for the selected items in the list. The values will be separated
6006      * by {@link #delimiter}.
6007      * @return {Array} value An array of string data values
6008      */
6009     getValue: function(valueField){
6010         var returnArray = [];
6011         var selectionsArray = this.view.getSelectedIndexes();
6012         if (selectionsArray.length == 0) {return '';}
6013         for (var i=0; i<selectionsArray.length; i++) {
6014             returnArray.push(this.store.getAt(selectionsArray[i]).get((valueField != null) ? valueField : this.valueField));
6015         }
6016         return returnArray.join(this.delimiter);
6017     },
6018
6019     <div id="method-Ext.ux.form.MultiSelect-setValue"></div>/**
6020      * Sets a delimited string (using {@link #delimiter}) or array of data values into the list.
6021      * @param {String/Array} values The values to set
6022      */
6023     setValue: function(values) {
6024         var index;
6025         var selections = [];
6026         this.view.clearSelections();
6027         this.hiddenField.dom.value = '';
6028
6029         if (!values || (values == '')) { return; }
6030
6031         if (!Ext.isArray(values)) { values = values.split(this.delimiter); }
6032         for (var i=0; i<values.length; i++) {
6033             index = this.view.store.indexOf(this.view.store.query(this.valueField,
6034                 new RegExp('^' + values[i] + '$', "i")).itemAt(0));
6035             selections.push(index);
6036         }
6037         this.view.select(selections);
6038         this.hiddenField.dom.value = this.getValue();
6039         this.validate();
6040     },
6041
6042     // inherit docs
6043     reset : function() {
6044         this.setValue('');
6045     },
6046
6047     // inherit docs
6048     getRawValue: function(valueField) {
6049         var tmp = this.getValue(valueField);
6050         if (tmp.length) {
6051             tmp = tmp.split(this.delimiter);
6052         }
6053         else {
6054             tmp = [];
6055         }
6056         return tmp;
6057     },
6058
6059     // inherit docs
6060     setRawValue: function(values){
6061         setValue(values);
6062     },
6063
6064     // inherit docs
6065     validateValue : function(value){
6066         if (value.length < 1) { // if it has no value
6067              if (this.allowBlank) {
6068                  this.clearInvalid();
6069                  return true;
6070              } else {
6071                  this.markInvalid(this.blankText);
6072                  return false;
6073              }
6074         }
6075         if (value.length < this.minSelections) {
6076             this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
6077             return false;
6078         }
6079         if (value.length > this.maxSelections) {
6080             this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
6081             return false;
6082         }
6083         return true;
6084     },
6085
6086     // inherit docs
6087     disable: function(){
6088         this.disabled = true;
6089         this.hiddenField.dom.disabled = true;
6090         this.fs.disable();
6091     },
6092
6093     // inherit docs
6094     enable: function(){
6095         this.disabled = false;
6096         this.hiddenField.dom.disabled = false;
6097         this.fs.enable();
6098     },
6099
6100     // inherit docs
6101     destroy: function(){
6102         Ext.destroy(this.fs, this.dragZone, this.dropZone);
6103         Ext.ux.form.MultiSelect.superclass.destroy.call(this);
6104     }
6105 });
6106
6107
6108 Ext.reg('multiselect', Ext.ux.form.MultiSelect);
6109
6110 //backwards compat
6111 Ext.ux.Multiselect = Ext.ux.form.MultiSelect;
6112
6113
6114 Ext.ux.form.MultiSelect.DragZone = function(ms, config){
6115     this.ms = ms;
6116     this.view = ms.view;
6117     var ddGroup = config.ddGroup || 'MultiselectDD';
6118     var dd;
6119     if (Ext.isArray(ddGroup)){
6120         dd = ddGroup.shift();
6121     } else {
6122         dd = ddGroup;
6123         ddGroup = null;
6124     }
6125     Ext.ux.form.MultiSelect.DragZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
6126     this.setDraggable(ddGroup);
6127 };
6128
6129 Ext.extend(Ext.ux.form.MultiSelect.DragZone, Ext.dd.DragZone, {
6130     onInitDrag : function(x, y){
6131         var el = Ext.get(this.dragData.ddel.cloneNode(true));
6132         this.proxy.update(el.dom);
6133         el.setWidth(el.child('em').getWidth());
6134         this.onStartDrag(x, y);
6135         return true;
6136     },
6137
6138     // private
6139     collectSelection: function(data) {
6140         data.repairXY = Ext.fly(this.view.getSelectedNodes()[0]).getXY();
6141         var i = 0;
6142         this.view.store.each(function(rec){
6143             if (this.view.isSelected(i)) {
6144                 var n = this.view.getNode(i);
6145                 var dragNode = n.cloneNode(true);
6146                 dragNode.id = Ext.id();
6147                 data.ddel.appendChild(dragNode);
6148                 data.records.push(this.view.store.getAt(i));
6149                 data.viewNodes.push(n);
6150             }
6151             i++;
6152         }, this);
6153     },
6154
6155     // override
6156     onEndDrag: function(data, e) {
6157         var d = Ext.get(this.dragData.ddel);
6158         if (d && d.hasClass("multi-proxy")) {
6159             d.remove();
6160         }
6161     },
6162
6163     // override
6164     getDragData: function(e){
6165         var target = this.view.findItemFromChild(e.getTarget());
6166         if(target) {
6167             if (!this.view.isSelected(target) && !e.ctrlKey && !e.shiftKey) {
6168                 this.view.select(target);
6169                 this.ms.setValue(this.ms.getValue());
6170             }
6171             if (this.view.getSelectionCount() == 0 || e.ctrlKey || e.shiftKey) return false;
6172             var dragData = {
6173                 sourceView: this.view,
6174                 viewNodes: [],
6175                 records: []
6176             };
6177             if (this.view.getSelectionCount() == 1) {
6178                 var i = this.view.getSelectedIndexes()[0];
6179                 var n = this.view.getNode(i);
6180                 dragData.viewNodes.push(dragData.ddel = n);
6181                 dragData.records.push(this.view.store.getAt(i));
6182                 dragData.repairXY = Ext.fly(n).getXY();
6183             } else {
6184                 dragData.ddel = document.createElement('div');
6185                 dragData.ddel.className = 'multi-proxy';
6186                 this.collectSelection(dragData);
6187             }
6188             return dragData;
6189         }
6190         return false;
6191     },
6192
6193     // override the default repairXY.
6194     getRepairXY : function(e){
6195         return this.dragData.repairXY;
6196     },
6197
6198     // private
6199     setDraggable: function(ddGroup){
6200         if (!ddGroup) return;
6201         if (Ext.isArray(ddGroup)) {
6202             Ext.each(ddGroup, this.setDraggable, this);
6203             return;
6204         }
6205         this.addToGroup(ddGroup);
6206     }
6207 });
6208
6209 Ext.ux.form.MultiSelect.DropZone = function(ms, config){
6210     this.ms = ms;
6211     this.view = ms.view;
6212     var ddGroup = config.ddGroup || 'MultiselectDD';
6213     var dd;
6214     if (Ext.isArray(ddGroup)){
6215         dd = ddGroup.shift();
6216     } else {
6217         dd = ddGroup;
6218         ddGroup = null;
6219     }
6220     Ext.ux.form.MultiSelect.DropZone.superclass.constructor.call(this, this.ms.fs.body, { containerScroll: true, ddGroup: dd });
6221     this.setDroppable(ddGroup);
6222 };
6223
6224 Ext.extend(Ext.ux.form.MultiSelect.DropZone, Ext.dd.DropZone, {
6225     <div id="method-Ext.ux.form.MultiSelect-getTargetFromEvent"></div>/**
6226      * Part of the Ext.dd.DropZone interface. If no target node is found, the
6227      * whole Element becomes the target, and this causes the drop gesture to append.
6228      */
6229     getTargetFromEvent : function(e) {
6230         var target = e.getTarget();
6231         return target;
6232     },
6233
6234     // private
6235     getDropPoint : function(e, n, dd){
6236         if (n == this.ms.fs.body.dom) { return "below"; }
6237         var t = Ext.lib.Dom.getY(n), b = t + n.offsetHeight;
6238         var c = t + (b - t) / 2;
6239         var y = Ext.lib.Event.getPageY(e);
6240         if(y <= c) {
6241             return "above";
6242         }else{
6243             return "below";
6244         }
6245     },
6246
6247     // private
6248     isValidDropPoint: function(pt, n, data) {
6249         if (!data.viewNodes || (data.viewNodes.length != 1)) {
6250             return true;
6251         }
6252         var d = data.viewNodes[0];
6253         if (d == n) {
6254             return false;
6255         }
6256         if ((pt == "below") && (n.nextSibling == d)) {
6257             return false;
6258         }
6259         if ((pt == "above") && (n.previousSibling == d)) {
6260             return false;
6261         }
6262         return true;
6263     },
6264
6265     // override
6266     onNodeEnter : function(n, dd, e, data){
6267         return false;
6268     },
6269
6270     // override
6271     onNodeOver : function(n, dd, e, data){
6272         var dragElClass = this.dropNotAllowed;
6273         var pt = this.getDropPoint(e, n, dd);
6274         if (this.isValidDropPoint(pt, n, data)) {
6275             if (this.ms.appendOnly) {
6276                 return "x-tree-drop-ok-below";
6277             }
6278
6279             // set the insert point style on the target node
6280             if (pt) {
6281                 var targetElClass;
6282                 if (pt == "above"){
6283                     dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
6284                     targetElClass = "x-view-drag-insert-above";
6285                 } else {
6286                     dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
6287                     targetElClass = "x-view-drag-insert-below";
6288                 }
6289                 if (this.lastInsertClass != targetElClass){
6290                     Ext.fly(n).replaceClass(this.lastInsertClass, targetElClass);
6291                     this.lastInsertClass = targetElClass;
6292                 }
6293             }
6294         }
6295         return dragElClass;
6296     },
6297
6298     // private
6299     onNodeOut : function(n, dd, e, data){
6300         this.removeDropIndicators(n);
6301     },
6302
6303     // private
6304     onNodeDrop : function(n, dd, e, data){
6305         if (this.ms.fireEvent("drop", this, n, dd, e, data) === false) {
6306             return false;
6307         }
6308         var pt = this.getDropPoint(e, n, dd);
6309         if (n != this.ms.fs.body.dom)
6310             n = this.view.findItemFromChild(n);
6311
6312         if(this.ms.appendOnly) {
6313             insertAt = this.view.store.getCount();
6314         } else {
6315             insertAt = n == this.ms.fs.body.dom ? this.view.store.getCount() - 1 : this.view.indexOf(n);
6316             if (pt == "below") {
6317                 insertAt++;
6318             }
6319         }
6320
6321         var dir = false;
6322
6323         // Validate if dragging within the same MultiSelect
6324         if (data.sourceView == this.view) {
6325             // If the first element to be inserted below is the target node, remove it
6326             if (pt == "below") {
6327                 if (data.viewNodes[0] == n) {
6328                     data.viewNodes.shift();
6329                 }
6330             } else {  // If the last element to be inserted above is the target node, remove it
6331                 if (data.viewNodes[data.viewNodes.length - 1] == n) {
6332                     data.viewNodes.pop();
6333                 }
6334             }
6335
6336             // Nothing to drop...
6337             if (!data.viewNodes.length) {
6338                 return false;
6339             }
6340
6341             // If we are moving DOWN, then because a store.remove() takes place first,
6342             // the insertAt must be decremented.
6343             if (insertAt > this.view.store.indexOf(data.records[0])) {
6344                 dir = 'down';
6345                 insertAt--;
6346             }
6347         }
6348
6349         for (var i = 0; i < data.records.length; i++) {
6350             var r = data.records[i];
6351             if (data.sourceView) {
6352                 data.sourceView.store.remove(r);
6353             }
6354             this.view.store.insert(dir == 'down' ? insertAt : insertAt++, r);
6355             var si = this.view.store.sortInfo;
6356             if(si){
6357                 this.view.store.sort(si.field, si.direction);
6358             }
6359         }
6360         return true;
6361     },
6362
6363     // private
6364     removeDropIndicators : function(n){
6365         if(n){
6366             Ext.fly(n).removeClass([
6367                 "x-view-drag-insert-above",
6368                 "x-view-drag-insert-left",
6369                 "x-view-drag-insert-right",
6370                 "x-view-drag-insert-below"]);
6371             this.lastInsertClass = "_noclass";
6372         }
6373     },
6374
6375     // private
6376     setDroppable: function(ddGroup){
6377         if (!ddGroup) return;
6378         if (Ext.isArray(ddGroup)) {
6379             Ext.each(ddGroup, this.setDroppable, this);
6380             return;
6381         }
6382         this.addToGroup(ddGroup);
6383     }
6384 });
6385
6386 /* Fix for Opera, which does not seem to include the map function on Array's */
6387 if (!Array.prototype.map) {
6388     Array.prototype.map = function(fun){
6389         var len = this.length;
6390         if (typeof fun != 'function') {
6391             throw new TypeError();
6392         }
6393         var res = new Array(len);
6394         var thisp = arguments[1];
6395         for (var i = 0; i < len; i++) {
6396             if (i in this) {
6397                 res[i] = fun.call(thisp, this[i], i, this);
6398             }
6399         }
6400         return res;
6401     };
6402 }
6403
6404 Ext.ns('Ext.ux.data');
6405
6406 /**
6407  * @class Ext.ux.data.PagingMemoryProxy
6408  * @extends Ext.data.MemoryProxy
6409  * <p>Paging Memory Proxy, allows to use paging grid with in memory dataset</p>
6410  */
6411 Ext.ux.data.PagingMemoryProxy = Ext.extend(Ext.data.MemoryProxy, {
6412     constructor : function(data){
6413         Ext.ux.data.PagingMemoryProxy.superclass.constructor.call(this);
6414         this.data = data;
6415     },
6416     doRequest : function(action, rs, params, reader, callback, scope, options){
6417         params = params ||
6418         {};
6419         var result;
6420         try {
6421             result = reader.readRecords(this.data);
6422         }
6423         catch (e) {
6424             this.fireEvent('loadexception', this, options, null, e);
6425             callback.call(scope, null, options, false);
6426             return;
6427         }
6428
6429         // filtering
6430         if (params.filter !== undefined) {
6431             result.records = result.records.filter(function(el){
6432                 if (typeof(el) == 'object') {
6433                     var att = params.filterCol || 0;
6434                     return String(el.data[att]).match(params.filter) ? true : false;
6435                 }
6436                 else {
6437                     return String(el).match(params.filter) ? true : false;
6438                 }
6439             });
6440             result.totalRecords = result.records.length;
6441         }
6442
6443         // sorting
6444         if (params.sort !== undefined) {
6445             // use integer as params.sort to specify column, since arrays are not named
6446             // params.sort=0; would also match a array without columns
6447             var dir = String(params.dir).toUpperCase() == 'DESC' ? -1 : 1;
6448             var fn = function(v1, v2){
6449                 return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
6450             };
6451             result.records.sort(function(a, b){
6452                 var v = 0;
6453                 if (typeof(a) == 'object') {
6454                     v = fn(a.data[params.sort], b.data[params.sort]) * dir;
6455                 }
6456                 else {
6457                     v = fn(a, b) * dir;
6458                 }
6459                 if (v == 0) {
6460                     v = (a.index < b.index ? -1 : 1);
6461                 }
6462                 return v;
6463             });
6464         }
6465         // paging (use undefined cause start can also be 0 (thus false))
6466         if (params.start !== undefined && params.limit !== undefined) {
6467             result.records = result.records.slice(params.start, params.start + params.limit);
6468         }
6469         callback.call(scope, result, options, true);
6470     }
6471 });
6472
6473 //backwards compat.
6474 Ext.data.PagingMemoryProxy = Ext.ux.data.PagingMemoryProxy;
6475 Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
6476     minHeight: 0,
6477     maxHeight:10000000,
6478
6479     constructor: function(config){
6480         Ext.apply(this, config);
6481         this.events = {};
6482         Ext.ux.PanelResizer.superclass.constructor.call(this, config);
6483     },
6484
6485     init : function(p){
6486         this.panel = p;
6487
6488         if(this.panel.elements.indexOf('footer')==-1){
6489             p.elements += ',footer';
6490         }
6491         p.on('render', this.onRender, this);
6492     },
6493
6494     onRender : function(p){
6495         this.handle = p.footer.createChild({cls:'x-panel-resize'});
6496
6497         this.tracker = new Ext.dd.DragTracker({
6498             onStart: this.onDragStart.createDelegate(this),
6499             onDrag: this.onDrag.createDelegate(this),
6500             onEnd: this.onDragEnd.createDelegate(this),
6501             tolerance: 3,
6502             autoStart: 300
6503         });
6504         this.tracker.initEl(this.handle);
6505         p.on('beforedestroy', this.tracker.destroy, this.tracker);
6506     },
6507
6508         // private
6509     onDragStart: function(e){
6510         this.dragging = true;
6511         this.startHeight = this.panel.el.getHeight();
6512         this.fireEvent('dragstart', this, e);
6513     },
6514
6515         // private
6516     onDrag: function(e){
6517         this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
6518         this.fireEvent('drag', this, e);
6519     },
6520
6521         // private
6522     onDragEnd: function(e){
6523         this.dragging = false;
6524         this.fireEvent('dragend', this, e);
6525     }
6526 });
6527 Ext.preg('panelresizer', Ext.ux.PanelResizer);Ext.ux.Portal = Ext.extend(Ext.Panel, {
6528     layout : 'column',
6529     autoScroll : true,
6530     cls : 'x-portal',
6531     defaultType : 'portalcolumn',
6532
6533     initComponent : function(){
6534         Ext.ux.Portal.superclass.initComponent.call(this);
6535         this.addEvents({
6536             validatedrop:true,
6537             beforedragover:true,
6538             dragover:true,
6539             beforedrop:true,
6540             drop:true
6541         });
6542     },
6543
6544     initEvents : function(){
6545         Ext.ux.Portal.superclass.initEvents.call(this);
6546         this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
6547     },
6548
6549     beforeDestroy : function() {
6550         if(this.dd){
6551             this.dd.unreg();
6552         }
6553         Ext.ux.Portal.superclass.beforeDestroy.call(this);
6554     }
6555 });
6556
6557 Ext.reg('portal', Ext.ux.Portal);
6558
6559 Ext.ux.Portal.DropZone = Ext.extend(Ext.dd.DropTarget, {
6560
6561     constructor : function(portal, cfg){
6562         this.portal = portal;
6563         Ext.dd.ScrollManager.register(portal.body);
6564         Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
6565         portal.body.ddScrollConfig = this.ddScrollConfig;
6566     },
6567
6568     ddScrollConfig : {
6569         vthresh: 50,
6570         hthresh: -1,
6571         animate: true,
6572         increment: 200
6573     },
6574
6575     createEvent : function(dd, e, data, col, c, pos){
6576         return {
6577             portal: this.portal,
6578             panel: data.panel,
6579             columnIndex: col,
6580             column: c,
6581             position: pos,
6582             data: data,
6583             source: dd,
6584             rawEvent: e,
6585             status: this.dropAllowed
6586         };
6587     },
6588
6589     notifyOver : function(dd, e, data){
6590         var xy = e.getXY(), portal = this.portal, px = dd.proxy;
6591
6592         // case column widths
6593         if(!this.grid){
6594             this.grid = this.getGrid();
6595         }
6596
6597         // handle case scroll where scrollbars appear during drag
6598         var cw = portal.body.dom.clientWidth;
6599         if(!this.lastCW){
6600             this.lastCW = cw;
6601         }else if(this.lastCW != cw){
6602             this.lastCW = cw;
6603             portal.doLayout();
6604             this.grid = this.getGrid();
6605         }
6606
6607         // determine column
6608         var col = 0, xs = this.grid.columnX, cmatch = false;
6609         for(var len = xs.length; col < len; col++){
6610             if(xy[0] < (xs[col].x + xs[col].w)){
6611                 cmatch = true;
6612                 break;
6613             }
6614         }
6615         // no match, fix last index
6616         if(!cmatch){
6617             col--;
6618         }
6619
6620         // find insert position
6621         var p, match = false, pos = 0,
6622             c = portal.items.itemAt(col),
6623             items = c.items.items, overSelf = false;
6624
6625         for(var len = items.length; pos < len; pos++){
6626             p = items[pos];
6627             var h = p.el.getHeight();
6628             if(h === 0){
6629                 overSelf = true;
6630             }
6631             else if((p.el.getY()+(h/2)) > xy[1]){
6632                 match = true;
6633                 break;
6634             }
6635         }
6636
6637         pos = (match && p ? pos : c.items.getCount()) + (overSelf ? -1 : 0);
6638         var overEvent = this.createEvent(dd, e, data, col, c, pos);
6639
6640         if(portal.fireEvent('validatedrop', overEvent) !== false &&
6641            portal.fireEvent('beforedragover', overEvent) !== false){
6642
6643             // make sure proxy width is fluid
6644             px.getProxy().setWidth('auto');
6645
6646             if(p){
6647                 px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
6648             }else{
6649                 px.moveProxy(c.el.dom, null);
6650             }
6651
6652             this.lastPos = {c: c, col: col, p: overSelf || (match && p) ? pos : false};
6653             this.scrollPos = portal.body.getScroll();
6654
6655             portal.fireEvent('dragover', overEvent);
6656
6657             return overEvent.status;
6658         }else{
6659             return overEvent.status;
6660         }
6661
6662     },
6663
6664     notifyOut : function(){
6665         delete this.grid;
6666     },
6667
6668     notifyDrop : function(dd, e, data){
6669         delete this.grid;
6670         if(!this.lastPos){
6671             return;
6672         }
6673         var c = this.lastPos.c,
6674             col = this.lastPos.col,
6675             pos = this.lastPos.p,
6676             panel = dd.panel,
6677             dropEvent = this.createEvent(dd, e, data, col, c,
6678                 pos !== false ? pos : c.items.getCount());
6679
6680         if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
6681            this.portal.fireEvent('beforedrop', dropEvent) !== false){
6682
6683             dd.proxy.getProxy().remove();
6684             panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
6685
6686             if(pos !== false){
6687                 c.insert(pos, panel);
6688             }else{
6689                 c.add(panel);
6690             }
6691
6692             c.doLayout();
6693
6694             this.portal.fireEvent('drop', dropEvent);
6695
6696             // scroll position is lost on drop, fix it
6697             var st = this.scrollPos.top;
6698             if(st){
6699                 var d = this.portal.body.dom;
6700                 setTimeout(function(){
6701                     d.scrollTop = st;
6702                 }, 10);
6703             }
6704
6705         }
6706         delete this.lastPos;
6707     },
6708
6709     // internal cache of body and column coords
6710     getGrid : function(){
6711         var box = this.portal.bwrap.getBox();
6712         box.columnX = [];
6713         this.portal.items.each(function(c){
6714              box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
6715         });
6716         return box;
6717     },
6718
6719     // unregister the dropzone from ScrollManager
6720     unreg: function() {
6721         Ext.dd.ScrollManager.unregister(this.portal.body);
6722         Ext.ux.Portal.DropZone.superclass.unreg.call(this);
6723     }
6724 });
6725 Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
6726     layout : 'anchor',
6727     //autoEl : 'div',//already defined by Ext.Component
6728     defaultType : 'portlet',
6729     cls : 'x-portal-column'
6730 });
6731
6732 Ext.reg('portalcolumn', Ext.ux.PortalColumn);
6733 Ext.ux.Portlet = Ext.extend(Ext.Panel, {
6734     anchor : '100%',
6735     frame : true,
6736     collapsible : true,
6737     draggable : true,
6738     cls : 'x-portlet'
6739 });
6740
6741 Ext.reg('portlet', Ext.ux.Portlet);
6742 <div id="cls-Ext.ux.ProgressBarPager"></div>/**
6743 * @class Ext.ux.ProgressBarPager
6744 * @extends Object
6745 * Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
6746 *
6747 * @ptype progressbarpager
6748 * @constructor
6749 * Create a new ItemSelector
6750 * @param {Object} config Configuration options
6751 * @xtype itemselector
6752 */
6753 Ext.ux.ProgressBarPager  = Ext.extend(Object, {
6754         <div id="cfg-Ext.ux.ProgressBarPager-progBarWidth"></div>/**
6755         * @cfg {Integer} progBarWidth
6756         * <p>The default progress bar width.  Default is 225.</p>
6757         */
6758         progBarWidth   : 225,
6759         <div id="cfg-Ext.ux.ProgressBarPager-defaultText"></div>/**
6760         * @cfg {String} defaultText
6761         * <p>The text to display while the store is loading.  Default is 'Loading...'</p>
6762         */
6763         defaultText    : 'Loading...',
6764         <div id="cfg-Ext.ux.ProgressBarPager-defaultAnimCfg"></div>/**
6765         * @cfg {Object} defaultAnimCfg
6766         * <p>A {@link Ext.Fx Ext.Fx} configuration object.  Default is  { duration : 1, easing : 'bounceOut' }.</p>
6767         */
6768         defaultAnimCfg : {
6769                 duration   : 1,
6770                 easing     : 'bounceOut'
6771         },
6772         constructor : function(config) {
6773                 if (config) {
6774                         Ext.apply(this, config);
6775                 }
6776         },
6777         //public
6778         init : function (parent) {
6779
6780                 if(parent.displayInfo){
6781                         this.parent = parent;
6782                         var ind  = parent.items.indexOf(parent.displayItem);
6783                         parent.remove(parent.displayItem, true);
6784                         this.progressBar = new Ext.ProgressBar({
6785                                 text    : this.defaultText,
6786                                 width   : this.progBarWidth,
6787                                 animate :  this.defaultAnimCfg
6788                         });
6789
6790                         parent.displayItem = this.progressBar;
6791
6792                         parent.add(parent.displayItem);
6793                         parent.doLayout();
6794                         Ext.apply(parent, this.parentOverrides);
6795
6796                         this.progressBar.on('render', function(pb) {
6797                 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
6798             }, this, {single: true});
6799
6800                 }
6801
6802         },
6803         // private
6804         // This method handles the click for the progress bar
6805         handleProgressBarClick : function(e){
6806                 var parent = this.parent,
6807                     displayItem = parent.displayItem,
6808                     box = this.progressBar.getBox(),
6809                     xy = e.getXY(),
6810                     position = xy[0]-box.x,
6811                     pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
6812                     newpage = Math.ceil(position/(displayItem.width/pages));
6813
6814                 parent.changePage(newpage);
6815         },
6816
6817         // private, overriddes
6818         parentOverrides  : {
6819                 // private
6820                 // This method updates the information via the progress bar.
6821                 updateInfo : function(){
6822                         if(this.displayItem){
6823                                 var count = this.store.getCount(),
6824                                     pgData = this.getPageData(),
6825                                     pageNum = this.readPage(pgData),
6826                                     msg = count == 0 ?
6827                                         this.emptyMsg :
6828                                         String.format(
6829                                                 this.displayMsg,
6830                                                 this.cursor+1, this.cursor+count, this.store.getTotalCount()
6831                                         );
6832
6833                                 pageNum = pgData.activePage; ;
6834
6835                                 var pct = pageNum / pgData.pages;
6836
6837                                 this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
6838                         }
6839                 }
6840         }
6841 });
6842 Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
6843
6844 Ext.ns('Ext.ux.grid');
6845
6846 <div id="cls-Ext.ux.grid.RowEditor"></div>/**
6847  * @class Ext.ux.grid.RowEditor
6848  * @extends Ext.Panel
6849  * Plugin (ptype = 'roweditor') that adds the ability to rapidly edit full rows in a grid.
6850  * A validation mode may be enabled which uses AnchorTips to notify the user of all
6851  * validation errors at once.
6852  *
6853  * @ptype roweditor
6854  */
6855 Ext.ux.grid.RowEditor = Ext.extend(Ext.Panel, {
6856     floating: true,
6857     shadow: false,
6858     layout: 'hbox',
6859     cls: 'x-small-editor',
6860     buttonAlign: 'center',
6861     baseCls: 'x-row-editor',
6862     elements: 'header,footer,body',
6863     frameWidth: 5,
6864     buttonPad: 3,
6865     clicksToEdit: 'auto',
6866     monitorValid: true,
6867     focusDelay: 250,
6868     errorSummary: true,
6869
6870     saveText: 'Save',
6871     cancelText: 'Cancel',
6872     commitChangesText: 'You need to commit or cancel your changes',
6873     errorText: 'Errors',
6874
6875     defaults: {
6876         normalWidth: true
6877     },
6878
6879     initComponent: function(){
6880         Ext.ux.grid.RowEditor.superclass.initComponent.call(this);
6881         this.addEvents(
6882             <div id="event-Ext.ux.grid.RowEditor-beforeedit"></div>/**
6883              * @event beforeedit
6884              * Fired before the row editor is activated.
6885              * If the listener returns <tt>false</tt> the editor will not be activated.
6886              * @param {Ext.ux.grid.RowEditor} roweditor This object
6887              * @param {Number} rowIndex The rowIndex of the row just edited
6888              */
6889             'beforeedit',
6890             <div id="event-Ext.ux.grid.RowEditor-canceledit"></div>/**
6891              * @event canceledit
6892              * Fired when the editor is cancelled.
6893              * @param {Ext.ux.grid.RowEditor} roweditor This object
6894              * @param {Boolean} forced True if the cancel button is pressed, false is the editor was invalid.
6895              */
6896             'canceledit',
6897             <div id="event-Ext.ux.grid.RowEditor-validateedit"></div>/**
6898              * @event validateedit
6899              * Fired after a row is edited and passes validation.
6900              * If the listener returns <tt>false</tt> changes to the record will not be set.
6901              * @param {Ext.ux.grid.RowEditor} roweditor This object
6902              * @param {Object} changes Object with changes made to the record.
6903              * @param {Ext.data.Record} r The Record that was edited.
6904              * @param {Number} rowIndex The rowIndex of the row just edited
6905              */
6906             'validateedit',
6907             <div id="event-Ext.ux.grid.RowEditor-afteredit"></div>/**
6908              * @event afteredit
6909              * Fired after a row is edited and passes validation.  This event is fired
6910              * after the store's update event is fired with this edit.
6911              * @param {Ext.ux.grid.RowEditor} roweditor This object
6912              * @param {Object} changes Object with changes made to the record.
6913              * @param {Ext.data.Record} r The Record that was edited.
6914              * @param {Number} rowIndex The rowIndex of the row just edited
6915              */
6916             'afteredit'
6917         );
6918     },
6919
6920     init: function(grid){
6921         this.grid = grid;
6922         this.ownerCt = grid;
6923         if(this.clicksToEdit === 2){
6924             grid.on('rowdblclick', this.onRowDblClick, this);
6925         }else{
6926             grid.on('rowclick', this.onRowClick, this);
6927             if(Ext.isIE){
6928                 grid.on('rowdblclick', this.onRowDblClick, this);
6929             }
6930         }
6931
6932         // stopEditing without saving when a record is removed from Store.
6933         grid.getStore().on('remove', function() {
6934             this.stopEditing(false);
6935         },this);
6936
6937         grid.on({
6938             scope: this,
6939             keydown: this.onGridKey,
6940             columnresize: this.verifyLayout,
6941             columnmove: this.refreshFields,
6942             reconfigure: this.refreshFields,
6943             beforedestroy : this.beforedestroy,
6944             destroy : this.destroy,
6945             bodyscroll: {
6946                 buffer: 250,
6947                 fn: this.positionButtons
6948             }
6949         });
6950         grid.getColumnModel().on('hiddenchange', this.verifyLayout, this, {delay:1});
6951         grid.getView().on('refresh', this.stopEditing.createDelegate(this, []));
6952     },
6953
6954     beforedestroy: function() {
6955         this.stopMonitoring();
6956         this.grid.getStore().un('remove', this.onStoreRemove, this);
6957         this.stopEditing(false);
6958         Ext.destroy(this.btns, this.tooltip);
6959     },
6960
6961     refreshFields: function(){
6962         this.initFields();
6963         this.verifyLayout();
6964     },
6965
6966     isDirty: function(){
6967         var dirty;
6968         this.items.each(function(f){
6969             if(String(this.values[f.id]) !== String(f.getValue())){
6970                 dirty = true;
6971                 return false;
6972             }
6973         }, this);
6974         return dirty;
6975     },
6976
6977     startEditing: function(rowIndex, doFocus){
6978         if(this.editing && this.isDirty()){
6979             this.showTooltip(this.commitChangesText);
6980             return;
6981         }
6982         if(Ext.isObject(rowIndex)){
6983             rowIndex = this.grid.getStore().indexOf(rowIndex);
6984         }
6985         if(this.fireEvent('beforeedit', this, rowIndex) !== false){
6986             this.editing = true;
6987             var g = this.grid, view = g.getView(),
6988                 row = view.getRow(rowIndex),
6989                 record = g.store.getAt(rowIndex);
6990
6991             this.record = record;
6992             this.rowIndex = rowIndex;
6993             this.values = {};
6994             if(!this.rendered){
6995                 this.render(view.getEditorParent());
6996             }
6997             var w = Ext.fly(row).getWidth();
6998             this.setSize(w);
6999             if(!this.initialized){
7000                 this.initFields();
7001             }
7002             var cm = g.getColumnModel(), fields = this.items.items, f, val;
7003             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7004                 val = this.preEditValue(record, cm.getDataIndex(i));
7005                 f = fields[i];
7006                 f.setValue(val);
7007                 this.values[f.id] = Ext.isEmpty(val) ? '' : val;
7008             }
7009             this.verifyLayout(true);
7010             if(!this.isVisible()){
7011                 this.setPagePosition(Ext.fly(row).getXY());
7012             } else{
7013                 this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
7014             }
7015             if(!this.isVisible()){
7016                 this.show().doLayout();
7017             }
7018             if(doFocus !== false){
7019                 this.doFocus.defer(this.focusDelay, this);
7020             }
7021         }
7022     },
7023
7024     stopEditing : function(saveChanges){
7025         this.editing = false;
7026         if(!this.isVisible()){
7027             return;
7028         }
7029         if(saveChanges === false || !this.isValid()){
7030             this.hide();
7031             this.fireEvent('canceledit', this, saveChanges === false);
7032             return;
7033         }
7034         var changes = {},
7035             r = this.record,
7036             hasChange = false,
7037             cm = this.grid.colModel,
7038             fields = this.items.items;
7039         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7040             if(!cm.isHidden(i)){
7041                 var dindex = cm.getDataIndex(i);
7042                 if(!Ext.isEmpty(dindex)){
7043                     var oldValue = r.data[dindex],
7044                         value = this.postEditValue(fields[i].getValue(), oldValue, r, dindex);
7045                     if(String(oldValue) !== String(value)){
7046                         changes[dindex] = value;
7047                         hasChange = true;
7048                     }
7049                 }
7050             }
7051         }
7052         if(hasChange && this.fireEvent('validateedit', this, changes, r, this.rowIndex) !== false){
7053             r.beginEdit();
7054             Ext.iterate(changes, function(name, value){
7055                 r.set(name, value);
7056             });
7057             r.endEdit();
7058             this.fireEvent('afteredit', this, changes, r, this.rowIndex);
7059         }
7060         this.hide();
7061     },
7062
7063     verifyLayout: function(force){
7064         if(this.el && (this.isVisible() || force === true)){
7065             var row = this.grid.getView().getRow(this.rowIndex);
7066             this.setSize(Ext.fly(row).getWidth(), Ext.isIE ? Ext.fly(row).getHeight() + 9 : undefined);
7067             var cm = this.grid.colModel, fields = this.items.items;
7068             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7069                 if(!cm.isHidden(i)){
7070                     var adjust = 0;
7071                     if(i === (len - 1)){
7072                         adjust += 3; // outer padding
7073                     } else{
7074                         adjust += 1;
7075                     }
7076                     fields[i].show();
7077                     fields[i].setWidth(cm.getColumnWidth(i) - adjust);
7078                 } else{
7079                     fields[i].hide();
7080                 }
7081             }
7082             this.doLayout();
7083             this.positionButtons();
7084         }
7085     },
7086
7087     slideHide : function(){
7088         this.hide();
7089     },
7090
7091     initFields: function(){
7092         var cm = this.grid.getColumnModel(), pm = Ext.layout.ContainerLayout.prototype.parseMargins;
7093         this.removeAll(false);
7094         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
7095             var c = cm.getColumnAt(i),
7096                 ed = c.getEditor();
7097             if(!ed){
7098                 ed = c.displayEditor || new Ext.form.DisplayField();
7099             }
7100             if(i == 0){
7101                 ed.margins = pm('0 1 2 1');
7102             } else if(i == len - 1){
7103                 ed.margins = pm('0 0 2 1');
7104             } else{
7105                 if (Ext.isIE) {
7106                     ed.margins = pm('0 0 2 0');
7107                 }
7108                 else {
7109                     ed.margins = pm('0 1 2 0');
7110                 }
7111             }
7112             ed.setWidth(cm.getColumnWidth(i));
7113             ed.column = c;
7114             if(ed.ownerCt !== this){
7115                 ed.on('focus', this.ensureVisible, this);
7116                 ed.on('specialkey', this.onKey, this);
7117             }
7118             this.insert(i, ed);
7119         }
7120         this.initialized = true;
7121     },
7122
7123     onKey: function(f, e){
7124         if(e.getKey() === e.ENTER){
7125             this.stopEditing(true);
7126             e.stopPropagation();
7127         }
7128     },
7129
7130     onGridKey: function(e){
7131         if(e.getKey() === e.ENTER && !this.isVisible()){
7132             var r = this.grid.getSelectionModel().getSelected();
7133             if(r){
7134                 var index = this.grid.store.indexOf(r);
7135                 this.startEditing(index);
7136                 e.stopPropagation();
7137             }
7138         }
7139     },
7140
7141     ensureVisible: function(editor){
7142         if(this.isVisible()){
7143              this.grid.getView().ensureVisible(this.rowIndex, this.grid.colModel.getIndexById(editor.column.id), true);
7144         }
7145     },
7146
7147     onRowClick: function(g, rowIndex, e){
7148         if(this.clicksToEdit == 'auto'){
7149             var li = this.lastClickIndex;
7150             this.lastClickIndex = rowIndex;
7151             if(li != rowIndex && !this.isVisible()){
7152                 return;
7153             }
7154         }
7155         this.startEditing(rowIndex, false);
7156         this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
7157     },
7158
7159     onRowDblClick: function(g, rowIndex, e){
7160         this.startEditing(rowIndex, false);
7161         this.doFocus.defer(this.focusDelay, this, [e.getPoint()]);
7162     },
7163
7164     onRender: function(){
7165         Ext.ux.grid.RowEditor.superclass.onRender.apply(this, arguments);
7166         this.el.swallowEvent(['keydown', 'keyup', 'keypress']);
7167         this.btns = new Ext.Panel({
7168             baseCls: 'x-plain',
7169             cls: 'x-btns',
7170             elements:'body',
7171             layout: 'table',
7172             width: (this.minButtonWidth * 2) + (this.frameWidth * 2) + (this.buttonPad * 4), // width must be specified for IE
7173             items: [{
7174                 ref: 'saveBtn',
7175                 itemId: 'saveBtn',
7176                 xtype: 'button',
7177                 text: this.saveText,
7178                 width: this.minButtonWidth,
7179                 handler: this.stopEditing.createDelegate(this, [true])
7180             }, {
7181                 xtype: 'button',
7182                 text: this.cancelText,
7183                 width: this.minButtonWidth,
7184                 handler: this.stopEditing.createDelegate(this, [false])
7185             }]
7186         });
7187         this.btns.render(this.bwrap);
7188     },
7189
7190     afterRender: function(){
7191         Ext.ux.grid.RowEditor.superclass.afterRender.apply(this, arguments);
7192         this.positionButtons();
7193         if(this.monitorValid){
7194             this.startMonitoring();
7195         }
7196     },
7197
7198     onShow: function(){
7199         if(this.monitorValid){
7200             this.startMonitoring();
7201         }
7202         Ext.ux.grid.RowEditor.superclass.onShow.apply(this, arguments);
7203     },
7204
7205     onHide: function(){
7206         Ext.ux.grid.RowEditor.superclass.onHide.apply(this, arguments);
7207         this.stopMonitoring();
7208         this.grid.getView().focusRow(this.rowIndex);
7209     },
7210
7211     positionButtons: function(){
7212         if(this.btns){
7213             var g = this.grid,
7214                 h = this.el.dom.clientHeight,
7215                 view = g.getView(),
7216                 scroll = view.scroller.dom.scrollLeft,
7217                 bw = this.btns.getWidth(),
7218                 width = Math.min(g.getWidth(), g.getColumnModel().getTotalWidth());
7219
7220             this.btns.el.shift({left: (width/2)-(bw/2)+scroll, top: h - 2, stopFx: true, duration:0.2});
7221         }
7222     },
7223
7224     // private
7225     preEditValue : function(r, field){
7226         var value = r.data[field];
7227         return this.autoEncode && typeof value === 'string' ? Ext.util.Format.htmlDecode(value) : value;
7228     },
7229
7230     // private
7231     postEditValue : function(value, originalValue, r, field){
7232         return this.autoEncode && typeof value == 'string' ? Ext.util.Format.htmlEncode(value) : value;
7233     },
7234
7235     doFocus: function(pt){
7236         if(this.isVisible()){
7237             var index = 0,
7238                 cm = this.grid.getColumnModel(),
7239                 c;
7240             if(pt){
7241                 index = this.getTargetColumnIndex(pt);
7242             }
7243             for(var i = index||0, len = cm.getColumnCount(); i < len; i++){
7244                 c = cm.getColumnAt(i);
7245                 if(!c.hidden && c.getEditor()){
7246                     c.getEditor().focus();
7247                     break;
7248                 }
7249             }
7250         }
7251     },
7252
7253     getTargetColumnIndex: function(pt){
7254         var grid = this.grid,
7255             v = grid.view,
7256             x = pt.left,
7257             cms = grid.colModel.config,
7258             i = 0,
7259             match = false;
7260         for(var len = cms.length, c; c = cms[i]; i++){
7261             if(!c.hidden){
7262                 if(Ext.fly(v.getHeaderCell(i)).getRegion().right >= x){
7263                     match = i;
7264                     break;
7265                 }
7266             }
7267         }
7268         return match;
7269     },
7270
7271     startMonitoring : function(){
7272         if(!this.bound && this.monitorValid){
7273             this.bound = true;
7274             Ext.TaskMgr.start({
7275                 run : this.bindHandler,
7276                 interval : this.monitorPoll || 200,
7277                 scope: this
7278             });
7279         }
7280     },
7281
7282     stopMonitoring : function(){
7283         this.bound = false;
7284         if(this.tooltip){
7285             this.tooltip.hide();
7286         }
7287     },
7288
7289     isValid: function(){
7290         var valid = true;
7291         this.items.each(function(f){
7292             if(!f.isValid(true)){
7293                 valid = false;
7294                 return false;
7295             }
7296         });
7297         return valid;
7298     },
7299
7300     // private
7301     bindHandler : function(){
7302         if(!this.bound){
7303             return false; // stops binding
7304         }
7305         var valid = this.isValid();
7306         if(!valid && this.errorSummary){
7307             this.showTooltip(this.getErrorText().join(''));
7308         }
7309         this.btns.saveBtn.setDisabled(!valid);
7310         this.fireEvent('validation', this, valid);
7311     },
7312
7313     lastVisibleColumn : function() {
7314         var i = this.items.getCount() - 1,
7315             c;
7316         for(; i >= 0; i--) {
7317             c = this.items.items[i];
7318             if (!c.hidden) {
7319                 return c;
7320             }
7321         }
7322     },
7323
7324     showTooltip: function(msg){
7325         var t = this.tooltip;
7326         if(!t){
7327             t = this.tooltip = new Ext.ToolTip({
7328                 maxWidth: 600,
7329                 cls: 'errorTip',
7330                 width: 300,
7331                 title: this.errorText,
7332                 autoHide: false,
7333                 anchor: 'left',
7334                 anchorToTarget: true,
7335                 mouseOffset: [40,0]
7336             });
7337         }
7338         var v = this.grid.getView(),
7339             top = parseInt(this.el.dom.style.top, 10),
7340             scroll = v.scroller.dom.scrollTop,
7341             h = this.el.getHeight();
7342
7343         if(top + h >= scroll){
7344             t.initTarget(this.lastVisibleColumn().getEl());
7345             if(!t.rendered){
7346                 t.show();
7347                 t.hide();
7348             }
7349             t.body.update(msg);
7350             t.doAutoWidth(20);
7351             t.show();
7352         }else if(t.rendered){
7353             t.hide();
7354         }
7355     },
7356
7357     getErrorText: function(){
7358         var data = ['<ul>'];
7359         this.items.each(function(f){
7360             if(!f.isValid(true)){
7361                 data.push('<li>', f.getActiveError(), '</li>');
7362             }
7363         });
7364         data.push('</ul>');
7365         return data;
7366     }
7367 });
7368 Ext.preg('roweditor', Ext.ux.grid.RowEditor);
7369 Ext.ns('Ext.ux.grid');
7370
7371 /**
7372  * @class Ext.ux.grid.RowExpander
7373  * @extends Ext.util.Observable
7374  * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
7375  * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
7376  * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
7377  *
7378  * @ptype rowexpander
7379  */
7380 Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
7381     <div id="cfg-Ext.ux.grid.RowExpander-expandOnEnter"></div>/**
7382      * @cfg {Boolean} expandOnEnter
7383      * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
7384      * key is pressed (defaults to <tt>true</tt>).
7385      */
7386     expandOnEnter : true,
7387     <div id="cfg-Ext.ux.grid.RowExpander-expandOnDblClick"></div>/**
7388      * @cfg {Boolean} expandOnDblClick
7389      * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
7390      * (defaults to <tt>true</tt>).
7391      */
7392     expandOnDblClick : true,
7393
7394     header : '',
7395     width : 20,
7396     sortable : false,
7397     fixed : true,
7398     hideable: false,
7399     menuDisabled : true,
7400     dataIndex : '',
7401     id : 'expander',
7402     lazyRender : true,
7403     enableCaching : true,
7404
7405     constructor: function(config){
7406         Ext.apply(this, config);
7407
7408         this.addEvents({
7409             <div id="event-Ext.ux.grid.RowExpander-beforeexpand"></div>/**
7410              * @event beforeexpand
7411              * Fires before the row expands. Have the listener return false to prevent the row from expanding.
7412              * @param {Object} this RowExpander object.
7413              * @param {Object} Ext.data.Record Record for the selected row.
7414              * @param {Object} body body element for the secondary row.
7415              * @param {Number} rowIndex The current row index.
7416              */
7417             beforeexpand: true,
7418             <div id="event-Ext.ux.grid.RowExpander-expand"></div>/**
7419              * @event expand
7420              * Fires after the row expands.
7421              * @param {Object} this RowExpander object.
7422              * @param {Object} Ext.data.Record Record for the selected row.
7423              * @param {Object} body body element for the secondary row.
7424              * @param {Number} rowIndex The current row index.
7425              */
7426             expand: true,
7427             <div id="event-Ext.ux.grid.RowExpander-beforecollapse"></div>/**
7428              * @event beforecollapse
7429              * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
7430              * @param {Object} this RowExpander object.
7431              * @param {Object} Ext.data.Record Record for the selected row.
7432              * @param {Object} body body element for the secondary row.
7433              * @param {Number} rowIndex The current row index.
7434              */
7435             beforecollapse: true,
7436             <div id="event-Ext.ux.grid.RowExpander-collapse"></div>/**
7437              * @event collapse
7438              * Fires after the row collapses.
7439              * @param {Object} this RowExpander object.
7440              * @param {Object} Ext.data.Record Record for the selected row.
7441              * @param {Object} body body element for the secondary row.
7442              * @param {Number} rowIndex The current row index.
7443              */
7444             collapse: true
7445         });
7446
7447         Ext.ux.grid.RowExpander.superclass.constructor.call(this);
7448
7449         if(this.tpl){
7450             if(typeof this.tpl == 'string'){
7451                 this.tpl = new Ext.Template(this.tpl);
7452             }
7453             this.tpl.compile();
7454         }
7455
7456         this.state = {};
7457         this.bodyContent = {};
7458     },
7459
7460     getRowClass : function(record, rowIndex, p, ds){
7461         p.cols = p.cols-1;
7462         var content = this.bodyContent[record.id];
7463         if(!content && !this.lazyRender){
7464             content = this.getBodyContent(record, rowIndex);
7465         }
7466         if(content){
7467             p.body = content;
7468         }
7469         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
7470     },
7471
7472     init : function(grid){
7473         this.grid = grid;
7474
7475         var view = grid.getView();
7476         view.getRowClass = this.getRowClass.createDelegate(this);
7477
7478         view.enableRowBody = true;
7479
7480
7481         grid.on('render', this.onRender, this);
7482         grid.on('destroy', this.onDestroy, this);
7483     },
7484
7485     // @private
7486     onRender: function() {
7487         var grid = this.grid;
7488         var mainBody = grid.getView().mainBody;
7489         mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
7490         if (this.expandOnEnter) {
7491             this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
7492                 'enter' : this.onEnter,
7493                 scope: this
7494             });
7495         }
7496         if (this.expandOnDblClick) {
7497             grid.on('rowdblclick', this.onRowDblClick, this);
7498         }
7499     },
7500
7501     // @private
7502     onDestroy: function() {
7503         if(this.keyNav){
7504             this.keyNav.disable();
7505             delete this.keyNav;
7506         }
7507         /*
7508          * A majority of the time, the plugin will be destroyed along with the grid,
7509          * which means the mainBody won't be available. On the off chance that the plugin
7510          * isn't destroyed with the grid, take care of removing the listener.
7511          */
7512         var mainBody = this.grid.getView().mainBody;
7513         if(mainBody){
7514             mainBody.un('mousedown', this.onMouseDown, this);
7515         }
7516     },
7517     // @private
7518     onRowDblClick: function(grid, rowIdx, e) {
7519         this.toggleRow(rowIdx);
7520     },
7521
7522     onEnter: function(e) {
7523         var g = this.grid;
7524         var sm = g.getSelectionModel();
7525         var sels = sm.getSelections();
7526         for (var i = 0, len = sels.length; i < len; i++) {
7527             var rowIdx = g.getStore().indexOf(sels[i]);
7528             this.toggleRow(rowIdx);
7529         }
7530     },
7531
7532     getBodyContent : function(record, index){
7533         if(!this.enableCaching){
7534             return this.tpl.apply(record.data);
7535         }
7536         var content = this.bodyContent[record.id];
7537         if(!content){
7538             content = this.tpl.apply(record.data);
7539             this.bodyContent[record.id] = content;
7540         }
7541         return content;
7542     },
7543
7544     onMouseDown : function(e, t){
7545         e.stopEvent();
7546         var row = e.getTarget('.x-grid3-row');
7547         this.toggleRow(row);
7548     },
7549
7550     renderer : function(v, p, record){
7551         p.cellAttr = 'rowspan="2"';
7552         return '<div class="x-grid3-row-expander">&#160;</div>';
7553     },
7554
7555     beforeExpand : function(record, body, rowIndex){
7556         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
7557             if(this.tpl && this.lazyRender){
7558                 body.innerHTML = this.getBodyContent(record, rowIndex);
7559             }
7560             return true;
7561         }else{
7562             return false;
7563         }
7564     },
7565
7566     toggleRow : function(row){
7567         if(typeof row == 'number'){
7568             row = this.grid.view.getRow(row);
7569         }
7570         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
7571     },
7572
7573     expandRow : function(row){
7574         if(typeof row == 'number'){
7575             row = this.grid.view.getRow(row);
7576         }
7577         var record = this.grid.store.getAt(row.rowIndex);
7578         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
7579         if(this.beforeExpand(record, body, row.rowIndex)){
7580             this.state[record.id] = true;
7581             Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
7582             this.fireEvent('expand', this, record, body, row.rowIndex);
7583         }
7584     },
7585
7586     collapseRow : function(row){
7587         if(typeof row == 'number'){
7588             row = this.grid.view.getRow(row);
7589         }
7590         var record = this.grid.store.getAt(row.rowIndex);
7591         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
7592         if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
7593             this.state[record.id] = false;
7594             Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
7595             this.fireEvent('collapse', this, record, body, row.rowIndex);
7596         }
7597     }
7598 });
7599
7600 Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
7601
7602 //backwards compat
7603 Ext.grid.RowExpander = Ext.ux.grid.RowExpander;// We are adding these custom layouts to a namespace that does not
7604 // exist by default in Ext, so we have to add the namespace first:
7605 Ext.ns('Ext.ux.layout');
7606
7607 <div id="cls-Ext.ux.layout.RowLayout"></div>/**
7608  * @class Ext.ux.layout.RowLayout
7609  * @extends Ext.layout.ContainerLayout
7610  * <p>This is the layout style of choice for creating structural layouts in a multi-row format where the height of
7611  * each row can be specified as a percentage or fixed height.  Row widths can also be fixed, percentage or auto.
7612  * This class is intended to be extended or created via the layout:'ux.row' {@link Ext.Container#layout} config,
7613  * and should generally not need to be created directly via the new keyword.</p>
7614  * <p>RowLayout does not have any direct config options (other than inherited ones), but it does support a
7615  * specific config property of <b><tt>rowHeight</tt></b> that can be included in the config of any panel added to it.  The
7616  * layout will use the rowHeight (if present) or height of each panel during layout to determine how to size each panel.
7617  * If height or rowHeight is not specified for a given panel, its height will default to the panel's height (or auto).</p>
7618  * <p>The height property is always evaluated as pixels, and must be a number greater than or equal to 1.
7619  * The rowHeight property is always evaluated as a percentage, and must be a decimal value greater than 0 and
7620  * less than 1 (e.g., .25).</p>
7621  * <p>The basic rules for specifying row heights are pretty simple.  The logic makes two passes through the
7622  * set of contained panels.  During the first layout pass, all panels that either have a fixed height or none
7623  * specified (auto) are skipped, but their heights are subtracted from the overall container height.  During the second
7624  * pass, all panels with rowHeights are assigned pixel heights in proportion to their percentages based on
7625  * the total <b>remaining</b> container height.  In other words, percentage height panels are designed to fill the space
7626  * left over by all the fixed-height and/or auto-height panels.  Because of this, while you can specify any number of rows
7627  * with different percentages, the rowHeights must always add up to 1 (or 100%) when added together, otherwise your
7628  * layout may not render as expected.  Example usage:</p>
7629  * <pre><code>
7630 // All rows are percentages -- they must add up to 1
7631 var p = new Ext.Panel({
7632     title: 'Row Layout - Percentage Only',
7633     layout:'ux.row',
7634     items: [{
7635         title: 'Row 1',
7636         rowHeight: .25
7637     },{
7638         title: 'Row 2',
7639         rowHeight: .6
7640     },{
7641         title: 'Row 3',
7642         rowHeight: .15
7643     }]
7644 });
7645
7646 // Mix of height and rowHeight -- all rowHeight values must add
7647 // up to 1. The first row will take up exactly 120px, and the last two
7648 // rows will fill the remaining container height.
7649 var p = new Ext.Panel({
7650     title: 'Row Layout - Mixed',
7651     layout:'ux.row',
7652     items: [{
7653         title: 'Row 1',
7654         height: 120,
7655         // standard panel widths are still supported too:
7656         width: '50%' // or 200
7657     },{
7658         title: 'Row 2',
7659         rowHeight: .8,
7660         width: 300
7661     },{
7662         title: 'Row 3',
7663         rowHeight: .2
7664     }]
7665 });
7666 </code></pre>
7667  */
7668 Ext.ux.layout.RowLayout = Ext.extend(Ext.layout.ContainerLayout, {
7669     // private
7670     monitorResize:true,
7671
7672     type: 'row',
7673
7674     // private
7675     allowContainerRemove: false,
7676
7677     // private
7678     isValidParent : function(c, target){
7679         return this.innerCt && c.getPositionEl().dom.parentNode == this.innerCt.dom;
7680     },
7681
7682     getLayoutTargetSize : function() {
7683         var target = this.container.getLayoutTarget(), ret;
7684         if (target) {
7685             ret = target.getViewSize();
7686
7687             // IE in strict mode will return a height of 0 on the 1st pass of getViewSize.
7688             // Use getStyleSize to verify the 0 height, the adjustment pass will then work properly
7689             // with getViewSize
7690             if (Ext.isIE && Ext.isStrict && ret.height == 0){
7691                 ret =  target.getStyleSize();
7692             }
7693
7694             ret.width -= target.getPadding('lr');
7695             ret.height -= target.getPadding('tb');
7696         }
7697         return ret;
7698     },
7699
7700     renderAll : function(ct, target) {
7701         if(!this.innerCt){
7702             // the innerCt prevents wrapping and shuffling while
7703             // the container is resizing
7704             this.innerCt = target.createChild({cls:'x-column-inner'});
7705             this.innerCt.createChild({cls:'x-clear'});
7706         }
7707         Ext.layout.ColumnLayout.superclass.renderAll.call(this, ct, this.innerCt);
7708     },
7709
7710     // private
7711     onLayout : function(ct, target){
7712         var rs = ct.items.items,
7713             len = rs.length,
7714             r,
7715             m,
7716             i,
7717             margins = [];
7718
7719         this.renderAll(ct, target);
7720
7721         var size = this.getLayoutTargetSize();
7722
7723         if(size.width < 1 && size.height < 1){ // display none?
7724             return;
7725         }
7726
7727         var h = size.height,
7728             ph = h;
7729
7730         this.innerCt.setSize({height:h});
7731
7732         // some rows can be percentages while others are fixed
7733         // so we need to make 2 passes
7734
7735         for(i = 0; i < len; i++){
7736             r = rs[i];
7737             m = r.getPositionEl().getMargins('tb');
7738             margins[i] = m;
7739             if(!r.rowHeight){
7740                 ph -= (r.getHeight() + m);
7741             }
7742         }
7743
7744         ph = ph < 0 ? 0 : ph;
7745
7746         for(i = 0; i < len; i++){
7747             r = rs[i];
7748             m = margins[i];
7749             if(r.rowHeight){
7750                 r.setSize({height: Math.floor(r.rowHeight*ph) - m});
7751             }
7752         }
7753
7754         // Browsers differ as to when they account for scrollbars.  We need to re-measure to see if the scrollbar
7755         // spaces were accounted for properly.  If not, re-layout.
7756         if (Ext.isIE) {
7757             if (i = target.getStyle('overflow') && i != 'hidden' && !this.adjustmentPass) {
7758                 var ts = this.getLayoutTargetSize();
7759                 if (ts.width != size.width){
7760                     this.adjustmentPass = true;
7761                     this.onLayout(ct, target);
7762                 }
7763             }
7764         }
7765         delete this.adjustmentPass;
7766     }
7767
7768     <div id="prop-Ext.ux.layout.RowLayout-activeItem"></div>/**
7769      * @property activeItem
7770      * @hide
7771      */
7772 });
7773
7774 Ext.Container.LAYOUTS['ux.row'] = Ext.ux.layout.RowLayout;
7775 Ext.ns('Ext.ux.form');
7776
7777 Ext.ux.form.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
7778     initComponent : function(){
7779         Ext.ux.form.SearchField.superclass.initComponent.call(this);
7780         this.on('specialkey', function(f, e){
7781             if(e.getKey() == e.ENTER){
7782                 this.onTrigger2Click();
7783             }
7784         }, this);
7785     },
7786
7787     validationEvent:false,
7788     validateOnBlur:false,
7789     trigger1Class:'x-form-clear-trigger',
7790     trigger2Class:'x-form-search-trigger',
7791     hideTrigger1:true,
7792     width:180,
7793     hasSearch : false,
7794     paramName : 'query',
7795
7796     onTrigger1Click : function(){
7797         if(this.hasSearch){
7798             this.el.dom.value = '';
7799             var o = {start: 0};
7800             this.store.baseParams = this.store.baseParams || {};
7801             this.store.baseParams[this.paramName] = '';
7802             this.store.reload({params:o});
7803             this.triggers[0].hide();
7804             this.hasSearch = false;
7805         }
7806     },
7807
7808     onTrigger2Click : function(){
7809         var v = this.getRawValue();
7810         if(v.length < 1){
7811             this.onTrigger1Click();
7812             return;
7813         }
7814         var o = {start: 0};
7815         this.store.baseParams = this.store.baseParams || {};
7816         this.store.baseParams[this.paramName] = v;
7817         this.store.reload({params:o});
7818         this.hasSearch = true;
7819         this.triggers[0].show();
7820     }
7821 });Ext.ns('Ext.ux.form');
7822
7823 /**
7824  * @class Ext.ux.form.SelectBox
7825  * @extends Ext.form.ComboBox
7826  * <p>Makes a ComboBox more closely mimic an HTML SELECT.  Supports clicking and dragging
7827  * through the list, with item selection occurring when the mouse button is released.
7828  * When used will automatically set {@link #editable} to false and call {@link Ext.Element#unselectable}
7829  * on inner elements.  Re-enabling editable after calling this will NOT work.</p>
7830  * @author Corey Gilmore http://extjs.com/forum/showthread.php?t=6392
7831  * @history 2007-07-08 jvs
7832  * Slight mods for Ext 2.0
7833  * @xtype selectbox
7834  */
7835 Ext.ux.form.SelectBox = Ext.extend(Ext.form.ComboBox, {
7836         constructor: function(config){
7837                 this.searchResetDelay = 1000;
7838                 config = config || {};
7839                 config = Ext.apply(config || {}, {
7840                         editable: false,
7841                         forceSelection: true,
7842                         rowHeight: false,
7843                         lastSearchTerm: false,
7844                         triggerAction: 'all',
7845                         mode: 'local'
7846                 });
7847
7848                 Ext.ux.form.SelectBox.superclass.constructor.apply(this, arguments);
7849
7850                 this.lastSelectedIndex = this.selectedIndex || 0;
7851         },
7852
7853         initEvents : function(){
7854                 Ext.ux.form.SelectBox.superclass.initEvents.apply(this, arguments);
7855                 // you need to use keypress to capture upper/lower case and shift+key, but it doesn't work in IE
7856                 this.el.on('keydown', this.keySearch, this, true);
7857                 this.cshTask = new Ext.util.DelayedTask(this.clearSearchHistory, this);
7858         },
7859
7860         keySearch : function(e, target, options) {
7861                 var raw = e.getKey();
7862                 var key = String.fromCharCode(raw);
7863                 var startIndex = 0;
7864
7865                 if( !this.store.getCount() ) {
7866                         return;
7867                 }
7868
7869                 switch(raw) {
7870                         case Ext.EventObject.HOME:
7871                                 e.stopEvent();
7872                                 this.selectFirst();
7873                                 return;
7874
7875                         case Ext.EventObject.END:
7876                                 e.stopEvent();
7877                                 this.selectLast();
7878                                 return;
7879
7880                         case Ext.EventObject.PAGEDOWN:
7881                                 this.selectNextPage();
7882                                 e.stopEvent();
7883                                 return;
7884
7885                         case Ext.EventObject.PAGEUP:
7886                                 this.selectPrevPage();
7887                                 e.stopEvent();
7888                                 return;
7889                 }
7890
7891                 // skip special keys other than the shift key
7892                 if( (e.hasModifier() && !e.shiftKey) || e.isNavKeyPress() || e.isSpecialKey() ) {
7893                         return;
7894                 }
7895                 if( this.lastSearchTerm == key ) {
7896                         startIndex = this.lastSelectedIndex;
7897                 }
7898                 this.search(this.displayField, key, startIndex);
7899                 this.cshTask.delay(this.searchResetDelay);
7900         },
7901
7902         onRender : function(ct, position) {
7903                 this.store.on('load', this.calcRowsPerPage, this);
7904                 Ext.ux.form.SelectBox.superclass.onRender.apply(this, arguments);
7905                 if( this.mode == 'local' ) {
7906             this.initList();
7907                         this.calcRowsPerPage();
7908                 }
7909         },
7910
7911         onSelect : function(record, index, skipCollapse){
7912                 if(this.fireEvent('beforeselect', this, record, index) !== false){
7913                         this.setValue(record.data[this.valueField || this.displayField]);
7914                         if( !skipCollapse ) {
7915                                 this.collapse();
7916                         }
7917                         this.lastSelectedIndex = index + 1;
7918                         this.fireEvent('select', this, record, index);
7919                 }
7920         },
7921
7922         afterRender : function() {
7923                 Ext.ux.form.SelectBox.superclass.afterRender.apply(this, arguments);
7924                 if(Ext.isWebKit) {
7925                         this.el.swallowEvent('mousedown', true);
7926                 }
7927                 this.el.unselectable();
7928                 this.innerList.unselectable();
7929                 this.trigger.unselectable();
7930                 this.innerList.on('mouseup', function(e, target, options) {
7931                         if( target.id && target.id == this.innerList.id ) {
7932                                 return;
7933                         }
7934                         this.onViewClick();
7935                 }, this);
7936
7937                 this.innerList.on('mouseover', function(e, target, options) {
7938                         if( target.id && target.id == this.innerList.id ) {
7939                                 return;
7940                         }
7941                         this.lastSelectedIndex = this.view.getSelectedIndexes()[0] + 1;
7942                         this.cshTask.delay(this.searchResetDelay);
7943                 }, this);
7944
7945                 this.trigger.un('click', this.onTriggerClick, this);
7946                 this.trigger.on('mousedown', function(e, target, options) {
7947                         e.preventDefault();
7948                         this.onTriggerClick();
7949                 }, this);
7950
7951                 this.on('collapse', function(e, target, options) {
7952                         Ext.getDoc().un('mouseup', this.collapseIf, this);
7953                 }, this, true);
7954
7955                 this.on('expand', function(e, target, options) {
7956                         Ext.getDoc().on('mouseup', this.collapseIf, this);
7957                 }, this, true);
7958         },
7959
7960         clearSearchHistory : function() {
7961                 this.lastSelectedIndex = 0;
7962                 this.lastSearchTerm = false;
7963         },
7964
7965         selectFirst : function() {
7966                 this.focusAndSelect(this.store.data.first());
7967         },
7968
7969         selectLast : function() {
7970                 this.focusAndSelect(this.store.data.last());
7971         },
7972
7973         selectPrevPage : function() {
7974                 if( !this.rowHeight ) {
7975                         return;
7976                 }
7977                 var index = Math.max(this.selectedIndex-this.rowsPerPage, 0);
7978                 this.focusAndSelect(this.store.getAt(index));
7979         },
7980
7981         selectNextPage : function() {
7982                 if( !this.rowHeight ) {
7983                         return;
7984                 }
7985                 var index = Math.min(this.selectedIndex+this.rowsPerPage, this.store.getCount() - 1);
7986                 this.focusAndSelect(this.store.getAt(index));
7987         },
7988
7989         search : function(field, value, startIndex) {
7990                 field = field || this.displayField;
7991                 this.lastSearchTerm = value;
7992                 var index = this.store.find.apply(this.store, arguments);
7993                 if( index !== -1 ) {
7994                         this.focusAndSelect(index);
7995                 }
7996         },
7997
7998         focusAndSelect : function(record) {
7999         var index = Ext.isNumber(record) ? record : this.store.indexOf(record);
8000         this.select(index, this.isExpanded());
8001         this.onSelect(this.store.getAt(index), index, this.isExpanded());
8002         },
8003
8004         calcRowsPerPage : function() {
8005                 if( this.store.getCount() ) {
8006                         this.rowHeight = Ext.fly(this.view.getNode(0)).getHeight();
8007                         this.rowsPerPage = this.maxHeight / this.rowHeight;
8008                 } else {
8009                         this.rowHeight = false;
8010                 }
8011         }
8012
8013 });
8014
8015 Ext.reg('selectbox', Ext.ux.form.SelectBox);
8016
8017 //backwards compat
8018 Ext.ux.SelectBox = Ext.ux.form.SelectBox;
8019 <div id="prop-Ext.ux.form.SelectBox-SlidingPager"></div>/**
8020  * Plugin for PagingToolbar which replaces the textfield input with a slider
8021  */
8022 Ext.ux.SlidingPager = Ext.extend(Object, {
8023     init : function(pbar){
8024         var idx = pbar.items.indexOf(pbar.inputItem);
8025         Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
8026             c.hide();
8027         });
8028         var slider = new Ext.Slider({
8029             width: 114,
8030             minValue: 1,
8031             maxValue: 1,
8032             plugins: new Ext.slider.Tip({
8033                 getText : function(thumb) {
8034                     return String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
8035                 }
8036             }),
8037             listeners: {
8038                 changecomplete: function(s, v){
8039                     pbar.changePage(v);
8040                 }
8041             }
8042         });
8043         pbar.insert(idx + 1, slider);
8044         pbar.on({
8045             change: function(pb, data){
8046                 slider.setMaxValue(data.pages);
8047                 slider.setValue(data.activePage);
8048             }
8049         });
8050     }
8051 });Ext.ns('Ext.ux.form');
8052
8053 /**
8054  * @class Ext.ux.form.SpinnerField
8055  * @extends Ext.form.NumberField
8056  * Creates a field utilizing Ext.ux.Spinner
8057  * @xtype spinnerfield
8058  */
8059 Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
8060     actionMode: 'wrap',
8061     deferHeight: true,
8062     autoSize: Ext.emptyFn,
8063     onBlur: Ext.emptyFn,
8064     adjustSize: Ext.BoxComponent.prototype.adjustSize,
8065
8066         constructor: function(config) {
8067                 var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
8068
8069                 var spl = this.spinner = new Ext.ux.Spinner(spinnerConfig);
8070
8071                 var plugins = config.plugins
8072                         ? (Ext.isArray(config.plugins)
8073                                 ? config.plugins.push(spl)
8074                                 : [config.plugins, spl])
8075                         : spl;
8076
8077                 Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
8078         },
8079
8080     // private
8081     getResizeEl: function(){
8082         return this.wrap;
8083     },
8084
8085     // private
8086     getPositionEl: function(){
8087         return this.wrap;
8088     },
8089
8090     // private
8091     alignErrorIcon: function(){
8092         if (this.wrap) {
8093             this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
8094         }
8095     },
8096
8097     validateBlur: function(){
8098         return true;
8099     }
8100 });
8101
8102 Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);
8103
8104 //backwards compat
8105 Ext.form.SpinnerField = Ext.ux.form.SpinnerField;
8106 /**
8107  * @class Ext.ux.Spinner
8108  * @extends Ext.util.Observable
8109  * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
8110  */
8111 Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
8112     incrementValue: 1,
8113     alternateIncrementValue: 5,
8114     triggerClass: 'x-form-spinner-trigger',
8115     splitterClass: 'x-form-spinner-splitter',
8116     alternateKey: Ext.EventObject.shiftKey,
8117     defaultValue: 0,
8118     accelerate: false,
8119
8120     constructor: function(config){
8121         Ext.ux.Spinner.superclass.constructor.call(this, config);
8122         Ext.apply(this, config);
8123         this.mimicing = false;
8124     },
8125
8126     init: function(field){
8127         this.field = field;
8128
8129         field.afterMethod('onRender', this.doRender, this);
8130         field.afterMethod('onEnable', this.doEnable, this);
8131         field.afterMethod('onDisable', this.doDisable, this);
8132         field.afterMethod('afterRender', this.doAfterRender, this);
8133         field.afterMethod('onResize', this.doResize, this);
8134         field.afterMethod('onFocus', this.doFocus, this);
8135         field.beforeMethod('onDestroy', this.doDestroy, this);
8136     },
8137
8138     doRender: function(ct, position){
8139         var el = this.el = this.field.getEl();
8140         var f = this.field;
8141
8142         if (!f.wrap) {
8143             f.wrap = this.wrap = el.wrap({
8144                 cls: "x-form-field-wrap"
8145             });
8146         }
8147         else {
8148             this.wrap = f.wrap.addClass('x-form-field-wrap');
8149         }
8150
8151         this.trigger = this.wrap.createChild({
8152             tag: "img",
8153             src: Ext.BLANK_IMAGE_URL,
8154             cls: "x-form-trigger " + this.triggerClass
8155         });
8156
8157         if (!f.width) {
8158             this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
8159         }
8160
8161         this.splitter = this.wrap.createChild({
8162             tag: 'div',
8163             cls: this.splitterClass,
8164             style: 'width:13px; height:2px;'
8165         });
8166         this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
8167
8168         this.proxy = this.trigger.createProxy('', this.splitter, true);
8169         this.proxy.addClass("x-form-spinner-proxy");
8170         this.proxy.setStyle('left', '0px');
8171         this.proxy.setSize(14, 1);
8172         this.proxy.hide();
8173         this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
8174             dragElId: this.proxy.id
8175         });
8176
8177         this.initTrigger();
8178         this.initSpinner();
8179     },
8180
8181     doAfterRender: function(){
8182         var y;
8183         if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
8184             this.el.position();
8185             this.el.setY(y);
8186         }
8187     },
8188
8189     doEnable: function(){
8190         if (this.wrap) {
8191             this.disabled = false;
8192             this.wrap.removeClass(this.field.disabledClass);
8193         }
8194     },
8195
8196     doDisable: function(){
8197         if (this.wrap) {
8198                 this.disabled = true;
8199             this.wrap.addClass(this.field.disabledClass);
8200             this.el.removeClass(this.field.disabledClass);
8201         }
8202     },
8203
8204     doResize: function(w, h){
8205         if (typeof w == 'number') {
8206             this.el.setWidth(w - this.trigger.getWidth());
8207         }
8208         this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
8209     },
8210
8211     doFocus: function(){
8212         if (!this.mimicing) {
8213             this.wrap.addClass('x-trigger-wrap-focus');
8214             this.mimicing = true;
8215             Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
8216                 delay: 10
8217             });
8218             this.el.on('keydown', this.checkTab, this);
8219         }
8220     },
8221
8222     // private
8223     checkTab: function(e){
8224         if (e.getKey() == e.TAB) {
8225             this.triggerBlur();
8226         }
8227     },
8228
8229     // private
8230     mimicBlur: function(e){
8231         if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
8232             this.triggerBlur();
8233         }
8234     },
8235
8236     // private
8237     triggerBlur: function(){
8238         this.mimicing = false;
8239         Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
8240         this.el.un("keydown", this.checkTab, this);
8241         this.field.beforeBlur();
8242         this.wrap.removeClass('x-trigger-wrap-focus');
8243         this.field.onBlur.call(this.field);
8244     },
8245
8246     initTrigger: function(){
8247         this.trigger.addClassOnOver('x-form-trigger-over');
8248         this.trigger.addClassOnClick('x-form-trigger-click');
8249     },
8250
8251     initSpinner: function(){
8252         this.field.addEvents({
8253             'spin': true,
8254             'spinup': true,
8255             'spindown': true
8256         });
8257
8258         this.keyNav = new Ext.KeyNav(this.el, {
8259             "up": function(e){
8260                 e.preventDefault();
8261                 this.onSpinUp();
8262             },
8263
8264             "down": function(e){
8265                 e.preventDefault();
8266                 this.onSpinDown();
8267             },
8268
8269             "pageUp": function(e){
8270                 e.preventDefault();
8271                 this.onSpinUpAlternate();
8272             },
8273
8274             "pageDown": function(e){
8275                 e.preventDefault();
8276                 this.onSpinDownAlternate();
8277             },
8278
8279             scope: this
8280         });
8281
8282         this.repeater = new Ext.util.ClickRepeater(this.trigger, {
8283             accelerate: this.accelerate
8284         });
8285         this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
8286             preventDefault: true
8287         });
8288
8289         this.field.mon(this.trigger, {
8290             mouseover: this.onMouseOver,
8291             mouseout: this.onMouseOut,
8292             mousemove: this.onMouseMove,
8293             mousedown: this.onMouseDown,
8294             mouseup: this.onMouseUp,
8295             scope: this,
8296             preventDefault: true
8297         });
8298
8299         this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
8300
8301         this.dd.setXConstraint(0, 0, 10)
8302         this.dd.setYConstraint(1500, 1500, 10);
8303         this.dd.endDrag = this.endDrag.createDelegate(this);
8304         this.dd.startDrag = this.startDrag.createDelegate(this);
8305         this.dd.onDrag = this.onDrag.createDelegate(this);
8306     },
8307
8308     onMouseOver: function(){
8309         if (this.disabled) {
8310             return;
8311         }
8312         var middle = this.getMiddle();
8313         this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
8314         this.trigger.addClass(this.tmpHoverClass);
8315     },
8316
8317     //private
8318     onMouseOut: function(){
8319         this.trigger.removeClass(this.tmpHoverClass);
8320     },
8321
8322     //private
8323     onMouseMove: function(){
8324         if (this.disabled) {
8325             return;
8326         }
8327         var middle = this.getMiddle();
8328         if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
8329         ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
8330         }
8331     },
8332
8333     //private
8334     onMouseDown: function(){
8335         if (this.disabled) {
8336             return;
8337         }
8338         var middle = this.getMiddle();
8339         this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
8340         this.trigger.addClass(this.tmpClickClass);
8341     },
8342
8343     //private
8344     onMouseUp: function(){
8345         this.trigger.removeClass(this.tmpClickClass);
8346     },
8347
8348     //private
8349     onTriggerClick: function(){
8350         if (this.disabled || this.el.dom.readOnly) {
8351             return;
8352         }
8353         var middle = this.getMiddle();
8354         var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
8355         this['onSpin' + ud]();
8356     },
8357
8358     //private
8359     getMiddle: function(){
8360         var t = this.trigger.getTop();
8361         var h = this.trigger.getHeight();
8362         var middle = t + (h / 2);
8363         return middle;
8364     },
8365
8366     //private
8367     //checks if control is allowed to spin
8368     isSpinnable: function(){
8369         if (this.disabled || this.el.dom.readOnly) {
8370             Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
8371             return false;
8372         }
8373         return true;
8374     },
8375
8376     handleMouseWheel: function(e){
8377         //disable scrolling when not focused
8378         if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
8379             return;
8380         }
8381
8382         var delta = e.getWheelDelta();
8383         if (delta > 0) {
8384             this.onSpinUp();
8385             e.stopEvent();
8386         }
8387         else
8388             if (delta < 0) {
8389                 this.onSpinDown();
8390                 e.stopEvent();
8391             }
8392     },
8393
8394     //private
8395     startDrag: function(){
8396         this.proxy.show();
8397         this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
8398     },
8399
8400     //private
8401     endDrag: function(){
8402         this.proxy.hide();
8403     },
8404
8405     //private
8406     onDrag: function(){
8407         if (this.disabled) {
8408             return;
8409         }
8410         var y = Ext.fly(this.dd.getDragEl()).getTop();
8411         var ud = '';
8412
8413         if (this._previousY > y) {
8414             ud = 'Up';
8415         } //up
8416         if (this._previousY < y) {
8417             ud = 'Down';
8418         } //down
8419         if (ud != '') {
8420             this['onSpin' + ud]();
8421         }
8422
8423         this._previousY = y;
8424     },
8425
8426     //private
8427     onSpinUp: function(){
8428         if (this.isSpinnable() == false) {
8429             return;
8430         }
8431         if (Ext.EventObject.shiftKey == true) {
8432             this.onSpinUpAlternate();
8433             return;
8434         }
8435         else {
8436             this.spin(false, false);
8437         }
8438         this.field.fireEvent("spin", this);
8439         this.field.fireEvent("spinup", this);
8440     },
8441
8442     //private
8443     onSpinDown: function(){
8444         if (this.isSpinnable() == false) {
8445             return;
8446         }
8447         if (Ext.EventObject.shiftKey == true) {
8448             this.onSpinDownAlternate();
8449             return;
8450         }
8451         else {
8452             this.spin(true, false);
8453         }
8454         this.field.fireEvent("spin", this);
8455         this.field.fireEvent("spindown", this);
8456     },
8457
8458     //private
8459     onSpinUpAlternate: function(){
8460         if (this.isSpinnable() == false) {
8461             return;
8462         }
8463         this.spin(false, true);
8464         this.field.fireEvent("spin", this);
8465         this.field.fireEvent("spinup", this);
8466     },
8467
8468     //private
8469     onSpinDownAlternate: function(){
8470         if (this.isSpinnable() == false) {
8471             return;
8472         }
8473         this.spin(true, true);
8474         this.field.fireEvent("spin", this);
8475         this.field.fireEvent("spindown", this);
8476     },
8477
8478     spin: function(down, alternate){
8479         var v = parseFloat(this.field.getValue());
8480         var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
8481         (down == true) ? v -= incr : v += incr;
8482
8483         v = (isNaN(v)) ? this.defaultValue : v;
8484         v = this.fixBoundries(v);
8485         this.field.setRawValue(v);
8486     },
8487
8488     fixBoundries: function(value){
8489         var v = value;
8490
8491         if (this.field.minValue != undefined && v < this.field.minValue) {
8492             v = this.field.minValue;
8493         }
8494         if (this.field.maxValue != undefined && v > this.field.maxValue) {
8495             v = this.field.maxValue;
8496         }
8497
8498         return this.fixPrecision(v);
8499     },
8500
8501     // private
8502     fixPrecision: function(value){
8503         var nan = isNaN(value);
8504         if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
8505             return nan ? '' : value;
8506         }
8507         return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
8508     },
8509
8510     doDestroy: function(){
8511         if (this.trigger) {
8512             this.trigger.remove();
8513         }
8514         if (this.wrap) {
8515             this.wrap.remove();
8516             delete this.field.wrap;
8517         }
8518
8519         if (this.splitter) {
8520             this.splitter.remove();
8521         }
8522
8523         if (this.dd) {
8524             this.dd.unreg();
8525             this.dd = null;
8526         }
8527
8528         if (this.proxy) {
8529             this.proxy.remove();
8530         }
8531
8532         if (this.repeater) {
8533             this.repeater.purgeListeners();
8534         }
8535         if (this.mimicing){
8536             Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
8537         }
8538     }
8539 });
8540
8541 //backwards compat
8542 Ext.form.Spinner = Ext.ux.Spinner;Ext.ux.Spotlight = function(config){
8543     Ext.apply(this, config);
8544 }
8545 Ext.ux.Spotlight.prototype = {
8546     active : false,
8547     animate : true,
8548     duration: .25,
8549     easing:'easeNone',
8550
8551     // private
8552     animated : false,
8553
8554     createElements : function(){
8555         var bd = Ext.getBody();
8556
8557         this.right = bd.createChild({cls:'x-spotlight'});
8558         this.left = bd.createChild({cls:'x-spotlight'});
8559         this.top = bd.createChild({cls:'x-spotlight'});
8560         this.bottom = bd.createChild({cls:'x-spotlight'});
8561
8562         this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
8563     },
8564
8565     show : function(el, callback, scope){
8566         if(this.animated){
8567             this.show.defer(50, this, [el, callback, scope]);
8568             return;
8569         }
8570         this.el = Ext.get(el);
8571         if(!this.right){
8572             this.createElements();
8573         }
8574         if(!this.active){
8575             this.all.setDisplayed('');
8576             this.applyBounds(true, false);
8577             this.active = true;
8578             Ext.EventManager.onWindowResize(this.syncSize, this);
8579             this.applyBounds(false, this.animate, false, callback, scope);
8580         }else{
8581             this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
8582         }
8583     },
8584
8585     hide : function(callback, scope){
8586         if(this.animated){
8587             this.hide.defer(50, this, [callback, scope]);
8588             return;
8589         }
8590         Ext.EventManager.removeResizeListener(this.syncSize, this);
8591         this.applyBounds(true, this.animate, true, callback, scope);
8592     },
8593
8594     doHide : function(){
8595         this.active = false;
8596         this.all.setDisplayed(false);
8597     },
8598
8599     syncSize : function(){
8600         this.applyBounds(false, false);
8601     },
8602
8603     applyBounds : function(basePts, anim, doHide, callback, scope){
8604
8605         var rg = this.el.getRegion();
8606
8607         var dw = Ext.lib.Dom.getViewWidth(true);
8608         var dh = Ext.lib.Dom.getViewHeight(true);
8609
8610         var c = 0, cb = false;
8611         if(anim){
8612             cb = {
8613                 callback: function(){
8614                     c++;
8615                     if(c == 4){
8616                         this.animated = false;
8617                         if(doHide){
8618                             this.doHide();
8619                         }
8620                         Ext.callback(callback, scope, [this]);
8621                     }
8622                 },
8623                 scope: this,
8624                 duration: this.duration,
8625                 easing: this.easing
8626             };
8627             this.animated = true;
8628         }
8629
8630         this.right.setBounds(
8631                 rg.right,
8632                 basePts ? dh : rg.top,
8633                 dw - rg.right,
8634                 basePts ? 0 : (dh - rg.top),
8635                 cb);
8636
8637         this.left.setBounds(
8638                 0,
8639                 0,
8640                 rg.left,
8641                 basePts ? 0 : rg.bottom,
8642                 cb);
8643
8644         this.top.setBounds(
8645                 basePts ? dw : rg.left,
8646                 0,
8647                 basePts ? 0 : dw - rg.left,
8648                 rg.top,
8649                 cb);
8650
8651         this.bottom.setBounds(
8652                 0,
8653                 rg.bottom,
8654                 basePts ? 0 : rg.right,
8655                 dh - rg.bottom,
8656                 cb);
8657
8658         if(!anim){
8659             if(doHide){
8660                 this.doHide();
8661             }
8662             if(callback){
8663                 Ext.callback(callback, scope, [this]);
8664             }
8665         }
8666     },
8667
8668     destroy : function(){
8669         this.doHide();
8670         Ext.destroy(
8671             this.right,
8672             this.left,
8673             this.top,
8674             this.bottom);
8675         delete this.el;
8676         delete this.all;
8677     }
8678 };
8679
8680 //backwards compat
8681 Ext.Spotlight = Ext.ux.Spotlight;/**
8682  * @class Ext.ux.StatusBar
8683  * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
8684  * supporting the standard {@link Ext.Toolbar} interface for adding buttons, menus and other items, the StatusBar
8685  * provides a greedy status element that can be aligned to either side and has convenient methods for setting the
8686  * status text and icon.  You can also indicate that something is processing using the {@link #showBusy} method.</p>
8687  * <pre><code>
8688 new Ext.Panel({
8689     title: 'StatusBar',
8690     // etc.
8691     bbar: new Ext.ux.StatusBar({
8692         id: 'my-status',
8693
8694         // defaults to use when the status is cleared:
8695         defaultText: 'Default status text',
8696         defaultIconCls: 'default-icon',
8697
8698         // values to set initially:
8699         text: 'Ready',
8700         iconCls: 'ready-icon',
8701
8702         // any standard Toolbar items:
8703         items: [{
8704             text: 'A Button'
8705         }, '-', 'Plain Text']
8706     })
8707 });
8708
8709 // Update the status bar later in code:
8710 var sb = Ext.getCmp('my-status');
8711 sb.setStatus({
8712     text: 'OK',
8713     iconCls: 'ok-icon',
8714     clear: true // auto-clear after a set interval
8715 });
8716
8717 // Set the status bar to show that something is processing:
8718 sb.showBusy();
8719
8720 // processing....
8721
8722 sb.clearStatus(); // once completeed
8723 </code></pre>
8724  * @extends Ext.Toolbar
8725  * @constructor
8726  * Creates a new StatusBar
8727  * @param {Object/Array} config A config object
8728  */
8729 Ext.ux.StatusBar = Ext.extend(Ext.Toolbar, {
8730     <div id="cfg-Ext.ux.StatusBar-statusAlign"></div>/**
8731      * @cfg {String} statusAlign
8732      * The alignment of the status element within the overall StatusBar layout.  When the StatusBar is rendered,
8733      * it creates an internal div containing the status text and icon.  Any additional Toolbar items added in the
8734      * StatusBar's {@link #items} config, or added via {@link #add} or any of the supported add* methods, will be
8735      * rendered, in added order, to the opposite side.  The status element is greedy, so it will automatically
8736      * expand to take up all sapce left over by any other items.  Example usage:
8737      * <pre><code>
8738 // Create a left-aligned status bar containing a button,
8739 // separator and text item that will be right-aligned (default):
8740 new Ext.Panel({
8741     title: 'StatusBar',
8742     // etc.
8743     bbar: new Ext.ux.StatusBar({
8744         defaultText: 'Default status text',
8745         id: 'status-id',
8746         items: [{
8747             text: 'A Button'
8748         }, '-', 'Plain Text']
8749     })
8750 });
8751
8752 // By adding the statusAlign config, this will create the
8753 // exact same toolbar, except the status and toolbar item
8754 // layout will be reversed from the previous example:
8755 new Ext.Panel({
8756     title: 'StatusBar',
8757     // etc.
8758     bbar: new Ext.ux.StatusBar({
8759         defaultText: 'Default status text',
8760         id: 'status-id',
8761         statusAlign: 'right',
8762         items: [{
8763             text: 'A Button'
8764         }, '-', 'Plain Text']
8765     })
8766 });
8767 </code></pre>
8768      */
8769     <div id="cfg-Ext.ux.StatusBar-defaultText"></div>/**
8770      * @cfg {String} defaultText
8771      * The default {@link #text} value.  This will be used anytime the status bar is cleared with the
8772      * <tt>useDefaults:true</tt> option (defaults to '').
8773      */
8774     <div id="cfg-Ext.ux.StatusBar-defaultIconCls"></div>/**
8775      * @cfg {String} defaultIconCls
8776      * The default {@link #iconCls} value (see the iconCls docs for additional details about customizing the icon).
8777      * This will be used anytime the status bar is cleared with the <tt>useDefaults:true</tt> option (defaults to '').
8778      */
8779     <div id="cfg-Ext.ux.StatusBar-text"></div>/**
8780      * @cfg {String} text
8781      * A string that will be <b>initially</b> set as the status message.  This string
8782      * will be set as innerHTML (html tags are accepted) for the toolbar item.
8783      * If not specified, the value set for <code>{@link #defaultText}</code>
8784      * will be used.
8785      */
8786     <div id="cfg-Ext.ux.StatusBar-iconCls"></div>/**
8787      * @cfg {String} iconCls
8788      * A CSS class that will be <b>initially</b> set as the status bar icon and is
8789      * expected to provide a background image (defaults to '').
8790      * Example usage:<pre><code>
8791 // Example CSS rule:
8792 .x-statusbar .x-status-custom {
8793     padding-left: 25px;
8794     background: transparent url(images/custom-icon.gif) no-repeat 3px 2px;
8795 }
8796
8797 // Setting a default icon:
8798 var sb = new Ext.ux.StatusBar({
8799     defaultIconCls: 'x-status-custom'
8800 });
8801
8802 // Changing the icon:
8803 sb.setStatus({
8804     text: 'New status',
8805     iconCls: 'x-status-custom'
8806 });
8807 </code></pre>
8808      */
8809
8810     <div id="cfg-Ext.ux.StatusBar-cls"></div>/**
8811      * @cfg {String} cls
8812      * The base class applied to the containing element for this component on render (defaults to 'x-statusbar')
8813      */
8814     cls : 'x-statusbar',
8815     <div id="cfg-Ext.ux.StatusBar-busyIconCls"></div>/**
8816      * @cfg {String} busyIconCls
8817      * The default <code>{@link #iconCls}</code> applied when calling
8818      * <code>{@link #showBusy}</code> (defaults to <tt>'x-status-busy'</tt>).
8819      * It can be overridden at any time by passing the <code>iconCls</code>
8820      * argument into <code>{@link #showBusy}</code>.
8821      */
8822     busyIconCls : 'x-status-busy',
8823     <div id="cfg-Ext.ux.StatusBar-busyText"></div>/**
8824      * @cfg {String} busyText
8825      * The default <code>{@link #text}</code> applied when calling
8826      * <code>{@link #showBusy}</code> (defaults to <tt>'Loading...'</tt>).
8827      * It can be overridden at any time by passing the <code>text</code>
8828      * argument into <code>{@link #showBusy}</code>.
8829      */
8830     busyText : 'Loading...',
8831     <div id="cfg-Ext.ux.StatusBar-autoClear"></div>/**
8832      * @cfg {Number} autoClear
8833      * The number of milliseconds to wait after setting the status via
8834      * <code>{@link #setStatus}</code> before automatically clearing the status
8835      * text and icon (defaults to <tt>5000</tt>).  Note that this only applies
8836      * when passing the <tt>clear</tt> argument to <code>{@link #setStatus}</code>
8837      * since that is the only way to defer clearing the status.  This can
8838      * be overridden by specifying a different <tt>wait</tt> value in
8839      * <code>{@link #setStatus}</code>. Calls to <code>{@link #clearStatus}</code>
8840      * always clear the status bar immediately and ignore this value.
8841      */
8842     autoClear : 5000,
8843
8844     <div id="cfg-Ext.ux.StatusBar-emptyText"></div>/**
8845      * @cfg {String} emptyText
8846      * The text string to use if no text has been set.  Defaults to
8847      * <tt>'&nbsp;'</tt>).  If there are no other items in the toolbar using
8848      * an empty string (<tt>''</tt>) for this value would end up in the toolbar
8849      * height collapsing since the empty string will not maintain the toolbar
8850      * height.  Use <tt>''</tt> if the toolbar should collapse in height
8851      * vertically when no text is specified and there are no other items in
8852      * the toolbar.
8853      */
8854     emptyText : '&nbsp;',
8855
8856     // private
8857     activeThreadId : 0,
8858
8859     // private
8860     initComponent : function(){
8861         if(this.statusAlign=='right'){
8862             this.cls += ' x-status-right';
8863         }
8864         Ext.ux.StatusBar.superclass.initComponent.call(this);
8865     },
8866
8867     // private
8868     afterRender : function(){
8869         Ext.ux.StatusBar.superclass.afterRender.call(this);
8870
8871         var right = this.statusAlign == 'right';
8872         this.currIconCls = this.iconCls || this.defaultIconCls;
8873         this.statusEl = new Ext.Toolbar.TextItem({
8874             cls: 'x-status-text ' + (this.currIconCls || ''),
8875             text: this.text || this.defaultText || ''
8876         });
8877
8878         if(right){
8879             this.add('->');
8880             this.add(this.statusEl);
8881         }else{
8882             this.insert(0, this.statusEl);
8883             this.insert(1, '->');
8884         }
8885         this.doLayout();
8886     },
8887
8888     <div id="method-Ext.ux.StatusBar-setStatus"></div>/**
8889      * Sets the status {@link #text} and/or {@link #iconCls}. Also supports automatically clearing the
8890      * status that was set after a specified interval.
8891      * @param {Object/String} config A config object specifying what status to set, or a string assumed
8892      * to be the status text (and all other options are defaulted as explained below). A config
8893      * object containing any or all of the following properties can be passed:<ul>
8894      * <li><tt>text</tt> {String} : (optional) The status text to display.  If not specified, any current
8895      * status text will remain unchanged.</li>
8896      * <li><tt>iconCls</tt> {String} : (optional) The CSS class used to customize the status icon (see
8897      * {@link #iconCls} for details). If not specified, any current iconCls will remain unchanged.</li>
8898      * <li><tt>clear</tt> {Boolean/Number/Object} : (optional) Allows you to set an internal callback that will
8899      * automatically clear the status text and iconCls after a specified amount of time has passed. If clear is not
8900      * specified, the new status will not be auto-cleared and will stay until updated again or cleared using
8901      * {@link #clearStatus}. If <tt>true</tt> is passed, the status will be cleared using {@link #autoClear},
8902      * {@link #defaultText} and {@link #defaultIconCls} via a fade out animation. If a numeric value is passed,
8903      * it will be used as the callback interval (in milliseconds), overriding the {@link #autoClear} value.
8904      * All other options will be defaulted as with the boolean option.  To customize any other options,
8905      * you can pass an object in the format:<ul>
8906      *    <li><tt>wait</tt> {Number} : (optional) The number of milliseconds to wait before clearing
8907      *    (defaults to {@link #autoClear}).</li>
8908      *    <li><tt>anim</tt> {Number} : (optional) False to clear the status immediately once the callback
8909      *    executes (defaults to true which fades the status out).</li>
8910      *    <li><tt>useDefaults</tt> {Number} : (optional) False to completely clear the status text and iconCls
8911      *    (defaults to true which uses {@link #defaultText} and {@link #defaultIconCls}).</li>
8912      * </ul></li></ul>
8913      * Example usage:<pre><code>
8914 // Simple call to update the text
8915 statusBar.setStatus('New status');
8916
8917 // Set the status and icon, auto-clearing with default options:
8918 statusBar.setStatus({
8919     text: 'New status',
8920     iconCls: 'x-status-custom',
8921     clear: true
8922 });
8923
8924 // Auto-clear with custom options:
8925 statusBar.setStatus({
8926     text: 'New status',
8927     iconCls: 'x-status-custom',
8928     clear: {
8929         wait: 8000,
8930         anim: false,
8931         useDefaults: false
8932     }
8933 });
8934 </code></pre>
8935      * @return {Ext.ux.StatusBar} this
8936      */
8937     setStatus : function(o){
8938         o = o || {};
8939
8940         if(typeof o == 'string'){
8941             o = {text:o};
8942         }
8943         if(o.text !== undefined){
8944             this.setText(o.text);
8945         }
8946         if(o.iconCls !== undefined){
8947             this.setIcon(o.iconCls);
8948         }
8949
8950         if(o.clear){
8951             var c = o.clear,
8952                 wait = this.autoClear,
8953                 defaults = {useDefaults: true, anim: true};
8954
8955             if(typeof c == 'object'){
8956                 c = Ext.applyIf(c, defaults);
8957                 if(c.wait){
8958                     wait = c.wait;
8959                 }
8960             }else if(typeof c == 'number'){
8961                 wait = c;
8962                 c = defaults;
8963             }else if(typeof c == 'boolean'){
8964                 c = defaults;
8965             }
8966
8967             c.threadId = this.activeThreadId;
8968             this.clearStatus.defer(wait, this, [c]);
8969         }
8970         return this;
8971     },
8972
8973     <div id="method-Ext.ux.StatusBar-clearStatus"></div>/**
8974      * Clears the status {@link #text} and {@link #iconCls}. Also supports clearing via an optional fade out animation.
8975      * @param {Object} config (optional) A config object containing any or all of the following properties.  If this
8976      * object is not specified the status will be cleared using the defaults below:<ul>
8977      * <li><tt>anim</tt> {Boolean} : (optional) True to clear the status by fading out the status element (defaults
8978      * to false which clears immediately).</li>
8979      * <li><tt>useDefaults</tt> {Boolean} : (optional) True to reset the text and icon using {@link #defaultText} and
8980      * {@link #defaultIconCls} (defaults to false which sets the text to '' and removes any existing icon class).</li>
8981      * </ul>
8982      * @return {Ext.ux.StatusBar} this
8983      */
8984     clearStatus : function(o){
8985         o = o || {};
8986
8987         if(o.threadId && o.threadId !== this.activeThreadId){
8988             // this means the current call was made internally, but a newer
8989             // thread has set a message since this call was deferred.  Since
8990             // we don't want to overwrite a newer message just ignore.
8991             return this;
8992         }
8993
8994         var text = o.useDefaults ? this.defaultText : this.emptyText,
8995             iconCls = o.useDefaults ? (this.defaultIconCls ? this.defaultIconCls : '') : '';
8996
8997         if(o.anim){
8998             // animate the statusEl Ext.Element
8999             this.statusEl.el.fadeOut({
9000                 remove: false,
9001                 useDisplay: true,
9002                 scope: this,
9003                 callback: function(){
9004                     this.setStatus({
9005                             text: text,
9006                             iconCls: iconCls
9007                         });
9008
9009                     this.statusEl.el.show();
9010                 }
9011             });
9012         }else{
9013             // hide/show the el to avoid jumpy text or icon
9014             this.statusEl.hide();
9015                 this.setStatus({
9016                     text: text,
9017                     iconCls: iconCls
9018                 });
9019             this.statusEl.show();
9020         }
9021         return this;
9022     },
9023
9024     <div id="method-Ext.ux.StatusBar-setText"></div>/**
9025      * Convenience method for setting the status text directly.  For more flexible options see {@link #setStatus}.
9026      * @param {String} text (optional) The text to set (defaults to '')
9027      * @return {Ext.ux.StatusBar} this
9028      */
9029     setText : function(text){
9030         this.activeThreadId++;
9031         this.text = text || '';
9032         if(this.rendered){
9033             this.statusEl.setText(this.text);
9034         }
9035         return this;
9036     },
9037
9038     <div id="method-Ext.ux.StatusBar-getText"></div>/**
9039      * Returns the current status text.
9040      * @return {String} The status text
9041      */
9042     getText : function(){
9043         return this.text;
9044     },
9045
9046     <div id="method-Ext.ux.StatusBar-setIcon"></div>/**
9047      * Convenience method for setting the status icon directly.  For more flexible options see {@link #setStatus}.
9048      * See {@link #iconCls} for complete details about customizing the icon.
9049      * @param {String} iconCls (optional) The icon class to set (defaults to '', and any current icon class is removed)
9050      * @return {Ext.ux.StatusBar} this
9051      */
9052     setIcon : function(cls){
9053         this.activeThreadId++;
9054         cls = cls || '';
9055
9056         if(this.rendered){
9057                 if(this.currIconCls){
9058                     this.statusEl.removeClass(this.currIconCls);
9059                     this.currIconCls = null;
9060                 }
9061                 if(cls.length > 0){
9062                     this.statusEl.addClass(cls);
9063                     this.currIconCls = cls;
9064                 }
9065         }else{
9066             this.currIconCls = cls;
9067         }
9068         return this;
9069     },
9070
9071     <div id="method-Ext.ux.StatusBar-showBusy"></div>/**
9072      * Convenience method for setting the status text and icon to special values that are pre-configured to indicate
9073      * a "busy" state, usually for loading or processing activities.
9074      * @param {Object/String} config (optional) A config object in the same format supported by {@link #setStatus}, or a
9075      * string to use as the status text (in which case all other options for setStatus will be defaulted).  Use the
9076      * <tt>text</tt> and/or <tt>iconCls</tt> properties on the config to override the default {@link #busyText}
9077      * and {@link #busyIconCls} settings. If the config argument is not specified, {@link #busyText} and
9078      * {@link #busyIconCls} will be used in conjunction with all of the default options for {@link #setStatus}.
9079      * @return {Ext.ux.StatusBar} this
9080      */
9081     showBusy : function(o){
9082         if(typeof o == 'string'){
9083             o = {text:o};
9084         }
9085         o = Ext.applyIf(o || {}, {
9086             text: this.busyText,
9087             iconCls: this.busyIconCls
9088         });
9089         return this.setStatus(o);
9090     }
9091 });
9092 Ext.reg('statusbar', Ext.ux.StatusBar);
9093 /**
9094  * @class Ext.ux.TabCloseMenu
9095  * @extends Object
9096  * Plugin (ptype = 'tabclosemenu') for adding a close context menu to tabs. Note that the menu respects
9097  * the closable configuration on the tab. As such, commands like remove others and remove all will not
9098  * remove items that are not closable.
9099  *
9100  * @constructor
9101  * @param {Object} config The configuration options
9102  * @ptype tabclosemenu
9103  */
9104 Ext.ux.TabCloseMenu = Ext.extend(Object, {
9105     <div id="cfg-Ext.ux.TabCloseMenu-closeTabText"></div>/**
9106      * @cfg {String} closeTabText
9107      * The text for closing the current tab. Defaults to <tt>'Close Tab'</tt>.
9108      */
9109     closeTabText: 'Close Tab',
9110
9111     <div id="cfg-Ext.ux.TabCloseMenu-closeOtherTabsText"></div>/**
9112      * @cfg {String} closeOtherTabsText
9113      * The text for closing all tabs except the current one. Defaults to <tt>'Close Other Tabs'</tt>.
9114      */
9115     closeOtherTabsText: 'Close Other Tabs',
9116
9117     <div id="cfg-Ext.ux.TabCloseMenu-showCloseAll"></div>/**
9118      * @cfg {Boolean} showCloseAll
9119      * Indicates whether to show the 'Close All' option. Defaults to <tt>true</tt>.
9120      */
9121     showCloseAll: true,
9122
9123     <div id="cfg-Ext.ux.TabCloseMenu-closeAllTabsText"></div>/**
9124      * @cfg {String} closeAllTabsText
9125      * <p>The text for closing all tabs. Defaults to <tt>'Close All Tabs'</tt>.
9126      */
9127     closeAllTabsText: 'Close All Tabs',
9128
9129     constructor : function(config){
9130         Ext.apply(this, config || {});
9131     },
9132
9133     //public
9134     init : function(tabs){
9135         this.tabs = tabs;
9136         tabs.on({
9137             scope: this,
9138             contextmenu: this.onContextMenu,
9139             destroy: this.destroy
9140         });
9141     },
9142
9143     destroy : function(){
9144         Ext.destroy(this.menu);
9145         delete this.menu;
9146         delete this.tabs;
9147         delete this.active;
9148     },
9149
9150     // private
9151     onContextMenu : function(tabs, item, e){
9152         this.active = item;
9153         var m = this.createMenu(),
9154             disableAll = true,
9155             disableOthers = true,
9156             closeAll = m.getComponent('closeall');
9157
9158         m.getComponent('close').setDisabled(!item.closable);
9159         tabs.items.each(function(){
9160             if(this.closable){
9161                 disableAll = false;
9162                 if(this != item){
9163                     disableOthers = false;
9164                     return false;
9165                 }
9166             }
9167         });
9168         m.getComponent('closeothers').setDisabled(disableOthers);
9169         if(closeAll){
9170             closeAll.setDisabled(disableAll);
9171         }
9172
9173         e.stopEvent();
9174         m.showAt(e.getPoint());
9175     },
9176
9177     createMenu : function(){
9178         if(!this.menu){
9179             var items = [{
9180                 itemId: 'close',
9181                 text: this.closeTabText,
9182                 scope: this,
9183                 handler: this.onClose
9184             }];
9185             if(this.showCloseAll){
9186                 items.push('-');
9187             }
9188             items.push({
9189                 itemId: 'closeothers',
9190                 text: this.closeOtherTabsText,
9191                 scope: this,
9192                 handler: this.onCloseOthers
9193             });
9194             if(this.showCloseAll){
9195                 items.push({
9196                     itemId: 'closeall',
9197                     text: this.closeAllTabsText,
9198                     scope: this,
9199                     handler: this.onCloseAll
9200                 });
9201             }
9202             this.menu = new Ext.menu.Menu({
9203                 items: items
9204             });
9205         }
9206         return this.menu;
9207     },
9208
9209     onClose : function(){
9210         this.tabs.remove(this.active);
9211     },
9212
9213     onCloseOthers : function(){
9214         this.doClose(true);
9215     },
9216
9217     onCloseAll : function(){
9218         this.doClose(false);
9219     },
9220
9221     doClose : function(excludeActive){
9222         var items = [];
9223         this.tabs.items.each(function(item){
9224             if(item.closable){
9225                 if(!excludeActive || item != this.active){
9226                     items.push(item);
9227                 }
9228             }
9229         }, this);
9230         Ext.each(items, function(item){
9231             this.tabs.remove(item);
9232         }, this);
9233     }
9234 });
9235
9236 Ext.preg('tabclosemenu', Ext.ux.TabCloseMenu);Ext.ns('Ext.ux.grid');
9237
9238 <div id="cls-Ext.ux.grid.TableGrid"></div>/**
9239  * @class Ext.ux.grid.TableGrid
9240  * @extends Ext.grid.GridPanel
9241  * A Grid which creates itself from an existing HTML table element.
9242  * @history
9243  * 2007-03-01 Original version by Nige "Animal" White
9244  * 2007-03-10 jvs Slightly refactored to reuse existing classes * @constructor
9245  * @param {String/HTMLElement/Ext.Element} table The table element from which this grid will be created -
9246  * The table MUST have some type of size defined for the grid to fill. The container will be
9247  * automatically set to position relative if it isn't already.
9248  * @param {Object} config A config object that sets properties on this grid and has two additional (optional)
9249  * properties: fields and columns which allow for customizing data fields and columns for this grid.
9250  */
9251 Ext.ux.grid.TableGrid = function(table, config){
9252     config = config ||
9253     {};
9254     Ext.apply(this, config);
9255     var cf = config.fields || [], ch = config.columns || [];
9256     table = Ext.get(table);
9257
9258     var ct = table.insertSibling();
9259
9260     var fields = [], cols = [];
9261     var headers = table.query("thead th");
9262     for (var i = 0, h; h = headers[i]; i++) {
9263         var text = h.innerHTML;
9264         var name = 'tcol-' + i;
9265
9266         fields.push(Ext.applyIf(cf[i] ||
9267         {}, {
9268             name: name,
9269             mapping: 'td:nth(' + (i + 1) + ')/@innerHTML'
9270         }));
9271
9272         cols.push(Ext.applyIf(ch[i] ||
9273         {}, {
9274             'header': text,
9275             'dataIndex': name,
9276             'width': h.offsetWidth,
9277             'tooltip': h.title,
9278             'sortable': true
9279         }));
9280     }
9281
9282     var ds = new Ext.data.Store({
9283         reader: new Ext.data.XmlReader({
9284             record: 'tbody tr'
9285         }, fields)
9286     });
9287
9288     ds.loadData(table.dom);
9289
9290     var cm = new Ext.grid.ColumnModel(cols);
9291
9292     if (config.width || config.height) {
9293         ct.setSize(config.width || 'auto', config.height || 'auto');
9294     }
9295     else {
9296         ct.setWidth(table.getWidth());
9297     }
9298
9299     if (config.remove !== false) {
9300         table.remove();
9301     }
9302
9303     Ext.applyIf(this, {
9304         'ds': ds,
9305         'cm': cm,
9306         'sm': new Ext.grid.RowSelectionModel(),
9307         autoHeight: true,
9308         autoWidth: false
9309     });
9310     Ext.ux.grid.TableGrid.superclass.constructor.call(this, ct, {});
9311 };
9312
9313 Ext.extend(Ext.ux.grid.TableGrid, Ext.grid.GridPanel);
9314
9315 //backwards compat
9316 Ext.grid.TableGrid = Ext.ux.grid.TableGrid;
9317 Ext.ns('Ext.ux');
9318 <div id="cls-Ext.ux.TabScrollerMenu"></div>/**
9319  * @class Ext.ux.TabScrollerMenu
9320  * @extends Object
9321  * Plugin (ptype = 'tabscrollermenu') for adding a tab scroller menu to tabs.
9322  * @constructor
9323  * @param {Object} config Configuration options
9324  * @ptype tabscrollermenu
9325  */
9326 Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
9327     <div id="cfg-Ext.ux.TabScrollerMenu-pageSize"></div>/**
9328      * @cfg {Number} pageSize How many items to allow per submenu.
9329      */
9330         pageSize       : 10,
9331     <div id="cfg-Ext.ux.TabScrollerMenu-maxText"></div>/**
9332      * @cfg {Number} maxText How long should the title of each {@link Ext.menu.Item} be.
9333      */
9334         maxText        : 15,
9335     <div id="cfg-Ext.ux.TabScrollerMenu-menuPrefixText"></div>/**
9336      * @cfg {String} menuPrefixText Text to prefix the submenus.
9337      */
9338         menuPrefixText : 'Items',
9339         constructor    : function(config) {
9340                 config = config || {};
9341                 Ext.apply(this, config);
9342         },
9343     //private
9344         init : function(tabPanel) {
9345                 Ext.apply(tabPanel, this.parentOverrides);
9346
9347                 tabPanel.tabScrollerMenu = this;
9348                 var thisRef = this;
9349
9350                 tabPanel.on({
9351                         render : {
9352                                 scope  : tabPanel,
9353                                 single : true,
9354                                 fn     : function() {
9355                                         var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
9356                                         tabPanel.createScrollers = newFn;
9357                                 }
9358                         }
9359                 });
9360         },
9361         // private && sequeneced
9362         createPanelsMenu : function() {
9363                 var h = this.stripWrap.dom.offsetHeight;
9364
9365                 //move the right menu item to the left 18px
9366                 var rtScrBtn = this.header.dom.firstChild;
9367                 Ext.fly(rtScrBtn).applyStyles({
9368                         right : '18px'
9369                 });
9370
9371                 var stripWrap = Ext.get(this.strip.dom.parentNode);
9372                 stripWrap.applyStyles({
9373                          'margin-right' : '36px'
9374                 });
9375
9376                 // Add the new righthand menu
9377                 var scrollMenu = this.header.insertFirst({
9378                         cls:'x-tab-tabmenu-right'
9379                 });
9380                 scrollMenu.setHeight(h);
9381                 scrollMenu.addClassOnOver('x-tab-tabmenu-over');
9382                 scrollMenu.on('click', this.showTabsMenu, this);
9383
9384                 this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
9385                         scrollMenu.show();
9386                 });
9387
9388                 this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
9389                         scrollMenu.hide();
9390                 });
9391
9392         },
9393     <div id="method-Ext.ux.TabScrollerMenu-getPageSize"></div>/**
9394      * Returns an the current page size (this.pageSize);
9395      * @return {Number} this.pageSize The current page size.
9396      */
9397         getPageSize : function() {
9398                 return this.pageSize;
9399         },
9400     <div id="method-Ext.ux.TabScrollerMenu-setPageSize"></div>/**
9401      * Sets the number of menu items per submenu "page size".
9402      * @param {Number} pageSize The page size
9403      */
9404     setPageSize : function(pageSize) {
9405                 this.pageSize = pageSize;
9406         },
9407     <div id="method-Ext.ux.TabScrollerMenu-getMaxText"></div>/**
9408      * Returns the current maxText length;
9409      * @return {Number} this.maxText The current max text length.
9410      */
9411     getMaxText : function() {
9412                 return this.maxText;
9413         },
9414     <div id="method-Ext.ux.TabScrollerMenu-setMaxText"></div>/**
9415      * Sets the maximum text size for each menu item.
9416      * @param {Number} t The max text per each menu item.
9417      */
9418     setMaxText : function(t) {
9419                 this.maxText = t;
9420         },
9421     <div id="method-Ext.ux.TabScrollerMenu-getMenuPrefixText"></div>/**
9422      * Returns the current menu prefix text String.;
9423      * @return {String} this.menuPrefixText The current menu prefix text.
9424      */
9425         getMenuPrefixText : function() {
9426                 return this.menuPrefixText;
9427         },
9428     <div id="method-Ext.ux.TabScrollerMenu-setMenuPrefixText"></div>/**
9429      * Sets the menu prefix text String.
9430      * @param {String} t The menu prefix text.
9431      */
9432         setMenuPrefixText : function(t) {
9433                 this.menuPrefixText = t;
9434         },
9435         // private && applied to the tab panel itself.
9436         parentOverrides : {
9437                 // all execute within the scope of the tab panel
9438                 // private
9439                 showTabsMenu : function(e) {
9440                         if  (this.tabsMenu) {
9441                                 this.tabsMenu.destroy();
9442                 this.un('destroy', this.tabsMenu.destroy, this.tabsMenu);
9443                 this.tabsMenu = null;
9444                         }
9445             this.tabsMenu =  new Ext.menu.Menu();
9446             this.on('destroy', this.tabsMenu.destroy, this.tabsMenu);
9447
9448             this.generateTabMenuItems();
9449
9450             var target = Ext.get(e.getTarget());
9451                         var xy     = target.getXY();
9452 //
9453                         //Y param + 24 pixels
9454                         xy[1] += 24;
9455
9456                         this.tabsMenu.showAt(xy);
9457                 },
9458                 // private
9459                 generateTabMenuItems : function() {
9460                         var curActive  = this.getActiveTab();
9461                         var totalItems = this.items.getCount();
9462                         var pageSize   = this.tabScrollerMenu.getPageSize();
9463
9464
9465                         if (totalItems > pageSize)  {
9466                                 var numSubMenus = Math.floor(totalItems / pageSize);
9467                                 var remainder   = totalItems % pageSize;
9468
9469                                 // Loop through all of the items and create submenus in chunks of 10
9470                                 for (var i = 0 ; i < numSubMenus; i++) {
9471                                         var curPage = (i + 1) * pageSize;
9472                                         var menuItems = [];
9473
9474
9475                                         for (var x = 0; x < pageSize; x++) {
9476                                                 index = x + curPage - pageSize;
9477                                                 var item = this.items.get(index);
9478                                                 menuItems.push(this.autoGenMenuItem(item));
9479                                         }
9480
9481                                         this.tabsMenu.add({
9482                                                 text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
9483                                                 menu : menuItems
9484                                         });
9485
9486                                 }
9487                                 // remaining items
9488                                 if (remainder > 0) {
9489                                         var start = numSubMenus * pageSize;
9490                                         menuItems = [];
9491                                         for (var i = start ; i < totalItems; i ++ ) {
9492                                                 var item = this.items.get(i);
9493                                                 menuItems.push(this.autoGenMenuItem(item));
9494                                         }
9495
9496                                         this.tabsMenu.add({
9497                                                 text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
9498                                                 menu : menuItems
9499                                         });
9500
9501                                 }
9502                         }
9503                         else {
9504                                 this.items.each(function(item) {
9505                                         if (item.id != curActive.id && !item.hidden) {
9506                         this.tabsMenu.add(this.autoGenMenuItem(item));
9507                                         }
9508                                 }, this);
9509                         }
9510                 },
9511                 // private
9512                 autoGenMenuItem : function(item) {
9513                         var maxText = this.tabScrollerMenu.getMaxText();
9514                         var text    = Ext.util.Format.ellipsis(item.title, maxText);
9515
9516                         return {
9517                                 text      : text,
9518                                 handler   : this.showTabFromMenu,
9519                                 scope     : this,
9520                                 disabled  : item.disabled,
9521                                 tabToShow : item,
9522                                 iconCls   : item.iconCls
9523                         }
9524
9525                 },
9526                 // private
9527                 showTabFromMenu : function(menuItem) {
9528                         this.setActiveTab(menuItem.tabToShow);
9529                 }
9530         }
9531 });
9532
9533 Ext.reg('tabscrollermenu', Ext.ux.TabScrollerMenu);
9534 Ext.ns('Ext.ux.tree');
9535
9536 <div id="cls-Ext.ux.tree.XmlTreeLoader"></div>/**
9537  * @class Ext.ux.tree.XmlTreeLoader
9538  * @extends Ext.tree.TreeLoader
9539  * <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
9540  * Any text value included as a text node in the XML will be added to the parent node as an attribute
9541  * called <tt>innerText</tt>.  Also, the tag name of each XML node will be added to the tree node as
9542  * an attribute called <tt>tagName</tt>.</p>
9543  * <p>By default, this class expects that your source XML will provide the necessary attributes on each
9544  * node as expected by the {@link Ext.tree.TreePanel} to display and load properly.  However, you can
9545  * provide your own custom processing of node attributes by overriding the {@link #processNode} method
9546  * and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
9547  * @constructor
9548  * Creates a new XmlTreeloader.
9549  * @param {Object} config A config object containing config properties.
9550  */
9551 Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
9552     <div id="prop-Ext.ux.tree.XmlTreeLoader-XML_NODE_ELEMENT"></div>/**
9553      * @property  XML_NODE_ELEMENT
9554      * XML element node (value 1, read-only)
9555      * @type Number
9556      */
9557     XML_NODE_ELEMENT : 1,
9558     <div id="prop-Ext.ux.tree.XmlTreeLoader-XML_NODE_TEXT"></div>/**
9559      * @property  XML_NODE_TEXT
9560      * XML text node (value 3, read-only)
9561      * @type Number
9562      */
9563     XML_NODE_TEXT : 3,
9564
9565     // private override
9566     processResponse : function(response, node, callback){
9567         var xmlData = response.responseXML,
9568             root = xmlData.documentElement || xmlData;
9569
9570         try{
9571             node.beginUpdate();
9572             node.appendChild(this.parseXml(root));
9573             node.endUpdate();
9574
9575             this.runCallback(callback, scope || node, [node]);
9576         }catch(e){
9577             this.handleFailure(response);
9578         }
9579     },
9580
9581     // private
9582     parseXml : function(node) {
9583         var nodes = [];
9584         Ext.each(node.childNodes, function(n){
9585             if(n.nodeType == this.XML_NODE_ELEMENT){
9586                 var treeNode = this.createNode(n);
9587                 if(n.childNodes.length > 0){
9588                     var child = this.parseXml(n);
9589                     if(typeof child == 'string'){
9590                         treeNode.attributes.innerText = child;
9591                     }else{
9592                         treeNode.appendChild(child);
9593                     }
9594                 }
9595                 nodes.push(treeNode);
9596             }
9597             else if(n.nodeType == this.XML_NODE_TEXT){
9598                 var text = n.nodeValue.trim();
9599                 if(text.length > 0){
9600                     return nodes = text;
9601                 }
9602             }
9603         }, this);
9604
9605         return nodes;
9606     },
9607
9608     // private override
9609     createNode : function(node){
9610         var attr = {
9611             tagName: node.tagName
9612         };
9613
9614         Ext.each(node.attributes, function(a){
9615             attr[a.nodeName] = a.nodeValue;
9616         });
9617
9618         this.processAttributes(attr);
9619
9620         return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);
9621     },
9622
9623     /*
9624      * Template method intended to be overridden by subclasses that need to provide
9625      * custom attribute processing prior to the creation of each TreeNode.  This method
9626      * will be passed a config object containing existing TreeNode attribute name/value
9627      * pairs which can be modified as needed directly (no need to return the object).
9628      */
9629     processAttributes: Ext.emptyFn
9630 });
9631
9632 //backwards compat
9633 Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;
9634 /**
9635  * @class Ext.ux.ValidationStatus
9636  * A {@link Ext.StatusBar} plugin that provides automatic error notification when the
9637  * associated form contains validation errors.
9638  * @extends Ext.Component
9639  * @constructor
9640  * Creates a new ValiationStatus plugin
9641  * @param {Object} config A config object
9642  */
9643 Ext.ux.ValidationStatus = Ext.extend(Ext.Component, {
9644     <div id="cfg-Ext.ux.ValidationStatus-errorIconCls"></div>/**
9645      * @cfg {String} errorIconCls
9646      * The {@link #iconCls} value to be applied to the status message when there is a
9647      * validation error. Defaults to <tt>'x-status-error'</tt>.
9648      */
9649     errorIconCls : 'x-status-error',
9650     <div id="cfg-Ext.ux.ValidationStatus-errorListCls"></div>/**
9651      * @cfg {String} errorListCls
9652      * The css class to be used for the error list when there are validation errors.
9653      * Defaults to <tt>'x-status-error-list'</tt>.
9654      */
9655     errorListCls : 'x-status-error-list',
9656     <div id="cfg-Ext.ux.ValidationStatus-validIconCls"></div>/**
9657      * @cfg {String} validIconCls
9658      * The {@link #iconCls} value to be applied to the status message when the form
9659      * validates. Defaults to <tt>'x-status-valid'</tt>.
9660      */
9661     validIconCls : 'x-status-valid',
9662
9663     <div id="cfg-Ext.ux.ValidationStatus-showText"></div>/**
9664      * @cfg {String} showText
9665      * The {@link #text} value to be applied when there is a form validation error.
9666      * Defaults to <tt>'The form has errors (click for details...)'</tt>.
9667      */
9668     showText : 'The form has errors (click for details...)',
9669     <div id="cfg-Ext.ux.ValidationStatus-showText"></div>/**
9670      * @cfg {String} showText
9671      * The {@link #text} value to display when the error list is displayed.
9672      * Defaults to <tt>'Click again to hide the error list'</tt>.
9673      */
9674     hideText : 'Click again to hide the error list',
9675     <div id="cfg-Ext.ux.ValidationStatus-submitText"></div>/**
9676      * @cfg {String} submitText
9677      * The {@link #text} value to be applied when the form is being submitted.
9678      * Defaults to <tt>'Saving...'</tt>.
9679      */
9680     submitText : 'Saving...',
9681
9682     // private
9683     init : function(sb){
9684         sb.on('render', function(){
9685             this.statusBar = sb;
9686             this.monitor = true;
9687             this.errors = new Ext.util.MixedCollection();
9688             this.listAlign = (sb.statusAlign=='right' ? 'br-tr?' : 'bl-tl?');
9689
9690             if(this.form){
9691                 this.form = Ext.getCmp(this.form).getForm();
9692                 this.startMonitoring();
9693                 this.form.on('beforeaction', function(f, action){
9694                     if(action.type == 'submit'){
9695                         // Ignore monitoring while submitting otherwise the field validation
9696                         // events cause the status message to reset too early
9697                         this.monitor = false;
9698                     }
9699                 }, this);
9700                 var startMonitor = function(){
9701                     this.monitor = true;
9702                 };
9703                 this.form.on('actioncomplete', startMonitor, this);
9704                 this.form.on('actionfailed', startMonitor, this);
9705             }
9706         }, this, {single:true});
9707         sb.on({
9708             scope: this,
9709             afterlayout:{
9710                 single: true,
9711                 fn: function(){
9712                     // Grab the statusEl after the first layout.
9713                     sb.statusEl.getEl().on('click', this.onStatusClick, this, {buffer:200});
9714                 }
9715             },
9716             beforedestroy:{
9717                 single: true,
9718                 fn: this.onDestroy
9719             }
9720         });
9721     },
9722
9723     // private
9724     startMonitoring : function(){
9725         this.form.items.each(function(f){
9726             f.on('invalid', this.onFieldValidation, this);
9727             f.on('valid', this.onFieldValidation, this);
9728         }, this);
9729     },
9730
9731     // private
9732     stopMonitoring : function(){
9733         this.form.items.each(function(f){
9734             f.un('invalid', this.onFieldValidation, this);
9735             f.un('valid', this.onFieldValidation, this);
9736         }, this);
9737     },
9738
9739     // private
9740     onDestroy : function(){
9741         this.stopMonitoring();
9742         this.statusBar.statusEl.un('click', this.onStatusClick, this);
9743         Ext.ux.ValidationStatus.superclass.onDestroy.call(this);
9744     },
9745
9746     // private
9747     onFieldValidation : function(f, msg){
9748         if(!this.monitor){
9749             return false;
9750         }
9751         if(msg){
9752             this.errors.add(f.id, {field:f, msg:msg});
9753         }else{
9754             this.errors.removeKey(f.id);
9755         }
9756         this.updateErrorList();
9757         if(this.errors.getCount() > 0){
9758             if(this.statusBar.getText() != this.showText){
9759                 this.statusBar.setStatus({text:this.showText, iconCls:this.errorIconCls});
9760             }
9761         }else{
9762             this.statusBar.clearStatus().setIcon(this.validIconCls);
9763         }
9764     },
9765
9766     // private
9767     updateErrorList : function(){
9768         if(this.errors.getCount() > 0){
9769                 var msg = '<ul>';
9770                 this.errors.each(function(err){
9771                     msg += ('<li id="x-err-'+ err.field.id +'"><a href="#">' + err.msg + '</a></li>');
9772                 }, this);
9773                 this.getMsgEl().update(msg+'</ul>');
9774         }else{
9775             this.getMsgEl().update('');
9776         }
9777     },
9778
9779     // private
9780     getMsgEl : function(){
9781         if(!this.msgEl){
9782             this.msgEl = Ext.DomHelper.append(Ext.getBody(), {
9783                 cls: this.errorListCls+' x-hide-offsets'
9784             }, true);
9785
9786             this.msgEl.on('click', function(e){
9787                 var t = e.getTarget('li', 10, true);
9788                 if(t){
9789                     Ext.getCmp(t.id.split('x-err-')[1]).focus();
9790                     this.hideErrors();
9791                 }
9792             }, this, {stopEvent:true}); // prevent anchor click navigation
9793         }
9794         return this.msgEl;
9795     },
9796
9797     // private
9798     showErrors : function(){
9799         this.updateErrorList();
9800         this.getMsgEl().alignTo(this.statusBar.getEl(), this.listAlign).slideIn('b', {duration:0.3, easing:'easeOut'});
9801         this.statusBar.setText(this.hideText);
9802         this.form.getEl().on('click', this.hideErrors, this, {single:true}); // hide if the user clicks directly into the form
9803     },
9804
9805     // private
9806     hideErrors : function(){
9807         var el = this.getMsgEl();
9808         if(el.isVisible()){
9809                 el.slideOut('b', {duration:0.2, easing:'easeIn'});
9810                 this.statusBar.setText(this.showText);
9811         }
9812         this.form.getEl().un('click', this.hideErrors, this);
9813     },
9814
9815     // private
9816     onStatusClick : function(){
9817         if(this.getMsgEl().isVisible()){
9818             this.hideErrors();
9819         }else if(this.errors.getCount() > 0){
9820             this.showErrors();
9821         }
9822     }
9823 });(function() {
9824     Ext.override(Ext.list.Column, {
9825         init : function() {
9826             var types = Ext.data.Types,
9827                 st = this.sortType;
9828
9829             if(this.type){
9830                 if(Ext.isString(this.type)){
9831                     this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
9832                 }
9833             }else{
9834                 this.type = types.AUTO;
9835             }
9836
9837             // named sortTypes are supported, here we look them up
9838             if(Ext.isString(st)){
9839                 this.sortType = Ext.data.SortTypes[st];
9840             }else if(Ext.isEmpty(st)){
9841                 this.sortType = this.type.sortType;
9842             }
9843         }
9844     });
9845
9846     Ext.tree.Column = Ext.extend(Ext.list.Column, {});
9847     Ext.tree.NumberColumn = Ext.extend(Ext.list.NumberColumn, {});
9848     Ext.tree.DateColumn = Ext.extend(Ext.list.DateColumn, {});
9849     Ext.tree.BooleanColumn = Ext.extend(Ext.list.BooleanColumn, {});
9850
9851     Ext.reg('tgcolumn', Ext.tree.Column);
9852     Ext.reg('tgnumbercolumn', Ext.tree.NumberColumn);
9853     Ext.reg('tgdatecolumn', Ext.tree.DateColumn);
9854     Ext.reg('tgbooleancolumn', Ext.tree.BooleanColumn);
9855 })();
9856 /**
9857  * @class Ext.ux.tree.TreeGridNodeUI
9858  * @extends Ext.tree.TreeNodeUI
9859  */
9860 Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
9861     isTreeGridNodeUI: true,
9862
9863     renderElements : function(n, a, targetNode, bulkRender){
9864         var t = n.getOwnerTree(),
9865             cols = t.columns,
9866             c = cols[0],
9867             i, buf, len;
9868
9869         this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
9870
9871         buf = [
9872              '<tbody class="x-tree-node">',
9873                 '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
9874                     '<td class="x-treegrid-col">',
9875                         '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
9876                         '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
9877                         '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on" />',
9878                         '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
9879                             a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
9880                         '<span unselectable="on">', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '</span></a>',
9881                     '</td>'
9882         ];
9883
9884         for(i = 1, len = cols.length; i < len; i++){
9885             c = cols[i];
9886             buf.push(
9887                     '<td class="x-treegrid-col ', (c.cls ? c.cls : ''), '">',
9888                         '<div unselectable="on" class="x-treegrid-text"', (c.align ? ' style="text-align: ' + c.align + ';"' : ''), '>',
9889                             (c.tpl ? c.tpl.apply(a) : a[c.dataIndex]),
9890                         '</div>',
9891                     '</td>'
9892             );
9893         }
9894
9895         buf.push(
9896             '</tr><tr class="x-tree-node-ct"><td colspan="', cols.length, '">',
9897             '<table class="x-treegrid-node-ct-table" cellpadding="0" cellspacing="0" style="table-layout: fixed; display: none; width: ', t.innerCt.getWidth() ,'px;"><colgroup>'
9898         );
9899         for(i = 0, len = cols.length; i<len; i++) {
9900             buf.push('<col style="width: ', (cols[i].hidden ? 0 : cols[i].width) ,'px;" />');
9901         }
9902         buf.push('</colgroup></table></td></tr></tbody>');
9903
9904         if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
9905             this.wrap = Ext.DomHelper.insertHtml("beforeBegin", n.nextSibling.ui.getEl(), buf.join(''));
9906         }else{
9907             this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(''));
9908         }
9909
9910         this.elNode = this.wrap.childNodes[0];
9911         this.ctNode = this.wrap.childNodes[1].firstChild.firstChild;
9912         var cs = this.elNode.firstChild.childNodes;
9913         this.indentNode = cs[0];
9914         this.ecNode = cs[1];
9915         this.iconNode = cs[2];
9916         this.anchor = cs[3];
9917         this.textNode = cs[3].firstChild;
9918     },
9919
9920     // private
9921     animExpand : function(cb){
9922         this.ctNode.style.display = "";
9923         Ext.ux.tree.TreeGridNodeUI.superclass.animExpand.call(this, cb);
9924     }
9925 });
9926
9927 Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
9928     isTreeGridNodeUI: true,
9929
9930     // private
9931     render : function(){
9932         if(!this.rendered){
9933             this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
9934             this.node.expanded = true;
9935         }
9936
9937         if(Ext.isWebKit) {
9938             // weird table-layout: fixed issue in webkit
9939             var ct = this.ctNode;
9940             ct.style.tableLayout = null;
9941             (function() {
9942                 ct.style.tableLayout = 'fixed';
9943             }).defer(1);
9944         }
9945     },
9946
9947     destroy : function(){
9948         if(this.elNode){
9949             Ext.dd.Registry.unregister(this.elNode.id);
9950         }
9951         delete this.node;
9952     },
9953
9954     collapse : Ext.emptyFn,
9955     expand : Ext.emptyFn
9956 });/**
9957  * @class Ext.tree.ColumnResizer
9958  * @extends Ext.util.Observable
9959  */
9960 Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
9961     <div id="cfg-Ext.tree.ColumnResizer-minWidth"></div>/**
9962      * @cfg {Number} minWidth The minimum width the column can be dragged to.
9963      * Defaults to <tt>14</tt>.
9964      */
9965     minWidth: 14,
9966
9967     constructor: function(config){
9968         Ext.apply(this, config);
9969         Ext.tree.ColumnResizer.superclass.constructor.call(this);
9970     },
9971
9972     init : function(tree){
9973         this.tree = tree;
9974         tree.on('render', this.initEvents, this);
9975     },
9976
9977     initEvents : function(tree){
9978         tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
9979         this.tracker = new Ext.dd.DragTracker({
9980             onBeforeStart: this.onBeforeStart.createDelegate(this),
9981             onStart: this.onStart.createDelegate(this),
9982             onDrag: this.onDrag.createDelegate(this),
9983             onEnd: this.onEnd.createDelegate(this),
9984             tolerance: 3,
9985             autoStart: 300
9986         });
9987         this.tracker.initEl(tree.innerHd);
9988         tree.on('beforedestroy', this.tracker.destroy, this.tracker);
9989     },
9990
9991     handleHdMove : function(e, t){
9992         var hw = 5,
9993             x = e.getPageX(),
9994             hd = e.getTarget('.x-treegrid-hd', 3, true);
9995
9996         if(hd){
9997             var r = hd.getRegion(),
9998                 ss = hd.dom.style,
9999                 pn = hd.dom.parentNode;
10000
10001             if(x - r.left <= hw && hd.dom !== pn.firstChild) {
10002                 var ps = hd.dom.previousSibling;
10003                 while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
10004                     ps = ps.previousSibling;
10005                 }
10006                 if(ps) {
10007                     this.activeHd = Ext.get(ps);
10008                                 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
10009                 }
10010             } else if(r.right - x <= hw) {
10011                 var ns = hd.dom;
10012                 while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
10013                     ns = ns.previousSibling;
10014                 }
10015                 if(ns) {
10016                     this.activeHd = Ext.get(ns);
10017                                 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
10018                 }
10019             } else{
10020                 delete this.activeHd;
10021                 ss.cursor = '';
10022             }
10023         }
10024     },
10025
10026     onBeforeStart : function(e){
10027         this.dragHd = this.activeHd;
10028         return !!this.dragHd;
10029     },
10030
10031     onStart : function(e){
10032         this.dragHeadersDisabled = this.tree.headersDisabled;
10033         this.tree.headersDisabled = true;
10034         this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
10035         this.proxy.setHeight(this.tree.body.getHeight());
10036
10037         var x = this.tracker.getXY()[0];
10038
10039         this.hdX = this.dragHd.getX();
10040         this.hdIndex = this.tree.findHeaderIndex(this.dragHd);
10041
10042         this.proxy.setX(this.hdX);
10043         this.proxy.setWidth(x-this.hdX);
10044
10045         this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
10046     },
10047
10048     onDrag : function(e){
10049         var cursorX = this.tracker.getXY()[0];
10050         this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
10051     },
10052
10053     onEnd : function(e){
10054         var nw = this.proxy.getWidth(),
10055             tree = this.tree,
10056             disabled = this.dragHeadersDisabled;
10057
10058         this.proxy.remove();
10059         delete this.dragHd;
10060
10061         tree.columns[this.hdIndex].width = nw;
10062         tree.updateColumnWidths();
10063
10064         setTimeout(function(){
10065             tree.headersDisabled = disabled;
10066         }, 100);
10067     }
10068 });Ext.ns('Ext.ux.tree');
10069
10070 /**
10071  * @class Ext.ux.tree.TreeGridSorter
10072  * @extends Ext.tree.TreeSorter
10073  * Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}.  The TreeGridSorter automatically monitors events on the
10074  * associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
10075  * Example usage:<br />
10076  * <pre><code>
10077  new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
10078      folderSort: true,
10079      dir: "desc",
10080      sortType: function(node) {
10081          // sort by a custom, typed attribute:
10082          return parseInt(node.id, 10);
10083      }
10084  });
10085  </code></pre>
10086  * @constructor
10087  * @param {TreeGrid} tree
10088  * @param {Object} config
10089  */
10090 Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
10091     <div id="cfg-Ext.ux.tree.TreeGridSorter-sortClasses"></div>/**
10092      * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>['sort-asc', 'sort-desc']</tt>)
10093      */
10094     sortClasses : ['sort-asc', 'sort-desc'],
10095     <div id="cfg-Ext.ux.tree.TreeGridSorter-sortAscText"></div>/**
10096      * @cfg {String} sortAscText The text displayed in the 'Sort Ascending' menu item (defaults to <tt>'Sort Ascending'</tt>)
10097      */
10098     sortAscText : 'Sort Ascending',
10099     <div id="cfg-Ext.ux.tree.TreeGridSorter-sortDescText"></div>/**
10100      * @cfg {String} sortDescText The text displayed in the 'Sort Descending' menu item (defaults to <tt>'Sort Descending'</tt>)
10101      */
10102     sortDescText : 'Sort Descending',
10103
10104     constructor : function(tree, config) {
10105         if(!Ext.isObject(config)) {
10106             config = {
10107                 property: tree.columns[0].dataIndex || 'text',
10108                 folderSort: true
10109             }
10110         }
10111
10112         Ext.ux.tree.TreeGridSorter.superclass.constructor.apply(this, arguments);
10113
10114         this.tree = tree;
10115         tree.on('headerclick', this.onHeaderClick, this);
10116         tree.ddAppendOnly = true;
10117
10118         var me = this;
10119         this.defaultSortFn = function(n1, n2){
10120
10121             var desc = me.dir && me.dir.toLowerCase() == 'desc',
10122                 prop = me.property || 'text',
10123                 sortType = me.sortType,
10124                 caseSensitive = me.caseSensitive === true,
10125                 leafAttr = me.leafAttr || 'leaf',
10126                 attr1 = n1.attributes,
10127                 attr2 = n2.attributes;
10128
10129             if(me.folderSort){
10130                 if(attr1[leafAttr] && !attr2[leafAttr]){
10131                     return 1;
10132                 }
10133                 if(!attr1[leafAttr] && attr2[leafAttr]){
10134                     return -1;
10135                 }
10136             }
10137             var prop1 = attr1[prop],
10138                 prop2 = attr2[prop],
10139                 v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase());
10140                 v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase());
10141
10142             if(v1 < v2){
10143                 return desc ? +1 : -1;
10144             }else if(v1 > v2){
10145                 return desc ? -1 : +1;
10146             }else{
10147                 return 0;
10148             }
10149         };
10150
10151         tree.on('afterrender', this.onAfterTreeRender, this, {single: true});
10152         tree.on('headermenuclick', this.onHeaderMenuClick, this);
10153     },
10154
10155     onAfterTreeRender : function() {
10156         if(this.tree.hmenu){
10157             this.tree.hmenu.insert(0,
10158                 {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
10159                 {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
10160             );
10161         }
10162         this.updateSortIcon(0, 'asc');
10163     },
10164
10165     onHeaderMenuClick : function(c, id, index) {
10166         if(id === 'asc' || id === 'desc') {
10167             this.onHeaderClick(c, null, index);
10168             return false;
10169         }
10170     },
10171
10172     onHeaderClick : function(c, el, i) {
10173         if(c && !this.tree.headersDisabled){
10174             var me = this;
10175
10176             me.property = c.dataIndex;
10177             me.dir = c.dir = (c.dir === 'desc' ? 'asc' : 'desc');
10178             me.sortType = c.sortType;
10179             me.caseSensitive === Ext.isBoolean(c.caseSensitive) ? c.caseSensitive : this.caseSensitive;
10180             me.sortFn = c.sortFn || this.defaultSortFn;
10181
10182             this.tree.root.cascade(function(n) {
10183                 if(!n.isLeaf()) {
10184                     me.updateSort(me.tree, n);
10185                 }
10186             });
10187
10188             this.updateSortIcon(i, c.dir);
10189         }
10190     },
10191
10192     // private
10193     updateSortIcon : function(col, dir){
10194         var sc = this.sortClasses,
10195             hds = this.tree.innerHd.select('td').removeClass(sc);
10196         hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
10197     }
10198 });/**
10199  * @class Ext.ux.tree.TreeGridLoader
10200  * @extends Ext.tree.TreeLoader
10201  */
10202 Ext.ux.tree.TreeGridLoader = Ext.extend(Ext.tree.TreeLoader, {
10203     createNode : function(attr) {
10204         if (!attr.uiProvider) {
10205             attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
10206         }
10207         return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
10208     }
10209 });/**
10210  * @class Ext.ux.tree.TreeGrid
10211  * @extends Ext.tree.TreePanel
10212  *
10213  * @xtype treegrid
10214  */
10215 Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
10216     rootVisible : false,
10217     useArrows : true,
10218     lines : false,
10219     borderWidth : Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
10220     cls : 'x-treegrid',
10221
10222     columnResize : true,
10223     enableSort : true,
10224     reserveScrollOffset : true,
10225     enableHdMenu : true,
10226
10227     columnsText : 'Columns',
10228
10229     initComponent : function() {
10230         if(!this.root) {
10231             this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
10232         }
10233
10234         // initialize the loader
10235         var l = this.loader;
10236         if(!l){
10237             l = new Ext.ux.tree.TreeGridLoader({
10238                 dataUrl: this.dataUrl,
10239                 requestMethod: this.requestMethod,
10240                 store: this.store
10241             });
10242         }else if(Ext.isObject(l) && !l.load){
10243             l = new Ext.ux.tree.TreeGridLoader(l);
10244         }
10245         this.loader = l;
10246
10247         Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);
10248
10249         this.initColumns();
10250
10251         if(this.enableSort) {
10252             this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
10253         }
10254
10255         if(this.columnResize){
10256             this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
10257             this.colResizer.init(this);
10258         }
10259
10260         var c = this.columns;
10261         if(!this.internalTpl){
10262             this.internalTpl = new Ext.XTemplate(
10263                 '<div class="x-grid3-header">',
10264                     '<div class="x-treegrid-header-inner">',
10265                         '<div class="x-grid3-header-offset">',
10266                             '<table style="table-layout: fixed;" cellspacing="0" cellpadding="0" border="0"><colgroup><tpl for="columns"><col /></tpl></colgroup>',
10267                             '<thead><tr class="x-grid3-hd-row">',
10268                             '<tpl for="columns">',
10269                             '<td class="x-grid3-hd x-grid3-cell x-treegrid-hd" style="text-align: {align};" id="', this.id, '-xlhd-{#}">',
10270                                 '<div class="x-grid3-hd-inner x-treegrid-hd-inner" unselectable="on">',
10271                                      this.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '',
10272                                      '{header}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />',
10273                                  '</div>',
10274                             '</td></tpl>',
10275                             '</tr></thead>',
10276                         '</table>',
10277                     '</div></div>',
10278                 '</div>',
10279                 '<div class="x-treegrid-root-node">',
10280                     '<table class="x-treegrid-root-table" cellpadding="0" cellspacing="0" style="table-layout: fixed;"></table>',
10281                 '</div>'
10282             );
10283         }
10284
10285         if(!this.colgroupTpl) {
10286             this.colgroupTpl = new Ext.XTemplate(
10287                 '<colgroup><tpl for="columns"><col style="width: {width}px"/></tpl></colgroup>'
10288             );
10289         }
10290     },
10291
10292     initColumns : function() {
10293         var cs = this.columns,
10294             len = cs.length,
10295             columns = [],
10296             i, c;
10297
10298         for(i = 0; i < len; i++){
10299             c = cs[i];
10300             if(!c.isColumn) {
10301                 c.xtype = c.xtype ? (/^tg/.test(c.xtype) ? c.xtype : 'tg' + c.xtype) : 'tgcolumn';
10302                 c = Ext.create(c);
10303             }
10304             c.init(this);
10305             columns.push(c);
10306
10307             if(this.enableSort !== false && c.sortable !== false) {
10308                 c.sortable = true;
10309                 this.enableSort = true;
10310             }
10311         }
10312
10313         this.columns = columns;
10314     },
10315
10316     onRender : function(){
10317         Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);
10318
10319         this.el.addClass('x-treegrid');
10320
10321         this.outerCt = this.body.createChild({
10322             cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
10323         });
10324
10325         this.internalTpl.overwrite(this.outerCt, {columns: this.columns});
10326
10327         this.mainHd = Ext.get(this.outerCt.dom.firstChild);
10328         this.innerHd = Ext.get(this.mainHd.dom.firstChild);
10329         this.innerBody = Ext.get(this.outerCt.dom.lastChild);
10330         this.innerCt = Ext.get(this.innerBody.dom.firstChild);
10331
10332         this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
10333
10334         if(this.hideHeaders){
10335             this.el.child('.x-grid3-header').setDisplayed('none');
10336         }
10337         else if(this.enableHdMenu !== false){
10338             this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
10339             if(this.enableColumnHide !== false){
10340                 this.colMenu = new Ext.menu.Menu({id: this.id + '-hcols-menu'});
10341                 this.colMenu.on({
10342                     scope: this,
10343                     beforeshow: this.beforeColMenuShow,
10344                     itemclick: this.handleHdMenuClick
10345                 });
10346                 this.hmenu.add({
10347                     itemId:'columns',
10348                     hideOnClick: false,
10349                     text: this.columnsText,
10350                     menu: this.colMenu,
10351                     iconCls: 'x-cols-icon'
10352                 });
10353             }
10354             this.hmenu.on('itemclick', this.handleHdMenuClick, this);
10355         }
10356     },
10357
10358     setRootNode : function(node){
10359         node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;
10360         node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
10361         if(this.innerCt) {
10362             this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
10363         }
10364         return node;
10365     },
10366
10367     clearInnerCt : function(){
10368         if(Ext.isIE){
10369             var dom = this.innerCt.dom;
10370             while(dom.firstChild){
10371                 dom.removeChild(dom.firstChild);
10372             }
10373         }else{
10374             Ext.ux.tree.TreeGrid.superclass.clearInnerCt.call(this);
10375         }
10376     },
10377
10378     initEvents : function() {
10379         Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments);
10380
10381         this.mon(this.innerBody, 'scroll', this.syncScroll, this);
10382         this.mon(this.innerHd, 'click', this.handleHdDown, this);
10383         this.mon(this.mainHd, {
10384             scope: this,
10385             mouseover: this.handleHdOver,
10386             mouseout: this.handleHdOut
10387         });
10388     },
10389
10390     onResize : function(w, h) {
10391         Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);
10392
10393         var bd = this.innerBody.dom;
10394         var hd = this.innerHd.dom;
10395
10396         if(!bd){
10397             return;
10398         }
10399
10400         if(Ext.isNumber(h)){
10401             bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
10402         }
10403
10404         if(Ext.isNumber(w)){
10405             var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
10406             if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){
10407                 this.setScrollOffset(sw);
10408             }else{
10409                 var me = this;
10410                 setTimeout(function(){
10411                     me.setScrollOffset(bd.offsetWidth - bd.clientWidth > 10 ? sw : 0);
10412                 }, 10);
10413             }
10414         }
10415     },
10416
10417     updateColumnWidths : function() {
10418         var cols = this.columns,
10419             colCount = cols.length,
10420             groups = this.outerCt.query('colgroup'),
10421             groupCount = groups.length,
10422             c, g, i, j;
10423
10424         for(i = 0; i<colCount; i++) {
10425             c = cols[i];
10426             for(j = 0; j<groupCount; j++) {
10427                 g = groups[j];
10428                 g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
10429             }
10430         }
10431
10432         for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
10433             c = Ext.fly(groups[i]);
10434             if(cols[i] && cols[i].hidden) {
10435                 c.addClass('x-treegrid-hd-hidden');
10436             }
10437             else {
10438                 c.removeClass('x-treegrid-hd-hidden');
10439             }
10440         }
10441
10442         var tcw = this.getTotalColumnWidth();
10443         Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
10444         this.outerCt.select('table').setWidth(tcw);
10445         this.syncHeaderScroll();
10446     },
10447
10448     getVisibleColumns : function() {
10449         var columns = [],
10450             cs = this.columns,
10451             len = cs.length,
10452             i;
10453
10454         for(i = 0; i<len; i++) {
10455             if(!cs[i].hidden) {
10456                 columns.push(cs[i]);
10457             }
10458         }
10459         return columns;
10460     },
10461
10462     getTotalColumnWidth : function() {
10463         var total = 0;
10464         for(var i = 0, cs = this.getVisibleColumns(), len = cs.length; i<len; i++) {
10465             total += cs[i].width;
10466         }
10467         return total;
10468     },
10469
10470     setScrollOffset : function(scrollOffset) {
10471         this.scrollOffset = scrollOffset;
10472         this.updateColumnWidths();
10473     },
10474
10475     // private
10476     handleHdDown : function(e, t){
10477         var hd = e.getTarget('.x-treegrid-hd');
10478
10479         if(hd && Ext.fly(t).hasClass('x-grid3-hd-btn')){
10480             var ms = this.hmenu.items,
10481                 cs = this.columns,
10482                 index = this.findHeaderIndex(hd),
10483                 c = cs[index],
10484                 sort = c.sortable;
10485
10486             e.stopEvent();
10487             Ext.fly(hd).addClass('x-grid3-hd-menu-open');
10488             this.hdCtxIndex = index;
10489
10490             this.fireEvent('headerbuttonclick', ms, c, hd, index);
10491
10492             this.hmenu.on('hide', function(){
10493                 Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
10494             }, this, {single:true});
10495
10496             this.hmenu.show(t, 'tl-bl?');
10497         }
10498         else if(hd) {
10499             var index = this.findHeaderIndex(hd);
10500             this.fireEvent('headerclick', this.columns[index], hd, index);
10501         }
10502     },
10503
10504     // private
10505     handleHdOver : function(e, t){
10506         var hd = e.getTarget('.x-treegrid-hd');
10507         if(hd && !this.headersDisabled){
10508             index = this.findHeaderIndex(hd);
10509             this.activeHdRef = t;
10510             this.activeHdIndex = index;
10511             var el = Ext.get(hd);
10512             this.activeHdRegion = el.getRegion();
10513             el.addClass('x-grid3-hd-over');
10514             this.activeHdBtn = el.child('.x-grid3-hd-btn');
10515             if(this.activeHdBtn){
10516                 this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
10517             }
10518         }
10519     },
10520
10521     // private
10522     handleHdOut : function(e, t){
10523         var hd = e.getTarget('.x-treegrid-hd');
10524         if(hd && (!Ext.isIE || !e.within(hd, true))){
10525             this.activeHdRef = null;
10526             Ext.fly(hd).removeClass('x-grid3-hd-over');
10527             hd.style.cursor = '';
10528         }
10529     },
10530
10531     findHeaderIndex : function(hd){
10532         hd = hd.dom || hd;
10533         var cs = hd.parentNode.childNodes;
10534         for(var i = 0, c; c = cs[i]; i++){
10535             if(c == hd){
10536                 return i;
10537             }
10538         }
10539         return -1;
10540     },
10541
10542     // private
10543     beforeColMenuShow : function(){
10544         var cols = this.columns,
10545             colCount = cols.length,
10546             i, c;
10547         this.colMenu.removeAll();
10548         for(i = 1; i < colCount; i++){
10549             c = cols[i];
10550             if(c.hideable !== false){
10551                 this.colMenu.add(new Ext.menu.CheckItem({
10552                     itemId: 'col-' + i,
10553                     text: c.header,
10554                     checked: !c.hidden,
10555                     hideOnClick:false,
10556                     disabled: c.hideable === false
10557                 }));
10558             }
10559         }
10560     },
10561
10562     // private
10563     handleHdMenuClick : function(item){
10564         var index = this.hdCtxIndex,
10565             id = item.getItemId();
10566
10567         if(this.fireEvent('headermenuclick', this.columns[index], id, index) !== false) {
10568             index = id.substr(4);
10569             if(index > 0 && this.columns[index]) {
10570                 this.setColumnVisible(index, !item.checked);
10571             }
10572         }
10573
10574         return true;
10575     },
10576
10577     setColumnVisible : function(index, visible) {
10578         this.columns[index].hidden = !visible;
10579         this.updateColumnWidths();
10580     },
10581
10582     <div id="method-Ext.ux.tree.TreeGrid-scrollToTop"></div>/**
10583      * Scrolls the grid to the top
10584      */
10585     scrollToTop : function(){
10586         this.innerBody.dom.scrollTop = 0;
10587         this.innerBody.dom.scrollLeft = 0;
10588     },
10589
10590     // private
10591     syncScroll : function(){
10592         this.syncHeaderScroll();
10593         var mb = this.innerBody.dom;
10594         this.fireEvent('bodyscroll', mb.scrollLeft, mb.scrollTop);
10595     },
10596
10597     // private
10598     syncHeaderScroll : function(){
10599         var mb = this.innerBody.dom;
10600         this.innerHd.dom.scrollLeft = mb.scrollLeft;
10601         this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
10602     },
10603
10604     registerNode : function(n) {
10605         Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
10606         if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {
10607             n.ui = new Ext.ux.tree.TreeGridNodeUI(n);
10608         }
10609     }
10610 });
10611
10612 Ext.reg('treegrid', Ext.ux.tree.TreeGrid);</pre>
10613 </body>
10614 </html>