3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
4 <title>The source code</title>
\r
5 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
\r
6 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
\r
8 <body onload="prettyPrint();">
\r
9 <pre class="prettyprint lang-js"><div id="cls-Ext.grid.GridPanel"></div>/**
\r
10 * @class Ext.grid.GridPanel
\r
11 * @extends Ext.Panel
\r
12 * <p>This class represents the primary interface of a component based grid control to represent data
\r
13 * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
\r
14 * <div class="mdetail-params"><ul>
\r
15 * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
\r
16 * <div class="sub-desc"></div></li>
\r
17 * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
\r
18 * <div class="sub-desc"></div></li>
\r
19 * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
\r
20 * <div class="sub-desc"></div></li>
\r
21 * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
\r
22 * <div class="sub-desc"></div></li>
\r
24 * <p>Example usage:</p>
\r
26 var grid = new Ext.grid.GridPanel({
\r
27 {@link #store}: new {@link Ext.data.Store}({
\r
28 {@link Ext.data.Store#autoDestroy autoDestroy}: true,
\r
29 {@link Ext.data.Store#reader reader}: reader,
\r
30 {@link Ext.data.Store#data data}: xg.dummyData
\r
32 {@link #colModel}: new {@link Ext.grid.ColumnModel}({
\r
33 {@link Ext.grid.ColumnModel#defaults defaults}: {
\r
37 {@link Ext.grid.ColumnModel#columns columns}: [
\r
38 {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
\r
39 {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
\r
40 {header: 'Change', dataIndex: 'change'},
\r
41 {header: '% Change', dataIndex: 'pctChange'},
\r
42 // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
\r
44 header: 'Last Updated', width: 135, dataIndex: 'lastChange',
\r
45 xtype: 'datecolumn', format: 'M d, Y'
\r
49 {@link #viewConfig}: {
\r
50 {@link Ext.grid.GridView#forceFit forceFit}: true,
\r
52 // Return CSS class to apply to rows depending upon data values
\r
53 {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
\r
54 var c = record.{@link Ext.data.Record#get get}('change');
\r
56 return 'price-fall';
\r
58 return 'price-rise';
\r
62 {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
\r
66 title: 'Framed with Row Selection and Horizontal Scrolling',
\r
67 iconCls: 'icon-grid'
\r
70 * <p><b><u>Notes:</u></b></p>
\r
71 * <div class="mdetail-params"><ul>
\r
72 * <li>Although this class inherits many configuration options from base classes, some of them
\r
73 * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
\r
74 * have no effect.</li>
\r
75 * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
\r
76 * scroll its rows. These dimensions can either be set explicitly through the
\r
77 * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
\r
78 * configuration options or implicitly set by using the grid as a child item of a
\r
79 * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
\r
80 * provide the sizing of its child items (for example the Container of the Grid may specify
\r
81 * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
\r
82 * <li>To access the data in a Grid, it is necessary to use the data model encapsulated
\r
83 * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
\r
86 * @param {Object} config The config object
\r
89 Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
\r
90 <div id="cfg-Ext.grid.GridPanel-autoExpandColumn"></div>/**
\r
91 * @cfg {String} autoExpandColumn
\r
92 * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
\r
93 * this grid that should expand to fill unused space. This value specified here can not
\r
94 * be <tt>0</tt>.</p>
\r
95 * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
\r
96 * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
\r
97 * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
\r
98 * for additional details.</p>
\r
99 * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
\r
101 autoExpandColumn : false,
\r
102 <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
\r
103 * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
\r
104 * can have (if enabled). Defaults to <tt>1000</tt>.
\r
106 autoExpandMax : 1000,
\r
107 <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
\r
108 * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
\r
109 * can have (if enabled). Defaults to <tt>50</tt>.
\r
111 autoExpandMin : 50,
\r
112 <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
\r
113 * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
\r
114 * Default is <tt>false</tt>.
\r
116 columnLines : false,
\r
117 <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
\r
118 * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
\r
120 <div id="cfg-Ext.grid.GridPanel-colModel"></div>/**
\r
121 * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
\r
123 <div id="cfg-Ext.grid.GridPanel-columns"></div>/**
\r
124 * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
\r
125 * {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the
\r
126 * <tt>{@link #colModel}</tt> configuration property.
\r
128 <div id="cfg-Ext.grid.GridPanel-ddGroup"></div>/**
\r
129 * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
\r
131 <div id="cfg-Ext.grid.GridPanel-ddText"></div>/**
\r
132 * @cfg {String} ddText
\r
133 * Configures the text in the drag proxy. Defaults to:
\r
135 * ddText : '{0} selected row{1}'
\r
137 * <tt>{0}</tt> is replaced with the number of selected rows.
\r
139 ddText : '{0} selected row{1}',
\r
140 <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
\r
141 * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
\r
142 * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
\r
143 * structure deferred so that layouts with GridPanels appear more quickly.</p>
\r
145 deferRowRender : true,
\r
146 <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
\r
147 * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
\r
148 * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
\r
150 <div id="cfg-Ext.grid.GridPanel-enableColumnResize"></div>/**
\r
151 * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
\r
153 <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**
\r
154 * @cfg {Boolean} enableColumnHide
\r
155 * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}
\r
156 * with the {@link #enableHdMenu header menu}.
\r
158 enableColumnHide : true,
\r
159 <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
\r
160 * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
\r
161 * to turn off column reordering via drag drop.
\r
163 enableColumnMove : true,
\r
164 <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
\r
165 * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
\r
166 * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
\r
167 * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>
\r
168 * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>
\r
170 * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
\r
171 * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
\r
172 * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
\r
173 * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
\r
175 enableDragDrop : false,
\r
176 <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
\r
177 * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
\r
179 enableHdMenu : true,
\r
180 <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
\r
181 * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
\r
183 <div id="cfg-Ext.grid.GridPanel-loadMask"></div>/**
\r
184 * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
\r
185 * loading. Defaults to <code>false</code>.
\r
188 <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
\r
189 * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
\r
191 <div id="cfg-Ext.grid.GridPanel-minColumnWidth"></div>/**
\r
192 * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
\r
194 minColumnWidth : 25,
\r
195 <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
\r
196 * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
\r
198 <div id="cfg-Ext.grid.GridPanel-selModel"></div>/**
\r
199 * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
\r
200 * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
\r
202 <div id="cfg-Ext.grid.GridPanel-store"></div>/**
\r
203 * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
\r
205 <div id="cfg-Ext.grid.GridPanel-stripeRows"></div>/**
\r
206 * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.
\r
207 * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of
\r
208 * the grid. A default CSS rule is provided which sets a background colour, but you can override this
\r
209 * with a rule which either overrides the <b>background-color</b> style using the '!important'
\r
210 * modifier, or which uses a CSS selector of higher specificity.</p>
\r
212 stripeRows : false,
\r
213 <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
\r
214 * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
\r
215 * for GridPanel, but <tt>false</tt> for EditorGridPanel.
\r
217 trackMouseOver : true,
\r
218 <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
\r
219 * @cfg {Array} stateEvents
\r
220 * An array of events that, when fired, should trigger this component to save its state.
\r
221 * Defaults to:<pre><code>
\r
222 * stateEvents: ['columnmove', 'columnresize', 'sortchange']
\r
224 * <p>These can be any types of events supported by this component, including browser or
\r
225 * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>
\r
226 * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring
\r
227 * Component state.</p>
\r
229 stateEvents : ['columnmove', 'columnresize', 'sortchange'],
\r
230 <div id="cfg-Ext.grid.GridPanel-view"></div>/**
\r
231 * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
\r
232 * before a call to {@link Ext.Component#render render()}.
\r
236 <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**
\r
237 * @cfg {Array} bubbleEvents
\r
238 * <p>An array of events that, when fired, should be bubbled to any parent container.
\r
239 * See {@link Ext.util.Observable#enableBubble}.
\r
240 * Defaults to <tt>[]</tt>.
\r
244 <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**
\r
245 * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of
\r
246 * the config options available for {@link Ext.grid.GridView} can be specified here. This option
\r
247 * is ignored if <tt>{@link #view}</tt> is specified.
\r
256 initComponent : function(){
\r
257 Ext.grid.GridPanel.superclass.initComponent.call(this);
\r
259 if(this.columnLines){
\r
260 this.cls = (this.cls || '') + ' x-grid-with-col-lines';
\r
262 // override any provided value since it isn't valid
\r
263 // and is causing too many bug reports ;)
\r
264 this.autoScroll = false;
\r
265 this.autoWidth = false;
\r
267 if(Ext.isArray(this.columns)){
\r
268 this.colModel = new Ext.grid.ColumnModel(this.columns);
\r
269 delete this.columns;
\r
272 // check and correct shorthanded configs
\r
274 this.store = this.ds;
\r
278 this.colModel = this.cm;
\r
282 this.selModel = this.sm;
\r
285 this.store = Ext.StoreMgr.lookup(this.store);
\r
289 <div id="event-Ext.grid.GridPanel-click"></div>/**
\r
291 * The raw click event for the entire grid.
\r
292 * @param {Ext.EventObject} e
\r
295 <div id="event-Ext.grid.GridPanel-dblclick"></div>/**
\r
297 * The raw dblclick event for the entire grid.
\r
298 * @param {Ext.EventObject} e
\r
301 <div id="event-Ext.grid.GridPanel-contextmenu"></div>/**
\r
302 * @event contextmenu
\r
303 * The raw contextmenu event for the entire grid.
\r
304 * @param {Ext.EventObject} e
\r
307 <div id="event-Ext.grid.GridPanel-mousedown"></div>/**
\r
309 * The raw mousedown event for the entire grid.
\r
310 * @param {Ext.EventObject} e
\r
313 <div id="event-Ext.grid.GridPanel-mouseup"></div>/**
\r
315 * The raw mouseup event for the entire grid.
\r
316 * @param {Ext.EventObject} e
\r
319 <div id="event-Ext.grid.GridPanel-mouseover"></div>/**
\r
321 * The raw mouseover event for the entire grid.
\r
322 * @param {Ext.EventObject} e
\r
325 <div id="event-Ext.grid.GridPanel-mouseout"></div>/**
\r
327 * The raw mouseout event for the entire grid.
\r
328 * @param {Ext.EventObject} e
\r
331 <div id="event-Ext.grid.GridPanel-keypress"></div>/**
\r
333 * The raw keypress event for the entire grid.
\r
334 * @param {Ext.EventObject} e
\r
337 <div id="event-Ext.grid.GridPanel-keydown"></div>/**
\r
339 * The raw keydown event for the entire grid.
\r
340 * @param {Ext.EventObject} e
\r
345 <div id="event-Ext.grid.GridPanel-cellmousedown"></div>/**
\r
346 * @event cellmousedown
\r
347 * Fires before a cell is clicked
\r
348 * @param {Grid} this
\r
349 * @param {Number} rowIndex
\r
350 * @param {Number} columnIndex
\r
351 * @param {Ext.EventObject} e
\r
354 <div id="event-Ext.grid.GridPanel-rowmousedown"></div>/**
\r
355 * @event rowmousedown
\r
356 * Fires before a row is clicked
\r
357 * @param {Grid} this
\r
358 * @param {Number} rowIndex
\r
359 * @param {Ext.EventObject} e
\r
362 <div id="event-Ext.grid.GridPanel-headermousedown"></div>/**
\r
363 * @event headermousedown
\r
364 * Fires before a header is clicked
\r
365 * @param {Grid} this
\r
366 * @param {Number} columnIndex
\r
367 * @param {Ext.EventObject} e
\r
371 <div id="event-Ext.grid.GridPanel-groupmousedown"></div>/**
\r
372 * @event groupmousedown
\r
373 * Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
\r
374 * @param {Grid} this
\r
375 * @param {String} groupField
\r
376 * @param {String} groupValue
\r
377 * @param {Ext.EventObject} e
\r
381 <div id="event-Ext.grid.GridPanel-rowbodymousedown"></div>/**
\r
382 * @event rowbodymousedown
\r
383 * Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
\r
384 * @param {Grid} this
\r
385 * @param {Number} rowIndex
\r
386 * @param {Ext.EventObject} e
\r
388 'rowbodymousedown',
\r
390 <div id="event-Ext.grid.GridPanel-containermousedown"></div>/**
\r
391 * @event containermousedown
\r
392 * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
\r
393 * @param {Grid} this
\r
394 * @param {Ext.EventObject} e
\r
396 'containermousedown',
\r
398 <div id="event-Ext.grid.GridPanel-cellclick"></div>/**
\r
400 * Fires when a cell is clicked.
\r
401 * The data for the cell is drawn from the {@link Ext.data.Record Record}
\r
402 * for this row. To access the data in the listener function use the
\r
403 * following technique:
\r
405 function(grid, rowIndex, columnIndex, e) {
\r
406 var record = grid.getStore().getAt(rowIndex); // Get the Record
\r
407 var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
\r
408 var data = record.get(fieldName);
\r
411 * @param {Grid} this
\r
412 * @param {Number} rowIndex
\r
413 * @param {Number} columnIndex
\r
414 * @param {Ext.EventObject} e
\r
417 <div id="event-Ext.grid.GridPanel-celldblclick"></div>/**
\r
418 * @event celldblclick
\r
419 * Fires when a cell is double clicked
\r
420 * @param {Grid} this
\r
421 * @param {Number} rowIndex
\r
422 * @param {Number} columnIndex
\r
423 * @param {Ext.EventObject} e
\r
426 <div id="event-Ext.grid.GridPanel-rowclick"></div>/**
\r
428 * Fires when a row is clicked
\r
429 * @param {Grid} this
\r
430 * @param {Number} rowIndex
\r
431 * @param {Ext.EventObject} e
\r
434 <div id="event-Ext.grid.GridPanel-rowdblclick"></div>/**
\r
435 * @event rowdblclick
\r
436 * Fires when a row is double clicked
\r
437 * @param {Grid} this
\r
438 * @param {Number} rowIndex
\r
439 * @param {Ext.EventObject} e
\r
442 <div id="event-Ext.grid.GridPanel-headerclick"></div>/**
\r
443 * @event headerclick
\r
444 * Fires when a header is clicked
\r
445 * @param {Grid} this
\r
446 * @param {Number} columnIndex
\r
447 * @param {Ext.EventObject} e
\r
450 <div id="event-Ext.grid.GridPanel-headerdblclick"></div>/**
\r
451 * @event headerdblclick
\r
452 * Fires when a header cell is double clicked
\r
453 * @param {Grid} this
\r
454 * @param {Number} columnIndex
\r
455 * @param {Ext.EventObject} e
\r
458 <div id="event-Ext.grid.GridPanel-groupclick"></div>/**
\r
459 * @event groupclick
\r
460 * Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
\r
461 * @param {Grid} this
\r
462 * @param {String} groupField
\r
463 * @param {String} groupValue
\r
464 * @param {Ext.EventObject} e
\r
467 <div id="event-Ext.grid.GridPanel-groupdblclick"></div>/**
\r
468 * @event groupdblclick
\r
469 * Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
\r
470 * @param {Grid} this
\r
471 * @param {String} groupField
\r
472 * @param {String} groupValue
\r
473 * @param {Ext.EventObject} e
\r
476 <div id="event-Ext.grid.GridPanel-containerclick"></div>/**
\r
477 * @event containerclick
\r
478 * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
\r
479 * @param {Grid} this
\r
480 * @param {Ext.EventObject} e
\r
483 <div id="event-Ext.grid.GridPanel-containerdblclick"></div>/**
\r
484 * @event containerdblclick
\r
485 * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
\r
486 * @param {Grid} this
\r
487 * @param {Ext.EventObject} e
\r
489 'containerdblclick',
\r
491 <div id="event-Ext.grid.GridPanel-rowbodyclick"></div>/**
\r
492 * @event rowbodyclick
\r
493 * Fires when the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
\r
494 * @param {Grid} this
\r
495 * @param {Number} rowIndex
\r
496 * @param {Ext.EventObject} e
\r
499 <div id="event-Ext.grid.GridPanel-rowbodydblclick"></div>/**
\r
500 * @event rowbodydblclick
\r
501 * Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
\r
502 * @param {Grid} this
\r
503 * @param {Number} rowIndex
\r
504 * @param {Ext.EventObject} e
\r
508 <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**
\r
509 * @event rowcontextmenu
\r
510 * Fires when a row is right clicked
\r
511 * @param {Grid} this
\r
512 * @param {Number} rowIndex
\r
513 * @param {Ext.EventObject} e
\r
516 <div id="event-Ext.grid.GridPanel-cellcontextmenu"></div>/**
\r
517 * @event cellcontextmenu
\r
518 * Fires when a cell is right clicked
\r
519 * @param {Grid} this
\r
520 * @param {Number} rowIndex
\r
521 * @param {Number} cellIndex
\r
522 * @param {Ext.EventObject} e
\r
525 <div id="event-Ext.grid.GridPanel-headercontextmenu"></div>/**
\r
526 * @event headercontextmenu
\r
527 * Fires when a header is right clicked
\r
528 * @param {Grid} this
\r
529 * @param {Number} columnIndex
\r
530 * @param {Ext.EventObject} e
\r
532 'headercontextmenu',
\r
533 <div id="event-Ext.grid.GridPanel-groupcontextmenu"></div>/**
\r
534 * @event groupcontextmenu
\r
535 * Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
\r
536 * @param {Grid} this
\r
537 * @param {String} groupField
\r
538 * @param {String} groupValue
\r
539 * @param {Ext.EventObject} e
\r
541 'groupcontextmenu',
\r
542 <div id="event-Ext.grid.GridPanel-containercontextmenu"></div>/**
\r
543 * @event containercontextmenu
\r
544 * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
\r
545 * @param {Grid} this
\r
546 * @param {Ext.EventObject} e
\r
548 'containercontextmenu',
\r
549 <div id="event-Ext.grid.GridPanel-rowbodycontextmenu"></div>/**
\r
550 * @event rowbodycontextmenu
\r
551 * Fires when the row body is right clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
\r
552 * @param {Grid} this
\r
553 * @param {Number} rowIndex
\r
554 * @param {Ext.EventObject} e
\r
556 'rowbodycontextmenu',
\r
557 <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**
\r
558 * @event bodyscroll
\r
559 * Fires when the body element is scrolled
\r
560 * @param {Number} scrollLeft
\r
561 * @param {Number} scrollTop
\r
564 <div id="event-Ext.grid.GridPanel-columnresize"></div>/**
\r
565 * @event columnresize
\r
566 * Fires when the user resizes a column
\r
567 * @param {Number} columnIndex
\r
568 * @param {Number} newSize
\r
571 <div id="event-Ext.grid.GridPanel-columnmove"></div>/**
\r
572 * @event columnmove
\r
573 * Fires when the user moves a column
\r
574 * @param {Number} oldIndex
\r
575 * @param {Number} newIndex
\r
578 <div id="event-Ext.grid.GridPanel-sortchange"></div>/**
\r
579 * @event sortchange
\r
580 * Fires when the grid's store sort changes
\r
581 * @param {Grid} this
\r
582 * @param {Object} sortInfo An object with the keys field and direction
\r
585 <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**
\r
586 * @event reconfigure
\r
587 * Fires when the grid is reconfigured with a new store and/or column model.
\r
588 * @param {Grid} this
\r
589 * @param {Ext.data.Store} store The new store
\r
590 * @param {Ext.grid.ColumnModel} colModel The new column model
\r
593 <div id="event-Ext.grid.GridPanel-viewready"></div>/**
\r
595 * Fires when the grid view is available (use this for selecting a default row).
\r
596 * @param {Grid} this
\r
603 onRender : function(ct, position){
\r
604 Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
\r
606 var c = this.getGridEl();
\r
608 this.el.addClass('x-grid-panel');
\r
612 mousedown: this.onMouseDown,
\r
613 click: this.onClick,
\r
614 dblclick: this.onDblClick,
\r
615 contextmenu: this.onContextMenu
\r
618 this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
\r
620 var view = this.getView();
\r
623 this.getSelectionModel().init(this);
\r
627 initEvents : function(){
\r
628 Ext.grid.GridPanel.superclass.initEvents.call(this);
\r
631 this.loadMask = new Ext.LoadMask(this.bwrap,
\r
632 Ext.apply({store:this.store}, this.loadMask));
\r
636 initStateEvents : function(){
\r
637 Ext.grid.GridPanel.superclass.initStateEvents.call(this);
\r
638 this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
\r
641 applyState : function(state){
\r
642 var cm = this.colModel,
\r
643 cs = state.columns;
\r
645 for(var i = 0, len = cs.length; i < len; i++){
\r
647 c = cm.getColumnById(s.id);
\r
649 c.hidden = s.hidden;
\r
651 var oldIndex = cm.getIndexById(s.id);
\r
653 cm.moveColumn(oldIndex, i);
\r
658 if(state.sort && this.store){
\r
659 this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);
\r
661 var o = Ext.apply({}, state);
\r
664 Ext.grid.GridPanel.superclass.applyState.call(this, o);
\r
667 getState : function(){
\r
668 var o = {columns: []};
\r
669 for(var i = 0, c; (c = this.colModel.config[i]); i++){
\r
675 o.columns[i].hidden = true;
\r
679 var ss = this.store.getSortState();
\r
688 afterRender : function(){
\r
689 Ext.grid.GridPanel.superclass.afterRender.call(this);
\r
691 this.on('bodyresize', v.layout, v);
\r
693 if(this.deferRowRender){
\r
694 v.afterRender.defer(10, this.view);
\r
698 this.viewReady = true;
\r
701 <div id="method-Ext.grid.GridPanel-reconfigure"></div>/**
\r
702 * <p>Reconfigures the grid to use a different Store and Column Model
\r
703 * and fires the 'reconfigure' event. The View will be bound to the new
\r
704 * objects and refreshed.</p>
\r
705 * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become
\r
706 * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
\r
707 * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
\r
708 * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
\r
709 * with the new data.</p>
\r
710 * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
\r
711 * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
\r
713 reconfigure : function(store, colModel){
\r
714 var rendered = this.rendered;
\r
717 this.loadMask.destroy();
\r
718 this.loadMask = new Ext.LoadMask(this.bwrap,
\r
719 Ext.apply({}, {store:store}, this.initialConfig.loadMask));
\r
723 this.view.initData(store, colModel);
\r
725 this.store = store;
\r
726 this.colModel = colModel;
\r
728 this.view.refresh(true);
\r
730 this.fireEvent('reconfigure', this, store, colModel);
\r
734 onDestroy : function(){
\r
736 Ext.destroy(this.view, this.loadMask);
\r
737 }else if(this.store && this.store.autoDestroy){
\r
738 this.store.destroy();
\r
740 Ext.destroy(this.colModel, this.selModel);
\r
741 this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
\r
742 Ext.grid.GridPanel.superclass.onDestroy.call(this);
\r
746 processEvent : function(name, e){
\r
747 this.fireEvent(name, e);
\r
748 var t = e.getTarget(),
\r
750 header = v.findHeaderIndex(t);
\r
752 if(header !== false){
\r
753 this.fireEvent('header' + name, this, header, e);
\r
755 var row = v.findRowIndex(t),
\r
759 this.fireEvent('row' + name, this, row, e);
\r
760 cell = v.findCellIndex(t);
\r
761 body = v.findRowBody(t);
\r
762 if(cell !== false){
\r
763 this.fireEvent('cell' + name, this, row, cell, e);
\r
766 this.fireEvent('rowbody' + name, this, row, e);
\r
769 this.fireEvent('container' + name, this, e);
\r
772 this.view.processEvent(name, e);
\r
776 onClick : function(e){
\r
777 this.processEvent('click', e);
\r
781 onMouseDown : function(e){
\r
782 this.processEvent('mousedown', e);
\r
786 onContextMenu : function(e, t){
\r
787 this.processEvent('contextmenu', e);
\r
791 onDblClick : function(e){
\r
792 this.processEvent('dblclick', e);
\r
796 walkCells : function(row, col, step, fn, scope){
\r
797 var cm = this.colModel,
\r
798 clen = cm.getColumnCount(),
\r
800 rlen = ds.getCount(),
\r
813 if(fn.call(scope || this, row, col, cm) === true){
\r
831 if(fn.call(scope || this, row, col, cm) === true){
\r
843 onResize : function(){
\r
844 Ext.grid.GridPanel.superclass.onResize.apply(this, arguments);
\r
845 if(this.viewReady){
\r
846 this.view.layout();
\r
850 <div id="method-Ext.grid.GridPanel-getGridEl"></div>/**
\r
851 * Returns the grid's underlying element.
\r
852 * @return {Element} The element
\r
854 getGridEl : function(){
\r
858 // private for compatibility, overridden by editor grid
\r
859 stopEditing : Ext.emptyFn,
\r
861 <div id="method-Ext.grid.GridPanel-getSelectionModel"></div>/**
\r
862 * Returns the grid's selection model configured by the <code>{@link #selModel}</code>
\r
863 * configuration option. If no selection model was configured, this will create
\r
864 * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
\r
865 * @return {SelectionModel}
\r
867 getSelectionModel : function(){
\r
868 if(!this.selModel){
\r
869 this.selModel = new Ext.grid.RowSelectionModel(
\r
870 this.disableSelection ? {selectRow: Ext.emptyFn} : null);
\r
872 return this.selModel;
\r
875 <div id="method-Ext.grid.GridPanel-getStore"></div>/**
\r
876 * Returns the grid's data store.
\r
877 * @return {Ext.data.Store} The store
\r
879 getStore : function(){
\r
883 <div id="method-Ext.grid.GridPanel-getColumnModel"></div>/**
\r
884 * Returns the grid's ColumnModel.
\r
885 * @return {Ext.grid.ColumnModel} The column model
\r
887 getColumnModel : function(){
\r
888 return this.colModel;
\r
891 <div id="method-Ext.grid.GridPanel-getView"></div>/**
\r
892 * Returns the grid's GridView object.
\r
893 * @return {Ext.grid.GridView} The grid view
\r
895 getView : function(){
\r
897 this.view = new Ext.grid.GridView(this.viewConfig);
\r
901 <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
\r
902 * Called to get grid's drag proxy text, by default returns this.ddText.
\r
903 * @return {String} The text
\r
905 getDragDropText : function(){
\r
906 var count = this.selModel.getCount();
\r
907 return String.format(this.ddText, count, count == 1 ? '' : 's');
\r
910 <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/**
\r
911 * @cfg {String/Number} activeItem
\r
914 <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/**
\r
915 * @cfg {Boolean} autoDestroy
\r
918 <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/**
\r
919 * @cfg {Object/String/Function} autoLoad
\r
922 <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/**
\r
923 * @cfg {Boolean} autoWidth
\r
926 <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/**
\r
927 * @cfg {Boolean/Number} bufferResize
\r
930 <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/**
\r
931 * @cfg {String} defaultType
\r
934 <div id="cfg-Ext.grid.GridPanel-defaults"></div>/**
\r
935 * @cfg {Object} defaults
\r
938 <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/**
\r
939 * @cfg {Boolean} hideBorders
\r
942 <div id="cfg-Ext.grid.GridPanel-items"></div>/**
\r
943 * @cfg {Mixed} items
\r
946 <div id="cfg-Ext.grid.GridPanel-layout"></div>/**
\r
947 * @cfg {String} layout
\r
950 <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/**
\r
951 * @cfg {Object} layoutConfig
\r
954 <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/**
\r
955 * @cfg {Boolean} monitorResize
\r
958 <div id="prop-Ext.grid.GridPanel-items"></div>/**
\r
962 <div id="method-Ext.grid.GridPanel-add"></div>/**
\r
966 <div id="method-Ext.grid.GridPanel-cascade"></div>/**
\r
970 <div id="method-Ext.grid.GridPanel-doLayout"></div>/**
\r
971 * @method doLayout
\r
974 <div id="method-Ext.grid.GridPanel-find"></div>/**
\r
978 <div id="method-Ext.grid.GridPanel-findBy"></div>/**
\r
982 <div id="method-Ext.grid.GridPanel-findById"></div>/**
\r
983 * @method findById
\r
986 <div id="method-Ext.grid.GridPanel-findByType"></div>/**
\r
987 * @method findByType
\r
990 <div id="method-Ext.grid.GridPanel-getComponent"></div>/**
\r
991 * @method getComponent
\r
994 <div id="method-Ext.grid.GridPanel-getLayout"></div>/**
\r
995 * @method getLayout
\r
998 <div id="method-Ext.grid.GridPanel-getUpdater"></div>/**
\r
999 * @method getUpdater
\r
1002 <div id="method-Ext.grid.GridPanel-insert"></div>/**
\r
1006 <div id="method-Ext.grid.GridPanel-load"></div>/**
\r
1010 <div id="method-Ext.grid.GridPanel-remove"></div>/**
\r
1014 <div id="event-Ext.grid.GridPanel-add"></div>/**
\r
1018 <div id="event-Ext.grid.GridPanel-afterlayout"></div>/**
\r
1019 * @event afterlayout
\r
1022 <div id="event-Ext.grid.GridPanel-beforeadd"></div>/**
\r
1023 * @event beforeadd
\r
1026 <div id="event-Ext.grid.GridPanel-beforeremove"></div>/**
\r
1027 * @event beforeremove
\r
1030 <div id="event-Ext.grid.GridPanel-remove"></div>/**
\r
1037 <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**
\r
1038 * @cfg {String} allowDomMove @hide
\r
1040 <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**
\r
1041 * @cfg {String} autoEl @hide
\r
1043 <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**
\r
1044 * @cfg {String} applyTo @hide
\r
1046 <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**
\r
1047 * @cfg {String} autoScroll @hide
\r
1049 <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**
\r
1050 * @cfg {String} bodyBorder @hide
\r
1052 <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**
\r
1053 * @cfg {String} bodyStyle @hide
\r
1055 <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**
\r
1056 * @cfg {String} contentEl @hide
\r
1058 <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**
\r
1059 * @cfg {String} disabledClass @hide
\r
1061 <div id="cfg-Ext.grid.GridPanel-elements"></div>/**
\r
1062 * @cfg {String} elements @hide
\r
1064 <div id="cfg-Ext.grid.GridPanel-html"></div>/**
\r
1065 * @cfg {String} html @hide
\r
1067 <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**
\r
1068 * @cfg {Boolean} preventBodyReset
\r
1071 <div id="prop-Ext.grid.GridPanel-disabled"></div>/**
\r
1072 * @property disabled
\r
1075 <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**
\r
1076 * @method applyToMarkup
\r
1079 <div id="method-Ext.grid.GridPanel-enable"></div>/**
\r
1083 <div id="method-Ext.grid.GridPanel-disable"></div>/**
\r
1087 <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**
\r
1088 * @method setDisabled
\r
1092 Ext.reg('grid', Ext.grid.GridPanel);</pre>
\r