git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / docs / source / GridPanel.html
diff --git a/docs/source/GridPanel.html b/docs/source/GridPanel.html
index 9e18178..27d8872 100644 (file)
--- a/docs/source/GridPanel.html
+++ b/docs/source/GridPanel.html
@@ -7,10 +7,10 @@
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
 </head>
 <body  onload="prettyPrint();">
     <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
  */
 <div id="cls-Ext.grid.GridPanel"></div>/**
  * @class Ext.grid.GridPanel
  */
 <div id="cls-Ext.grid.GridPanel"></div>/**
  * @class Ext.grid.GridPanel
@@ -105,21 +105,25 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
      */
     autoExpandColumn : false,
      * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
      */
     autoExpandColumn : false,
+    
     <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
      * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
      * can have (if enabled). Defaults to <tt>1000</tt>.
      */
     autoExpandMax : 1000,
     <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
      * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
      * can have (if enabled). Defaults to <tt>1000</tt>.
      */
     autoExpandMax : 1000,
+    
     <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
      * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
      * can have (if enabled). Defaults to <tt>50</tt>.
      */
     autoExpandMin : 50,
     <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
      * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
      * can have (if enabled). Defaults to <tt>50</tt>.
      */
     autoExpandMin : 50,
+    
     <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
      * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
      * Default is <tt>false</tt>.
      */
     columnLines : false,
     <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
      * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
      * Default is <tt>false</tt>.
      */
     columnLines : false,
+    
     <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
      * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
      */
     <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
      * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
      */
@@ -143,12 +147,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * <tt>{0}</tt> is replaced with the number of selected rows.
      */
     ddText : '{0} selected row{1}',
      * <tt>{0}</tt> is replaced with the number of selected rows.
      */
     ddText : '{0} selected row{1}',
+    
     <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
      * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
      * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
      * structure deferred so that layouts with GridPanels appear more quickly.</p>
      */
     deferRowRender : true,
     <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
      * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
      * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
      * structure deferred so that layouts with GridPanels appear more quickly.</p>
      */
     deferRowRender : true,
+    
     <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
      * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
      * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
     <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
      * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
      * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
@@ -162,11 +168,13 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * with the {@link #enableHdMenu header menu}.
      */
     enableColumnHide : true,
      * with the {@link #enableHdMenu header menu}.
      */
     enableColumnHide : true,
+    
     <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
      * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
      * to turn off column reordering via drag drop.
      */
     enableColumnMove : true,
     <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
      * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
      * to turn off column reordering via drag drop.
      */
     enableColumnMove : true,
+    
     <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
      * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
      * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
     <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
      * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
      * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
@@ -179,10 +187,12 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
      */
     enableDragDrop : false,
      * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
      */
     enableDragDrop : false,
+    
     <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
      * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
      */
     enableHdMenu : true,
     <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
      * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
      */
     enableHdMenu : true,
+    
     <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
      * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
      */
     <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
      * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
      */
@@ -191,6 +201,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * loading. Defaults to <code>false</code>.
      */
     loadMask : false,
      * loading. Defaults to <code>false</code>.
      */
     loadMask : false,
+    
     <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
      * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
      */
     <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
      * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
      */
@@ -198,6 +209,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
      */
     minColumnWidth : 25,
      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
      */
     minColumnWidth : 25,
+    
     <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
      * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
      */
     <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
      * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
      */
@@ -216,11 +228,13 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * modifier, or which uses a CSS selector of higher specificity.</p>
      */
     stripeRows : false,
      * modifier, or which uses a CSS selector of higher specificity.</p>
      */
     stripeRows : false,
+    
     <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
      * for GridPanel, but <tt>false</tt> for EditorGridPanel.
      */
     trackMouseOver : true,
     <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
      * for GridPanel, but <tt>false</tt> for EditorGridPanel.
      */
     trackMouseOver : true,
+    
     <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
      * @cfg {Array} stateEvents
      * An array of events that, when fired, should trigger this component to save its state.
     <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
      * @cfg {Array} stateEvents
      * An array of events that, when fired, should trigger this component to save its state.
@@ -233,6 +247,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * Component state.</p>
      */
     stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
      * Component state.</p>
      */
     stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
+    
     <div id="cfg-Ext.grid.GridPanel-view"></div>/**
      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
      * before a call to {@link Ext.Component#render render()}.
     <div id="cfg-Ext.grid.GridPanel-view"></div>/**
      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
      * before a call to {@link Ext.Component#render render()}.
@@ -255,14 +270,15 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
 
     // private
     rendered : false,
 
     // private
     rendered : false,
+    
     // private
     viewReady : false,
 
     // private
     // private
     viewReady : false,
 
     // private
-    initComponent : function(){
+    initComponent : function() {
         Ext.grid.GridPanel.superclass.initComponent.call(this);
 
         Ext.grid.GridPanel.superclass.initComponent.call(this);
 
-        if(this.columnLines){
+        if (this.columnLines) {
             this.cls = (this.cls || '') + ' x-grid-with-col-lines';
         }
         // override any provided value since it isn't valid
             this.cls = (this.cls || '') + ' x-grid-with-col-lines';
         }
         // override any provided value since it isn't valid
@@ -657,18 +673,21 @@ function(grid, rowIndex, columnIndex, e) {
             store = this.store,
             s,
             c,
             store = this.store,
             s,
             c,
-            oldIndex;
+            colIndex;
 
         if(cs){
             for(var i = 0, len = cs.length; i < len; i++){
                 s = cs[i];
                 c = cm.getColumnById(s.id);
                 if(c){
 
         if(cs){
             for(var i = 0, len = cs.length; i < len; i++){
                 s = cs[i];
                 c = cm.getColumnById(s.id);
                 if(c){
-                    c.hidden = s.hidden;
-                    c.width = s.width;
-                    oldIndex = cm.getIndexById(s.id);
-                    if(oldIndex != i){
-                        cm.moveColumn(oldIndex, i);
+                    colIndex = cm.getIndexById(s.id);
+                    cm.setState(colIndex, {
+                        hidden: s.hidden,
+                        width: s.width,
+                        sortable: s.sortable
+                    });
+                    if(colIndex != i){
+                        cm.moveColumn(colIndex, i);
                     }
                 }
             }
                     }
                 }
             }
@@ -708,6 +727,9 @@ function(grid, rowIndex, columnIndex, e) {
             if(c.hidden){
                 o.columns[i].hidden = true;
             }
             if(c.hidden){
                 o.columns[i].hidden = true;
             }
+            if(c.sortable){
+                o.columns[i].sortable = true;
+            }
         }
         if(store){
             ss = store.getSortState();
         }
         if(store){
             ss = store.getSortState();
@@ -729,7 +751,7 @@ function(grid, rowIndex, columnIndex, e) {
         Ext.grid.GridPanel.superclass.afterRender.call(this);
         var v = this.view;
         this.on('bodyresize', v.layout, v);
         Ext.grid.GridPanel.superclass.afterRender.call(this);
         var v = this.view;
         this.on('bodyresize', v.layout, v);
-        v.layout();
+        v.layout(true);
         if(this.deferRowRender){
             if (!this.deferRowRenderTask){
                 this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
         if(this.deferRowRender){
             if (!this.deferRowRenderTask){
                 this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
@@ -906,10 +928,11 @@ function(grid, rowIndex, columnIndex, e) {
      * Returns the grid's GridView object.
      * @return {Ext.grid.GridView} The grid view
      */
      * Returns the grid's GridView object.
      * @return {Ext.grid.GridView} The grid view
      */
-    getView : function(){
-        if(!this.view){
+    getView : function() {
+        if (!this.view) {
             this.view = new Ext.grid.GridView(this.viewConfig);
         }
             this.view = new Ext.grid.GridView(this.viewConfig);
         }
+        
         return this.view;
     },
     <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
         return this.view;
     },
     <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.