/*! - * Ext JS Library 3.0.3 - * Copyright(c) 2006-2009 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -/** + + + ++ \ No newline at end of fileThe source code + + + + +/** * @class Ext.grid.GridPanel * @extends Ext.Panel *- +Ext.reg('grid', Ext.grid.GridPanel);This class represents the primary interface of a component based grid control to represent data @@ -224,14 +219,14 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @cfg {Array} stateEvents * An array of events that, when fired, should trigger this component to save its state. * Defaults to:
*- * stateEvents: ['columnmove', 'columnresize', 'sortchange'] + * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange'] *These can be any types of events supported by this component, including browser or * custom events (e.g., ['click', 'customerchange']).
*See {@link Ext.Component#stateful} for an explanation of saving and restoring * Component state.
*/ - stateEvents : ['columnmove', 'columnresize', 'sortchange'], + stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'], /** * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set * before a call to {@link Ext.Component#render render()}. @@ -241,6 +236,7 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { /** * @cfg {Array} bubbleEvents *An array of events that, when fired, should be bubbled to any parent container. + * See {@link Ext.util.Observable#enableBubble}. * Defaults to []. */ bubbleEvents: [], @@ -371,6 +367,33 @@ Ext.grid.GridPanel = Ext.extend(Ext.Panel, { * @param {Ext.EventObject} e */ 'headermousedown', + +
/** + * @event groupmousedown + * Fires before a group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}. + * @param {Grid} this + * @param {String} groupField + * @param {String} groupValue + * @param {Ext.EventObject} e + */ + 'groupmousedown', + + /** + * @event rowbodymousedown + * Fires before the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. + * @param {Grid} this + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'rowbodymousedown', + + /** + * @event containermousedown + * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row. + * @param {Grid} this + * @param {Ext.EventObject} e + */ + 'containermousedown', /** * @event cellclick @@ -432,6 +455,56 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.EventObject} e */ 'headerdblclick', + /** + * @event groupclick + * Fires when group header is clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}. + * @param {Grid} this + * @param {String} groupField + * @param {String} groupValue + * @param {Ext.EventObject} e + */ + 'groupclick', + /** + * @event groupdblclick + * Fires when group header is double clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}. + * @param {Grid} this + * @param {String} groupField + * @param {String} groupValue + * @param {Ext.EventObject} e + */ + 'groupdblclick', + /** + * @event containerclick + * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row. + * @param {Grid} this + * @param {Ext.EventObject} e + */ + 'containerclick', + /** + * @event containerdblclick + * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row. + * @param {Grid} this + * @param {Ext.EventObject} e + */ + 'containerdblclick', + + /** + * @event rowbodyclick + * Fires when the row body is clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. + * @param {Grid} this + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'rowbodyclick', + /** + * @event rowbodydblclick + * Fires when the row body is double clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. + * @param {Grid} this + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'rowbodydblclick', + /** * @event rowcontextmenu * Fires when a row is right clicked @@ -457,6 +530,30 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.EventObject} e */ 'headercontextmenu', + /** + * @event groupcontextmenu + * Fires when group header is right clicked. Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}. + * @param {Grid} this + * @param {String} groupField + * @param {String} groupValue + * @param {Ext.EventObject} e + */ + 'groupcontextmenu', + /** + * @event containercontextmenu + * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row. + * @param {Grid} this + * @param {Ext.EventObject} e + */ + 'containercontextmenu', + /** + * @event rowbodycontextmenu + * Fires when the row body is right clicked. Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured. + * @param {Grid} this + * @param {Number} rowIndex + * @param {Ext.EventObject} e + */ + 'rowbodycontextmenu', /** * @event bodyscroll * Fires when the body element is scrolled @@ -485,6 +582,13 @@ function(grid, rowIndex, columnIndex, e) { * @param {Object} sortInfo An object with the keys field and direction */ 'sortchange', + /** + * @event groupchange + * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView}) + * @param {Grid} this + * @param {String} groupField A string with the grouping field, null if the store is not grouped. + */ + 'groupchange', /** * @event reconfigure * Fires when the grid is reconfigured with a new store and/or column model. @@ -492,7 +596,13 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.data.Store} store The new store * @param {Ext.grid.ColumnModel} colModel The new column model */ - 'reconfigure' + 'reconfigure', + /** + * @event viewready + * Fires when the grid view is available (use this for selecting a default row). + * @param {Grid} this + */ + 'viewready' ); }, @@ -537,23 +647,40 @@ function(grid, rowIndex, columnIndex, e) { applyState : function(state){ var cm = this.colModel, - cs = state.columns; + cs = state.columns, + store = this.store, + s, + c, + oldIndex; + if(cs){ for(var i = 0, len = cs.length; i < len; i++){ - var s = cs[i]; - var c = cm.getColumnById(s.id); + s = cs[i]; + c = cm.getColumnById(s.id); if(c){ c.hidden = s.hidden; c.width = s.width; - var oldIndex = cm.getIndexById(s.id); + oldIndex = cm.getIndexById(s.id); if(oldIndex != i){ cm.moveColumn(oldIndex, i); } } } } - if(state.sort && this.store){ - this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction); + if(store){ + s = state.sort; + if(s){ + store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction); + } + s = state.group; + if(store.groupBy){ + if(s){ + store.groupBy(s); + }else{ + store.clearGrouping(); + } + } + } var o = Ext.apply({}, state); delete o.columns; @@ -562,7 +689,11 @@ function(grid, rowIndex, columnIndex, e) { }, getState : function(){ - var o = {columns: []}; + var o = {columns: []}, + store = this.store, + ss, + gs; + for(var i = 0, c; (c = this.colModel.config[i]); i++){ o.columns[i] = { id: c.id, @@ -572,11 +703,17 @@ function(grid, rowIndex, columnIndex, e) { o.columns[i].hidden = true; } } - if(this.store){ - var ss = this.store.getSortState(); + if(store){ + ss = store.getSortState(); if(ss){ o.sort = ss; } + if(store.getGroupState){ + gs = store.getGroupState(); + if(gs){ + o.group = gs; + } + } } return o; }, @@ -608,15 +745,20 @@ function(grid, rowIndex, columnIndex, e) { * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object */ reconfigure : function(store, colModel){ - if(this.loadMask){ - this.loadMask.destroy(); - this.loadMask = new Ext.LoadMask(this.bwrap, - Ext.apply({}, {store:store}, this.initialConfig.loadMask)); + var rendered = this.rendered; + if(rendered){ + if(this.loadMask){ + this.loadMask.destroy(); + this.loadMask = new Ext.LoadMask(this.bwrap, + Ext.apply({}, {store:store}, this.initialConfig.loadMask)); + } + } + if(this.view){ + this.view.initData(store, colModel); } - this.view.initData(store, colModel); this.store = store; this.colModel = colModel; - if(this.rendered){ + if(rendered){ this.view.refresh(true); } this.fireEvent('reconfigure', this, store, colModel); @@ -625,9 +767,6 @@ function(grid, rowIndex, columnIndex, e) { // private onDestroy : function(){ if(this.rendered){ - var c = this.body; - c.removeAllListeners(); - c.update(''); Ext.destroy(this.view, this.loadMask); }else if(this.store && this.store.autoDestroy){ this.store.destroy(); @@ -640,21 +779,31 @@ function(grid, rowIndex, columnIndex, e) { // private processEvent : function(name, e){ this.fireEvent(name, e); - var t = e.getTarget(); - var v = this.view; - var header = v.findHeaderIndex(t); + var t = e.getTarget(), + v = this.view, + header = v.findHeaderIndex(t); + if(header !== false){ this.fireEvent('header' + name, this, header, e); }else{ - var row = v.findRowIndex(t); - var cell = v.findCellIndex(t); + var row = v.findRowIndex(t), + cell, + body; if(row !== false){ this.fireEvent('row' + name, this, row, e); + cell = v.findCellIndex(t); + body = v.findRowBody(t); if(cell !== false){ this.fireEvent('cell' + name, this, row, cell, e); } + if(body){ + this.fireEvent('rowbody' + name, this, row, e); + } + }else{ + this.fireEvent('container' + name, this, e); } } + this.view.processEvent(name, e); }, // private @@ -679,8 +828,11 @@ function(grid, rowIndex, columnIndex, e) { // private walkCells : function(row, col, step, fn, scope){ - var cm = this.colModel, clen = cm.getColumnCount(); - var ds = this.store, rlen = ds.getCount(), first = true; + var cm = this.colModel, + clen = cm.getColumnCount(), + ds = this.store, + rlen = ds.getCount(), + first = true; if(step < 0){ if(col < 0){ row--; @@ -897,8 +1049,8 @@ function(grid, rowIndex, columnIndex, e) { * @event add * @hide */ - /** - * @event afterLayout + /** + * @event afterlayout * @hide */ /** @@ -971,6 +1123,6 @@ function(grid, rowIndex, columnIndex, e) { * @hide */ }); -Ext.reg('grid', Ext.grid.GridPanel);