📄 gridpanel.js
字号:
/*
* Ext JS Library 3.0 Pre-alpha
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://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 #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 #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} 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 Defaults to <tt>true</tt> to enable deferred row rendering.
*/
deferRowRender : true,
/**
* @cfg {Boolean} disableSelection <tt>true</tt> to disable selections in the grid (defaults to <tt>false</tt>).
* - ignored if a {@link #selModel SelectionModel} is specified
*/
/**
* @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 hiding of columns with the header context 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>Defaults to <tt>true</tt> enabling dragging of the selected
* rows of the GridPanel.</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 false).
*/
/**
* @cfg {Object} loadMask An {@link 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 <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 {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 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 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 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"
);
},
// private
onRender : function(ct, position){
Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
var c = this.body;
this.el.addClass('x-grid-panel');
var view = this.getView();
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -