Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / GridPanel.html
index bc1e54a..097548c 100644 (file)
@@ -1,11 +1,17 @@
-<html>\r
-<head>\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
+<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
  * @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
  * <p>Example usage:</p>\r
  * <pre><code>\r
 var grid = new Ext.grid.GridPanel({\r
-    {@link #store}: new (@link Ext.data.Store}({\r
+    {@link #store}: new {@link Ext.data.Store}({\r
         {@link Ext.data.Store#autoDestroy autoDestroy}: true,\r
         {@link Ext.data.Store#reader reader}: reader,\r
         {@link Ext.data.Store#data data}: xg.dummyData\r
     }),\r
-    {@link #columns}: [\r
-        {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},\r
-        {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
-        {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},\r
-        {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},\r
-        // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype\r
-        {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}\r
-    ],\r
+    {@link #colModel}: new {@link Ext.grid.ColumnModel}({\r
+        {@link Ext.grid.ColumnModel#defaults defaults}: {\r
+            width: 120,\r
+            sortable: true\r
+        },\r
+        {@link Ext.grid.ColumnModel#columns columns}: [\r
+            {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},\r
+            {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},\r
+            {header: 'Change', dataIndex: 'change'},\r
+            {header: '% Change', dataIndex: 'pctChange'},\r
+            // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype\r
+            {\r
+                header: 'Last Updated', width: 135, dataIndex: 'lastChange',\r
+                xtype: 'datecolumn', format: 'M d, Y'\r
+            }\r
+        ],\r
+    }),\r
     {@link #viewConfig}: {\r
         {@link Ext.grid.GridView#forceFit forceFit}: true,\r
 \r
@@ -141,7 +156,9 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.\r
      */\r
     <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**\r
-     * @cfg {Boolean} enableColumnHide Defaults to <tt>true</tt> to enable hiding of columns with the header context menu.\r
+     * @cfg {Boolean} enableColumnHide\r
+     * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}\r
+     * with the {@link #enableHdMenu header menu}.\r
      */\r
     enableColumnHide : true,\r
     <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**\r
@@ -220,6 +237,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
      * before a call to {@link Ext.Component#render render()}.\r
      */\r
     view : null,\r
+    \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
+     * Defaults to <tt>[]</tt>.\r
+     */\r
+    bubbleEvents: [],\r
+    \r
     <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**\r
      * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of\r
      * the config options available for {@link Ext.grid.GridView} can be specified here. This option\r
@@ -475,26 +500,24 @@ function(grid, rowIndex, columnIndex, e) {
     onRender : function(ct, position){\r
         Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);\r
 \r
-        var c = this.body;\r
+        var c = this.getGridEl();\r
 \r
         this.el.addClass('x-grid-panel');\r
 \r
-        var view = this.getView();\r
-        view.init(this);\r
-\r
         this.mon(c, {\r
+            scope: this,\r
             mousedown: this.onMouseDown,\r
             click: this.onClick,\r
             dblclick: this.onDblClick,\r
-            contextmenu: this.onContextMenu,\r
-            keydown: this.onKeyDown,\r
-            scope: this\r
+            contextmenu: this.onContextMenu\r
         });\r
 \r
-        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']);\r
+        this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);\r
 \r
+        var view = this.getView();\r
+        view.init(this);\r
+        view.render();\r
         this.getSelectionModel().init(this);\r
-        this.view.render();\r
     },\r
 \r
     // private\r
@@ -513,8 +536,8 @@ function(grid, rowIndex, columnIndex, e) {
     },\r
 \r
     applyState : function(state){\r
-        var cm = this.colModel;\r
-        var cs = state.columns;\r
+        var cm = this.colModel,\r
+            cs = state.columns;\r
         if(cs){\r
             for(var i = 0, len = cs.length; i < len; i++){\r
                 var s = cs[i];\r
@@ -532,9 +555,10 @@ function(grid, rowIndex, columnIndex, e) {
         if(state.sort && this.store){\r
             this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);\r
         }\r
-        delete state.columns;\r
-        delete state.sort;\r
-        Ext.grid.GridPanel.superclass.applyState.call(this, state);\r
+        var o = Ext.apply({}, state);\r
+        delete o.columns;\r
+        delete o.sort;\r
+        Ext.grid.GridPanel.superclass.applyState.call(this, o);\r
     },\r
 \r
     getState : function(){\r
@@ -560,11 +584,13 @@ function(grid, rowIndex, columnIndex, e) {
     // private\r
     afterRender : function(){\r
         Ext.grid.GridPanel.superclass.afterRender.call(this);\r
-        this.view.layout();\r
+        var v = this.view;\r
+        this.on('bodyresize', v.layout, v);\r
+        v.layout();\r
         if(this.deferRowRender){\r
-            this.view.afterRender.defer(10, this.view);\r
+            v.afterRender.defer(10, this.view);\r
         }else{\r
-            this.view.afterRender();\r
+            v.afterRender();\r
         }\r
         this.viewReady = true;\r
     },\r
@@ -596,11 +622,6 @@ function(grid, rowIndex, columnIndex, e) {
         this.fireEvent('reconfigure', this, store, colModel);\r
     },\r
 \r
-    // private\r
-    onKeyDown : function(e){\r
-        this.fireEvent('keydown', e);\r
-    },\r
-\r
     // private\r
     onDestroy : function(){\r
         if(this.rendered){\r
@@ -950,6 +971,6 @@ function(grid, rowIndex, columnIndex, e) {
      * @hide\r
      */\r
 });\r
-Ext.reg('grid', Ext.grid.GridPanel);</pre>    \r
-</body>\r
+Ext.reg('grid', Ext.grid.GridPanel);</pre>
+</body>
 </html>
\ No newline at end of file