git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / GridView.html
diff --git a/docs/source/GridView.html b/docs/source/GridView.html
index ae0e099..4ed8651 100644 (file)
--- a/docs/source/GridView.html
+++ b/docs/source/GridView.html
@@ -1,17 +1,12 @@
-<html>
-<head>
-  <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.grid.GridView"></div>/**
+<html>\r
+<head>\r
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.grid.GridView"></div>/**
  * @class Ext.grid.GridView
  * @extends Ext.util.Observable
  * <p>This class encapsulates the user interface of an {@link Ext.grid.GridPanel}.
  * @class Ext.grid.GridView
  * @extends Ext.util.Observable
  * <p>This class encapsulates the user interface of an {@link Ext.grid.GridPanel}.
@@ -22,67 +17,7 @@
  * @constructor
  * @param {Object} config
  */
  * @constructor
  * @param {Object} config
  */
-Ext.grid.GridView = function(config){
-    Ext.apply(this, config);
-    // These events are only used internally by the grid components
-    this.addEvents(
-        <div id="event-Ext.grid.GridView-beforerowremoved"></div>/**
-         * @event beforerowremoved
-         * Internal UI Event. Fired before a row is removed.
-         * @param {Ext.grid.GridView} view
-         * @param {Number} rowIndex The index of the row to be removed.
-         * @param {Ext.data.Record} record The Record to be removed
-         */
-        'beforerowremoved',
-        <div id="event-Ext.grid.GridView-beforerowsinserted"></div>/**
-         * @event beforerowsinserted
-         * Internal UI Event. Fired before rows are inserted.
-         * @param {Ext.grid.GridView} view
-         * @param {Number} firstRow The index of the first row to be inserted.
-         * @param {Number} lastRow The index of the last row to be inserted.
-         */
-        'beforerowsinserted',
-        <div id="event-Ext.grid.GridView-beforerefresh"></div>/**
-         * @event beforerefresh
-         * Internal UI Event. Fired before the view is refreshed.
-         * @param {Ext.grid.GridView} view
-         */
-        'beforerefresh',
-        <div id="event-Ext.grid.GridView-rowremoved"></div>/**
-         * @event rowremoved
-         * Internal UI Event. Fired after a row is removed.
-         * @param {Ext.grid.GridView} view
-         * @param {Number} rowIndex The index of the row that was removed.
-         * @param {Ext.data.Record} record The Record that was removed
-         */
-        'rowremoved',
-        <div id="event-Ext.grid.GridView-rowsinserted"></div>/**
-         * @event rowsinserted
-         * Internal UI Event. Fired after rows are inserted.
-         * @param {Ext.grid.GridView} view
-         * @param {Number} firstRow The index of the first inserted.
-         * @param {Number} lastRow The index of the last row inserted.
-         */
-        'rowsinserted',
-        <div id="event-Ext.grid.GridView-rowupdated"></div>/**
-         * @event rowupdated
-         * Internal UI Event. Fired after a row has been updated.
-         * @param {Ext.grid.GridView} view
-         * @param {Number} firstRow The index of the row updated.
-         * @param {Ext.data.record} record The Record backing the row updated.
-         */
-        'rowupdated',
-        <div id="event-Ext.grid.GridView-refresh"></div>/**
-         * @event refresh
-         * Internal UI Event. Fired after the GridView's body has been refreshed.
-         * @param {Ext.grid.GridView} view
-         */
-        'refresh'
-    );
-    Ext.grid.GridView.superclass.constructor.call(this);
-};
-
-Ext.extend(Ext.grid.GridView, Ext.util.Observable, {
+Ext.grid.GridView = Ext.extend(Ext.util.Observable, {
     <div id="method-Ext.grid.GridView-getRowClass"></div>/**
      * Override this function to apply custom CSS classes to rows during rendering.  You can also supply custom
      * parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b>
     <div id="method-Ext.grid.GridView-getRowClass"></div>/**
      * Override this function to apply custom CSS classes to rows during rendering.  You can also supply custom
      * parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b>
@@ -231,6 +166,11 @@ viewConfig: {
      * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to <tt>10</tt>)
      */
     rowSelectorDepth : 10,
      * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to <tt>10</tt>)
      */
     rowSelectorDepth : 10,
+    
+    <div id="cfg-Ext.grid.GridView-rowBodySelectorDepth"></div>/**
+     * @cfg {Number} rowBodySelectorDepth The number of levels to search for row bodies in event delegation (defaults to <tt>10</tt>)
+     */
+    rowBodySelectorDepth : 10,
 
     <div id="cfg-Ext.grid.GridView-cellSelector"></div>/**
      * @cfg {String} cellSelector The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>)
 
     <div id="cfg-Ext.grid.GridView-cellSelector"></div>/**
      * @cfg {String} cellSelector The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>)
@@ -241,10 +181,75 @@ viewConfig: {
      */
     rowSelector : 'div.x-grid3-row',
     
      */
     rowSelector : 'div.x-grid3-row',
     
+    <div id="cfg-Ext.grid.GridView-rowBodySelector"></div>/**
+     * @cfg {String} rowBodySelector The selector used to find row bodies internally (defaults to <tt>'div.x-grid3-row'</tt>)
+     */
+    rowBodySelector : 'div.x-grid3-row-body',
+    
     // private
     firstRowCls: 'x-grid3-row-first',
     lastRowCls: 'x-grid3-row-last',
     rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g,
     // private
     firstRowCls: 'x-grid3-row-first',
     lastRowCls: 'x-grid3-row-last',
     rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g,
+    
+    constructor : function(config){
+        Ext.apply(this, config);
+           // These events are only used internally by the grid components
+           this.addEvents(
+               <div id="event-Ext.grid.GridView-beforerowremoved"></div>/**
+                * @event beforerowremoved
+                * Internal UI Event. Fired before a row is removed.
+                * @param {Ext.grid.GridView} view
+                * @param {Number} rowIndex The index of the row to be removed.
+                * @param {Ext.data.Record} record The Record to be removed
+                */
+               'beforerowremoved',
+               <div id="event-Ext.grid.GridView-beforerowsinserted"></div>/**
+                * @event beforerowsinserted
+                * Internal UI Event. Fired before rows are inserted.
+                * @param {Ext.grid.GridView} view
+                * @param {Number} firstRow The index of the first row to be inserted.
+                * @param {Number} lastRow The index of the last row to be inserted.
+                */
+               'beforerowsinserted',
+               <div id="event-Ext.grid.GridView-beforerefresh"></div>/**
+                * @event beforerefresh
+                * Internal UI Event. Fired before the view is refreshed.
+                * @param {Ext.grid.GridView} view
+                */
+               'beforerefresh',
+               <div id="event-Ext.grid.GridView-rowremoved"></div>/**
+                * @event rowremoved
+                * Internal UI Event. Fired after a row is removed.
+                * @param {Ext.grid.GridView} view
+                * @param {Number} rowIndex The index of the row that was removed.
+                * @param {Ext.data.Record} record The Record that was removed
+                */
+               'rowremoved',
+               <div id="event-Ext.grid.GridView-rowsinserted"></div>/**
+                * @event rowsinserted
+                * Internal UI Event. Fired after rows are inserted.
+                * @param {Ext.grid.GridView} view
+                * @param {Number} firstRow The index of the first inserted.
+                * @param {Number} lastRow The index of the last row inserted.
+                */
+               'rowsinserted',
+               <div id="event-Ext.grid.GridView-rowupdated"></div>/**
+                * @event rowupdated
+                * Internal UI Event. Fired after a row has been updated.
+                * @param {Ext.grid.GridView} view
+                * @param {Number} firstRow The index of the row updated.
+                * @param {Ext.data.record} record The Record backing the row updated.
+                */
+               'rowupdated',
+               <div id="event-Ext.grid.GridView-refresh"></div>/**
+                * @event refresh
+                * Internal UI Event. Fired after the GridView's body has been refreshed.
+                * @param {Ext.grid.GridView} view
+                */
+               'refresh'
+           );
+           Ext.grid.GridView.superclass.constructor.call(this);    
+    },
 
     /* -------------------------------- UI Specific ----------------------------- */
 
 
     /* -------------------------------- UI Specific ----------------------------- */
 
@@ -303,7 +308,7 @@ viewConfig: {
 
         for(var k in ts){
             var t = ts[k];
 
         for(var k in ts){
             var t = ts[k];
-            if(t && typeof t.compile == 'function' && !t.compiled){
+            if(t && Ext.isFunction(t.compile) && !t.compiled){
                 t.disableFormats = true;
                 t.compile();
             }
                 t.disableFormats = true;
                 t.compile();
             }
@@ -436,6 +441,18 @@ viewConfig: {
         var r = this.findRow(el);
         return r ? r.rowIndex : false;
     },
         var r = this.findRow(el);
         return r ? r.rowIndex : false;
     },
+    
+    <div id="method-Ext.grid.GridView-findRowBody"></div>/**
+     * Return the HtmlElement representing the grid row body which contains the passed element.
+     * @param {HTMLElement} el The target HTMLElement
+     * @return {HTMLElement} The row body element, or null if the target element is not within a row body of this GridView.
+     */
+    findRowBody : function(el){
+        if(!el){
+            return false;
+        }
+        return this.fly(el).findParent(this.rowBodySelector, this.rowBodySelectorDepth);
+    },
 
     // getter methods for fetching elements dynamically in the grid
 
 
     // getter methods for fetching elements dynamically in the grid
 
@@ -641,12 +658,12 @@ viewConfig: {
                 p.id = c.id;
                 p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                 p.attr = p.cellAttr = '';
                 p.id = c.id;
                 p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
                 p.attr = p.cellAttr = '';
-                p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
+                p.value = c.renderer.call(c.scope, r.data[c.name], p, r, rowIndex, i, ds);
                 p.style = c.style;
                 if(Ext.isEmpty(p.value)){
                     p.value = '&#160;';
                 }
                 p.style = c.style;
                 if(Ext.isEmpty(p.value)){
                     p.value = '&#160;';
                 }
-                if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){
+                if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
                     p.css += ' x-grid3-dirty-cell';
                 }
                 cb[cb.length] = ct.apply(p);
                     p.css += ' x-grid3-dirty-cell';
                 }
                 cb[cb.length] = ct.apply(p);
@@ -674,18 +691,24 @@ viewConfig: {
         if(!this.ds || this.ds.getCount() < 1){
             return;
         }
         if(!this.ds || this.ds.getCount() < 1){
             return;
         }
-        var rows = this.getRows();
+        var rows = this.getRows(),
+            len = rows.length,
+            i, r;
+            
         skipStripe = skipStripe || !this.grid.stripeRows;
         startRow = startRow || 0;
         skipStripe = skipStripe || !this.grid.stripeRows;
         startRow = startRow || 0;
-        Ext.each(rows, function(row, idx){
-            row.rowIndex = idx;
-            if(!skipStripe){
-                row.className = row.className.replace(this.rowClsRe, ' ');
-                if ((idx + 1) % 2 === 0){
-                    row.className += ' x-grid3-row-alt';
-                }
-            }
-        }, this);
+        for(i = 0; i<len; i++) {
+            r = rows[i];
+            if(r) {
+                r.rowIndex = i;
+                if(!skipStripe){
+                    r.className = r.className.replace(this.rowClsRe, ' ');
+                    if ((i + 1) % 2 === 0){
+                        r.className += ' x-grid3-row-alt';
+                    }
+                }   
+            }          
+        }
         // add first/last-row classes
         if(startRow === 0){
             Ext.fly(rows[0]).addClass(this.firstRowCls);
         // add first/last-row classes
         if(startRow === 0){
             Ext.fly(rows[0]).addClass(this.firstRowCls);
@@ -703,6 +726,7 @@ viewConfig: {
         if(this.deferEmptyText !== true){
             this.applyEmptyText();
         }
         if(this.deferEmptyText !== true){
             this.applyEmptyText();
         }
+        this.grid.fireEvent('viewready', this.grid);
     },
 
     // private
     },
 
     // private
@@ -785,6 +809,9 @@ viewConfig: {
         this.updateHeaderSortState();
 
     },
         this.updateHeaderSortState();
 
     },
+    
+    // private
+    processEvent: Ext.emptyFn,
 
     // private
     layout : function(){
 
     // private
     layout : function(){
@@ -952,7 +979,7 @@ viewConfig: {
     },
 
     resolveCell : function(row, col, hscroll){
     },
 
     resolveCell : function(row, col, hscroll){
-        if(typeof row != "number"){
+        if(!Ext.isNumber(row)){
             row = row.rowIndex;
         }
         if(!this.ds){
             row = row.rowIndex;
         }
         if(!this.ds){
@@ -1045,7 +1072,9 @@ viewConfig: {
     insertRows : function(dm, firstRow, lastRow, isUpdate){
         var last = dm.getCount() - 1;
         if(!isUpdate && firstRow === 0 && lastRow >= last){
     insertRows : function(dm, firstRow, lastRow, isUpdate){
         var last = dm.getCount() - 1;
         if(!isUpdate && firstRow === 0 && lastRow >= last){
+           this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
             this.refresh();
             this.refresh();
+           this.fireEvent('rowsinserted', this, firstRow, lastRow);
         }else{
             if(!isUpdate){
                 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
         }else{
             if(!isUpdate){
                 this.fireEvent('beforerowsinserted', this, firstRow, lastRow);
@@ -1106,7 +1135,7 @@ viewConfig: {
     // private
     getColumnWidth : function(col){
         var w = this.cm.getColumnWidth(col);
     // private
     getColumnWidth : function(col){
         var w = this.cm.getColumnWidth(col);
-        if(typeof w == 'number'){
+        if(Ext.isNumber(w)){
             return (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? w : (w - this.borderWidth > 0 ? w - this.borderWidth : 0)) + 'px';
         }
         return w;
             return (Ext.isBorderBox || (Ext.isWebKit && !Ext.isSafari2) ? w : (w - this.borderWidth > 0 ? w - this.borderWidth : 0)) + 'px';
         }
         return w;
@@ -1133,7 +1162,7 @@ viewConfig: {
         }
 
         var vc = cm.getColumnCount(true);
         }
 
         var vc = cm.getColumnCount(true);
-        var ac = vc-(typeof omitColumn == 'number' ? 1 : 0);
+        var ac = vc-(Ext.isNumber(omitColumn) ? 1 : 0);
         if(ac === 0){
             ac = 1;
             omitColumn = undefined;
         if(ac === 0){
             ac = 1;
             omitColumn = undefined;
@@ -1200,8 +1229,9 @@ viewConfig: {
         for(var i = 0; i < colCount; i++){
             var name = cm.getDataIndex(i);
             cs[i] = {
         for(var i = 0; i < colCount; i++){
             var name = cm.getDataIndex(i);
             cs[i] = {
-                name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name),
+                name : (!Ext.isDefined(name) ? this.ds.fields.get(i).name : name),
                 renderer : cm.getRenderer(i),
                 renderer : cm.getRenderer(i),
+                scope: cm.getRendererScope(i),
                 id : cm.getColumnId(i),
                 style : this.getColumnStyle(i)
             };
                 id : cm.getColumnId(i),
                 style : this.getColumnStyle(i)
             };
@@ -1222,7 +1252,7 @@ viewConfig: {
         var cs = this.getColumnData();
 
         startRow = startRow || 0;
         var cs = this.getColumnData();
 
         startRow = startRow || 0;
-        endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow;
+        endRow = !Ext.isDefined(endRow) ? ds.getCount()-1 : endRow;
 
         // records to render
         var rs = ds.getRange(startRow, endRow);
 
         // records to render
         var rs = ds.getRange(startRow, endRow);
@@ -1239,7 +1269,7 @@ viewConfig: {
     // private
     refreshRow : function(record){
         var ds = this.ds, index;
     // private
     refreshRow : function(record){
         var ds = this.ds, index;
-        if(typeof record == 'number'){
+        if(Ext.isNumber(record)){
             index = record;
             record = ds.getAt(index);
             if(!record){
             index = record;
             record = ds.getAt(index);
             if(!record){
@@ -1301,6 +1331,16 @@ viewConfig: {
         }
     },
 
         }
     },
 
+    // private
+    clearHeaderSortState : function(){
+        if(!this.sortState){
+            return;
+        }
+        this.grid.fireEvent('sortchange', this.grid, null);
+        this.mainHd.select('td').removeClass(this.sortClasses);
+        delete this.sortState;
+    },
+
     // private
     destroy : function(){
         if(this.colMenu){
     // private
     destroy : function(){
         if(this.colMenu){
@@ -1347,9 +1387,9 @@ viewConfig: {
             delete Ext.dd.DDM.ids[this.columnDrop.ddGroup];
         }
 
             delete Ext.dd.DDM.ids[this.columnDrop.ddGroup];
         }
 
-        if (this.splitone){ // enableColumnResize
-            this.splitone.destroy();
-            delete this.splitone._domRef;
+        if (this.splitZone){ // enableColumnResize
+            this.splitZone.destroy();
+            delete this.splitZone._domRef;
             delete Ext.dd.DDM.ids["gridSplitters" + this.grid.getGridEl().id];
         }
 
             delete Ext.dd.DDM.ids["gridSplitters" + this.grid.getGridEl().id];
         }
 
@@ -1478,6 +1518,7 @@ viewConfig: {
 
     // private
     onAdd : function(ds, records, index){
 
     // private
     onAdd : function(ds, records, index){
+       
         this.insertRows(ds, index, index + (records.length-1));
     },
 
         this.insertRows(ds, index, index + (records.length-1));
     },
 
@@ -1774,11 +1815,15 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {
         this.startPos = x;
         Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
     },
         this.startPos = x;
         Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y);
     },
+    
+    allowHeaderDrag : function(e){
+        return true;
+    },
 
 
     handleMouseDown : function(e){
         var t = this.view.findHeaderCell(e.getTarget());
 
 
     handleMouseDown : function(e){
         var t = this.view.findHeaderCell(e.getTarget());
-        if(t){
+        if(t && this.allowHeaderDrag(e)){
             var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1];
             var exy = e.getXY(), ex = exy[0];
             var w = t.offsetWidth, adjust = false;
             var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1];
             var exy = e.getXY(), ex = exy[0];
             var w = t.offsetWidth, adjust = false;
@@ -1827,6 +1872,6 @@ Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, {
         this.setDelta(0,0);
     }
 });
         this.setDelta(0,0);
     }
 });
-</pre>
-</body>
+</pre>    \r
+</body>\r
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.