/*
* Ext JS Library 3.3.0
*/
/**
* @class Ext.grid.GridPanel
* @extends Ext.Panel
*
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:
* * {Ext.data.Store Store} : The Model holding the data records (rows)
*
* * {Ext.grid.ColumnModel Column model} : Column makeup
*
* * {Ext.grid.GridView View} : Encapsulates(简述) the user interface
*
* * {Ext.grid.AbstractSelectionModel selection model} : Selection behavior //Abstract:抽象的
*
*
Example usage:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
{Ext.data.Store#autoDestroy_autoDestroy}: true,
{Ext.data.Store#reader_reader}: reader,
{Ext.data.Store#data data}: xg.dummyData //dummy:模拟的
}),
{#colModel}: new Ext.grid.ColumnModel({
{Ext.grid.ColumnModel#defaults_defaults}: {
width: 120,
sortable: true
},
{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'
}
],
}),
{viewConfig}: {
{Ext.grid.GridView#forceFit_forceFit}: true,
//Return CSS class to apply to rows depending upon(在...上面) data values
{Ext.grid.GridView#getRowClass_getRowClass}: function(record, index) {
var c = record.{Ext.data.Record#get_get}('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling', //Horizontal:水平的
iconCls: 'icon-grid'
});
*
* Notes:
* * 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.
* * A grid requires 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
* {Ext.BoxComponent#height_height} and {Ext.BoxComponent#width_width}
* configuration options or implicitly set by using the grid as a child item of a
* {Ext.Container_Container} which will have a {Ext.Container#layout_layout manager}
* provide the sizing of its child items (for example the Container of the Grid may specify
* {Ext.Container#layout_layout}:'fit').
* * To access the data in a Grid, it is necessary to use the data model encapsulated(被包围的)
* by the Store. See the cellclick event for more details.
* @constructor
* @param {Object} config(配置项)_The config object
* @xtype grid
*/
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
/**
* @cfg {String} autoExpandColumn(自动扩展)
*
The {Ext.grid.Column#id id} of a {Ext.grid.Column column} in
* this grid that should expand to fill unused space. This value specified(规定的) here can not
* be 0.
*
Note: If the Grid's {Ext.grid.GridView_view} is configured with
* {Ext.grid.GridView#forceFit_forceFit}=true the autoExpandColumn
* is ignored(忽略). See {Ext.grid.Column}.{Ext.grid.Column#width width}
* for additional details.
*
See {autoExpandMax} and {autoExpandMin} also.
*/
autoExpandColumn : false,
/**
* @cfg {Number} autoExpandMax_The maximum width the {autoExpandColumn}
* can have (if enabled). Defaults to 1000.
*/
autoExpandMax : 1000,
/**
* @cfg {Number} autoExpandMin_The minimum width the {autoExpandColumn}
* can have (if enabled). Defaults to 50.
*/
autoExpandMin : 50,
/**
* @cfg {Boolean} columnLines true to add css for column separation lines.
* Default is false.
*/
columnLines : false,
/**
* @cfg {Object} cm_Shorthand(简称) for {colModel}.
*/
/**
* @cfg {Object} colModel_The {Ext.grid.ColumnModel} to use when rendering the grid (required).
*/
/**
* @cfg {Array} column_An array of {Ext.grid.Column columns} to auto create a
* {Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
* {colModel} configuration property.
*/
/**
* @cfg {String} ddGroup_The DD group this GridPanel belongs to(属于). Defaults to 'GridDD' if not specified.
*/
/**
* @cfg {String} ddText
* Configures the text in the drag proxy. Defaults to:
* ddText : '{0} selected row{1}'
* {0} is replaced with the number of selected rows.
*/
ddText : '{0} selected row{1}',
/**
* @cfg {Boolean} deferRowRender //defer:延时
* Defaults to true to enable deferred row rendering.
*
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.
*/
deferRowRender : true,
/**
* @cfg {Boolean} disableSelection
true to disable selections in the grid. Defaults to false.
*
Ignored if a {selModel SelectionModel} is specified.
*/
/**
* @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
*/
/**
* @cfg {Boolean} enableColumnHide
* Defaults to true to enable {Ext.grid.Column#hidden hiding of columns}
* with the {enableHdMenu header menu}.
*/
enableColumnHide : true,
/**
* @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false
* to turn off column reordering via drag drop.
*/
enableColumnMove : true,
/**
* @cfg {Boolean} enableDragDrop
Enables dragging of the selected rows of the GridPanel. Defaults to false.
*
Setting this to true causes this GridPanel's {getView GridView} to
* create an instance of {Ext.grid.GridDragZone}. Note: this is available(有效的) only after
* the Grid has been rendered as the GridView's {Ext.grid.GridView#dragZone dragZone}
* property.
*
A cooperating(共同操作的) {Ext.dd.DropZone DropZone} must be created who's implementations of
* {Ext.dd.DropZone#onNodeEnter onNodeEnter}, {Ext.dd.DropZone#onNodeOver onNodeOver},
* {Ext.dd.DropZone#onNodeOut onNodeOut} and {Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
* to process the {Ext.grid.GridDragZone#getDragData data} which is provided.
*/
enableDragDrop : false,
/**
* @cfg {Boolean} enableHdMenu Defaults to true 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 false.
*/
/**
* @cfg {Object} loadMask An {Ext.LoadMask} config or true to mask the grid while
* loading. Defaults to false.
*/
loadMask : false,
/**
* @cfg {Number} maxHeight Sets the maximum height of the grid
* - ignored if autoHeight is not on. //如果不是autoHeight忽略。
*/
/**
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
*/
minColumnWidth : 25,
/**
* @cfg {Object} sm_Shorthand for {selModel}.
*/
/**
* @cfg {Object} selModel_Any subclass of {Ext.grid.AbstractSelectionModel} that will provide //Abstract:抽象的
* the selection model for the grid (defaults to {Ext.grid.RowSelectionModel} if not specified).
*/
/**
* @cfg {Ext.data.Store} store The {Ext.data.Store} the grid should use as its data source (required).
*/
/**
* @cfg {Boolean} stripeRows true to stripe the rows. Default is false. //stripe:条纹
*
This causes the CSS class x-grid3-row-alt to be added to alternate rows of //alternate:间隔的
* 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 background-color style using the '!important'
* modifier, or which uses a CSS selector of higher specificity(特征).
*/
stripeRows : false,
/**
* @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true
* for GridPanel, but false for EditorGridPanel. //track:标出
*/
trackMouseOver : true,
/**
* @cfg {Array} stateEvents
* An array of events that, when fired, should trigger(引发) this component to save its state.
* Defaults to:
* 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 {Ext.Component#stateful} for an explanation(说明) of saving and restoring
* Component state.
*/
stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
/**
* @cfg {Object} view The {Ext.grid.GridView} used by the grid. This can be set
* before a call to {Ext.Component#render render()}.
*/
view : null,
/**
* @cfg {Array} bubbleEvents //bubbled:冒泡
*
An array of events that, when fired, should be bubbled to any parent container.
* See {Ext.util.Observable#enableBubble}.
* 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 {Ext.grid.GridView} can be specified(规定) here. This option
* is ignored if view 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. Only applies for grids with a {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 {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
* Fires when a cell is clicked.
* The data for the cell is drawn from the {Ext.data.Record Record}
* for this row. To access the data in the listener function use the
* following technique(技巧):
*
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);
}
* @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. Only applies for grids with a {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 {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 {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 {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
* @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. Only applies for grids with a {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 {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
* @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 groupchange
* Fires when the grid's grouping changes (only applies for grids with a {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.
* @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,
store = this.store,
s,
c,
oldIndex;
if(cs){
for(var i = 0, len = cs.length; i < len; i++){
s = cs[i];
c = cm.getColumnById(s.id);
if(c){
cm.setState(s.id, {
hidden: s.hidden,
width: s.width
});
oldIndex = cm.getIndexById(s.id);
if(oldIndex != i){
cm.moveColumn(oldIndex, i);
}
}
}
}
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;
delete o.sort;
Ext.grid.GridPanel.superclass.applyState.call(this, o);
},
getState : function(){
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,
width: c.width
};
if(c.hidden){
o.columns[i].hidden = true;
}
}
if(store){
ss = store.getSortState();
if(ss){
o.sort = ss;
}
if(store.getGroupState){
gs = store.getGroupState();
if(gs){
o.group = gs;
}
}
}
return o;
},
// private
afterRender : function(){
Ext.grid.GridPanel.superclass.afterRender.call(this);
var v = this.view;
this.on('bodyresize', v.layout, v);
v.layout(true);
if(this.deferRowRender){
if (!this.deferRowRenderTask){
this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
}
this.deferRowRenderTask.delay(10);
}else{
v.afterRender();
}
this.viewReady = true;
},
/**
*
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.
*
Be aware(意识到) that upon reconfiguring a GridPanel, certain(当然) existing settings may become
* invalidated(失效). For example the configured {autoExpandColumn} may no longer exist in the
* new ColumnModel. Also, an existing {Ext.PagingToolbar PagingToolbar} will still be bound
* to the old Store, and will need rebinding. Any {plugins} might also need reconfiguring
* with the new data.
* @param {Ext.data.Store} store_The new {Ext.data.Store} object
* @param {Ext.grid.ColumnModel} colModel_The new {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.deferRowRenderTask && this.deferRowRenderTask.cancel){
this.deferRowRenderTask.cancel();
}
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.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;
},
/**
* 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 {selModel}
* configuration option. If no selection model was configured, this will create
* and return a {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 //monitor:检查
* @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);
* Ext JS Library 3.3.0
*/
/**
* @class Ext.grid.GridPanel
* @extends Ext.Panel
*
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:
* * {Ext.data.Store Store} : The Model holding the data records (rows)
*
* * {Ext.grid.ColumnModel Column model} : Column makeup
*
* * {Ext.grid.GridView View} : Encapsulates(简述) the user interface
*
* * {Ext.grid.AbstractSelectionModel selection model} : Selection behavior //Abstract:抽象的
*
*
Example usage:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
{Ext.data.Store#autoDestroy_autoDestroy}: true,
{Ext.data.Store#reader_reader}: reader,
{Ext.data.Store#data data}: xg.dummyData //dummy:模拟的
}),
{#colModel}: new Ext.grid.ColumnModel({
{Ext.grid.ColumnModel#defaults_defaults}: {
width: 120,
sortable: true
},
{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'
}
],
}),
{viewConfig}: {
{Ext.grid.GridView#forceFit_forceFit}: true,
//Return CSS class to apply to rows depending upon(在...上面) data values
{Ext.grid.GridView#getRowClass_getRowClass}: function(record, index) {
var c = record.{Ext.data.Record#get_get}('change');
if (c < 0) {
return 'price-fall';
} else if (c > 0) {
return 'price-rise';
}
}
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling', //Horizontal:水平的
iconCls: 'icon-grid'
});
*
* Notes:
* * 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.
* * A grid requires 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
* {Ext.BoxComponent#height_height} and {Ext.BoxComponent#width_width}
* configuration options or implicitly set by using the grid as a child item of a
* {Ext.Container_Container} which will have a {Ext.Container#layout_layout manager}
* provide the sizing of its child items (for example the Container of the Grid may specify
* {Ext.Container#layout_layout}:'fit').
* * To access the data in a Grid, it is necessary to use the data model encapsulated(被包围的)
* by the Store. See the cellclick event for more details.
* @constructor
* @param {Object} config(配置项)_The config object
* @xtype grid
*/
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
/**
* @cfg {String} autoExpandColumn(自动扩展)
*
The {Ext.grid.Column#id id} of a {Ext.grid.Column column} in
* this grid that should expand to fill unused space. This value specified(规定的) here can not
* be 0.
*
Note: If the Grid's {Ext.grid.GridView_view} is configured with
* {Ext.grid.GridView#forceFit_forceFit}=true the autoExpandColumn
* is ignored(忽略). See {Ext.grid.Column}.{Ext.grid.Column#width width}
* for additional details.
*
See {autoExpandMax} and {autoExpandMin} also.
*/
autoExpandColumn : false,
/**
* @cfg {Number} autoExpandMax_The maximum width the {autoExpandColumn}
* can have (if enabled). Defaults to 1000.
*/
autoExpandMax : 1000,
/**
* @cfg {Number} autoExpandMin_The minimum width the {autoExpandColumn}
* can have (if enabled). Defaults to 50.
*/
autoExpandMin : 50,
/**
* @cfg {Boolean} columnLines true to add css for column separation lines.
* Default is false.
*/
columnLines : false,
/**
* @cfg {Object} cm_Shorthand(简称) for {colModel}.
*/
/**
* @cfg {Object} colModel_The {Ext.grid.ColumnModel} to use when rendering the grid (required).
*/
/**
* @cfg {Array} column_An array of {Ext.grid.Column columns} to auto create a
* {Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
* {colModel} configuration property.
*/
/**
* @cfg {String} ddGroup_The DD group this GridPanel belongs to(属于). Defaults to 'GridDD' if not specified.
*/
/**
* @cfg {String} ddText
* Configures the text in the drag proxy. Defaults to:
* ddText : '{0} selected row{1}'
* {0} is replaced with the number of selected rows.
*/
ddText : '{0} selected row{1}',
/**
* @cfg {Boolean} deferRowRender //defer:延时
* Defaults to true to enable deferred row rendering.
*
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.
*/
deferRowRender : true,
/**
* @cfg {Boolean} disableSelection
true to disable selections in the grid. Defaults to false.
*
Ignored if a {selModel SelectionModel} is specified.
*/
/**
* @cfg {Boolean} enableColumnResize false to turn off column resizing for the whole grid. Defaults to true.
*/
/**
* @cfg {Boolean} enableColumnHide
* Defaults to true to enable {Ext.grid.Column#hidden hiding of columns}
* with the {enableHdMenu header menu}.
*/
enableColumnHide : true,
/**
* @cfg {Boolean} enableColumnMove Defaults to true to enable drag and drop reorder of columns. false
* to turn off column reordering via drag drop.
*/
enableColumnMove : true,
/**
* @cfg {Boolean} enableDragDrop
Enables dragging of the selected rows of the GridPanel. Defaults to false.
*
Setting this to true causes this GridPanel's {getView GridView} to
* create an instance of {Ext.grid.GridDragZone}. Note: this is available(有效的) only after
* the Grid has been rendered as the GridView's {Ext.grid.GridView#dragZone dragZone}
* property.
*
A cooperating(共同操作的) {Ext.dd.DropZone DropZone} must be created who's implementations of
* {Ext.dd.DropZone#onNodeEnter onNodeEnter}, {Ext.dd.DropZone#onNodeOver onNodeOver},
* {Ext.dd.DropZone#onNodeOut onNodeOut} and {Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
* to process the {Ext.grid.GridDragZone#getDragData data} which is provided.
*/
enableDragDrop : false,
/**
* @cfg {Boolean} enableHdMenu Defaults to true 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 false.
*/
/**
* @cfg {Object} loadMask An {Ext.LoadMask} config or true to mask the grid while
* loading. Defaults to false.
*/
loadMask : false,
/**
* @cfg {Number} maxHeight Sets the maximum height of the grid
* - ignored if autoHeight is not on. //如果不是autoHeight忽略。
*/
/**
* @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to 25.
*/
minColumnWidth : 25,
/**
* @cfg {Object} sm_Shorthand for {selModel}.
*/
/**
* @cfg {Object} selModel_Any subclass of {Ext.grid.AbstractSelectionModel} that will provide //Abstract:抽象的
* the selection model for the grid (defaults to {Ext.grid.RowSelectionModel} if not specified).
*/
/**
* @cfg {Ext.data.Store} store The {Ext.data.Store} the grid should use as its data source (required).
*/
/**
* @cfg {Boolean} stripeRows true to stripe the rows. Default is false. //stripe:条纹
*
This causes the CSS class x-grid3-row-alt to be added to alternate rows of //alternate:间隔的
* 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 background-color style using the '!important'
* modifier, or which uses a CSS selector of higher specificity(特征).
*/
stripeRows : false,
/**
* @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true
* for GridPanel, but false for EditorGridPanel. //track:标出
*/
trackMouseOver : true,
/**
* @cfg {Array} stateEvents
* An array of events that, when fired, should trigger(引发) this component to save its state.
* Defaults to:
* 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 {Ext.Component#stateful} for an explanation(说明) of saving and restoring
* Component state.
*/
stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
/**
* @cfg {Object} view The {Ext.grid.GridView} used by the grid. This can be set
* before a call to {Ext.Component#render render()}.
*/
view : null,
/**
* @cfg {Array} bubbleEvents //bubbled:冒泡
*
An array of events that, when fired, should be bubbled to any parent container.
* See {Ext.util.Observable#enableBubble}.
* 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 {Ext.grid.GridView} can be specified(规定) here. This option
* is ignored if view 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. Only applies for grids with a {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 {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
* Fires when a cell is clicked.
* The data for the cell is drawn from the {Ext.data.Record Record}
* for this row. To access the data in the listener function use the
* following technique(技巧):
*
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);
}
* @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. Only applies for grids with a {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 {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 {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 {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
* @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. Only applies for grids with a {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 {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
* @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 groupchange
* Fires when the grid's grouping changes (only applies for grids with a {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.
* @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,
store = this.store,
s,
c,
oldIndex;
if(cs){
for(var i = 0, len = cs.length; i < len; i++){
s = cs[i];
c = cm.getColumnById(s.id);
if(c){
cm.setState(s.id, {
hidden: s.hidden,
width: s.width
});
oldIndex = cm.getIndexById(s.id);
if(oldIndex != i){
cm.moveColumn(oldIndex, i);
}
}
}
}
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;
delete o.sort;
Ext.grid.GridPanel.superclass.applyState.call(this, o);
},
getState : function(){
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,
width: c.width
};
if(c.hidden){
o.columns[i].hidden = true;
}
}
if(store){
ss = store.getSortState();
if(ss){
o.sort = ss;
}
if(store.getGroupState){
gs = store.getGroupState();
if(gs){
o.group = gs;
}
}
}
return o;
},
// private
afterRender : function(){
Ext.grid.GridPanel.superclass.afterRender.call(this);
var v = this.view;
this.on('bodyresize', v.layout, v);
v.layout(true);
if(this.deferRowRender){
if (!this.deferRowRenderTask){
this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
}
this.deferRowRenderTask.delay(10);
}else{
v.afterRender();
}
this.viewReady = true;
},
/**
*
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.
*
Be aware(意识到) that upon reconfiguring a GridPanel, certain(当然) existing settings may become
* invalidated(失效). For example the configured {autoExpandColumn} may no longer exist in the
* new ColumnModel. Also, an existing {Ext.PagingToolbar PagingToolbar} will still be bound
* to the old Store, and will need rebinding. Any {plugins} might also need reconfiguring
* with the new data.
* @param {Ext.data.Store} store_The new {Ext.data.Store} object
* @param {Ext.grid.ColumnModel} colModel_The new {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.deferRowRenderTask && this.deferRowRenderTask.cancel){
this.deferRowRenderTask.cancel();
}
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.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;
},
/**
* 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 {selModel}
* configuration option. If no selection model was configured, this will create
* and return a {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 //monitor:检查
* @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);