<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
* <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
* @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
*/\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
+ * See {@link Ext.util.Observable#enableBubble}. \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
* @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
* @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
* @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
* @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
* @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
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
+ 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
- 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
- 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
- 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
- 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
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
// 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
* @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
- this.view.initData(store, 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
},\r
\r
- // private\r
- onKeyDown : function(e){\r
- this.fireEvent('keydown', e);\r
- },\r
-\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
// 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
- 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
+ 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(body){\r
+ this.fireEvent('rowbody' + name, this, row, e);\r
+ }\r
+ }else{\r
+ this.fireEvent('container' + name, this, e);\r
}\r
}\r
+ this.view.processEvent(name, e);\r
},\r
\r
// private\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
* @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
git.ithinksw.org / extjs.git / blobdiff