examples/ux/ux-all-debug.js

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