Example usage:
*
var grid = new Ext.grid.GridPanel({
- {@link #store}: new (@link Ext.data.Store}({
+ {@link #store}: new {@link Ext.data.Store}({
{@link Ext.data.Store#autoDestroy autoDestroy}: true,
{@link Ext.data.Store#reader reader}: reader,
{@link Ext.data.Store#data data}: xg.dummyData
}),
- {@link #columns}: [
- {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
- {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
- {header: 'Change', width: 120, sortable: true, dataIndex: 'change'},
- {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'},
- // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
- {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'}
- ],
+ {@link #colModel}: new {@link Ext.grid.ColumnModel}({
+ {@link Ext.grid.ColumnModel#defaults defaults}: {
+ width: 120,
+ sortable: true
+ },
+ {@link Ext.grid.ColumnModel#columns columns}: [
+ {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
+ {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+ {header: 'Change', dataIndex: 'change'},
+ {header: '% Change', dataIndex: 'pctChange'},
+ // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
+ {
+ header: 'Last Updated', width: 135, dataIndex: 'lastChange',
+ xtype: 'datecolumn', format: 'M d, Y'
+ }
+ ],
+ }),
{@link #viewConfig}: {
{@link Ext.grid.GridView#forceFit forceFit}: true,
@@ -140,7 +149,9 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
* @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
*/
/**
- * @cfg {Boolean} enableColumnHide Defaults to true to enable hiding of columns with the header context menu.
+ * @cfg {Boolean} enableColumnHide
+ * Defaults to true to enable {@link Ext.grid.Column#hidden hiding of columns}
+ * with the {@link #enableHdMenu header menu}.
*/
enableColumnHide : true,
/**
@@ -219,6 +230,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
* before a call to {@link Ext.Component#render render()}.
*/
view : null,
+
+ /**
+ * @cfg {Array} bubbleEvents
+ * An array of events that, when fired, should be bubbled to any parent container.
+ * Defaults to [].
+ */
+ bubbleEvents: [],
+
/**
* @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of
* the config options available for {@link Ext.grid.GridView} can be specified here. This option
@@ -474,26 +493,24 @@ function(grid, rowIndex, columnIndex, e) {
onRender : function(ct, position){
Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
- var c = this.body;
+ var c = this.getGridEl();
this.el.addClass('x-grid-panel');
- var view = this.getView();
- view.init(this);
-
this.mon(c, {
+ scope: this,
mousedown: this.onMouseDown,
click: this.onClick,
dblclick: this.onDblClick,
- contextmenu: this.onContextMenu,
- keydown: this.onKeyDown,
- scope: this
+ contextmenu: this.onContextMenu
});
- this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']);
+ this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
+ var view = this.getView();
+ view.init(this);
+ view.render();
this.getSelectionModel().init(this);
- this.view.render();
},
// private
@@ -512,8 +529,8 @@ function(grid, rowIndex, columnIndex, e) {
},
applyState : function(state){
- var cm = this.colModel;
- var cs = state.columns;
+ var cm = this.colModel,
+ cs = state.columns;
if(cs){
for(var i = 0, len = cs.length; i < len; i++){
var s = cs[i];
@@ -531,9 +548,10 @@ function(grid, rowIndex, columnIndex, e) {
if(state.sort && this.store){
this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
}
- delete state.columns;
- delete state.sort;
- Ext.grid.GridPanel.superclass.applyState.call(this, state);
+ var o = Ext.apply({}, state);
+ delete o.columns;
+ delete o.sort;
+ Ext.grid.GridPanel.superclass.applyState.call(this, o);
},
getState : function(){
@@ -559,11 +577,13 @@ function(grid, rowIndex, columnIndex, e) {
// private
afterRender : function(){
Ext.grid.GridPanel.superclass.afterRender.call(this);
- this.view.layout();
+ var v = this.view;
+ this.on('bodyresize', v.layout, v);
+ v.layout();
if(this.deferRowRender){
- this.view.afterRender.defer(10, this.view);
+ v.afterRender.defer(10, this.view);
}else{
- this.view.afterRender();
+ v.afterRender();
}
this.viewReady = true;
},
@@ -595,11 +615,6 @@ function(grid, rowIndex, columnIndex, e) {
this.fireEvent('reconfigure', this, store, colModel);
},
- // private
- onKeyDown : function(e){
- this.fireEvent('keydown', e);
- },
-
// private
onDestroy : function(){
if(this.rendered){