/** + + +The source code + + + + +/*! + * Ext JS Library 3.0.3 + * Copyright(c) 2006-2009 Ext JS, LLC + * licensing@extjs.com + * http://www.extjs.com/license + */ +/** * @class Ext.grid.GridPanel * @extends Ext.Panel *+ \ No newline at end of fileThis class represents the primary interface of a component based grid control to represent data @@ -23,19 +29,28 @@ *
Example usage:
*- +Ext.reg('grid', Ext.grid.GridPanel);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, @@ -141,7 +156,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, /** @@ -220,6 +237,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 @@ -475,26 +500,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 @@ -513,8 +536,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]; @@ -532,9 +555,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(){ @@ -560,11 +584,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; }, @@ -596,11 +622,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){ @@ -950,6 +971,6 @@ function(grid, rowIndex, columnIndex, e) { * @hide */ }); -Ext.reg('grid', Ext.grid.GridPanel);