examples/ux/ux-all-debug.js

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