git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / GridPanel.html
diff --git a/docs/source/GridPanel.html b/docs/source/GridPanel.html
index 097548c..0246761 100644 (file)
--- a/docs/source/GridPanel.html
+++ b/docs/source/GridPanel.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.GridPanel"></div>/**\r
+<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.GridPanel"></div>/**\r
  * @class Ext.grid.GridPanel\r
  * @extends Ext.Panel\r
  * <p>This class represents the primary interface of a component based grid control to represent data\r
  * @class Ext.grid.GridPanel\r
  * @extends Ext.Panel\r
  * <p>This class represents the primary interface of a component based grid control to represent data\r
@@ -224,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
      * @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
      * </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
     <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
@@ -241,6 +236,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
     <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**\r
      * @cfg {Array} bubbleEvents\r
      * <p>An array of events that, when fired, should be bubbled to any parent container.\r
     <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**\r
      * @cfg {Array} bubbleEvents\r
      * <p>An array of events that, when fired, should be bubbled to any parent container.\r
+     * See {@link Ext.util.Observable#enableBubble}. \r
      * Defaults to <tt>[]</tt>.\r
      */\r
     bubbleEvents: [],\r
      * Defaults to <tt>[]</tt>.\r
      */\r
     bubbleEvents: [],\r
@@ -371,6 +367,33 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
              * @param {Ext.EventObject} e\r
              */\r
             'headermousedown',\r
              * @param {Ext.EventObject} e\r
              */\r
             'headermousedown',\r
+            \r
+            <div id="event-Ext.grid.GridPanel-groupmousedown"></div>/**\r
+             * @event groupmousedown\r
+             * Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.\r
+             * @param {Grid} this\r
+             * @param {String} groupField\r
+             * @param {String} groupValue\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'groupmousedown',\r
+            \r
+            <div id="event-Ext.grid.GridPanel-rowbodymousedown"></div>/**\r
+             * @event rowbodymousedown\r
+             * Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>\r
+             * @param {Grid} this\r
+             * @param {Number} rowIndex\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'rowbodymousedown',\r
+            \r
+            <div id="event-Ext.grid.GridPanel-containermousedown"></div>/**\r
+             * @event containermousedown\r
+             * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.\r
+             * @param {Grid} this\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'containermousedown',\r
 \r
             <div id="event-Ext.grid.GridPanel-cellclick"></div>/**\r
              * @event cellclick\r
 \r
             <div id="event-Ext.grid.GridPanel-cellclick"></div>/**\r
              * @event cellclick\r
@@ -432,6 +455,56 @@ function(grid, rowIndex, columnIndex, e) {
              * @param {Ext.EventObject} e\r
              */\r
             'headerdblclick',\r
              * @param {Ext.EventObject} e\r
              */\r
             'headerdblclick',\r
+            <div id="event-Ext.grid.GridPanel-groupclick"></div>/**\r
+             * @event groupclick\r
+             * Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.\r
+             * @param {Grid} this\r
+             * @param {String} groupField\r
+             * @param {String} groupValue\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'groupclick',\r
+            <div id="event-Ext.grid.GridPanel-groupdblclick"></div>/**\r
+             * @event groupdblclick\r
+             * Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.\r
+             * @param {Grid} this\r
+             * @param {String} groupField\r
+             * @param {String} groupValue\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'groupdblclick',\r
+            <div id="event-Ext.grid.GridPanel-containerclick"></div>/**\r
+             * @event containerclick\r
+             * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.\r
+             * @param {Grid} this\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'containerclick',\r
+            <div id="event-Ext.grid.GridPanel-containerdblclick"></div>/**\r
+             * @event containerdblclick\r
+             * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.\r
+             * @param {Grid} this\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'containerdblclick',\r
+            \r
+            <div id="event-Ext.grid.GridPanel-rowbodyclick"></div>/**\r
+             * @event rowbodyclick\r
+             * Fires when the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>\r
+             * @param {Grid} this\r
+             * @param {Number} rowIndex\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'rowbodyclick',\r
+            <div id="event-Ext.grid.GridPanel-rowbodydblclick"></div>/**\r
+             * @event rowbodydblclick\r
+             * Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>\r
+             * @param {Grid} this\r
+             * @param {Number} rowIndex\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'rowbodydblclick',\r
+            \r
             <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**\r
              * @event rowcontextmenu\r
              * Fires when a row is right clicked\r
             <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**\r
              * @event rowcontextmenu\r
              * Fires when a row is right clicked\r
@@ -457,6 +530,30 @@ function(grid, rowIndex, columnIndex, e) {
              * @param {Ext.EventObject} e\r
              */\r
             'headercontextmenu',\r
              * @param {Ext.EventObject} e\r
              */\r
             'headercontextmenu',\r
+            <div id="event-Ext.grid.GridPanel-groupcontextmenu"></div>/**\r
+             * @event groupcontextmenu\r
+             * Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.\r
+             * @param {Grid} this\r
+             * @param {String} groupField\r
+             * @param {String} groupValue\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'groupcontextmenu',\r
+            <div id="event-Ext.grid.GridPanel-containercontextmenu"></div>/**\r
+             * @event containercontextmenu\r
+             * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.\r
+             * @param {Grid} this\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'containercontextmenu',\r
+            <div id="event-Ext.grid.GridPanel-rowbodycontextmenu"></div>/**\r
+             * @event rowbodycontextmenu\r
+             * Fires when the row body is right clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>\r
+             * @param {Grid} this\r
+             * @param {Number} rowIndex\r
+             * @param {Ext.EventObject} e\r
+             */\r
+            'rowbodycontextmenu',\r
             <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**\r
              * @event bodyscroll\r
              * Fires when the body element is scrolled\r
             <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**\r
              * @event bodyscroll\r
              * Fires when the body element is scrolled\r
@@ -485,6 +582,13 @@ function(grid, rowIndex, columnIndex, e) {
              * @param {Object} sortInfo An object with the keys field and direction\r
              */\r
             'sortchange',\r
              * @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
             <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
@@ -492,7 +596,13 @@ function(grid, rowIndex, columnIndex, e) {
              * @param {Ext.data.Store} store The new store\r
              * @param {Ext.grid.ColumnModel} colModel The new column model\r
              */\r
              * @param {Ext.data.Store} store The new store\r
              * @param {Ext.grid.ColumnModel} colModel The new column model\r
              */\r
-            'reconfigure'\r
+            'reconfigure',\r
+            <div id="event-Ext.grid.GridPanel-viewready"></div>/**\r
+             * @event viewready\r
+             * Fires when the grid view is available (use this for selecting a default row). \r
+             * @param {Grid} this\r
+             */\r
+            'viewready'\r
         );\r
     },\r
 \r
         );\r
     },\r
 \r
@@ -537,23 +647,40 @@ function(grid, rowIndex, columnIndex, e) {
 \r
     applyState : function(state){\r
         var cm = this.colModel,\r
 \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
         if(cs){\r
             for(var i = 0, len = cs.length; i < len; i++){\r
-                var s = cs[i];\r
-                var 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
                 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(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
         }\r
         var o = Ext.apply({}, state);\r
         delete o.columns;\r
@@ -562,7 +689,11 @@ function(grid, rowIndex, columnIndex, e) {
     },\r
 \r
     getState : function(){\r
     },\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
         for(var i = 0, c; (c = this.colModel.config[i]); i++){\r
             o.columns[i] = {\r
                 id: c.id,\r
@@ -572,11 +703,17 @@ function(grid, rowIndex, columnIndex, e) {
                 o.columns[i].hidden = true;\r
             }\r
         }\r
                 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(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
         }\r
         return o;\r
     },\r
@@ -608,15 +745,20 @@ function(grid, rowIndex, columnIndex, e) {
      * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object\r
      */\r
     reconfigure : function(store, colModel){\r
      * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object\r
      */\r
     reconfigure : function(store, colModel){\r
-        if(this.loadMask){\r
-            this.loadMask.destroy();\r
-            this.loadMask = new Ext.LoadMask(this.bwrap,\r
-                    Ext.apply({}, {store:store}, this.initialConfig.loadMask));\r
+        var rendered = this.rendered;\r
+        if(rendered){\r
+            if(this.loadMask){\r
+                this.loadMask.destroy();\r
+                this.loadMask = new Ext.LoadMask(this.bwrap,\r
+                        Ext.apply({}, {store:store}, this.initialConfig.loadMask));\r
+            }\r
+        }\r
+        if(this.view){\r
+            this.view.initData(store, colModel);\r
         }\r
         }\r
-        this.view.initData(store, colModel);\r
         this.store = store;\r
         this.colModel = colModel;\r
         this.store = store;\r
         this.colModel = colModel;\r
-        if(this.rendered){\r
+        if(rendered){\r
             this.view.refresh(true);\r
         }\r
         this.fireEvent('reconfigure', this, store, colModel);\r
             this.view.refresh(true);\r
         }\r
         this.fireEvent('reconfigure', this, store, colModel);\r
@@ -625,9 +767,6 @@ function(grid, rowIndex, columnIndex, e) {
     // private\r
     onDestroy : function(){\r
         if(this.rendered){\r
     // private\r
     onDestroy : function(){\r
         if(this.rendered){\r
-            var c = this.body;\r
-            c.removeAllListeners();\r
-            c.update('');\r
             Ext.destroy(this.view, this.loadMask);\r
         }else if(this.store && this.store.autoDestroy){\r
             this.store.destroy();\r
             Ext.destroy(this.view, this.loadMask);\r
         }else if(this.store && this.store.autoDestroy){\r
             this.store.destroy();\r
@@ -640,21 +779,31 @@ function(grid, rowIndex, columnIndex, e) {
     // private\r
     processEvent : function(name, e){\r
         this.fireEvent(name, e);\r
     // private\r
     processEvent : function(name, e){\r
         this.fireEvent(name, e);\r
-        var t = e.getTarget();\r
-        var v = this.view;\r
-        var header = v.findHeaderIndex(t);\r
+        var t = e.getTarget(),\r
+            v = this.view,\r
+            header = v.findHeaderIndex(t);\r
+            \r
         if(header !== false){\r
             this.fireEvent('header' + name, this, header, e);\r
         }else{\r
         if(header !== false){\r
             this.fireEvent('header' + name, this, header, e);\r
         }else{\r
-            var row = v.findRowIndex(t);\r
-            var cell = v.findCellIndex(t);\r
+            var row = v.findRowIndex(t),\r
+                cell,\r
+                body;\r
             if(row !== false){\r
                 this.fireEvent('row' + name, this, row, e);\r
             if(row !== false){\r
                 this.fireEvent('row' + name, this, row, e);\r
+                cell = v.findCellIndex(t);\r
+                body = v.findRowBody(t);\r
                 if(cell !== false){\r
                     this.fireEvent('cell' + name, this, row, cell, e);\r
                 }\r
                 if(cell !== false){\r
                     this.fireEvent('cell' + name, this, row, cell, e);\r
                 }\r
+                if(body){\r
+                    this.fireEvent('rowbody' + name, this, row, e);\r
+                }\r
+            }else{\r
+                this.fireEvent('container' + name, this, e);\r
             }\r
         }\r
             }\r
         }\r
+        this.view.processEvent(name, e);\r
     },\r
 \r
     // private\r
     },\r
 \r
     // private\r
@@ -679,8 +828,11 @@ function(grid, rowIndex, columnIndex, e) {
 \r
     // private\r
     walkCells : function(row, col, step, fn, scope){\r
 \r
     // private\r
     walkCells : function(row, col, step, fn, scope){\r
-        var cm = this.colModel, clen = cm.getColumnCount();\r
-        var ds = this.store, rlen = ds.getCount(), first = true;\r
+        var cm = this.colModel, \r
+            clen = cm.getColumnCount(),\r
+            ds = this.store, \r
+            rlen = ds.getCount(), \r
+            first = true;\r
         if(step < 0){\r
             if(col < 0){\r
                 row--;\r
         if(step < 0){\r
             if(col < 0){\r
                 row--;\r
@@ -897,8 +1049,8 @@ function(grid, rowIndex, columnIndex, e) {
      * @event add \r
      * @hide \r
      */\r
      * @event add \r
      * @hide \r
      */\r
-    <div id="event-Ext.grid.GridPanel-afterLayout"></div>/** \r
-     * @event afterLayout \r
+    <div id="event-Ext.grid.GridPanel-afterlayout"></div>/** \r
+     * @event afterlayout \r
      * @hide \r
      */\r
     <div id="event-Ext.grid.GridPanel-beforeadd"></div>/** \r
      * @hide \r
      */\r
     <div id="event-Ext.grid.GridPanel-beforeadd"></div>/** \r
@@ -971,6 +1123,6 @@ function(grid, rowIndex, columnIndex, e) {
      * @hide\r
      */\r
 });\r
      * @hide\r
      */\r
 });\r
-Ext.reg('grid', Ext.grid.GridPanel);</pre>
-</body>
+Ext.reg('grid', Ext.grid.GridPanel);</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/>.