examples/ux/LockingGridView.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.ux.grid');
   8
   9 Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
  10     lockText : 'Lock',
  11     unlockText : 'Unlock',
  12     rowBorderWidth : 1,
  13     lockedBorderWidth : 1,
  14
  15     /*
  16      * This option ensures that height between the rows is synchronized
  17      * between the locked and unlocked sides. This option only needs to be used
  18      * when the row heights aren't predictable.
  19      */
  20     syncHeights: false,
  21
  22     initTemplates : function(){
  23         var ts = this.templates || {};
  24
  25         if (!ts.master) {
  26             ts.master = new Ext.Template(
  27                 '<div class="x-grid3" hidefocus="true">',
  28                     '<div class="x-grid3-locked">',
  29                         '<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>',
  30                         '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
  31                     '</div>',
  32                     '<div class="x-grid3-viewport x-grid3-unlocked">',
  33                         '<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>',
  34                         '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
  35                     '</div>',
  36                     '<div class="x-grid3-resize-marker">&#160;</div>',
  37                     '<div class="x-grid3-resize-proxy">&#160;</div>',
  38                 '</div>'
  39             );
  40         }
  41
  42         this.templates = ts;
  43
  44         Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
  45     },
  46
  47     getEditorParent : function(ed){
  48         return this.el.dom;
  49     },
  50
  51     initElements : function(){
  52         var E  = Ext.Element,
  53             el = this.grid.getGridEl().dom.firstChild,
  54             cs = el.childNodes;
  55
  56         this.el             = new E(el);
  57         this.lockedWrap     = new E(cs[0]);
  58         this.lockedHd       = new E(this.lockedWrap.dom.firstChild);
  59         this.lockedInnerHd  = this.lockedHd.dom.firstChild;
  60         this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);
  61         this.lockedBody     = new E(this.lockedScroller.dom.firstChild);
  62         this.mainWrap       = new E(cs[1]);
  63         this.mainHd         = new E(this.mainWrap.dom.firstChild);
  64
  65         if (this.grid.hideHeaders) {
  66             this.lockedHd.setDisplayed(false);
  67             this.mainHd.setDisplayed(false);
  68         }
  69
  70         this.innerHd  = this.mainHd.dom.firstChild;
  71         this.scroller = new E(this.mainWrap.dom.childNodes[1]);
  72
  73         if(this.forceFit){
  74             this.scroller.setStyle('overflow-x', 'hidden');
  75         }
  76
  77         this.mainBody     = new E(this.scroller.dom.firstChild);
  78         this.focusEl      = new E(this.scroller.dom.childNodes[1]);
  79         this.resizeMarker = new E(cs[2]);
  80         this.resizeProxy  = new E(cs[3]);
  81
  82         this.focusEl.swallowEvent('click', true);
  83     },
  84
  85     getLockedRows : function(){
  86         return this.hasRows() ? this.lockedBody.dom.childNodes : [];
  87     },
  88
  89     getLockedRow : function(row){
  90         return this.getLockedRows()[row];
  91     },
  92
  93     getCell : function(row, col){
  94         var llen = this.cm.getLockedCount();
  95         if(col < llen){
  96             return this.getLockedRow(row).getElementsByTagName('td')[col];
  97         }
  98         return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);
  99     },
 100
 101     getHeaderCell : function(index){
 102         var llen = this.cm.getLockedCount();
 103         if(index < llen){
 104             return this.lockedHd.dom.getElementsByTagName('td')[index];
 105         }
 106         return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);
 107     },
 108
 109     addRowClass : function(row, cls){
 110         var r = this.getLockedRow(row);
 111         if(r){
 112             this.fly(r).addClass(cls);
 113         }
 114         Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
 115     },
 116
 117     removeRowClass : function(row, cls){
 118         var r = this.getLockedRow(row);
 119         if(r){
 120             this.fly(r).removeClass(cls);
 121         }
 122         Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
 123     },
 124
 125     removeRow : function(row) {
 126         Ext.removeNode(this.getLockedRow(row));
 127         Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
 128     },
 129
 130     removeRows : function(firstRow, lastRow){
 131         var bd = this.lockedBody.dom;
 132         for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
 133             Ext.removeNode(bd.childNodes[firstRow]);
 134         }
 135         Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
 136     },
 137
 138     syncScroll : function(e){
 139         var mb = this.scroller.dom;
 140         this.lockedScroller.dom.scrollTop = mb.scrollTop;
 141         Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
 142     },
 143
 144     updateSortIcon : function(col, dir){
 145         var sc = this.sortClasses,
 146             lhds = this.lockedHd.select('td').removeClass(sc),
 147             hds = this.mainHd.select('td').removeClass(sc),
 148             llen = this.cm.getLockedCount(),
 149             cls = sc[dir == 'DESC' ? 1 : 0];
 150         if(col < llen){
 151             lhds.item(col).addClass(cls);
 152         }else{
 153             hds.item(col - llen).addClass(cls);
 154         }
 155     },
 156
 157     updateAllColumnWidths : function(){
 158         var tw = this.getTotalWidth(),
 159             clen = this.cm.getColumnCount(),
 160             lw = this.getLockedWidth(),
 161             llen = this.cm.getLockedCount(),
 162             ws = [], len, i;
 163         this.updateLockedWidth();
 164         for(i = 0; i < clen; i++){
 165             ws[i] = this.getColumnWidth(i);
 166             var hd = this.getHeaderCell(i);
 167             hd.style.width = ws[i];
 168         }
 169         var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
 170         for(i = 0, len = ns.length; i < len; i++){
 171             row = lns[i];
 172             row.style.width = lw;
 173             if(row.firstChild){
 174                 row.firstChild.style.width = lw;
 175                 trow = row.firstChild.rows[0];
 176                 for (j = 0; j < llen; j++) {
 177                    trow.childNodes[j].style.width = ws[j];
 178                 }
 179             }
 180             row = ns[i];
 181             row.style.width = tw;
 182             if(row.firstChild){
 183                 row.firstChild.style.width = tw;
 184                 trow = row.firstChild.rows[0];
 185                 for (j = llen; j < clen; j++) {
 186                    trow.childNodes[j - llen].style.width = ws[j];
 187                 }
 188             }
 189         }
 190         this.onAllColumnWidthsUpdated(ws, tw);
 191         this.syncHeaderHeight();
 192     },
 193
 194     updateColumnWidth : function(col, width){
 195         var w = this.getColumnWidth(col),
 196             llen = this.cm.getLockedCount(),
 197             ns, rw, c, row;
 198         this.updateLockedWidth();
 199         if(col < llen){
 200             ns = this.getLockedRows();
 201             rw = this.getLockedWidth();
 202             c = col;
 203         }else{
 204             ns = this.getRows();
 205             rw = this.getTotalWidth();
 206             c = col - llen;
 207         }
 208         var hd = this.getHeaderCell(col);
 209         hd.style.width = w;
 210         for(var i = 0, len = ns.length; i < len; i++){
 211             row = ns[i];
 212             row.style.width = rw;
 213             if(row.firstChild){
 214                 row.firstChild.style.width = rw;
 215                 row.firstChild.rows[0].childNodes[c].style.width = w;
 216             }
 217         }
 218         this.onColumnWidthUpdated(col, w, this.getTotalWidth());
 219         this.syncHeaderHeight();
 220     },
 221
 222     updateColumnHidden : function(col, hidden){
 223         var llen = this.cm.getLockedCount(),
 224             ns, rw, c, row,
 225             display = hidden ? 'none' : '';
 226         this.updateLockedWidth();
 227         if(col < llen){
 228             ns = this.getLockedRows();
 229             rw = this.getLockedWidth();
 230             c = col;
 231         }else{
 232             ns = this.getRows();
 233             rw = this.getTotalWidth();
 234             c = col - llen;
 235         }
 236         var hd = this.getHeaderCell(col);
 237         hd.style.display = display;
 238         for(var i = 0, len = ns.length; i < len; i++){
 239             row = ns[i];
 240             row.style.width = rw;
 241             if(row.firstChild){
 242                 row.firstChild.style.width = rw;
 243                 row.firstChild.rows[0].childNodes[c].style.display = display;
 244             }
 245         }
 246         this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
 247         delete this.lastViewWidth;
 248         this.layout();
 249     },
 250
 251     doRender : function(cs, rs, ds, startRow, colCount, stripe){
 252         var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
 253             tstyle = 'width:'+this.getTotalWidth()+';',
 254             lstyle = 'width:'+this.getLockedWidth()+';',
 255             buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
 256         for(var j = 0, len = rs.length; j < len; j++){
 257             r = rs[j]; cb = []; lcb = [];
 258             var rowIndex = (j+startRow);
 259             for(var i = 0; i < colCount; i++){
 260                 c = cs[i];
 261                 p.id = c.id;
 262                 p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
 263                     (this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
 264                 p.attr = p.cellAttr = '';
 265                 p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
 266                 p.style = c.style;
 267                 if(Ext.isEmpty(p.value)){
 268                     p.value = '&#160;';
 269                 }
 270                 if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
 271                     p.css += ' x-grid3-dirty-cell';
 272                 }
 273                 if(c.locked){
 274                     lcb[lcb.length] = ct.apply(p);
 275                 }else{
 276                     cb[cb.length] = ct.apply(p);
 277                 }
 278             }
 279             var alt = [];
 280             if(stripe && ((rowIndex+1) % 2 === 0)){
 281                 alt[0] = 'x-grid3-row-alt';
 282             }
 283             if(r.dirty){
 284                 alt[1] = ' x-grid3-dirty-row';
 285             }
 286             rp.cols = colCount;
 287             if(this.getRowClass){
 288                 alt[2] = this.getRowClass(r, rowIndex, rp, ds);
 289             }
 290             rp.alt = alt.join(' ');
 291             rp.cells = cb.join('');
 292             rp.tstyle = tstyle;
 293             buf[buf.length] = rt.apply(rp);
 294             rp.cells = lcb.join('');
 295             rp.tstyle = lstyle;
 296             lbuf[lbuf.length] = rt.apply(rp);
 297         }
 298         return [buf.join(''), lbuf.join('')];
 299     },
 300     processRows : function(startRow, skipStripe){
 301         if(!this.ds || this.ds.getCount() < 1){
 302             return;
 303         }
 304         var rows = this.getRows(),
 305             lrows = this.getLockedRows(),
 306             row, lrow;
 307         skipStripe = skipStripe || !this.grid.stripeRows;
 308         startRow = startRow || 0;
 309         for(var i = 0, len = rows.length; i < len; ++i){
 310             row = rows[i];
 311             lrow = lrows[i];
 312             row.rowIndex = i;
 313             lrow.rowIndex = i;
 314             if(!skipStripe){
 315                 row.className = row.className.replace(this.rowClsRe, ' ');
 316                 lrow.className = lrow.className.replace(this.rowClsRe, ' ');
 317                 if ((i + 1) % 2 === 0){
 318                     row.className += ' x-grid3-row-alt';
 319                     lrow.className += ' x-grid3-row-alt';
 320                 }
 321             }
 322             if(this.syncHeights){
 323                 var el1 = Ext.get(row),
 324                     el2 = Ext.get(lrow),
 325                     h1 = el1.getHeight(),
 326                     h2 = el2.getHeight();
 327
 328                 if(h1 > h2){
 329                     el2.setHeight(h1);
 330                 }else if(h2 > h1){
 331                     el1.setHeight(h2);
 332                 }
 333             }
 334         }
 335         if(startRow === 0){
 336             Ext.fly(rows[0]).addClass(this.firstRowCls);
 337             Ext.fly(lrows[0]).addClass(this.firstRowCls);
 338         }
 339         Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
 340         Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
 341     },
 342
 343     afterRender : function(){
 344         if(!this.ds || !this.cm){
 345             return;
 346         }
 347         var bd = this.renderRows() || ['&#160;', '&#160;'];
 348         this.mainBody.dom.innerHTML = bd[0];
 349         this.lockedBody.dom.innerHTML = bd[1];
 350         this.processRows(0, true);
 351         if(this.deferEmptyText !== true){
 352             this.applyEmptyText();
 353         }
 354         this.grid.fireEvent('viewready', this.grid);
 355     },
 356
 357     renderUI : function(){
 358         var header = this.renderHeaders();
 359         var body = this.templates.body.apply({rows:'&#160;'});
 360         var html = this.templates.master.apply({
 361             body: body,
 362             header: header[0],
 363             ostyle: 'width:'+this.getOffsetWidth()+';',
 364             bstyle: 'width:'+this.getTotalWidth()+';',
 365             lockedBody: body,
 366             lockedHeader: header[1],
 367             lstyle: 'width:'+this.getLockedWidth()+';'
 368         });
 369         var g = this.grid;
 370         g.getGridEl().dom.innerHTML = html;
 371         this.initElements();
 372         Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
 373         Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
 374         this.mainHd.on({
 375             scope: this,
 376             mouseover: this.handleHdOver,
 377             mouseout: this.handleHdOut,
 378             mousemove: this.handleHdMove
 379         });
 380         this.lockedHd.on({
 381             scope: this,
 382             mouseover: this.handleHdOver,
 383             mouseout: this.handleHdOut,
 384             mousemove: this.handleHdMove
 385         });
 386         this.scroller.on('scroll', this.syncScroll,  this);
 387         if(g.enableColumnResize !== false){
 388             this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
 389             this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
 390             this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
 391         }
 392         if(g.enableColumnMove){
 393             this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
 394             this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
 395             this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
 396             this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
 397         }
 398         if(g.enableHdMenu !== false){
 399             this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
 400             this.hmenu.add(
 401                 {itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
 402                 {itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
 403             );
 404             if(this.grid.enableColLock !== false){
 405                 this.hmenu.add('-',
 406                     {itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
 407                     {itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
 408                 );
 409             }
 410             if(g.enableColumnHide !== false){
 411                 this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
 412                 this.colMenu.on({
 413                     scope: this,
 414                     beforeshow: this.beforeColMenuShow,
 415                     itemclick: this.handleHdMenuClick
 416                 });
 417                 this.hmenu.add('-', {
 418                     itemId:'columns',
 419                     hideOnClick: false,
 420                     text: this.columnsText,
 421                     menu: this.colMenu,
 422                     iconCls: 'x-cols-icon'
 423                 });
 424             }
 425             this.hmenu.on('itemclick', this.handleHdMenuClick, this);
 426         }
 427         if(g.trackMouseOver){
 428             this.mainBody.on({
 429                 scope: this,
 430                 mouseover: this.onRowOver,
 431                 mouseout: this.onRowOut
 432             });
 433             this.lockedBody.on({
 434                 scope: this,
 435                 mouseover: this.onRowOver,
 436                 mouseout: this.onRowOut
 437             });
 438         }
 439
 440         if(g.enableDragDrop || g.enableDrag){
 441             this.dragZone = new Ext.grid.GridDragZone(g, {
 442                 ddGroup : g.ddGroup || 'GridDD'
 443             });
 444         }
 445         this.updateHeaderSortState();
 446     },
 447
 448     layout : function(){
 449         if(!this.mainBody){
 450             return;
 451         }
 452         var g = this.grid;
 453         var c = g.getGridEl();
 454         var csize = c.getSize(true);
 455         var vw = csize.width;
 456         if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
 457             return;
 458         }
 459         this.syncHeaderHeight();
 460         if(g.autoHeight){
 461             this.scroller.dom.style.overflow = 'visible';
 462             this.lockedScroller.dom.style.overflow = 'visible';
 463             if(Ext.isWebKit){
 464                 this.scroller.dom.style.position = 'static';
 465                 this.lockedScroller.dom.style.position = 'static';
 466             }
 467         }else{
 468             this.el.setSize(csize.width, csize.height);
 469             var hdHeight = this.mainHd.getHeight();
 470             var vh = csize.height - (hdHeight);
 471         }
 472         this.updateLockedWidth();
 473         if(this.forceFit){
 474             if(this.lastViewWidth != vw){
 475                 this.fitColumns(false, false);
 476                 this.lastViewWidth = vw;
 477             }
 478         }else {
 479             this.autoExpand();
 480             this.syncHeaderScroll();
 481         }
 482         this.onLayout(vw, vh);
 483     },
 484
 485     getOffsetWidth : function() {
 486         return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth() + this.getScrollOffset()) + 'px';
 487     },
 488
 489     renderHeaders : function(){
 490         var cm = this.cm,
 491             ts = this.templates,
 492             ct = ts.hcell,
 493             cb = [], lcb = [],
 494             p = {},
 495             len = cm.getColumnCount(),
 496             last = len - 1;
 497         for(var i = 0; i < len; i++){
 498             p.id = cm.getColumnId(i);
 499             p.value = cm.getColumnHeader(i) || '';
 500             p.style = this.getColumnStyle(i, true);
 501             p.tooltip = this.getColumnTooltip(i);
 502             p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
 503                 (cm.config[i].headerCls ? ' ' + cm.config[i].headerCls : '');
 504             if(cm.config[i].align == 'right'){
 505                 p.istyle = 'padding-right:16px';
 506             } else {
 507                 delete p.istyle;
 508             }
 509             if(cm.isLocked(i)){
 510                 lcb[lcb.length] = ct.apply(p);
 511             }else{
 512                 cb[cb.length] = ct.apply(p);
 513             }
 514         }
 515         return [ts.header.apply({cells: cb.join(''), tstyle:'width:'+this.getTotalWidth()+';'}),
 516                 ts.header.apply({cells: lcb.join(''), tstyle:'width:'+this.getLockedWidth()+';'})];
 517     },
 518
 519     updateHeaders : function(){
 520         var hd = this.renderHeaders();
 521         this.innerHd.firstChild.innerHTML = hd[0];
 522         this.innerHd.firstChild.style.width = this.getOffsetWidth();
 523         this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
 524         this.lockedInnerHd.firstChild.innerHTML = hd[1];
 525         var lw = this.getLockedWidth();
 526         this.lockedInnerHd.firstChild.style.width = lw;
 527         this.lockedInnerHd.firstChild.firstChild.style.width = lw;
 528     },
 529
 530     getResolvedXY : function(resolved){
 531         if(!resolved){
 532             return null;
 533         }
 534         var c = resolved.cell, r = resolved.row;
 535         return c ? Ext.fly(c).getXY() : [this.scroller.getX(), Ext.fly(r).getY()];
 536     },
 537
 538     syncFocusEl : function(row, col, hscroll){
 539         Ext.ux.grid.LockingGridView.superclass.syncFocusEl.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
 540     },
 541
 542     ensureVisible : function(row, col, hscroll){
 543         return Ext.ux.grid.LockingGridView.superclass.ensureVisible.call(this, row, col, col < this.cm.getLockedCount() ? false : hscroll);
 544     },
 545
 546     insertRows : function(dm, firstRow, lastRow, isUpdate){
 547         var last = dm.getCount() - 1;
 548         if(!isUpdate && firstRow === 0 && lastRow >= last){
 549             this.refresh();
 550         }else{
 551             if(!isUpdate){
 552                 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
 553             }
 554             var html = this.renderRows(firstRow, lastRow),
 555                 before = this.getRow(firstRow);
 556             if(before){
 557                 if(firstRow === 0){
 558                     this.removeRowClass(0, this.firstRowCls);
 559                 }
 560                 Ext.DomHelper.insertHtml('beforeBegin', before, html[0]);
 561                 before = this.getLockedRow(firstRow);
 562                 Ext.DomHelper.insertHtml('beforeBegin', before, html[1]);
 563             }else{
 564                 this.removeRowClass(last - 1, this.lastRowCls);
 565                 Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html[0]);
 566                 Ext.DomHelper.insertHtml('beforeEnd', this.lockedBody.dom, html[1]);
 567             }
 568             if(!isUpdate){
 569                 this.fireEvent('rowsinserted', this, firstRow, lastRow);
 570                 this.processRows(firstRow);
 571             }else if(firstRow === 0 || firstRow >= last){
 572                 this.addRowClass(firstRow, firstRow === 0 ? this.firstRowCls : this.lastRowCls);
 573             }
 574         }
 575         this.syncFocusEl(firstRow);
 576     },
 577
 578     getColumnStyle : function(col, isHeader){
 579         var style = !isHeader ? this.cm.config[col].cellStyle || this.cm.config[col].css || '' : this.cm.config[col].headerStyle || '';
 580         style += 'width:'+this.getColumnWidth(col)+';';
 581         if(this.cm.isHidden(col)){
 582             style += 'display:none;';
 583         }
 584         var align = this.cm.config[col].align;
 585         if(align){
 586             style += 'text-align:'+align+';';
 587         }
 588         return style;
 589     },
 590
 591     getLockedWidth : function() {
 592         return this.cm.getTotalLockedWidth() + 'px';
 593     },
 594
 595     getTotalWidth : function() {
 596         return (this.cm.getTotalWidth() - this.cm.getTotalLockedWidth()) + 'px';
 597     },
 598
 599     getColumnData : function(){
 600         var cs = [], cm = this.cm, colCount = cm.getColumnCount();
 601         for(var i = 0; i < colCount; i++){
 602             var name = cm.getDataIndex(i);
 603             cs[i] = {
 604                 name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
 605                 renderer : cm.getRenderer(i),
 606                 id : cm.getColumnId(i),
 607                 style : this.getColumnStyle(i),
 608                 locked : cm.isLocked(i)
 609             };
 610         }
 611         return cs;
 612     },
 613
 614     renderBody : function(){
 615         var markup = this.renderRows() || ['&#160;', '&#160;'];
 616         return [this.templates.body.apply({rows: markup[0]}), this.templates.body.apply({rows: markup[1]})];
 617     },
 618
 619     refreshRow : function(record){
 620         Ext.ux.grid.LockingGridView.superclass.refreshRow.call(this, record);
 621         var index = Ext.isNumber(record) ? record : this.ds.indexOf(record);
 622         this.getLockedRow(index).rowIndex = index;
 623     },
 624
 625     refresh : function(headersToo){
 626         this.fireEvent('beforerefresh', this);
 627         this.grid.stopEditing(true);
 628         var result = this.renderBody();
 629         this.mainBody.update(result[0]).setWidth(this.getTotalWidth());
 630         this.lockedBody.update(result[1]).setWidth(this.getLockedWidth());
 631         if(headersToo === true){
 632             this.updateHeaders();
 633             this.updateHeaderSortState();
 634         }
 635         this.processRows(0, true);
 636         this.layout();
 637         this.applyEmptyText();
 638         this.fireEvent('refresh', this);
 639     },
 640
 641     onDenyColumnLock : function(){
 642
 643     },
 644
 645     initData : function(ds, cm){
 646         if(this.cm){
 647             this.cm.un('columnlockchange', this.onColumnLock, this);
 648         }
 649         Ext.ux.grid.LockingGridView.superclass.initData.call(this, ds, cm);
 650         if(this.cm){
 651             this.cm.on('columnlockchange', this.onColumnLock, this);
 652         }
 653     },
 654
 655     onColumnLock : function(){
 656         this.refresh(true);
 657     },
 658
 659     handleHdMenuClick : function(item){
 660         var index = this.hdCtxIndex,
 661             cm = this.cm,
 662             id = item.getItemId(),
 663             llen = cm.getLockedCount();
 664         switch(id){
 665             case 'lock':
 666                 if(cm.getColumnCount(true) <= llen + 1){
 667                     this.onDenyColumnLock();
 668                     return;
 669                 }
 670                 cm.setLocked(index, true);
 671                 if(llen != index){
 672                     cm.moveColumn(index, llen);
 673                     this.grid.fireEvent('columnmove', index, llen);
 674                 }
 675             break;
 676             case 'unlock':
 677                 if(llen - 1 != index){
 678                     cm.setLocked(index, false, true);
 679                     cm.moveColumn(index, llen - 1);
 680                     this.grid.fireEvent('columnmove', index, llen - 1);
 681                 }else{
 682                     cm.setLocked(index, false);
 683                 }
 684             break;
 685             default:
 686                 return Ext.ux.grid.LockingGridView.superclass.handleHdMenuClick.call(this, item);
 687         }
 688         return true;
 689     },
 690
 691     handleHdDown : function(e, t){
 692         Ext.ux.grid.LockingGridView.superclass.handleHdDown.call(this, e, t);
 693         if(this.grid.enableColLock !== false){
 694             if(Ext.fly(t).hasClass('x-grid3-hd-btn')){
 695                 var hd = this.findHeaderCell(t),
 696                     index = this.getCellIndex(hd),
 697                     ms = this.hmenu.items, cm = this.cm;
 698                 ms.get('lock').setDisabled(cm.isLocked(index));
 699                 ms.get('unlock').setDisabled(!cm.isLocked(index));
 700             }
 701         }
 702     },
 703
 704     syncHeaderHeight: function(){
 705         this.innerHd.firstChild.firstChild.style.height = 'auto';
 706         this.lockedInnerHd.firstChild.firstChild.style.height = 'auto';
 707         var hd = this.innerHd.firstChild.firstChild.offsetHeight,
 708             lhd = this.lockedInnerHd.firstChild.firstChild.offsetHeight,
 709             height = (lhd > hd ? lhd : hd) + 'px';
 710         this.innerHd.firstChild.firstChild.style.height = height;
 711         this.lockedInnerHd.firstChild.firstChild.style.height = height;
 712     },
 713
 714     updateLockedWidth: function(){
 715         var lw = this.cm.getTotalLockedWidth(),
 716             tw = this.cm.getTotalWidth() - lw,
 717             csize = this.grid.getGridEl().getSize(true),
 718             lp = Ext.isBorderBox ? 0 : this.lockedBorderWidth,
 719             rp = Ext.isBorderBox ? 0 : this.rowBorderWidth,
 720             vw = (csize.width - lw - lp - rp) + 'px',
 721             so = this.getScrollOffset();
 722         if(!this.grid.autoHeight){
 723             var vh = (csize.height - this.mainHd.getHeight()) + 'px';
 724             this.lockedScroller.dom.style.height = vh;
 725             this.scroller.dom.style.height = vh;
 726         }
 727         this.lockedWrap.dom.style.width = (lw + rp) + 'px';
 728         this.scroller.dom.style.width = vw;
 729         this.mainWrap.dom.style.left = (lw + lp + rp) + 'px';
 730         if(this.innerHd){
 731             this.lockedInnerHd.firstChild.style.width = lw + 'px';
 732             this.lockedInnerHd.firstChild.firstChild.style.width = lw + 'px';
 733             this.innerHd.style.width = vw;
 734             this.innerHd.firstChild.style.width = (tw + rp + so) + 'px';
 735             this.innerHd.firstChild.firstChild.style.width = tw + 'px';
 736         }
 737         if(this.mainBody){
 738             this.lockedBody.dom.style.width = (lw + rp) + 'px';
 739             this.mainBody.dom.style.width = (tw + rp) + 'px';
 740         }
 741     }
 742 });
 743
 744 Ext.ux.grid.LockingColumnModel = Ext.extend(Ext.grid.ColumnModel, {
 745     /**
 746      * Returns true if the given column index is currently locked
 747      * @param {Number} colIndex The column index
 748      * @return {Boolean} True if the column is locked
 749      */
 750     isLocked : function(colIndex){
 751         return this.config[colIndex].locked === true;
 752     },
 753
 754     /**
 755      * Locks or unlocks a given column
 756      * @param {Number} colIndex The column index
 757      * @param {Boolean} value True to lock, false to unlock
 758      * @param {Boolean} suppressEvent Pass false to cause the columnlockchange event not to fire
 759      */
 760     setLocked : function(colIndex, value, suppressEvent){
 761         if (this.isLocked(colIndex) == value) {
 762             return;
 763         }
 764         this.config[colIndex].locked = value;
 765         if (!suppressEvent) {
 766             this.fireEvent('columnlockchange', this, colIndex, value);
 767         }
 768     },
 769
 770     /**
 771      * Returns the total width of all locked columns
 772      * @return {Number} The width of all locked columns
 773      */
 774     getTotalLockedWidth : function(){
 775         var totalWidth = 0;
 776         for (var i = 0, len = this.config.length; i < len; i++) {
 777             if (this.isLocked(i) && !this.isHidden(i)) {
 778                 totalWidth += this.getColumnWidth(i);
 779             }
 780         }
 781
 782         return totalWidth;
 783     },
 784
 785     /**
 786      * Returns the total number of locked columns
 787      * @return {Number} The number of locked columns
 788      */
 789     getLockedCount : function() {
 790         var len = this.config.length;
 791
 792         for (var i = 0; i < len; i++) {
 793             if (!this.isLocked(i)) {
 794                 return i;
 795             }
 796         }
 797
 798         //if we get to this point all of the columns are locked so we return the total
 799         return len;
 800     },
 801
 802     /**
 803      * Moves a column from one position to another
 804      * @param {Number} oldIndex The current column index
 805      * @param {Number} newIndex The destination column index
 806      */
 807     moveColumn : function(oldIndex, newIndex){
 808         var oldLocked = this.isLocked(oldIndex),
 809             newLocked = this.isLocked(newIndex);
 810
 811         if (oldIndex < newIndex && oldLocked && !newLocked) {
 812             this.setLocked(oldIndex, false, true);
 813         } else if (oldIndex > newIndex && !oldLocked && newLocked) {
 814             this.setLocked(oldIndex, true, true);
 815         }
 816
 817         Ext.ux.grid.LockingColumnModel.superclass.moveColumn.apply(this, arguments);
 818     }
 819 });