git.roojs.org Git - roojs1/blob - Roo/grid/GridView.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.grid.GridView
  14  * @extends Roo.util.Observable
  15  *
  16  * @constructor
  17  * @param {Object} config
  18  */
  19 Roo.grid.GridView = function(config){
  20     Roo.grid.GridView.superclass.constructor.call(this);
  21     this.el = null;
  22
  23     Roo.apply(this, config);
  24 };
  25
  26 Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
  27
  28
  29     rowClass : "x-grid-row",
  30
  31     cellClass : "x-grid-col",
  32
  33     tdClass : "x-grid-td",
  34
  35     hdClass : "x-grid-hd",
  36
  37     splitClass : "x-grid-split",
  38
  39     sortClasses : ["sort-asc", "sort-desc"],
  40
  41     enableMoveAnim : false,
  42
  43     hlColor: "C3DAF9",
  44
  45     dh : Roo.DomHelper,
  46
  47     fly : Roo.Element.fly,
  48
  49     css : Roo.util.CSS,
  50
  51     borderWidth: 1,
  52
  53     splitOffset: 3,
  54
  55     scrollIncrement : 22,
  56
  57     cellRE: /(?:.*?)x-grid-(?:hd|cell|csplit)-(?:[\d]+)-([\d]+)(?:.*?)/,
  58
  59     findRE: /\s?(?:x-grid-hd|x-grid-col|x-grid-csplit)\s/,
  60
  61     bind : function(ds, cm){
  62         if(this.ds){
  63             this.ds.un("load", this.onLoad, this);
  64             this.ds.un("datachanged", this.onDataChange, this);
  65             this.ds.un("add", this.onAdd, this);
  66             this.ds.un("remove", this.onRemove, this);
  67             this.ds.un("update", this.onUpdate, this);
  68             this.ds.un("clear", this.onClear, this);
  69         }
  70         if(ds){
  71             ds.on("load", this.onLoad, this);
  72             ds.on("datachanged", this.onDataChange, this);
  73             ds.on("add", this.onAdd, this);
  74             ds.on("remove", this.onRemove, this);
  75             ds.on("update", this.onUpdate, this);
  76             ds.on("clear", this.onClear, this);
  77         }
  78         this.ds = ds;
  79
  80         if(this.cm){
  81             this.cm.un("widthchange", this.onColWidthChange, this);
  82             this.cm.un("headerchange", this.onHeaderChange, this);
  83             this.cm.un("hiddenchange", this.onHiddenChange, this);
  84             this.cm.un("columnmoved", this.onColumnMove, this);
  85             this.cm.un("columnlockchange", this.onColumnLock, this);
  86         }
  87         if(cm){
  88             this.generateRules(cm);
  89             cm.on("widthchange", this.onColWidthChange, this);
  90             cm.on("headerchange", this.onHeaderChange, this);
  91             cm.on("hiddenchange", this.onHiddenChange, this);
  92             cm.on("columnmoved", this.onColumnMove, this);
  93             cm.on("columnlockchange", this.onColumnLock, this);
  94         }
  95         this.cm = cm;
  96     },
  97
  98     init: function(grid){
  99         Roo.grid.GridView.superclass.init.call(this, grid);
 100
 101         this.bind(grid.dataSource, grid.colModel);
 102
 103         grid.on("headerclick", this.handleHeaderClick, this);
 104
 105         if(grid.trackMouseOver){
 106             grid.on("mouseover", this.onRowOver, this);
 107             grid.on("mouseout", this.onRowOut, this);
 108         }
 109         grid.cancelTextSelection = function(){};
 110         this.gridId = grid.id;
 111
 112         var tpls = this.templates || {};
 113
 114         if(!tpls.master){
 115             tpls.master = new Roo.Template(
 116                '<div class="x-grid" hidefocus="true">',
 117                 '<a href="#" class="x-grid-focus" tabIndex="-1"></a>',
 118                   '<div class="x-grid-topbar"></div>',
 119                   '<div class="x-grid-scroller"><div></div></div>',
 120                   '<div class="x-grid-locked">',
 121                       '<div class="x-grid-header">{lockedHeader}</div>',
 122                       '<div class="x-grid-body">{lockedBody}</div>',
 123                   "</div>",
 124                   '<div class="x-grid-viewport">',
 125                       '<div class="x-grid-header">{header}</div>',
 126                       '<div class="x-grid-body">{body}</div>',
 127                   "</div>",
 128                   '<div class="x-grid-bottombar"></div>',
 129
 130                   '<div class="x-grid-resize-proxy">&#160;</div>',
 131                "</div>"
 132             );
 133             tpls.master.disableformats = true;
 134         }
 135
 136         if(!tpls.header){
 137             tpls.header = new Roo.Template(
 138                '<table border="0" cellspacing="0" cellpadding="0">',
 139                '<tbody><tr class="x-grid-hd-row">{cells}</tr></tbody>',
 140                "</table>{splits}"
 141             );
 142             tpls.header.disableformats = true;
 143         }
 144         tpls.header.compile();
 145
 146         if(!tpls.hcell){
 147             tpls.hcell = new Roo.Template(
 148                 '<td class="x-grid-hd x-grid-td-{id} {cellId}"><div title="{title}" class="x-grid-hd-inner x-grid-hd-{id}">',
 149                 '<div class="x-grid-hd-text" unselectable="on">{value}<img class="x-grid-sort-icon" src="', Roo.BLANK_IMAGE_URL, '" /></div>',
 150                 "</div></td>"
 151              );
 152              tpls.hcell.disableFormats = true;
 153         }
 154         tpls.hcell.compile();
 155
 156         if(!tpls.hsplit){
 157             tpls.hsplit = new Roo.Template('<div class="x-grid-split {splitId} x-grid-split-{id}" style="{style}" unselectable="on">&#160;</div>');
 158             tpls.hsplit.disableFormats = true;
 159         }
 160         tpls.hsplit.compile();
 161
 162         if(!tpls.body){
 163             tpls.body = new Roo.Template(
 164                '<table border="0" cellspacing="0" cellpadding="0">',
 165                "<tbody>{rows}</tbody>",
 166                "</table>"
 167             );
 168             tpls.body.disableFormats = true;
 169         }
 170         tpls.body.compile();
 171
 172         if(!tpls.row){
 173             tpls.row = new Roo.Template('<tr class="x-grid-row {alt}">{cells}</tr>');
 174             tpls.row.disableFormats = true;
 175         }
 176         tpls.row.compile();
 177
 178         if(!tpls.cell){
 179             tpls.cell = new Roo.Template(
 180                 '<td class="x-grid-col x-grid-td-{id} {cellId} {css}" tabIndex="0">',
 181                 '<div class="x-grid-col-{id} x-grid-cell-inner"><div class="x-grid-cell-text" unselectable="on" {attr}>{value}</div></div>',
 182                 "</td>"
 183             );
 184             tpls.cell.disableFormats = true;
 185         }
 186         tpls.cell.compile();
 187
 188         this.templates = tpls;
 189     },
 190
 191     // remap these for backwards compat
 192     onColWidthChange : function(){
 193         this.updateColumns.apply(this, arguments);
 194     },
 195     onHeaderChange : function(){
 196         this.updateHeaders.apply(this, arguments);
 197     },
 198     onHiddenChange : function(){
 199         this.handleHiddenChange.apply(this, arguments);
 200     },
 201     onColumnMove : function(){
 202         this.handleColumnMove.apply(this, arguments);
 203     },
 204     onColumnLock : function(){
 205         this.handleLockChange.apply(this, arguments);
 206     },
 207
 208     onDataChange : function(){
 209         this.refresh();
 210         this.updateHeaderSortState();
 211     },
 212
 213     onClear : function(){
 214         this.refresh();
 215     },
 216
 217     onUpdate : function(ds, record){
 218         this.refreshRow(record);
 219     },
 220
 221     refreshRow : function(record){
 222         var ds = this.ds, index;
 223         if(typeof record == 'number'){
 224             index = record;
 225             record = ds.getAt(index);
 226         }else{
 227             index = ds.indexOf(record);
 228         }
 229         this.insertRows(ds, index, index, true);
 230         this.onRemove(ds, record, index+1, true);
 231         this.syncRowHeights(index, index);
 232         this.layout();
 233         this.fireEvent("rowupdated", this, index, record);
 234     },
 235
 236     onAdd : function(ds, records, index){
 237         this.insertRows(ds, index, index + (records.length-1));
 238     },
 239
 240     onRemove : function(ds, record, index, isUpdate){
 241         if(isUpdate !== true){
 242             this.fireEvent("beforerowremoved", this, index, record);
 243         }
 244         var bt = this.getBodyTable(), lt = this.getLockedTable();
 245         if(bt.rows[index]){
 246             bt.firstChild.removeChild(bt.rows[index]);
 247         }
 248         if(lt.rows[index]){
 249             lt.firstChild.removeChild(lt.rows[index]);
 250         }
 251         if(isUpdate !== true){
 252             this.stripeRows(index);
 253             this.syncRowHeights(index, index);
 254             this.layout();
 255             this.fireEvent("rowremoved", this, index, record);
 256         }
 257     },
 258
 259     onLoad : function(){
 260         this.scrollToTop();
 261     },
 262
 263     /**
 264      * Scrolls the grid to the top
 265      */
 266     scrollToTop : function(){
 267         if(this.scroller){
 268             this.scroller.dom.scrollTop = 0;
 269             this.syncScroll();
 270         }
 271     },
 272
 273     /**
 274      * Gets a panel in the header of the grid that can be used for toolbars etc.
 275      * After modifying the contents of this panel a call to grid.autoSize() may be
 276      * required to register any changes in size.
 277      * @param {Boolean} doShow By default the header is hidden. Pass true to show the panel
 278      * @return Roo.Element
 279      */
 280     getHeaderPanel : function(doShow){
 281         if(doShow){
 282             this.headerPanel.show();
 283         }
 284         return this.headerPanel;
 285     },
 286
 287     /**
 288      * Gets a panel in the footer of the grid that can be used for toolbars etc.
 289      * After modifying the contents of this panel a call to grid.autoSize() may be
 290      * required to register any changes in size.
 291      * @param {Boolean} doShow By default the footer is hidden. Pass true to show the panel
 292      * @return Roo.Element
 293      */
 294     getFooterPanel : function(doShow){
 295         if(doShow){
 296             this.footerPanel.show();
 297         }
 298         return this.footerPanel;
 299     },
 300
 301     initElements : function(){
 302         var E = Roo.Element;
 303         var el = this.grid.getGridEl().dom.firstChild;
 304         var cs = el.childNodes;
 305
 306         this.el = new E(el);
 307
 308          this.focusEl = new E(el.firstChild);
 309         this.focusEl.swallowEvent("click", true);
 310
 311         this.headerPanel = new E(cs[1]);
 312         this.headerPanel.enableDisplayMode("block");
 313
 314         this.scroller = new E(cs[2]);
 315         this.scrollSizer = new E(this.scroller.dom.firstChild);
 316
 317         this.lockedWrap = new E(cs[3]);
 318         this.lockedHd = new E(this.lockedWrap.dom.firstChild);
 319         this.lockedBody = new E(this.lockedWrap.dom.childNodes[1]);
 320
 321         this.mainWrap = new E(cs[4]);
 322         this.mainHd = new E(this.mainWrap.dom.firstChild);
 323         this.mainBody = new E(this.mainWrap.dom.childNodes[1]);
 324
 325         this.footerPanel = new E(cs[5]);
 326         this.footerPanel.enableDisplayMode("block");
 327
 328         this.resizeProxy = new E(cs[6]);
 329
 330         this.headerSelector = String.format(
 331            '#{0} td.x-grid-hd, #{1} td.x-grid-hd',
 332            this.lockedHd.id, this.mainHd.id
 333         );
 334
 335         this.splitterSelector = String.format(
 336            '#{0} div.x-grid-split, #{1} div.x-grid-split',
 337            this.idToCssName(this.lockedHd.id), this.idToCssName(this.mainHd.id)
 338         );
 339     },
 340     idToCssName : function(s)
 341     {
 342         return s.replace(/[^a-z0-9]+/ig, '-');
 343     },
 344
 345     getHeaderCell : function(index){
 346         return Roo.DomQuery.select(this.headerSelector)[index];
 347     },
 348
 349     getHeaderCellMeasure : function(index){
 350         return this.getHeaderCell(index).firstChild;
 351     },
 352
 353     getHeaderCellText : function(index){
 354         return this.getHeaderCell(index).firstChild.firstChild;
 355     },
 356
 357     getLockedTable : function(){
 358         return this.lockedBody.dom.firstChild;
 359     },
 360
 361     getBodyTable : function(){
 362         return this.mainBody.dom.firstChild;
 363     },
 364
 365     getLockedRow : function(index){
 366         return this.getLockedTable().rows[index];
 367     },
 368
 369     getRow : function(index){
 370         return this.getBodyTable().rows[index];
 371     },
 372
 373     getRowComposite : function(index){
 374         if(!this.rowEl){
 375             this.rowEl = new Roo.CompositeElementLite();
 376         }
 377         var els = [], lrow, mrow;
 378         if(lrow = this.getLockedRow(index)){
 379             els.push(lrow);
 380         }
 381         if(mrow = this.getRow(index)){
 382             els.push(mrow);
 383         }
 384         this.rowEl.elements = els;
 385         return this.rowEl;
 386     },
 387     /**
 388      * Gets the 'td' of the cell
 389      *
 390      * @param {Integer} rowIndex row to select
 391      * @param {Integer} colIndex column to select
 392      *
 393      * @return {Object}
 394      */
 395     getCell : function(rowIndex, colIndex){
 396         var locked = this.cm.getLockedCount();
 397         var source;
 398         if(colIndex < locked){
 399             source = this.lockedBody.dom.firstChild;
 400         }else{
 401             source = this.mainBody.dom.firstChild;
 402             colIndex -= locked;
 403         }
 404         return source.rows[rowIndex].childNodes[colIndex];
 405     },
 406
 407     getCellText : function(rowIndex, colIndex){
 408         return this.getCell(rowIndex, colIndex).firstChild.firstChild;
 409     },
 410
 411     getCellBox : function(cell){
 412         var b = this.fly(cell).getBox();
 413         if(Roo.isOpera){ // opera fails to report the Y
 414             b.y = cell.offsetTop + this.mainBody.getY();
 415         }
 416         return b;
 417     },
 418
 419     getCellIndex : function(cell){
 420         var id = String(cell.className).match(this.cellRE);
 421         if(id){
 422             return parseInt(id[1], 10);
 423         }
 424         return 0;
 425     },
 426
 427     findHeaderIndex : function(n){
 428         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
 429         return r ? this.getCellIndex(r) : false;
 430     },
 431
 432     findHeaderCell : function(n){
 433         var r = Roo.fly(n).findParent("td." + this.hdClass, 6);
 434         return r ? r : false;
 435     },
 436
 437     findRowIndex : function(n){
 438         if(!n){
 439             return false;
 440         }
 441         var r = Roo.fly(n).findParent("tr." + this.rowClass, 6);
 442         return r ? r.rowIndex : false;
 443     },
 444
 445     findCellIndex : function(node){
 446         var stop = this.el.dom;
 447         while(node && node != stop){
 448             if(this.findRE.test(node.className)){
 449                 return this.getCellIndex(node);
 450             }
 451             node = node.parentNode;
 452         }
 453         return false;
 454     },
 455
 456     getColumnId : function(index){
 457         return this.cm.getColumnId(index);
 458     },
 459
 460     getSplitters : function()
 461     {
 462         if(this.splitterSelector){
 463            return Roo.DomQuery.select(this.splitterSelector);
 464         }else{
 465             return null;
 466       }
 467     },
 468
 469     getSplitter : function(index){
 470         return this.getSplitters()[index];
 471     },
 472
 473     onRowOver : function(e, t){
 474         var row;
 475         if((row = this.findRowIndex(t)) !== false){
 476             this.getRowComposite(row).addClass("x-grid-row-over");
 477         }
 478     },
 479
 480     onRowOut : function(e, t){
 481         var row;
 482         if((row = this.findRowIndex(t)) !== false && row !== this.findRowIndex(e.getRelatedTarget())){
 483             this.getRowComposite(row).removeClass("x-grid-row-over");
 484         }
 485     },
 486
 487     renderHeaders : function(){
 488         var cm = this.cm;
 489         var ct = this.templates.hcell, ht = this.templates.header, st = this.templates.hsplit;
 490         var cb = [], lb = [], sb = [], lsb = [], p = {};
 491         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 492             p.cellId = "x-grid-hd-0-" + i;
 493             p.splitId = "x-grid-csplit-0-" + i;
 494             p.id = cm.getColumnId(i);
 495             p.title = cm.getColumnTooltip(i) || "";
 496             p.value = cm.getColumnHeader(i) || "";
 497             p.style = (this.grid.enableColumnResize === false || !cm.isResizable(i) || cm.isFixed(i)) ? 'cursor:default' : '';
 498             if(!cm.isLocked(i)){
 499                 cb[cb.length] = ct.apply(p);
 500                 sb[sb.length] = st.apply(p);
 501             }else{
 502                 lb[lb.length] = ct.apply(p);
 503                 lsb[lsb.length] = st.apply(p);
 504             }
 505         }
 506         return [ht.apply({cells: lb.join(""), splits:lsb.join("")}),
 507                 ht.apply({cells: cb.join(""), splits:sb.join("")})];
 508     },
 509
 510     updateHeaders : function(){
 511         var html = this.renderHeaders();
 512         this.lockedHd.update(html[0]);
 513         this.mainHd.update(html[1]);
 514     },
 515
 516     /**
 517      * Focuses the specified row.
 518      * @param {Number} row The row index
 519      */
 520     focusRow : function(row)
 521     {
 522         //Roo.log('GridView.focusRow');
 523         var x = this.scroller.dom.scrollLeft;
 524         this.focusCell(row, 0, false);
 525         this.scroller.dom.scrollLeft = x;
 526     },
 527
 528     /**
 529      * Focuses the specified cell.
 530      * @param {Number} row The row index
 531      * @param {Number} col The column index
 532      * @param {Boolean} hscroll false to disable horizontal scrolling
 533      */
 534     focusCell : function(row, col, hscroll)
 535     {
 536         //Roo.log('GridView.focusCell');
 537         var el = this.ensureVisible(row, col, hscroll);
 538         this.focusEl.alignTo(el, "tl-tl");
 539         if(Roo.isGecko){
 540             this.focusEl.focus();
 541         }else{
 542             this.focusEl.focus.defer(1, this.focusEl);
 543         }
 544     },
 545
 546     /**
 547      * Scrolls the specified cell into view
 548      * @param {Number} row The row index
 549      * @param {Number} col The column index
 550      * @param {Boolean} hscroll false to disable horizontal scrolling
 551      */
 552     ensureVisible : function(row, col, hscroll)
 553     {
 554         //Roo.log('GridView.ensureVisible,' + row + ',' + col);
 555         //return null; //disable for testing.
 556         if(typeof row != "number"){
 557             row = row.rowIndex;
 558         }
 559         if(row < 0 && row >= this.ds.getCount()){
 560             return  null;
 561         }
 562         col = (col !== undefined ? col : 0);
 563         var cm = this.grid.colModel;
 564         while(cm.isHidden(col)){
 565             col++;
 566         }
 567
 568         var el = this.getCell(row, col);
 569         if(!el){
 570             return null;
 571         }
 572         var c = this.scroller.dom;
 573
 574         var ctop = parseInt(el.offsetTop, 10);
 575         var cleft = parseInt(el.offsetLeft, 10);
 576         var cbot = ctop + el.offsetHeight;
 577         var cright = cleft + el.offsetWidth;
 578
 579         var ch = c.clientHeight - this.mainHd.dom.offsetHeight;
 580         var stop = parseInt(c.scrollTop, 10);
 581         var sleft = parseInt(c.scrollLeft, 10);
 582         var sbot = stop + ch;
 583         var sright = sleft + c.clientWidth;
 584         /*
 585         Roo.log('GridView.ensureVisible:' +
 586                 ' ctop:' + ctop +
 587                 ' c.clientHeight:' + c.clientHeight +
 588                 ' this.mainHd.dom.offsetHeight:' + this.mainHd.dom.offsetHeight +
 589                 ' stop:' + stop +
 590                 ' cbot:' + cbot +
 591                 ' sbot:' + sbot +
 592                 ' ch:' + ch
 593                 );
 594         */
 595         if(ctop < stop){
 596              c.scrollTop = ctop;
 597             //Roo.log("set scrolltop to ctop DISABLE?");
 598         }else if(cbot > sbot){
 599             //Roo.log("set scrolltop to cbot-ch");
 600             c.scrollTop = cbot-ch;
 601         }
 602
 603         if(hscroll !== false){
 604             if(cleft < sleft){
 605                 c.scrollLeft = cleft;
 606             }else if(cright > sright){
 607                 c.scrollLeft = cright-c.clientWidth;
 608             }
 609         }
 610
 611         return el;
 612     },
 613
 614     updateColumns : function(){
 615         this.grid.stopEditing();
 616         var cm = this.grid.colModel, colIds = this.getColumnIds();
 617         //var totalWidth = cm.getTotalWidth();
 618         var pos = 0;
 619         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 620             //if(cm.isHidden(i)) continue;
 621             var w = cm.getColumnWidth(i);
 622             this.css.updateRule(this.colSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
 623             this.css.updateRule(this.hdSelector+this.idToCssName(colIds[i]), "width", (w - this.borderWidth) + "px");
 624         }
 625         this.updateSplitters();
 626     },
 627
 628     generateRules : function(cm){
 629         var ruleBuf = [], rulesId = this.idToCssName(this.grid.id)+ '-cssrules';
 630         Roo.util.CSS.removeStyleSheet(rulesId);
 631         for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 632             var cid = cm.getColumnId(i);
 633             var align = '';
 634             if(cm.config[i].align){
 635                 align = 'text-align:'+cm.config[i].align+';';
 636             }
 637             var hidden = '';
 638             if(cm.isHidden(i)){
 639                 hidden = 'display:none;';
 640             }
 641             var width = "width:" + (cm.getColumnWidth(i) - this.borderWidth) + "px;";
 642             ruleBuf.push(
 643                     this.colSelector, cid, " {\n", cm.config[i].css, align, width, "\n}\n",
 644                     this.hdSelector, cid, " {\n", align, width, "}\n",
 645                     this.tdSelector, cid, " {\n",hidden,"\n}\n",
 646                     this.splitSelector, cid, " {\n", hidden , "\n}\n");
 647         }
 648         return Roo.util.CSS.createStyleSheet(ruleBuf.join(""), rulesId);
 649     },
 650
 651     updateSplitters : function(){
 652         var cm = this.cm, s = this.getSplitters();
 653         if(s){ // splitters not created yet
 654             var pos = 0, locked = true;
 655             for(var i = 0, len = cm.getColumnCount(); i < len; i++){
 656                 if(cm.isHidden(i)) continue;
 657                 var w = cm.getColumnWidth(i); // make sure it's a number
 658                 if(!cm.isLocked(i) && locked){
 659                     pos = 0;
 660                     locked = false;
 661                 }
 662                 pos += w;
 663                 s[i].style.left = (pos-this.splitOffset) + "px";
 664             }
 665         }
 666     },
 667
 668     handleHiddenChange : function(colModel, colIndex, hidden){
 669         if(hidden){
 670             this.hideColumn(colIndex);
 671         }else{
 672             this.unhideColumn(colIndex);
 673         }
 674     },
 675
 676     hideColumn : function(colIndex){
 677         var cid = this.getColumnId(colIndex);
 678         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "none");
 679         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "none");
 680         if(Roo.isSafari){
 681             this.updateHeaders();
 682         }
 683         this.updateSplitters();
 684         this.layout();
 685     },
 686
 687     unhideColumn : function(colIndex){
 688         var cid = this.getColumnId(colIndex);
 689         this.css.updateRule(this.tdSelector+this.idToCssName(cid), "display", "");
 690         this.css.updateRule(this.splitSelector+this.idToCssName(cid), "display", "");
 691
 692         if(Roo.isSafari){
 693             this.updateHeaders();
 694         }
 695         this.updateSplitters();
 696         this.layout();
 697     },
 698
 699     insertRows : function(dm, firstRow, lastRow, isUpdate){
 700         if(firstRow == 0 && lastRow == dm.getCount()-1){
 701             this.refresh();
 702         }else{
 703             if(!isUpdate){
 704                 this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
 705             }
 706             var s = this.getScrollState();
 707             var markup = this.renderRows(firstRow, lastRow);
 708             this.bufferRows(markup[0], this.getLockedTable(), firstRow);
 709             this.bufferRows(markup[1], this.getBodyTable(), firstRow);
 710             this.restoreScroll(s);
 711             if(!isUpdate){
 712                 this.fireEvent("rowsinserted", this, firstRow, lastRow);
 713                 this.syncRowHeights(firstRow, lastRow);
 714                 this.stripeRows(firstRow);
 715                 this.layout();
 716             }
 717         }
 718     },
 719
 720     bufferRows : function(markup, target, index){
 721         var before = null, trows = target.rows, tbody = target.tBodies[0];
 722         if(index < trows.length){
 723             before = trows[index];
 724         }
 725         var b = document.createElement("div");
 726         b.innerHTML = "<table><tbody>"+markup+"</tbody></table>";
 727         var rows = b.firstChild.rows;
 728         for(var i = 0, len = rows.length; i < len; i++){
 729             if(before){
 730                 tbody.insertBefore(rows[0], before);
 731             }else{
 732                 tbody.appendChild(rows[0]);
 733             }
 734         }
 735         b.innerHTML = "";
 736         b = null;
 737     },
 738
 739     deleteRows : function(dm, firstRow, lastRow){
 740         if(dm.getRowCount()<1){
 741             this.fireEvent("beforerefresh", this);
 742             this.mainBody.update("");
 743             this.lockedBody.update("");
 744             this.fireEvent("refresh", this);
 745         }else{
 746             this.fireEvent("beforerowsdeleted", this, firstRow, lastRow);
 747             var bt = this.getBodyTable();
 748             var tbody = bt.firstChild;
 749             var rows = bt.rows;
 750             for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
 751                 tbody.removeChild(rows[firstRow]);
 752             }
 753             this.stripeRows(firstRow);
 754             this.fireEvent("rowsdeleted", this, firstRow, lastRow);
 755         }
 756     },
 757
 758     updateRows : function(dataSource, firstRow, lastRow){
 759         var s = this.getScrollState();
 760         this.refresh();
 761         this.restoreScroll(s);
 762     },
 763
 764     handleSort : function(dataSource, sortColumnIndex, sortDir, noRefresh){
 765         if(!noRefresh){
 766            this.refresh();
 767         }
 768         this.updateHeaderSortState();
 769     },
 770
 771     getScrollState : function(){
 772
 773         var sb = this.scroller.dom;
 774         return {left: sb.scrollLeft, top: sb.scrollTop};
 775     },
 776
 777     stripeRows : function(startRow){
 778         if(!this.grid.stripeRows || this.ds.getCount() < 1){
 779             return;
 780         }
 781         startRow = startRow || 0;
 782         var rows = this.getBodyTable().rows;
 783         var lrows = this.getLockedTable().rows;
 784         var cls = ' x-grid-row-alt ';
 785         for(var i = startRow, len = rows.length; i < len; i++){
 786             var row = rows[i], lrow = lrows[i];
 787             var isAlt = ((i+1) % 2 == 0);
 788             var hasAlt = (' '+row.className + ' ').indexOf(cls) != -1;
 789             if(isAlt == hasAlt){
 790                 continue;
 791             }
 792             if(isAlt){
 793                 row.className += " x-grid-row-alt";
 794             }else{
 795                 row.className = row.className.replace("x-grid-row-alt", "");
 796             }
 797             if(lrow){
 798                 lrow.className = row.className;
 799             }
 800         }
 801     },
 802
 803     restoreScroll : function(state){
 804         //Roo.log('GridView.restoreScroll');
 805         var sb = this.scroller.dom;
 806         sb.scrollLeft = state.left;
 807         sb.scrollTop = state.top;
 808         this.syncScroll();
 809     },
 810
 811     syncScroll : function(){
 812         //Roo.log('GridView.syncScroll');
 813         var sb = this.scroller.dom;
 814         var sh = this.mainHd.dom;
 815         var bs = this.mainBody.dom;
 816         var lv = this.lockedBody.dom;
 817         sh.scrollLeft = bs.scrollLeft = sb.scrollLeft;
 818         lv.scrollTop = bs.scrollTop = sb.scrollTop;
 819     },
 820
 821     handleScroll : function(e){
 822         this.syncScroll();
 823         var sb = this.scroller.dom;
 824         this.grid.fireEvent("bodyscroll", sb.scrollLeft, sb.scrollTop);
 825         e.stopEvent();
 826     },
 827
 828     handleWheel : function(e){
 829         var d = e.getWheelDelta();
 830         this.scroller.dom.scrollTop -= d*22;
 831         // set this here to prevent jumpy scrolling on large tables
 832         this.lockedBody.dom.scrollTop = this.mainBody.dom.scrollTop = this.scroller.dom.scrollTop;
 833         e.stopEvent();
 834     },
 835
 836     renderRows : function(startRow, endRow){
 837         // pull in all the crap needed to render rows
 838         var g = this.grid, cm = g.colModel, ds = g.dataSource, stripe = g.stripeRows;
 839         var colCount = cm.getColumnCount();
 840
 841         if(ds.getCount() < 1){
 842             return ["", ""];
 843         }
 844
 845         // build a map for all the columns
 846         var cs = [];
 847         for(var i = 0; i < colCount; i++){
 848             var name = cm.getDataIndex(i);
 849             cs[i] = {
 850                 name : typeof name == 'undefined' ? ds.fields.get(i).name : name,
 851                 renderer : cm.getRenderer(i),
 852                 id : cm.getColumnId(i),
 853                 locked : cm.isLocked(i)
 854             };
 855         }
 856
 857         startRow = startRow || 0;
 858         endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
 859
 860         // records to render
 861         var rs = ds.getRange(startRow, endRow);
 862
 863         return this.doRender(cs, rs, ds, startRow, colCount, stripe);
 864     },
 865
 866     // As much as I hate to duplicate code, this was branched because FireFox really hates
 867     // [].join("") on strings. The performance difference was substantial enough to
 868     // branch this function
 869     doRender : Roo.isGecko ?
 870             function(cs, rs, ds, startRow, colCount, stripe){
 871                 var ts = this.templates, ct = ts.cell, rt = ts.row;
 872                 // buffers
 873                 var buf = "", lbuf = "", cb, lcb, c, p = {}, rp = {}, r, rowIndex;
 874
 875                 var hasListener = this.grid.hasListener('rowclass');
 876                 var rowcfg = {};
 877                 for(var j = 0, len = rs.length; j < len; j++){
 878                     r = rs[j]; cb = ""; lcb = ""; rowIndex = (j+startRow);
 879                     for(var i = 0; i < colCount; i++){
 880                         c = cs[i];
 881                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
 882                         p.id = c.id;
 883                         p.css = p.attr = "";
 884                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
 885                         if(p.value == undefined || p.value === "") p.value = "&#160;";
 886                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
 887                             p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
 888                         }
 889                         var markup = ct.apply(p);
 890                         if(!c.locked){
 891                             cb+= markup;
 892                         }else{
 893                             lcb+= markup;
 894                         }
 895                     }
 896                     var alt = [];
 897                     if(stripe && ((rowIndex+1) % 2 == 0)){
 898                         alt.push("x-grid-row-alt")
 899                     }
 900                     if(r.dirty){
 901                         alt.push(  " x-grid-dirty-row");
 902                     }
 903                     rp.cells = lcb;
 904                     if(this.getRowClass){
 905                         alt.push(this.getRowClass(r, rowIndex));
 906                     }
 907                     if (hasListener) {
 908                         rowcfg = {
 909
 910                             record: r,
 911                             rowIndex : rowIndex,
 912                             rowClass : ''
 913                         }
 914                         this.grid.fireEvent('rowclass', this, rowcfg);
 915                         alt.push(rowcfg.rowClass);
 916                     }
 917                     rp.alt = alt.join(" ");
 918                     lbuf+= rt.apply(rp);
 919                     rp.cells = cb;
 920                     buf+=  rt.apply(rp);
 921                 }
 922                 return [lbuf, buf];
 923             } :
 924             function(cs, rs, ds, startRow, colCount, stripe){
 925                 var ts = this.templates, ct = ts.cell, rt = ts.row;
 926                 // buffers
 927                 var buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r, rowIndex;
 928                 var hasListener = this.grid.hasListener('rowclass');
 929
 930                 var rowcfg = {};
 931                 for(var j = 0, len = rs.length; j < len; j++){
 932                     r = rs[j]; cb = []; lcb = []; rowIndex = (j+startRow);
 933                     for(var i = 0; i < colCount; i++){
 934                         c = cs[i];
 935                         p.cellId = "x-grid-cell-" + rowIndex + "-" + i;
 936                         p.id = c.id;
 937                         p.css = p.attr = "";
 938                         p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
 939                         if(p.value == undefined || p.value === "") p.value = "&#160;";
 940                         if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
 941                             p.css += p.css ? ' x-grid-dirty-cell' : 'x-grid-dirty-cell';
 942                         }
 943
 944                         var markup = ct.apply(p);
 945                         if(!c.locked){
 946                             cb[cb.length] = markup;
 947                         }else{
 948                             lcb[lcb.length] = markup;
 949                         }
 950                     }
 951                     var alt = [];
 952                     if(stripe && ((rowIndex+1) % 2 == 0)){
 953                         alt.push( "x-grid-row-alt");
 954                     }
 955                     if(r.dirty){
 956                         alt.push(" x-grid-dirty-row");
 957                     }
 958                     rp.cells = lcb;
 959                     if(this.getRowClass){
 960                         alt.push( this.getRowClass(r, rowIndex));
 961                     }
 962                     if (hasListener) {
 963                         rowcfg = {
 964
 965                             record: r,
 966                             rowIndex : rowIndex,
 967                             rowClass : ''
 968                         }
 969                         this.grid.fireEvent('rowclass', this, rowcfg);
 970                         alt.push(rowcfg.rowClass);
 971                     }
 972                     rp.alt = alt.join(" ");
 973                     rp.cells = lcb.join("");
 974                     lbuf[lbuf.length] = rt.apply(rp);
 975                     rp.cells = cb.join("");
 976                     buf[buf.length] =  rt.apply(rp);
 977                 }
 978                 return [lbuf.join(""), buf.join("")];
 979             },
 980
 981     renderBody : function(){
 982         var markup = this.renderRows();
 983         var bt = this.templates.body;
 984         return [bt.apply({rows: markup[0]}), bt.apply({rows: markup[1]})];
 985     },
 986
 987     /**
 988      * Refreshes the grid
 989      * @param {Boolean} headersToo
 990      */
 991     refresh : function(headersToo){
 992         this.fireEvent("beforerefresh", this);
 993         this.grid.stopEditing();
 994         var result = this.renderBody();
 995         this.lockedBody.update(result[0]);
 996         this.mainBody.update(result[1]);
 997         if(headersToo === true){
 998             this.updateHeaders();
 999             this.updateColumns();
1000             this.updateSplitters();
1001             this.updateHeaderSortState();
1002         }
1003         this.syncRowHeights();
1004         this.layout();
1005         this.fireEvent("refresh", this);
1006     },
1007
1008     handleColumnMove : function(cm, oldIndex, newIndex){
1009         this.indexMap = null;
1010         var s = this.getScrollState();
1011         this.refresh(true);
1012         this.restoreScroll(s);
1013         this.afterMove(newIndex);
1014     },
1015
1016     afterMove : function(colIndex){
1017         if(this.enableMoveAnim && Roo.enableFx){
1018             this.fly(this.getHeaderCell(colIndex).firstChild).highlight(this.hlColor);
1019         }
1020         // if multisort - fix sortOrder, and reload..
1021         if (this.grid.dataSource.multiSort) {
1022             // the we can call sort again..
1023             var dm = this.grid.dataSource;
1024             var cm = this.grid.colModel;
1025             var so = [];
1026             for(var i = 0; i < cm.config.length; i++ ) {
1027
1028                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined')) {
1029                     continue; // dont' bother, it's not in sort list or being set.
1030                 }
1031
1032                 so.push(cm.config[i].dataIndex);
1033             };
1034             dm.sortOrder = so;
1035             dm.load(dm.lastOptions);
1036
1037
1038         }
1039
1040     },
1041
1042     updateCell : function(dm, rowIndex, dataIndex){
1043         var colIndex = this.getColumnIndexByDataIndex(dataIndex);
1044         if(typeof colIndex == "undefined"){ // not present in grid
1045             return;
1046         }
1047         var cm = this.grid.colModel;
1048         var cell = this.getCell(rowIndex, colIndex);
1049         var cellText = this.getCellText(rowIndex, colIndex);
1050
1051         var p = {
1052             cellId : "x-grid-cell-" + rowIndex + "-" + colIndex,
1053             id : cm.getColumnId(colIndex),
1054             css: colIndex == cm.getColumnCount()-1 ? "x-grid-col-last" : ""
1055         };
1056         var renderer = cm.getRenderer(colIndex);
1057         var val = renderer(dm.getValueAt(rowIndex, dataIndex), p, rowIndex, colIndex, dm);
1058         if(typeof val == "undefined" || val === "") val = "&#160;";
1059         cellText.innerHTML = val;
1060         cell.className = this.cellClass + " " + this.idToCssName(p.cellId) + " " + p.css;
1061         this.syncRowHeights(rowIndex, rowIndex);
1062     },
1063
1064     calcColumnWidth : function(colIndex, maxRowsToMeasure){
1065         var maxWidth = 0;
1066         if(this.grid.autoSizeHeaders){
1067             var h = this.getHeaderCellMeasure(colIndex);
1068             maxWidth = Math.max(maxWidth, h.scrollWidth);
1069         }
1070         var tb, index;
1071         if(this.cm.isLocked(colIndex)){
1072             tb = this.getLockedTable();
1073             index = colIndex;
1074         }else{
1075             tb = this.getBodyTable();
1076             index = colIndex - this.cm.getLockedCount();
1077         }
1078         if(tb && tb.rows){
1079             var rows = tb.rows;
1080             var stopIndex = Math.min(maxRowsToMeasure || rows.length, rows.length);
1081             for(var i = 0; i < stopIndex; i++){
1082                 var cell = rows[i].childNodes[index].firstChild;
1083                 maxWidth = Math.max(maxWidth, cell.scrollWidth);
1084             }
1085         }
1086         return maxWidth + /*margin for error in IE*/ 5;
1087     },
1088     /**
1089      * Autofit a column to its content.
1090      * @param {Number} colIndex
1091      * @param {Boolean} forceMinSize true to force the column to go smaller if possible
1092      */
1093      autoSizeColumn : function(colIndex, forceMinSize, suppressEvent){
1094          if(this.cm.isHidden(colIndex)){
1095              return; // can't calc a hidden column
1096          }
1097         if(forceMinSize){
1098             var cid = this.cm.getColumnId(colIndex);
1099             this.css.updateRule(this.colSelector +this.idToCssName( cid), "width", this.grid.minColumnWidth + "px");
1100            if(this.grid.autoSizeHeaders){
1101                this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", this.grid.minColumnWidth + "px");
1102            }
1103         }
1104         var newWidth = this.calcColumnWidth(colIndex);
1105         this.cm.setColumnWidth(colIndex,
1106             Math.max(this.grid.minColumnWidth, newWidth), suppressEvent);
1107         if(!suppressEvent){
1108             this.grid.fireEvent("columnresize", colIndex, newWidth);
1109         }
1110     },
1111
1112     /**
1113      * Autofits all columns to their content and then expands to fit any extra space in the grid
1114      */
1115      autoSizeColumns : function(){
1116         var cm = this.grid.colModel;
1117         var colCount = cm.getColumnCount();
1118         for(var i = 0; i < colCount; i++){
1119             this.autoSizeColumn(i, true, true);
1120         }
1121         if(cm.getTotalWidth() < this.scroller.dom.clientWidth){
1122             this.fitColumns();
1123         }else{
1124             this.updateColumns();
1125             this.layout();
1126         }
1127     },
1128
1129     /**
1130      * Autofits all columns to the grid's width proportionate with their current size
1131      * @param {Boolean} reserveScrollSpace Reserve space for a scrollbar
1132      */
1133     fitColumns : function(reserveScrollSpace){
1134         var cm = this.grid.colModel;
1135         var colCount = cm.getColumnCount();
1136         var cols = [];
1137         var width = 0;
1138         var i, w;
1139         for (i = 0; i < colCount; i++){
1140             if(!cm.isHidden(i) && !cm.isFixed(i)){
1141                 w = cm.getColumnWidth(i);
1142                 cols.push(i);
1143                 cols.push(w);
1144                 width += w;
1145             }
1146         }
1147         var avail = Math.min(this.scroller.dom.clientWidth, this.el.getWidth());
1148         if(reserveScrollSpace){
1149             avail -= 17;
1150         }
1151         var frac = (avail - cm.getTotalWidth())/width;
1152         while (cols.length){
1153             w = cols.pop();
1154             i = cols.pop();
1155             cm.setColumnWidth(i, Math.floor(w + w*frac), true);
1156         }
1157         this.updateColumns();
1158         this.layout();
1159     },
1160
1161     onRowSelect : function(rowIndex){
1162         var row = this.getRowComposite(rowIndex);
1163         row.addClass("x-grid-row-selected");
1164     },
1165
1166     onRowDeselect : function(rowIndex){
1167         var row = this.getRowComposite(rowIndex);
1168         row.removeClass("x-grid-row-selected");
1169     },
1170
1171     onCellSelect : function(row, col){
1172         var cell = this.getCell(row, col);
1173         if(cell){
1174             Roo.fly(cell).addClass("x-grid-cell-selected");
1175         }
1176     },
1177
1178     onCellDeselect : function(row, col){
1179         var cell = this.getCell(row, col);
1180         if(cell){
1181             Roo.fly(cell).removeClass("x-grid-cell-selected");
1182         }
1183     },
1184
1185     updateHeaderSortState : function(){
1186
1187         // sort state can be single { field: xxx, direction : yyy}
1188         // or   { xxx=>ASC , yyy : DESC ..... }
1189
1190         var mstate = {};
1191         if (!this.ds.multiSort) {
1192             var state = this.ds.getSortState();
1193             if(!state){
1194                 return;
1195             }
1196             mstate[state.field] = state.direction;
1197             // FIXME... - this is not used here.. but might be elsewhere..
1198             this.sortState = state;
1199
1200         } else {
1201             mstate = this.ds.sortToggle;
1202         }
1203         //remove existing sort classes..
1204
1205         var sc = this.sortClasses;
1206         var hds = this.el.select(this.headerSelector).removeClass(sc);
1207
1208         for(var f in mstate) {
1209
1210             var sortColumn = this.cm.findColumnIndex(f);
1211
1212             if(sortColumn != -1){
1213                 var sortDir = mstate[f];
1214                 hds.item(sortColumn).addClass(sc[sortDir == "DESC" ? 1 : 0]);
1215             }
1216         }
1217
1218
1219
1220     },
1221
1222
1223     handleHeaderClick : function(g, index){
1224         if(this.headersDisabled){
1225             return;
1226         }
1227         var dm = g.dataSource, cm = g.colModel;
1228         if(!cm.isSortable(index)){
1229             return;
1230         }
1231         g.stopEditing();
1232
1233         if (dm.multiSort) {
1234             // update the sortOrder
1235             var so = [];
1236             for(var i = 0; i < cm.config.length; i++ ) {
1237
1238                 if ((typeof(dm.sortToggle[cm.config[i].dataIndex]) == 'undefined') && (index != i)) {
1239                     continue; // dont' bother, it's not in sort list or being set.
1240                 }
1241
1242                 so.push(cm.config[i].dataIndex);
1243             };
1244             dm.sortOrder = so;
1245         }
1246
1247
1248         dm.sort(cm.getDataIndex(index));
1249     },
1250
1251
1252     destroy : function(){
1253         if(this.colMenu){
1254             this.colMenu.removeAll();
1255             Roo.menu.MenuMgr.unregister(this.colMenu);
1256             this.colMenu.getEl().remove();
1257             delete this.colMenu;
1258         }
1259         if(this.hmenu){
1260             this.hmenu.removeAll();
1261             Roo.menu.MenuMgr.unregister(this.hmenu);
1262             this.hmenu.getEl().remove();
1263             delete this.hmenu;
1264         }
1265         if(this.grid.enableColumnMove){
1266             var dds = Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
1267             if(dds){
1268                 for(var dd in dds){
1269                     if(!dds[dd].config.isTarget && dds[dd].dragElId){
1270                         var elid = dds[dd].dragElId;
1271                         dds[dd].unreg();
1272                         Roo.get(elid).remove();
1273                     } else if(dds[dd].config.isTarget){
1274                         dds[dd].proxyTop.remove();
1275                         dds[dd].proxyBottom.remove();
1276                         dds[dd].unreg();
1277                     }
1278                     if(Roo.dd.DDM.locationCache[dd]){
1279                         delete Roo.dd.DDM.locationCache[dd];
1280                     }
1281                 }
1282                 delete Roo.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id];
1283             }
1284         }
1285         Roo.util.CSS.removeStyleSheet(this.idToCssName(this.grid.id) + '-cssrules');
1286         this.bind(null, null);
1287         Roo.EventManager.removeResizeListener(this.onWindowResize, this);
1288     },
1289
1290     handleLockChange : function(){
1291         this.refresh(true);
1292     },
1293
1294     onDenyColumnLock : function(){
1295
1296     },
1297
1298     onDenyColumnHide : function(){
1299
1300     },
1301
1302     handleHdMenuClick : function(item){
1303         var index = this.hdCtxIndex;
1304         var cm = this.cm, ds = this.ds;
1305         switch(item.id){
1306             case "asc":
1307                 ds.sort(cm.getDataIndex(index), "ASC");
1308                 break;
1309             case "desc":
1310                 ds.sort(cm.getDataIndex(index), "DESC");
1311                 break;
1312             case "lock":
1313                 var lc = cm.getLockedCount();
1314                 if(cm.getColumnCount(true) <= lc+1){
1315                     this.onDenyColumnLock();
1316                     return;
1317                 }
1318                 if(lc != index){
1319                     cm.setLocked(index, true, true);
1320                     cm.moveColumn(index, lc);
1321                     this.grid.fireEvent("columnmove", index, lc);
1322                 }else{
1323                     cm.setLocked(index, true);
1324                 }
1325             break;
1326             case "unlock":
1327                 var lc = cm.getLockedCount();
1328                 if((lc-1) != index){
1329                     cm.setLocked(index, false, true);
1330                     cm.moveColumn(index, lc-1);
1331                     this.grid.fireEvent("columnmove", index, lc-1);
1332                 }else{
1333                     cm.setLocked(index, false);
1334                 }
1335             break;
1336             default:
1337                 index = cm.getIndexById(item.id.substr(4));
1338                 if(index != -1){
1339                     if(item.checked && cm.getColumnCount(true) <= 1){
1340                         this.onDenyColumnHide();
1341                         return false;
1342                     }
1343                     cm.setHidden(index, item.checked);
1344                 }
1345         }
1346         return true;
1347     },
1348
1349     beforeColMenuShow : function(){
1350         var cm = this.cm,  colCount = cm.getColumnCount();
1351         this.colMenu.removeAll();
1352         for(var i = 0; i < colCount; i++){
1353             this.colMenu.add(new Roo.menu.CheckItem({
1354                 id: "col-"+cm.getColumnId(i),
1355                 text: cm.getColumnHeader(i),
1356                 checked: !cm.isHidden(i),
1357                 hideOnClick:false
1358             }));
1359         }
1360     },
1361
1362     handleHdCtx : function(g, index, e){
1363         e.stopEvent();
1364         var hd = this.getHeaderCell(index);
1365         this.hdCtxIndex = index;
1366         var ms = this.hmenu.items, cm = this.cm;
1367         ms.get("asc").setDisabled(!cm.isSortable(index));
1368         ms.get("desc").setDisabled(!cm.isSortable(index));
1369         if(this.grid.enableColLock !== false){
1370             ms.get("lock").setDisabled(cm.isLocked(index));
1371             ms.get("unlock").setDisabled(!cm.isLocked(index));
1372         }
1373         this.hmenu.show(hd, "tl-bl");
1374     },
1375
1376     handleHdOver : function(e){
1377         var hd = this.findHeaderCell(e.getTarget());
1378         if(hd && !this.headersDisabled){
1379             if(this.grid.colModel.isSortable(this.getCellIndex(hd))){
1380                this.fly(hd).addClass("x-grid-hd-over");
1381             }
1382         }
1383     },
1384
1385     handleHdOut : function(e){
1386         var hd = this.findHeaderCell(e.getTarget());
1387         if(hd){
1388             this.fly(hd).removeClass("x-grid-hd-over");
1389         }
1390     },
1391
1392     handleSplitDblClick : function(e, t){
1393         var i = this.getCellIndex(t);
1394         if(this.grid.enableColumnResize !== false && this.cm.isResizable(i) && !this.cm.isFixed(i)){
1395             this.autoSizeColumn(i, true);
1396             this.layout();
1397         }
1398     },
1399
1400     render : function(){
1401
1402         var cm = this.cm;
1403         var colCount = cm.getColumnCount();
1404
1405         if(this.grid.monitorWindowResize === true){
1406             Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
1407         }
1408         var header = this.renderHeaders();
1409         var body = this.templates.body.apply({rows:""});
1410         var html = this.templates.master.apply({
1411             lockedBody: body,
1412             body: body,
1413             lockedHeader: header[0],
1414             header: header[1]
1415         });
1416
1417         //this.updateColumns();
1418
1419         this.grid.getGridEl().dom.innerHTML = html;
1420
1421         this.initElements();
1422
1423         // a kludge to fix the random scolling effect in webkit
1424         this.el.on("scroll", function() {
1425             this.el.dom.scrollTop=0; // hopefully not recursive..
1426         },this);
1427
1428         this.scroller.on("scroll", this.handleScroll, this);
1429         this.lockedBody.on("mousewheel", this.handleWheel, this);
1430         this.mainBody.on("mousewheel", this.handleWheel, this);
1431
1432         this.mainHd.on("mouseover", this.handleHdOver, this);
1433         this.mainHd.on("mouseout", this.handleHdOut, this);
1434         this.mainHd.on("dblclick", this.handleSplitDblClick, this,
1435                 {delegate: "."+this.splitClass});
1436
1437         this.lockedHd.on("mouseover", this.handleHdOver, this);
1438         this.lockedHd.on("mouseout", this.handleHdOut, this);
1439         this.lockedHd.on("dblclick", this.handleSplitDblClick, this,
1440                 {delegate: "."+this.splitClass});
1441
1442         if(this.grid.enableColumnResize !== false && Roo.grid.SplitDragZone){
1443             new Roo.grid.SplitDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
1444         }
1445
1446         this.updateSplitters();
1447
1448         if(this.grid.enableColumnMove && Roo.grid.HeaderDragZone){
1449             new Roo.grid.HeaderDragZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
1450             new Roo.grid.HeaderDropZone(this.grid, this.lockedHd.dom, this.mainHd.dom);
1451         }
1452
1453         if(this.grid.enableCtxMenu !== false && Roo.menu.Menu){
1454             this.hmenu = new Roo.menu.Menu({id: this.grid.id + "-hctx"});
1455             this.hmenu.add(
1456                 {id:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"},
1457                 {id:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"}
1458             );
1459             if(this.grid.enableColLock !== false){
1460                 this.hmenu.add('-',
1461                     {id:"lock", text: this.lockText, cls: "xg-hmenu-lock"},
1462                     {id:"unlock", text: this.unlockText, cls: "xg-hmenu-unlock"}
1463                 );
1464             }
1465             if(this.grid.enableColumnHide !== false){
1466
1467                 this.colMenu = new Roo.menu.Menu({id:this.grid.id + "-hcols-menu"});
1468                 this.colMenu.on("beforeshow", this.beforeColMenuShow, this);
1469                 this.colMenu.on("itemclick", this.handleHdMenuClick, this);
1470
1471                 this.hmenu.add('-',
1472                     {id:"columns", text: this.columnsText, menu: this.colMenu}
1473                 );
1474             }
1475             this.hmenu.on("itemclick", this.handleHdMenuClick, this);
1476
1477             this.grid.on("headercontextmenu", this.handleHdCtx, this);
1478         }
1479
1480         if((this.grid.enableDragDrop || this.grid.enableDrag) && Roo.grid.GridDragZone){
1481             this.dd = new Roo.grid.GridDragZone(this.grid, {
1482                 ddGroup : this.grid.ddGroup || 'GridDD'
1483             });
1484         }
1485
1486         /*
1487         for(var i = 0; i < colCount; i++){
1488             if(cm.isHidden(i)){
1489                 this.hideColumn(i);
1490             }
1491             if(cm.config[i].align){
1492                 this.css.updateRule(this.colSelector + i, "textAlign", cm.config[i].align);
1493                 this.css.updateRule(this.hdSelector + i, "textAlign", cm.config[i].align);
1494             }
1495         }*/
1496
1497         this.updateHeaderSortState();
1498
1499         this.beforeInitialResize();
1500         this.layout(true);
1501
1502         // two part rendering gives faster view to the user
1503         this.renderPhase2.defer(1, this);
1504     },
1505
1506     renderPhase2 : function(){
1507         // render the rows now
1508         this.refresh();
1509         if(this.grid.autoSizeColumns){
1510             this.autoSizeColumns();
1511         }
1512     },
1513
1514     beforeInitialResize : function(){
1515
1516     },
1517
1518     onColumnSplitterMoved : function(i, w){
1519         this.userResized = true;
1520         var cm = this.grid.colModel;
1521         cm.setColumnWidth(i, w, true);
1522         var cid = cm.getColumnId(i);
1523         this.css.updateRule(this.colSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
1524         this.css.updateRule(this.hdSelector + this.idToCssName(cid), "width", (w-this.borderWidth) + "px");
1525         this.updateSplitters();
1526         this.layout();
1527         this.grid.fireEvent("columnresize", i, w);
1528     },
1529
1530     syncRowHeights : function(startIndex, endIndex){
1531         if(this.grid.enableRowHeightSync === true && this.cm.getLockedCount() > 0){
1532             startIndex = startIndex || 0;
1533             var mrows = this.getBodyTable().rows;
1534             var lrows = this.getLockedTable().rows;
1535             var len = mrows.length-1;
1536             endIndex = Math.min(endIndex || len, len);
1537             for(var i = startIndex; i <= endIndex; i++){
1538                 var m = mrows[i], l = lrows[i];
1539                 var h = Math.max(m.offsetHeight, l.offsetHeight);
1540                 m.style.height = l.style.height = h + "px";
1541             }
1542         }
1543     },
1544
1545     layout : function(initialRender, is2ndPass){
1546         var g = this.grid;
1547         var auto = g.autoHeight;
1548         var scrollOffset = 16;
1549         var c = g.getGridEl(), cm = this.cm,
1550                 expandCol = g.autoExpandColumn,
1551                 gv = this;
1552         //c.beginMeasure();
1553
1554         if(!c.dom.offsetWidth){ // display:none?
1555             if(initialRender){
1556                 this.lockedWrap.show();
1557                 this.mainWrap.show();
1558             }
1559             return;
1560         }
1561
1562         var hasLock = this.cm.isLocked(0);
1563
1564         var tbh = this.headerPanel.getHeight();
1565         var bbh = this.footerPanel.getHeight();
1566
1567         if(auto){
1568             var ch = this.getBodyTable().offsetHeight + tbh + bbh + this.mainHd.getHeight();
1569             var newHeight = ch + c.getBorderWidth("tb");
1570             if(g.maxHeight){
1571                 newHeight = Math.min(g.maxHeight, newHeight);
1572             }
1573             c.setHeight(newHeight);
1574         }
1575
1576         if(g.autoWidth){
1577             c.setWidth(cm.getTotalWidth()+c.getBorderWidth('lr'));
1578         }
1579
1580         var s = this.scroller;
1581
1582         var csize = c.getSize(true);
1583
1584         this.el.setSize(csize.width, csize.height);
1585
1586         this.headerPanel.setWidth(csize.width);
1587         this.footerPanel.setWidth(csize.width);
1588
1589         var hdHeight = this.mainHd.getHeight();
1590         var vw = csize.width;
1591         var vh = csize.height - (tbh + bbh);
1592
1593         s.setSize(vw, vh);
1594
1595         var bt = this.getBodyTable();
1596         var ltWidth = hasLock ?
1597                       Math.max(this.getLockedTable().offsetWidth, this.lockedHd.dom.firstChild.offsetWidth) : 0;
1598
1599         var scrollHeight = bt.offsetHeight;
1600         var scrollWidth = ltWidth + bt.offsetWidth;
1601         var vscroll = false, hscroll = false;
1602
1603         this.scrollSizer.setSize(scrollWidth, scrollHeight+hdHeight);
1604
1605         var lw = this.lockedWrap, mw = this.mainWrap;
1606         var lb = this.lockedBody, mb = this.mainBody;
1607
1608         setTimeout(function(){
1609             var t = s.dom.offsetTop;
1610             var w = s.dom.clientWidth,
1611                 h = s.dom.clientHeight;
1612
1613             lw.setTop(t);
1614             lw.setSize(ltWidth, h);
1615
1616             mw.setLeftTop(ltWidth, t);
1617             mw.setSize(w-ltWidth, h);
1618
1619             lb.setHeight(h-hdHeight);
1620             mb.setHeight(h-hdHeight);
1621
1622             if(is2ndPass !== true && !gv.userResized && expandCol){
1623                 // high speed resize without full column calculation
1624
1625                 var ci = cm.getIndexById(expandCol);
1626                 if (ci < 0) {
1627                     ci = cm.findColumnIndex(expandCol);
1628                 }
1629                 ci = Math.max(0, ci); // make sure it's got at least the first col.
1630                 var expandId = cm.getColumnId(ci);
1631                 var  tw = cm.getTotalWidth(false);
1632                 var currentWidth = cm.getColumnWidth(ci);
1633                 var cw = Math.min(Math.max(((w-tw)+currentWidth-2)-/*scrollbar*/(w <= s.dom.offsetWidth ? 0 : 18), g.autoExpandMin), g.autoExpandMax);
1634                 if(currentWidth != cw){
1635                     cm.setColumnWidth(ci, cw, true);
1636                     gv.css.updateRule(gv.colSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
1637                     gv.css.updateRule(gv.hdSelector+gv.idToCssName(expandId), "width", (cw - gv.borderWidth) + "px");
1638                     gv.updateSplitters();
1639                     gv.layout(false, true);
1640                 }
1641             }
1642
1643             if(initialRender){
1644                 lw.show();
1645                 mw.show();
1646             }
1647             //c.endMeasure();
1648         }, 10);
1649     },
1650
1651     onWindowResize : function(){
1652         if(!this.grid.monitorWindowResize || this.grid.autoHeight){
1653             return;
1654         }
1655         this.layout();
1656     },
1657
1658     appendFooter : function(parentEl){
1659         return null;
1660     },
1661
1662     sortAscText : "Sort Ascending",
1663     sortDescText : "Sort Descending",
1664     lockText : "Lock Column",
1665     unlockText : "Unlock Column",
1666     columnsText : "Columns"
1667 });
1668
1669
1670 Roo.grid.GridView.ColumnDragZone = function(grid, hd){
1671     Roo.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null);
1672     this.proxy.el.addClass('x-grid3-col-dd');
1673 };
1674
1675 Roo.extend(Roo.grid.GridView.ColumnDragZone, Roo.grid.HeaderDragZone, {
1676     handleMouseDown : function(e){
1677
1678     },
1679
1680     callHandleMouseDown : function(e){
1681         Roo.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e);
1682     }
1683 });