Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / GridPanel.html
index fbac580..0246761 100644 (file)
@@ -219,14 +219,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * @cfg {Array} stateEvents\r
      * An array of events that, when fired, should trigger this component to save its state.\r
      * Defaults to:<pre><code>\r
-     * stateEvents: ['columnmove', 'columnresize', 'sortchange']\r
+     * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']\r
      * </code></pre>\r
      * <p>These can be any types of events supported by this component, including browser or\r
      * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>\r
      * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring\r
      * Component state.</p>\r
      */\r
-    stateEvents : ['columnmove', 'columnresize', 'sortchange'],\r
+    stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],\r
     <div id="cfg-Ext.grid.GridPanel-view"></div>/**\r
      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set\r
      * before a call to {@link Ext.Component#render render()}.\r
@@ -582,6 +582,13 @@ function(grid, rowIndex, columnIndex, e) {
              * @param {Object} sortInfo An object with the keys field and direction\r
              */\r
             'sortchange',\r
+            <div id="event-Ext.grid.GridPanel-groupchange"></div>/**\r
+             * @event groupchange\r
+             * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})\r
+             * @param {Grid} this\r
+             * @param {String} groupField A string with the grouping field, null if the store is not grouped.\r
+             */\r
+            'groupchange',\r
             <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**\r
              * @event reconfigure\r
              * Fires when the grid is reconfigured with a new store and/or column model.\r
@@ -640,23 +647,40 @@ function(grid, rowIndex, columnIndex, e) {
 \r
     applyState : function(state){\r
         var cm = this.colModel,\r
-            cs = state.columns;\r
+            cs = state.columns,\r
+            store = this.store,\r
+            s,\r
+            c,\r
+            oldIndex;\r
+            \r
         if(cs){\r
             for(var i = 0, len = cs.length; i < len; i++){\r
-                var s = cs[i],\r
-                    c = cm.getColumnById(s.id);\r
+                s = cs[i];\r
+                c = cm.getColumnById(s.id);\r
                 if(c){\r
                     c.hidden = s.hidden;\r
                     c.width = s.width;\r
-                    var oldIndex = cm.getIndexById(s.id);\r
+                    oldIndex = cm.getIndexById(s.id);\r
                     if(oldIndex != i){\r
                         cm.moveColumn(oldIndex, i);\r
                     }\r
                 }\r
             }\r
         }\r
-        if(state.sort && this.store){\r
-            this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);\r
+        if(store){\r
+            s = state.sort;\r
+            if(s){\r
+                store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);\r
+            }\r
+            s = state.group;\r
+            if(store.groupBy){\r
+                if(s){\r
+                    store.groupBy(s);\r
+                }else{\r
+                    store.clearGrouping();\r
+                }\r
+            }\r
+\r
         }\r
         var o = Ext.apply({}, state);\r
         delete o.columns;\r
@@ -665,7 +689,11 @@ function(grid, rowIndex, columnIndex, e) {
     },\r
 \r
     getState : function(){\r
-        var o = {columns: []};\r
+        var o = {columns: []},\r
+            store = this.store,\r
+            ss,\r
+            gs;\r
+            \r
         for(var i = 0, c; (c = this.colModel.config[i]); i++){\r
             o.columns[i] = {\r
                 id: c.id,\r
@@ -675,11 +703,17 @@ function(grid, rowIndex, columnIndex, e) {
                 o.columns[i].hidden = true;\r
             }\r
         }\r
-        if(this.store){\r
-            var ss = this.store.getSortState();\r
+        if(store){\r
+            ss = store.getSortState();\r
             if(ss){\r
                 o.sort = ss;\r
             }\r
+            if(store.getGroupState){\r
+                gs = store.getGroupState();\r
+                if(gs){\r
+                    o.group = gs;\r
+                }\r
+            }\r
         }\r
         return o;\r
     },\r