-<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
* @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
* 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
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
},\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
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
// 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
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
* @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