git.roojs.org Git - roojs1/blob - Roo/grid/Grid.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.Grid
  14  * @extends Roo.util.Observable
  15  * This class represents the primary interface of a component based grid control.
  16  * <br><br>Usage:<pre><code>
  17  var grid = new Roo.grid.Grid("my-container-id", {
  18      ds: myDataStore,
  19      cm: myColModel,
  20      selModel: mySelectionModel,
  21      autoSizeColumns: true,
  22      monitorWindowResize: false,
  23      trackMouseOver: true
  24  });
  25  // set any options
  26  grid.render();
  27  * </code></pre>
  28  * <b>Common Problems:</b><br/>
  29  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
  30  * element will correct this<br/>
  31  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
  32  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
  33  * are unpredictable.<br/>
  34  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
  35  * grid to calculate dimensions/offsets.<br/>
  36   * @constructor
  37  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
  38  * The container MUST have some type of size defined for the grid to fill. The container will be
  39  * automatically set to position relative if it isn't already.
  40  * @param {Object} config A config object that sets properties on this grid.
  41  */
  42 Roo.grid.Grid = function(container, config){
  43         // initialize the container
  44         this.container = Roo.get(container);
  45         this.container.update("");
  46         this.container.setStyle("overflow", "hidden");
  47     this.container.addClass('x-grid-container');
  48
  49     this.id = this.container.id;
  50
  51     Roo.apply(this, config);
  52     // check and correct shorthanded configs
  53     if(this.ds){
  54         this.dataSource = this.ds;
  55         delete this.ds;
  56     }
  57     if(this.cm){
  58         this.colModel = this.cm;
  59         delete this.cm;
  60     }
  61     if(this.sm){
  62         this.selModel = this.sm;
  63         delete this.sm;
  64     }
  65
  66     if (this.selModel) {
  67         this.selModel = Roo.factory(this.selModel, Roo.grid);
  68         this.sm = this.selModel;
  69         this.sm.xmodule = this.xmodule || false;
  70     }
  71     if (typeof(this.colModel.config) == 'undefined') {
  72         this.colModel = new Roo.grid.ColumnModel(this.colModel);
  73         this.cm = this.colModel;
  74         this.cm.xmodule = this.xmodule || false;
  75     }
  76     if (this.dataSource) {
  77         this.dataSource= Roo.factory(this.dataSource, Roo.data);
  78         this.ds = this.dataSource;
  79         this.ds.xmodule = this.xmodule || false;
  80
  81     }
  82
  83
  84
  85     if(this.width){
  86         this.container.setWidth(this.width);
  87     }
  88
  89     if(this.height){
  90         this.container.setHeight(this.height);
  91     }
  92     /** @private */
  93         this.addEvents({
  94         // raw events
  95         /**
  96          * @event click
  97          * The raw click event for the entire grid.
  98          * @param {Roo.EventObject} e
  99          */
 100         "click" : true,
 101         /**
 102          * @event dblclick
 103          * The raw dblclick event for the entire grid.
 104          * @param {Roo.EventObject} e
 105          */
 106         "dblclick" : true,
 107         /**
 108          * @event contextmenu
 109          * The raw contextmenu event for the entire grid.
 110          * @param {Roo.EventObject} e
 111          */
 112         "contextmenu" : true,
 113         /**
 114          * @event mousedown
 115          * The raw mousedown event for the entire grid.
 116          * @param {Roo.EventObject} e
 117          */
 118         "mousedown" : true,
 119         /**
 120          * @event mouseup
 121          * The raw mouseup event for the entire grid.
 122          * @param {Roo.EventObject} e
 123          */
 124         "mouseup" : true,
 125         /**
 126          * @event mouseover
 127          * The raw mouseover event for the entire grid.
 128          * @param {Roo.EventObject} e
 129          */
 130         "mouseover" : true,
 131         /**
 132          * @event mouseout
 133          * The raw mouseout event for the entire grid.
 134          * @param {Roo.EventObject} e
 135          */
 136         "mouseout" : true,
 137         /**
 138          * @event keypress
 139          * The raw keypress event for the entire grid.
 140          * @param {Roo.EventObject} e
 141          */
 142         "keypress" : true,
 143         /**
 144          * @event keydown
 145          * The raw keydown event for the entire grid.
 146          * @param {Roo.EventObject} e
 147          */
 148         "keydown" : true,
 149
 150         // custom events
 151
 152         /**
 153          * @event cellclick
 154          * Fires when a cell is clicked
 155          * @param {Grid} this
 156          * @param {Number} rowIndex
 157          * @param {Number} columnIndex
 158          * @param {Roo.EventObject} e
 159          */
 160         "cellclick" : true,
 161         /**
 162          * @event celldblclick
 163          * Fires when a cell is double clicked
 164          * @param {Grid} this
 165          * @param {Number} rowIndex
 166          * @param {Number} columnIndex
 167          * @param {Roo.EventObject} e
 168          */
 169         "celldblclick" : true,
 170         /**
 171          * @event rowclick
 172          * Fires when a row is clicked
 173          * @param {Grid} this
 174          * @param {Number} rowIndex
 175          * @param {Roo.EventObject} e
 176          */
 177         "rowclick" : true,
 178         /**
 179          * @event rowdblclick
 180          * Fires when a row is double clicked
 181          * @param {Grid} this
 182          * @param {Number} rowIndex
 183          * @param {Roo.EventObject} e
 184          */
 185         "rowdblclick" : true,
 186         /**
 187          * @event headerclick
 188          * Fires when a header is clicked
 189          * @param {Grid} this
 190          * @param {Number} columnIndex
 191          * @param {Roo.EventObject} e
 192          */
 193         "headerclick" : true,
 194         /**
 195          * @event headerdblclick
 196          * Fires when a header cell is double clicked
 197          * @param {Grid} this
 198          * @param {Number} columnIndex
 199          * @param {Roo.EventObject} e
 200          */
 201         "headerdblclick" : true,
 202         /**
 203          * @event rowcontextmenu
 204          * Fires when a row is right clicked
 205          * @param {Grid} this
 206          * @param {Number} rowIndex
 207          * @param {Roo.EventObject} e
 208          */
 209         "rowcontextmenu" : true,
 210         /**
 211          * @event cellcontextmenu
 212          * Fires when a cell is right clicked
 213          * @param {Grid} this
 214          * @param {Number} rowIndex
 215          * @param {Number} cellIndex
 216          * @param {Roo.EventObject} e
 217          */
 218          "cellcontextmenu" : true,
 219         /**
 220          * @event headercontextmenu
 221          * Fires when a header is right clicked
 222          * @param {Grid} this
 223          * @param {Number} columnIndex
 224          * @param {Roo.EventObject} e
 225          */
 226         "headercontextmenu" : true,
 227         /**
 228          * @event bodyscroll
 229          * Fires when the body element is scrolled
 230          * @param {Number} scrollLeft
 231          * @param {Number} scrollTop
 232          */
 233         "bodyscroll" : true,
 234         /**
 235          * @event columnresize
 236          * Fires when the user resizes a column
 237          * @param {Number} columnIndex
 238          * @param {Number} newSize
 239          */
 240         "columnresize" : true,
 241         /**
 242          * @event columnmove
 243          * Fires when the user moves a column
 244          * @param {Number} oldIndex
 245          * @param {Number} newIndex
 246          */
 247         "columnmove" : true,
 248         /**
 249          * @event startdrag
 250          * Fires when row(s) start being dragged
 251          * @param {Grid} this
 252          * @param {Roo.GridDD} dd The drag drop object
 253          * @param {event} e The raw browser event
 254          */
 255         "startdrag" : true,
 256         /**
 257          * @event enddrag
 258          * Fires when a drag operation is complete
 259          * @param {Grid} this
 260          * @param {Roo.GridDD} dd The drag drop object
 261          * @param {event} e The raw browser event
 262          */
 263         "enddrag" : true,
 264         /**
 265          * @event dragdrop
 266          * Fires when dragged row(s) are dropped on a valid DD target
 267          * @param {Grid} this
 268          * @param {Roo.GridDD} dd The drag drop object
 269          * @param {String} targetId The target drag drop object
 270          * @param {event} e The raw browser event
 271          */
 272         "dragdrop" : true,
 273         /**
 274          * @event dragover
 275          * Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
 276          * @param {Grid} this
 277          * @param {Roo.GridDD} dd The drag drop object
 278          * @param {String} targetId The target drag drop object
 279          * @param {event} e The raw browser event
 280          */
 281         "dragover" : true,
 282         /**
 283          * @event dragenter
 284          *  Fires when the dragged row(s) first cross another DD target while being dragged
 285          * @param {Grid} this
 286          * @param {Roo.GridDD} dd The drag drop object
 287          * @param {String} targetId The target drag drop object
 288          * @param {event} e The raw browser event
 289          */
 290         "dragenter" : true,
 291         /**
 292          * @event dragout
 293          * Fires when the dragged row(s) leave another DD target while being dragged
 294          * @param {Grid} this
 295          * @param {Roo.GridDD} dd The drag drop object
 296          * @param {String} targetId The target drag drop object
 297          * @param {event} e The raw browser event
 298          */
 299         "dragout" : true,
 300         /**
 301          * @event rowclass
 302          * Fires when a row is rendered, so you can change add a style to it.
 303          * @param {GridView} gridview   The grid view
 304          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
 305          */
 306         'rowclass' : true,
 307
 308         /**
 309          * @event render
 310          * Fires when the grid is rendered
 311          * @param {Grid} grid
 312          */
 313         'render' : true
 314     });
 315
 316     Roo.grid.Grid.superclass.constructor.call(this);
 317 };
 318 Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
 319
 320     /**
 321          * @cfg {Roo.grid.AbstractSelectionModel} sm The selection Model (default = Roo.grid.RowSelectionModel)
 322          */
 323         /**
 324          * @cfg {Roo.grid.GridView} view  The view that renders the grid (default = Roo.grid.GridView)
 325          */
 326         /**
 327          * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
 328          */
 329         /**
 330          * @cfg {Roo.data.Store} ds The data store for the grid
 331          */
 332         /**
 333          * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
 334          */
 335
 336          /**
 337          * @cfg {Roo.PagingToolbar} footer the paging toolbar
 338          */
 339
 340         /**
 341      * @cfg {String} ddGroup - drag drop group.
 342      */
 343       /**
 344      * @cfg {String} dragGroup - drag group (?? not sure if needed.)
 345      */
 346
 347     /**
 348      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
 349      */
 350     minColumnWidth : 25,
 351
 352     /**
 353      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
 354      * <b>on initial render.</b> It is more efficient to explicitly size the columns
 355      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
 356      */
 357     autoSizeColumns : false,
 358
 359     /**
 360      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
 361      */
 362     autoSizeHeaders : true,
 363
 364     /**
 365      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
 366      */
 367     monitorWindowResize : true,
 368
 369     /**
 370      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
 371      * rows measured to get a columns size. Default is 0 (all rows).
 372      */
 373     maxRowsToMeasure : 0,
 374
 375     /**
 376      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
 377      */
 378     trackMouseOver : true,
 379
 380     /**
 381     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
 382     */
 383       /**
 384     * @cfg {Boolean} enableDrop  True to enable drop of elements. Default is false. (double check if this is needed?)
 385     */
 386
 387     /**
 388     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
 389     */
 390     enableDragDrop : false,
 391
 392     /**
 393     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
 394     */
 395     enableColumnMove : true,
 396
 397     /**
 398     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
 399     */
 400     enableColumnHide : true,
 401
 402     /**
 403     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
 404     */
 405     enableRowHeightSync : false,
 406
 407     /**
 408     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
 409     */
 410     stripeRows : true,
 411
 412     /**
 413     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
 414     */
 415     autoHeight : false,
 416
 417     /**
 418      * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
 419      */
 420     autoExpandColumn : false,
 421
 422     /**
 423     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
 424     * Default is 50.
 425     */
 426     autoExpandMin : 50,
 427
 428     /**
 429     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
 430     */
 431     autoExpandMax : 1000,
 432
 433     /**
 434     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
 435     */
 436     view : null,
 437
 438     /**
 439     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
 440     */
 441     loadMask : false,
 442     /**
 443     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
 444     */
 445     dropTarget: false,
 446      /**
 447     * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
 448     */
 449     sortColMenu : false,
 450
 451     // private
 452     rendered : false,
 453
 454     /**
 455     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
 456     * of a fixed width. Default is false.
 457     */
 458     /**
 459     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
 460     */
 461
 462
 463     /**
 464     * @cfg {String} ddText Configures the text is the drag proxy (defaults to "%0 selected row(s)").
 465     * %0 is replaced with the number of selected rows.
 466     */
 467     ddText : "{0} selected row{1}",
 468
 469
 470     /**
 471      * Called once after all setup has been completed and the grid is ready to be rendered.
 472      * @return {Roo.grid.Grid} this
 473      */
 474     render : function()
 475     {
 476         var c = this.container;
 477         // try to detect autoHeight/width mode
 478         if((!c.dom.offsetHeight || c.dom.offsetHeight < 20) || c.getStyle("height") == "auto"){
 479             this.autoHeight = true;
 480         }
 481         var view = this.getView();
 482         view.init(this);
 483
 484         c.on("click", this.onClick, this);
 485         c.on("dblclick", this.onDblClick, this);
 486         c.on("contextmenu", this.onContextMenu, this);
 487         c.on("keydown", this.onKeyDown, this);
 488         if (Roo.isTouch) {
 489             c.on("touchstart", this.onTouchStart, this);
 490         }
 491
 492         this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
 493
 494         this.getSelectionModel().init(this);
 495
 496         view.render();
 497
 498         if(this.loadMask){
 499             this.loadMask = new Roo.LoadMask(this.container,
 500                     Roo.apply({store:this.dataSource}, this.loadMask));
 501         }
 502
 503
 504         if (this.toolbar && this.toolbar.xtype) {
 505             this.toolbar.container = this.getView().getHeaderPanel(true);
 506             this.toolbar = new Roo.Toolbar(this.toolbar);
 507         }
 508         if (this.footer && this.footer.xtype) {
 509             this.footer.dataSource = this.getDataSource();
 510             this.footer.container = this.getView().getFooterPanel(true);
 511             this.footer = Roo.factory(this.footer, Roo);
 512         }
 513         if (this.dropTarget && this.dropTarget.xtype) {
 514             delete this.dropTarget.xtype;
 515             this.dropTarget =  new Roo.dd.DropTarget(this.getView().mainBody, this.dropTarget);
 516         }
 517
 518
 519         this.rendered = true;
 520         this.fireEvent('render', this);
 521         return this;
 522     },
 523
 524     /**
 525      * Reconfigures the grid to use a different Store and Column Model.
 526      * The View will be bound to the new objects and refreshed.
 527      * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
 528      * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
 529      */
 530     reconfigure : function(dataSource, colModel){
 531         if(this.loadMask){
 532             this.loadMask.destroy();
 533             this.loadMask = new Roo.LoadMask(this.container,
 534                     Roo.apply({store:dataSource}, this.loadMask));
 535         }
 536         this.view.bind(dataSource, colModel);
 537         this.dataSource = dataSource;
 538         this.colModel = colModel;
 539         this.view.refresh(true);
 540     },
 541     /**
 542      * addColumns
 543      * Add's a column, default at the end..
 544
 545      * @param {int} position to add (default end)
 546      * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel}
 547      */
 548     addColumns : function(pos, ar)
 549     {
 550
 551         for (var i =0;i< ar.length;i++) {
 552             var cfg = ar[i];
 553             cfg.id = typeof(cfg.id) == 'undefined' ? Roo.id() : cfg.id; // don't normally use this..
 554             this.cm.lookup[cfg.id] = cfg;
 555         }
 556
 557
 558         if (typeof(pos) == 'undefined' || pos >= this.cm.config.length) {
 559             pos = this.cm.config.length; //this.cm.config.push(cfg);
 560         }
 561         pos = Math.max(0,pos);
 562         ar.unshift(0);
 563         ar.unshift(pos);
 564         this.cm.config.splice.apply(this.cm.config, ar);
 565
 566
 567
 568         this.view.generateRules(this.cm);
 569         this.view.refresh(true);
 570
 571     },
 572
 573
 574
 575
 576     // private
 577     onKeyDown : function(e){
 578         this.fireEvent("keydown", e);
 579     },
 580
 581     /**
 582      * Destroy this grid.
 583      * @param {Boolean} removeEl True to remove the element
 584      */
 585     destroy : function(removeEl, keepListeners){
 586         if(this.loadMask){
 587             this.loadMask.destroy();
 588         }
 589         var c = this.container;
 590         c.removeAllListeners();
 591         this.view.destroy();
 592         this.colModel.purgeListeners();
 593         if(!keepListeners){
 594             this.purgeListeners();
 595         }
 596         c.update("");
 597         if(removeEl === true){
 598             c.remove();
 599         }
 600     },
 601
 602     // private
 603     processEvent : function(name, e){
 604         // does this fire select???
 605         //Roo.log('grid:processEvent '  + name);
 606
 607         if (name != 'touchstart' ) {
 608             this.fireEvent(name, e);
 609         }
 610
 611         var t = e.getTarget();
 612         var v = this.view;
 613         var header = v.findHeaderIndex(t);
 614         if(header !== false){
 615             var ename = name == 'touchstart' ? 'click' : name;
 616
 617             this.fireEvent("header" + ename, this, header, e);
 618         }else{
 619             var row = v.findRowIndex(t);
 620             var cell = v.findCellIndex(t);
 621             if (name == 'touchstart') {
 622                 // first touch is always a click.
 623                 // hopefull this happens after selection is updated.?
 624                 name = false;
 625
 626                 if (typeof(this.selModel.getSelectedCell) != 'undefined') {
 627                     var cs = this.selModel.getSelectedCell();
 628                     if (row == cs[0] && cell == cs[1]){
 629                         name = 'dblclick';
 630                     }
 631                 }
 632                 if (typeof(this.selModel.getSelections) != 'undefined') {
 633                     var cs = this.selModel.getSelections();
 634                     var ds = this.dataSource;
 635                     if (cs.length == 1 && ds.getAt(row) == cs[0]){
 636                         name = 'dblclick';
 637                     }
 638                 }
 639                 if (!name) {
 640                     return;
 641                 }
 642             }
 643
 644
 645             if(row !== false){
 646                 this.fireEvent("row" + name, this, row, e);
 647                 if(cell !== false){
 648                     this.fireEvent("cell" + name, this, row, cell, e);
 649                 }
 650             }
 651         }
 652     },
 653
 654     // private
 655     onClick : function(e){
 656         this.processEvent("click", e);
 657     },
 658    // private
 659     onTouchStart : function(e){
 660         this.processEvent("touchstart", e);
 661     },
 662
 663     // private
 664     onContextMenu : function(e, t){
 665         this.processEvent("contextmenu", e);
 666     },
 667
 668     // private
 669     onDblClick : function(e){
 670         this.processEvent("dblclick", e);
 671     },
 672
 673     // private
 674     walkCells : function(row, col, step, fn, scope){
 675         var cm = this.colModel, clen = cm.getColumnCount();
 676         var ds = this.dataSource, rlen = ds.getCount(), first = true;
 677         if(step < 0){
 678             if(col < 0){
 679                 row--;
 680                 first = false;
 681             }
 682             while(row >= 0){
 683                 if(!first){
 684                     col = clen-1;
 685                 }
 686                 first = false;
 687                 while(col >= 0){
 688                     if(fn.call(scope || this, row, col, cm) === true){
 689                         return [row, col];
 690                     }
 691                     col--;
 692                 }
 693                 row--;
 694             }
 695         } else {
 696             if(col >= clen){
 697                 row++;
 698                 first = false;
 699             }
 700             while(row < rlen){
 701                 if(!first){
 702                     col = 0;
 703                 }
 704                 first = false;
 705                 while(col < clen){
 706                     if(fn.call(scope || this, row, col, cm) === true){
 707                         return [row, col];
 708                     }
 709                     col++;
 710                 }
 711                 row++;
 712             }
 713         }
 714         return null;
 715     },
 716
 717     // private
 718     getSelections : function(){
 719         return this.selModel.getSelections();
 720     },
 721
 722     /**
 723      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
 724      * but if manual update is required this method will initiate it.
 725      */
 726     autoSize : function(){
 727         if(this.rendered){
 728             this.view.layout();
 729             if(this.view.adjustForScroll){
 730                 this.view.adjustForScroll();
 731             }
 732         }
 733     },
 734
 735     /**
 736      * Returns the grid's underlying element.
 737      * @return {Element} The element
 738      */
 739     getGridEl : function(){
 740         return this.container;
 741     },
 742
 743     // private for compatibility, overridden by editor grid
 744     stopEditing : function(){},
 745
 746     /**
 747      * Returns the grid's SelectionModel.
 748      * @return {SelectionModel}
 749      */
 750     getSelectionModel : function(){
 751         if(!this.selModel){
 752             this.selModel = new Roo.grid.RowSelectionModel();
 753         }
 754         return this.selModel;
 755     },
 756
 757     /**
 758      * Returns the grid's DataSource.
 759      * @return {DataSource}
 760      */
 761     getDataSource : function(){
 762         return this.dataSource;
 763     },
 764
 765     /**
 766      * Returns the grid's ColumnModel.
 767      * @return {ColumnModel}
 768      */
 769     getColumnModel : function(){
 770         return this.colModel;
 771     },
 772
 773     /**
 774      * Returns the grid's GridView object.
 775      * @return {GridView}
 776      */
 777     getView : function(){
 778         if(!this.view){
 779             this.view = new Roo.grid.GridView(this.viewConfig);
 780             this.relayEvents(this.view, [
 781                 "beforerowremoved", "beforerowsinserted",
 782                 "beforerefresh", "rowremoved",
 783                 "rowsinserted", "rowupdated" ,"refresh"
 784             ]);
 785         }
 786         return this.view;
 787     },
 788     /**
 789      * Called to get grid's drag proxy text, by default returns this.ddText.
 790      * Override this to put something different in the dragged text.
 791      * @return {String}
 792      */
 793     getDragDropText : function(){
 794         var count = this.selModel.getCount();
 795         return String.format(this.ddText, count, count == 1 ? '' : 's');
 796     }
 797 });