/*!
|
* Ext JS Library 3.1.0
|
* Copyright(c) 2006-2009 Ext JS, LLC
|
* licensing@extjs.com
|
* http://www.extjs.com/license
|
*/
|
/**
|
* @class Ext.grid.GridPanel
|
* @extends Ext.Panel
|
* <p>This class represents the primary interface of a component based grid control to represent data
|
* in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
|
* <div class="mdetail-params"><ul>
|
* <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
|
* <div class="sub-desc"></div></li>
|
* <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
|
* <div class="sub-desc"></div></li>
|
* <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
|
* <div class="sub-desc"></div></li>
|
* <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
|
* <div class="sub-desc"></div></li>
|
* </ul></div>
|
* <p>Example usage:</p>
|
* <pre><code>
|
var grid = new Ext.grid.GridPanel({
|
{@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 #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,
|
|
// Return CSS class to apply to rows depending upon data values
|
{@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
|
var c = record.{@link Ext.data.Record#get get}('change');
|
if (c < 0) {
|
return 'price-fall';
|
} else if (c > 0) {
|
return 'price-rise';
|
}
|
}
|
},
|
{@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
|
width: 600,
|
height: 300,
|
frame: true,
|
title: 'Framed with Row Selection and Horizontal Scrolling',
|
iconCls: 'icon-grid'
|
});
|
* </code></pre>
|
* <p><b><u>Notes:</u></b></p>
|
* <div class="mdetail-params"><ul>
|
* <li>Although this class inherits many configuration options from base classes, some of them
|
* (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
|
* have no effect.</li>
|
* <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
|
* scroll its rows. These dimensions can either be set explicitly through the
|
* <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
|
* configuration options or implicitly set by using the grid as a child item of a
|
* {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
|
* provide the sizing of its child items (for example the Container of the Grid may specify
|
* <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
|
* <li>To access the data in a Grid, it is necessary to use the data model encapsulated
|
* by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
|
* </ul></div>
|
* @constructor
|
* @param {Object} config The config object
|
* @xtype grid
|
*/
|
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
|
/**
|
* @cfg {String} autoExpandColumn
|
* <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
|
* this grid that should expand to fill unused space. This value specified here can not
|
* be <tt>0</tt>.</p>
|
* <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
|
* <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
|
* is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
|
* for additional details.</p>
|
* <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
|
*/
|
autoExpandColumn : false,
|
/**
|
* @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
|
* can have (if enabled). Defaults to <tt>1000</tt>.
|
*/
|
autoExpandMax : 1000,
|
/**
|
* @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
|
* can have (if enabled). Defaults to <tt>50</tt>.
|
*/
|
autoExpandMin : 50,
|
/**
|
* @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
|
* Default is <tt>false</tt>.
|
*/
|
columnLines : false,
|
/**
|
* @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
|
*/
|
/**
|
* @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
|
*/
|
/**
|
* @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
|
* {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
|
* <tt>{@link #colModel}</tt> configuration property.
|
*/
|
/**
|
* @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
|
*/
|
/**
|
* @cfg {String} ddText
|
* Configures the text in the drag proxy. Defaults to:
|
* <pre><code>
|
* ddText : '{0} selected row{1}'
|
* </code></pre>
|
* <tt>{0}</tt> is replaced with the number of selected rows.
|
*/
|
ddText : '{0} selected row{1}',
|
/**
|
* @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
|
* <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
|
* structure deferred so that layouts with GridPanels appear more quickly.</p>
|
*/
|
deferRowRender : true,
|
/**
|
* @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
|
* <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
|
*/
|
/**
|
* @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
|
*/
|
/**
|
* @cfg {Boolean} enableColumnHide
|
* Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}
|
* with the {@link #enableHdMenu header menu}.
|
*/
|
enableColumnHide : true,
|
/**
|
* @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
|
* to turn off column reordering via drag drop.
|
*/
|
enableColumnMove : true,
|
/**
|
* @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
|
* <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
|
* create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>
|
* the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>
|
* property.</p>
|
* <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
|
* {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
|
* {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
|
* to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
|
*/
|
enableDragDrop : false,
|
/**
|
* @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
|
*/
|
enableHdMenu : true,
|
/**
|
* @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
|
*/
|
/**
|
* @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
|
* loading. Defaults to <code>false</code>.
|
*/
|
loadMask : false,
|
/**
|
* @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
|
*/
|
/**
|
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
|
*/
|
minColumnWidth : 25,
|
/**
|
* @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
|
*/
|
/**
|
* @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
|
* the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
|
*/
|
/**
|
* @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
|
*/
|
/**
|
* @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.
|
* <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of
|
* the grid. A default CSS rule is provided which sets a background colour, but you can override this
|
* with a rule which either overrides the <b>background-color</b> style using the '!important'
|
* modifier, or which uses a CSS selector of higher specificity.</p>
|
*/
|
stripeRows : false,
|
/**
|
* @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
|
* for GridPanel, but <tt>false</tt> for EditorGridPanel.
|
*/
|
trackMouseOver : true,
|
/**
|
* @cfg {Array} stateEvents
|
* An array of events that, when fired, should trigger this component to save its state.
|
* Defaults to:<pre><code>
|
* stateEvents: ['columnmove', 'columnresize', 'sortchange']
|
* </code></pre>
|
* <p>These can be any types of events supported by this component, including browser or
|
* custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>
|
* <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring
|
* Component state.</p>
|
*/
|
stateEvents : ['columnmove', 'columnresize', 'sortchange'],
|
/**
|
* @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()}.
|
*/
|
view : null,
|
|
/**
|
* @cfg {Array} bubbleEvents
|
* <p>An array of events that, when fired, should be bubbled to any parent container.
|
* See {@link Ext.util.Observable#enableBubble}.
|
* Defaults to <tt>[]</tt>.
|
*/
|
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
|
* is ignored if <tt>{@link #view}</tt> is specified.
|
*/
|
|
// private
|
rendered : false,
|
// private
|
viewReady : false,
|
|
// private
|
initComponent : function(){
|
Ext.grid.GridPanel.superclass.initComponent.call(this);
|
|
if(this.columnLines){
|
this.cls = (this.cls || '') + ' x-grid-with-col-lines';
|
}
|
// override any provided value since it isn't valid
|
// and is causing too many bug reports ;)
|
this.autoScroll = false;
|
this.autoWidth = false;
|
|
if(Ext.isArray(this.columns)){
|
this.colModel = new Ext.grid.ColumnModel(this.columns);
|
delete this.columns;
|
}
|
|
// check and correct shorthanded configs
|
if(this.ds){
|
this.store = this.ds;
|
delete this.ds;
|
}
|
if(this.cm){
|
this.colModel = this.cm;
|
delete this.cm;
|
}
|
if(this.sm){
|
this.selModel = this.sm;
|
delete this.sm;
|
}
|
this.store = Ext.StoreMgr.lookup(this.store);
|
|
this.addEvents(
|
// raw events
|
/**
|
* @event click
|
* The raw click event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'click',
|
/**
|
* @event dblclick
|
* The raw dblclick event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'dblclick',
|
/**
|
* @event contextmenu
|
* The raw contextmenu event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'contextmenu',
|
/**
|
* @event mousedown
|
* The raw mousedown event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'mousedown',
|
/**
|
* @event mouseup
|
* The raw mouseup event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'mouseup',
|
/**
|
* @event mouseover
|
* The raw mouseover event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'mouseover',
|
/**
|
* @event mouseout
|
* The raw mouseout event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'mouseout',
|
/**
|
* @event keypress
|
* The raw keypress event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'keypress',
|
/**
|
* @event keydown
|
* The raw keydown event for the entire grid.
|
* @param {Ext.EventObject} e
|
*/
|
'keydown',
|
|
// custom events
|
/**
|
* @event cellmousedown
|
* Fires before a cell is clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'cellmousedown',
|
/**
|
* @event rowmousedown
|
* Fires before a row is clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowmousedown',
|
/**
|
* @event headermousedown
|
* Fires before a header is clicked
|
* @param {Grid} this
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'headermousedown',
|
|
/**
|
* @event groupmousedown
|
* Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
|
* @param {Grid} this
|
* @param {String} groupField
|
* @param {String} groupValue
|
* @param {Ext.EventObject} e
|
*/
|
'groupmousedown',
|
|
/**
|
* @event rowbodymousedown
|
* Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
|
* @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
|
* Fires when a cell is clicked.
|
* The data for the cell is drawn from the {@link Ext.data.Record Record}
|
* for this row. To access the data in the listener function use the
|
* following technique:
|
* <pre><code>
|
function(grid, rowIndex, columnIndex, e) {
|
var record = grid.getStore().getAt(rowIndex); // Get the Record
|
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
|
var data = record.get(fieldName);
|
}
|
</code></pre>
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'cellclick',
|
/**
|
* @event celldblclick
|
* Fires when a cell is double clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'celldblclick',
|
/**
|
* @event rowclick
|
* Fires when a row is clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowclick',
|
/**
|
* @event rowdblclick
|
* Fires when a row is double clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowdblclick',
|
/**
|
* @event headerclick
|
* Fires when a header is clicked
|
* @param {Grid} this
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'headerclick',
|
/**
|
* @event headerdblclick
|
* Fires when a header cell is double clicked
|
* @param {Grid} this
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'headerdblclick',
|
/**
|
* @event groupclick
|
* Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
|
* @param {Grid} this
|
* @param {String} groupField
|
* @param {String} groupValue
|
* @param {Ext.EventObject} e
|
*/
|
'groupclick',
|
/**
|
* @event groupdblclick
|
* Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
|
* @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. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowbodyclick',
|
/**
|
* @event rowbodydblclick
|
* Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowbodydblclick',
|
|
/**
|
* @event rowcontextmenu
|
* Fires when a row is right clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowcontextmenu',
|
/**
|
* @event cellcontextmenu
|
* Fires when a cell is right clicked
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Number} cellIndex
|
* @param {Ext.EventObject} e
|
*/
|
'cellcontextmenu',
|
/**
|
* @event headercontextmenu
|
* Fires when a header is right clicked
|
* @param {Grid} this
|
* @param {Number} columnIndex
|
* @param {Ext.EventObject} e
|
*/
|
'headercontextmenu',
|
/**
|
* @event groupcontextmenu
|
* Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
|
* @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. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
|
* @param {Grid} this
|
* @param {Number} rowIndex
|
* @param {Ext.EventObject} e
|
*/
|
'rowbodycontextmenu',
|
/**
|
* @event bodyscroll
|
* Fires when the body element is scrolled
|
* @param {Number} scrollLeft
|
* @param {Number} scrollTop
|
*/
|
'bodyscroll',
|
/**
|
* @event columnresize
|
* Fires when the user resizes a column
|
* @param {Number} columnIndex
|
* @param {Number} newSize
|
*/
|
'columnresize',
|
/**
|
* @event columnmove
|
* Fires when the user moves a column
|
* @param {Number} oldIndex
|
* @param {Number} newIndex
|
*/
|
'columnmove',
|
/**
|
* @event sortchange
|
* Fires when the grid's store sort changes
|
* @param {Grid} this
|
* @param {Object} sortInfo An object with the keys field and direction
|
*/
|
'sortchange',
|
/**
|
* @event reconfigure
|
* Fires when the grid is reconfigured with a new store and/or column model.
|
* @param {Grid} this
|
* @param {Ext.data.Store} store The new store
|
* @param {Ext.grid.ColumnModel} colModel The new column model
|
*/
|
'reconfigure',
|
/**
|
* @event viewready
|
* Fires when the grid view is available (use this for selecting a default row).
|
* @param {Grid} this
|
*/
|
'viewready'
|
);
|
},
|
|
// private
|
onRender : function(ct, position){
|
Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
|
|
var c = this.getGridEl();
|
|
this.el.addClass('x-grid-panel');
|
|
this.mon(c, {
|
scope: this,
|
mousedown: this.onMouseDown,
|
click: this.onClick,
|
dblclick: this.onDblClick,
|
contextmenu: this.onContextMenu
|
});
|
|
this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
|
|
var view = this.getView();
|
view.init(this);
|
view.render();
|
this.getSelectionModel().init(this);
|
},
|
|
// private
|
initEvents : function(){
|
Ext.grid.GridPanel.superclass.initEvents.call(this);
|
|
if(this.loadMask){
|
this.loadMask = new Ext.LoadMask(this.bwrap,
|
Ext.apply({store:this.store}, this.loadMask));
|
}
|
},
|
|
initStateEvents : function(){
|
Ext.grid.GridPanel.superclass.initStateEvents.call(this);
|
this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
|
},
|
|
applyState : function(state){
|
var cm = this.colModel,
|
cs = state.columns;
|
if(cs){
|
for(var i = 0, len = cs.length; i < len; i++){
|
var s = cs[i],
|
c = cm.getColumnById(s.id);
|
if(c){
|
c.hidden = s.hidden;
|
c.width = s.width;
|
var 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);
|
}
|
var o = Ext.apply({}, state);
|
delete o.columns;
|
delete o.sort;
|
Ext.grid.GridPanel.superclass.applyState.call(this, o);
|
},
|
|
getState : function(){
|
var o = {columns: []};
|
for(var i = 0, c; (c = this.colModel.config[i]); i++){
|
o.columns[i] = {
|
id: c.id,
|
width: c.width
|
};
|
if(c.hidden){
|
o.columns[i].hidden = true;
|
}
|
}
|
if(this.store){
|
var ss = this.store.getSortState();
|
if(ss){
|
o.sort = ss;
|
}
|
}
|
return o;
|
},
|
|
// private
|
afterRender : function(){
|
Ext.grid.GridPanel.superclass.afterRender.call(this);
|
var v = this.view;
|
this.on('bodyresize', v.layout, v);
|
v.layout();
|
if(this.deferRowRender){
|
v.afterRender.defer(10, this.view);
|
}else{
|
v.afterRender();
|
}
|
this.viewReady = true;
|
},
|
|
/**
|
* <p>Reconfigures the grid to use a different Store and Column Model
|
* and fires the 'reconfigure' event. The View will be bound to the new
|
* objects and refreshed.</p>
|
* <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become
|
* invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
|
* new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
|
* to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
|
* with the new data.</p>
|
* @param {Ext.data.Store} store The new {@link Ext.data.Store} object
|
* @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
|
*/
|
reconfigure : function(store, colModel){
|
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.store = store;
|
this.colModel = colModel;
|
if(rendered){
|
this.view.refresh(true);
|
}
|
this.fireEvent('reconfigure', this, store, colModel);
|
},
|
|
// private
|
onDestroy : function(){
|
if(this.rendered){
|
Ext.destroy(this.view, this.loadMask);
|
}else if(this.store && this.store.autoDestroy){
|
this.store.destroy();
|
}
|
Ext.destroy(this.colModel, this.selModel);
|
this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
|
Ext.grid.GridPanel.superclass.onDestroy.call(this);
|
},
|
|
// private
|
processEvent : function(name, e){
|
this.fireEvent(name, e);
|
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),
|
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
|
onClick : function(e){
|
this.processEvent('click', e);
|
},
|
|
// private
|
onMouseDown : function(e){
|
this.processEvent('mousedown', e);
|
},
|
|
// private
|
onContextMenu : function(e, t){
|
this.processEvent('contextmenu', e);
|
},
|
|
// private
|
onDblClick : function(e){
|
this.processEvent('dblclick', e);
|
},
|
|
// private
|
walkCells : function(row, col, step, fn, scope){
|
var cm = this.colModel,
|
clen = cm.getColumnCount(),
|
ds = this.store,
|
rlen = ds.getCount(),
|
first = true;
|
if(step < 0){
|
if(col < 0){
|
row--;
|
first = false;
|
}
|
while(row >= 0){
|
if(!first){
|
col = clen-1;
|
}
|
first = false;
|
while(col >= 0){
|
if(fn.call(scope || this, row, col, cm) === true){
|
return [row, col];
|
}
|
col--;
|
}
|
row--;
|
}
|
} else {
|
if(col >= clen){
|
row++;
|
first = false;
|
}
|
while(row < rlen){
|
if(!first){
|
col = 0;
|
}
|
first = false;
|
while(col < clen){
|
if(fn.call(scope || this, row, col, cm) === true){
|
return [row, col];
|
}
|
col++;
|
}
|
row++;
|
}
|
}
|
return null;
|
},
|
|
// private
|
onResize : function(){
|
Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
|
if(this.viewReady){
|
this.view.layout();
|
}
|
},
|
|
/**
|
* Returns the grid's underlying element.
|
* @return {Element} The element
|
*/
|
getGridEl : function(){
|
return this.body;
|
},
|
|
// private for compatibility, overridden by editor grid
|
stopEditing : Ext.emptyFn,
|
|
/**
|
* Returns the grid's selection model configured by the <code>{@link #selModel}</code>
|
* configuration option. If no selection model was configured, this will create
|
* and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
|
* @return {SelectionModel}
|
*/
|
getSelectionModel : function(){
|
if(!this.selModel){
|
this.selModel = new Ext.grid.RowSelectionModel(
|
this.disableSelection ? {selectRow: Ext.emptyFn} : null);
|
}
|
return this.selModel;
|
},
|
|
/**
|
* Returns the grid's data store.
|
* @return {Ext.data.Store} The store
|
*/
|
getStore : function(){
|
return this.store;
|
},
|
|
/**
|
* Returns the grid's ColumnModel.
|
* @return {Ext.grid.ColumnModel} The column model
|
*/
|
getColumnModel : function(){
|
return this.colModel;
|
},
|
|
/**
|
* Returns the grid's GridView object.
|
* @return {Ext.grid.GridView} The grid view
|
*/
|
getView : function(){
|
if(!this.view){
|
this.view = new Ext.grid.GridView(this.viewConfig);
|
}
|
return this.view;
|
},
|
/**
|
* Called to get grid's drag proxy text, by default returns this.ddText.
|
* @return {String} The text
|
*/
|
getDragDropText : function(){
|
var count = this.selModel.getCount();
|
return String.format(this.ddText, count, count == 1 ? '' : 's');
|
}
|
|
/**
|
* @cfg {String/Number} activeItem
|
* @hide
|
*/
|
/**
|
* @cfg {Boolean} autoDestroy
|
* @hide
|
*/
|
/**
|
* @cfg {Object/String/Function} autoLoad
|
* @hide
|
*/
|
/**
|
* @cfg {Boolean} autoWidth
|
* @hide
|
*/
|
/**
|
* @cfg {Boolean/Number} bufferResize
|
* @hide
|
*/
|
/**
|
* @cfg {String} defaultType
|
* @hide
|
*/
|
/**
|
* @cfg {Object} defaults
|
* @hide
|
*/
|
/**
|
* @cfg {Boolean} hideBorders
|
* @hide
|
*/
|
/**
|
* @cfg {Mixed} items
|
* @hide
|
*/
|
/**
|
* @cfg {String} layout
|
* @hide
|
*/
|
/**
|
* @cfg {Object} layoutConfig
|
* @hide
|
*/
|
/**
|
* @cfg {Boolean} monitorResize
|
* @hide
|
*/
|
/**
|
* @property items
|
* @hide
|
*/
|
/**
|
* @method add
|
* @hide
|
*/
|
/**
|
* @method cascade
|
* @hide
|
*/
|
/**
|
* @method doLayout
|
* @hide
|
*/
|
/**
|
* @method find
|
* @hide
|
*/
|
/**
|
* @method findBy
|
* @hide
|
*/
|
/**
|
* @method findById
|
* @hide
|
*/
|
/**
|
* @method findByType
|
* @hide
|
*/
|
/**
|
* @method getComponent
|
* @hide
|
*/
|
/**
|
* @method getLayout
|
* @hide
|
*/
|
/**
|
* @method getUpdater
|
* @hide
|
*/
|
/**
|
* @method insert
|
* @hide
|
*/
|
/**
|
* @method load
|
* @hide
|
*/
|
/**
|
* @method remove
|
* @hide
|
*/
|
/**
|
* @event add
|
* @hide
|
*/
|
/**
|
* @event afterlayout
|
* @hide
|
*/
|
/**
|
* @event beforeadd
|
* @hide
|
*/
|
/**
|
* @event beforeremove
|
* @hide
|
*/
|
/**
|
* @event remove
|
* @hide
|
*/
|
|
|
|
/**
|
* @cfg {String} allowDomMove @hide
|
*/
|
/**
|
* @cfg {String} autoEl @hide
|
*/
|
/**
|
* @cfg {String} applyTo @hide
|
*/
|
/**
|
* @cfg {String} autoScroll @hide
|
*/
|
/**
|
* @cfg {String} bodyBorder @hide
|
*/
|
/**
|
* @cfg {String} bodyStyle @hide
|
*/
|
/**
|
* @cfg {String} contentEl @hide
|
*/
|
/**
|
* @cfg {String} disabledClass @hide
|
*/
|
/**
|
* @cfg {String} elements @hide
|
*/
|
/**
|
* @cfg {String} html @hide
|
*/
|
/**
|
* @cfg {Boolean} preventBodyReset
|
* @hide
|
*/
|
/**
|
* @property disabled
|
* @hide
|
*/
|
/**
|
* @method applyToMarkup
|
* @hide
|
*/
|
/**
|
* @method enable
|
* @hide
|
*/
|
/**
|
* @method disable
|
* @hide
|
*/
|
/**
|
* @method setDisabled
|
* @hide
|
*/
|
});
|
Ext.reg('grid', Ext.grid.GridPanel);
|
