Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / docs / source / GridPanel.html
1 <html>
2 <head>
3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
4   <title>The source code</title>
5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 </head>
8 <body  onload="prettyPrint();">
9     <pre class="prettyprint lang-js">/*!
10  * Ext JS Library 3.2.1
11  * Copyright(c) 2006-2010 Ext JS, Inc.
12  * licensing@extjs.com
13  * http://www.extjs.com/license
14  */
15 <div id="cls-Ext.grid.GridPanel"></div>/**
16  * @class Ext.grid.GridPanel
17  * @extends Ext.Panel
18  * <p>This class represents the primary interface of a component based grid control to represent data
19  * in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
20  * <div class="mdetail-params"><ul>
21  * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
22  * <div class="sub-desc"></div></li>
23  * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
24  * <div class="sub-desc"></div></li>
25  * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
26  * <div class="sub-desc"></div></li>
27  * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
28  * <div class="sub-desc"></div></li>
29  * </ul></div>
30  * <p>Example usage:</p>
31  * <pre><code>
32 var grid = new Ext.grid.GridPanel({
33     {@link #store}: new {@link Ext.data.Store}({
34         {@link Ext.data.Store#autoDestroy autoDestroy}: true,
35         {@link Ext.data.Store#reader reader}: reader,
36         {@link Ext.data.Store#data data}: xg.dummyData
37     }),
38     {@link #colModel}: new {@link Ext.grid.ColumnModel}({
39         {@link Ext.grid.ColumnModel#defaults defaults}: {
40             width: 120,
41             sortable: true
42         },
43         {@link Ext.grid.ColumnModel#columns columns}: [
44             {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
45             {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
46             {header: 'Change', dataIndex: 'change'},
47             {header: '% Change', dataIndex: 'pctChange'},
48             // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
49             {
50                 header: 'Last Updated', width: 135, dataIndex: 'lastChange',
51                 xtype: 'datecolumn', format: 'M d, Y'
52             }
53         ],
54     }),
55     {@link #viewConfig}: {
56         {@link Ext.grid.GridView#forceFit forceFit}: true,
57
58 //      Return CSS class to apply to rows depending upon data values
59         {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
60             var c = record.{@link Ext.data.Record#get get}('change');
61             if (c < 0) {
62                 return 'price-fall';
63             } else if (c > 0) {
64                 return 'price-rise';
65             }
66         }
67     },
68     {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
69     width: 600,
70     height: 300,
71     frame: true,
72     title: 'Framed with Row Selection and Horizontal Scrolling',
73     iconCls: 'icon-grid'
74 });
75  * </code></pre>
76  * <p><b><u>Notes:</u></b></p>
77  * <div class="mdetail-params"><ul>
78  * <li>Although this class inherits many configuration options from base classes, some of them
79  * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
80  * have no effect.</li>
81  * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
82  * scroll its rows. These dimensions can either be set explicitly through the
83  * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
84  * configuration options or implicitly set by using the grid as a child item of a
85  * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
86  * provide the sizing of its child items (for example the Container of the Grid may specify
87  * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
88  * <li>To access the data in a Grid, it is necessary to use the data model encapsulated
89  * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
90  * </ul></div>
91  * @constructor
92  * @param {Object} config The config object
93  * @xtype grid
94  */
95 Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
96     <div id="cfg-Ext.grid.GridPanel-autoExpandColumn"></div>/**
97      * @cfg {String} autoExpandColumn
98      * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
99      * this grid that should expand to fill unused space. This value specified here can not
100      * be <tt>0</tt>.</p>
101      * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
102      * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
103      * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
104      * for additional details.</p>
105      * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
106      */
107     autoExpandColumn : false,
108     <div id="cfg-Ext.grid.GridPanel-autoExpandMax"></div>/**
109      * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt>
110      * can have (if enabled). Defaults to <tt>1000</tt>.
111      */
112     autoExpandMax : 1000,
113     <div id="cfg-Ext.grid.GridPanel-autoExpandMin"></div>/**
114      * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt>
115      * can have (if enabled). Defaults to <tt>50</tt>.
116      */
117     autoExpandMin : 50,
118     <div id="cfg-Ext.grid.GridPanel-columnLines"></div>/**
119      * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines.
120      * Default is <tt>false</tt>.
121      */
122     columnLines : false,
123     <div id="cfg-Ext.grid.GridPanel-cm"></div>/**
124      * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>.
125      */
126     <div id="cfg-Ext.grid.GridPanel-colModel"></div>/**
127      * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required).
128      */
129     <div id="cfg-Ext.grid.GridPanel-columns"></div>/**
130      * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a
131      * {@link Ext.grid.ColumnModel}.  The ColumnModel may be explicitly created via the
132      * <tt>{@link #colModel}</tt> configuration property.
133      */
134     <div id="cfg-Ext.grid.GridPanel-ddGroup"></div>/**
135      * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified.
136      */
137     <div id="cfg-Ext.grid.GridPanel-ddText"></div>/**
138      * @cfg {String} ddText
139      * Configures the text in the drag proxy.  Defaults to:
140      * <pre><code>
141      * ddText : '{0} selected row{1}'
142      * </code></pre>
143      * <tt>{0}</tt> is replaced with the number of selected rows.
144      */
145     ddText : '{0} selected row{1}',
146     <div id="cfg-Ext.grid.GridPanel-deferRowRender"></div>/**
147      * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p>
148      * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row
149      * structure deferred so that layouts with GridPanels appear more quickly.</p>
150      */
151     deferRowRender : true,
152     <div id="cfg-Ext.grid.GridPanel-disableSelection"></div>/**
153      * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p>
154      * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p>
155      */
156     <div id="cfg-Ext.grid.GridPanel-enableColumnResize"></div>/**
157      * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>.
158      */
159     <div id="cfg-Ext.grid.GridPanel-enableColumnHide"></div>/**
160      * @cfg {Boolean} enableColumnHide
161      * Defaults to <tt>true</tt> to enable {@link Ext.grid.Column#hidden hiding of columns}
162      * with the {@link #enableHdMenu header menu}.
163      */
164     enableColumnHide : true,
165     <div id="cfg-Ext.grid.GridPanel-enableColumnMove"></div>/**
166      * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt>
167      * to turn off column reordering via drag drop.
168      */
169     enableColumnMove : true,
170     <div id="cfg-Ext.grid.GridPanel-enableDragDrop"></div>/**
171      * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p>
172      * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to
173      * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b>
174      * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt>
175      * property.</p>
176      * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of
177      * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},
178      * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able
179      * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p>
180      */
181     enableDragDrop : false,
182     <div id="cfg-Ext.grid.GridPanel-enableHdMenu"></div>/**
183      * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers.
184      */
185     enableHdMenu : true,
186     <div id="cfg-Ext.grid.GridPanel-hideHeaders"></div>/**
187      * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>.
188      */
189     <div id="cfg-Ext.grid.GridPanel-loadMask"></div>/**
190      * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while
191      * loading. Defaults to <code>false</code>.
192      */
193     loadMask : false,
194     <div id="cfg-Ext.grid.GridPanel-maxHeight"></div>/**
195      * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on.
196      */
197     <div id="cfg-Ext.grid.GridPanel-minColumnWidth"></div>/**
198      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>.
199      */
200     minColumnWidth : 25,
201     <div id="cfg-Ext.grid.GridPanel-sm"></div>/**
202      * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>.
203      */
204     <div id="cfg-Ext.grid.GridPanel-selModel"></div>/**
205      * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide
206      * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified).
207      */
208     <div id="cfg-Ext.grid.GridPanel-store"></div>/**
209      * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required).
210      */
211     <div id="cfg-Ext.grid.GridPanel-stripeRows"></div>/**
212      * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>.
213      * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of
214      * the grid. A default CSS rule is provided which sets a background colour, but you can override this
215      * with a rule which either overrides the <b>background-color</b> style using the '!important'
216      * modifier, or which uses a CSS selector of higher specificity.</p>
217      */
218     stripeRows : false,
219     <div id="cfg-Ext.grid.GridPanel-trackMouseOver"></div>/**
220      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt>
221      * for GridPanel, but <tt>false</tt> for EditorGridPanel.
222      */
223     trackMouseOver : true,
224     <div id="cfg-Ext.grid.GridPanel-stateEvents"></div>/**
225      * @cfg {Array} stateEvents
226      * An array of events that, when fired, should trigger this component to save its state.
227      * Defaults to:<pre><code>
228      * stateEvents: ['columnmove', 'columnresize', 'sortchange', 'groupchange']
229      * </code></pre>
230      * <p>These can be any types of events supported by this component, including browser or
231      * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p>
232      * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring
233      * Component state.</p>
234      */
235     stateEvents : ['columnmove', 'columnresize', 'sortchange', 'groupchange'],
236     <div id="cfg-Ext.grid.GridPanel-view"></div>/**
237      * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set
238      * before a call to {@link Ext.Component#render render()}.
239      */
240     view : null,
241
242     <div id="cfg-Ext.grid.GridPanel-bubbleEvents"></div>/**
243      * @cfg {Array} bubbleEvents
244      * <p>An array of events that, when fired, should be bubbled to any parent container.
245      * See {@link Ext.util.Observable#enableBubble}.
246      * Defaults to <tt>[]</tt>.
247      */
248     bubbleEvents: [],
249
250     <div id="cfg-Ext.grid.GridPanel-viewConfig"></div>/**
251      * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view.  Any of
252      * the config options available for {@link Ext.grid.GridView} can be specified here. This option
253      * is ignored if <tt>{@link #view}</tt> is specified.
254      */
255
256     // private
257     rendered : false,
258     // private
259     viewReady : false,
260
261     // private
262     initComponent : function(){
263         Ext.grid.GridPanel.superclass.initComponent.call(this);
264
265         if(this.columnLines){
266             this.cls = (this.cls || '') + ' x-grid-with-col-lines';
267         }
268         // override any provided value since it isn't valid
269         // and is causing too many bug reports ;)
270         this.autoScroll = false;
271         this.autoWidth = false;
272
273         if(Ext.isArray(this.columns)){
274             this.colModel = new Ext.grid.ColumnModel(this.columns);
275             delete this.columns;
276         }
277
278         // check and correct shorthanded configs
279         if(this.ds){
280             this.store = this.ds;
281             delete this.ds;
282         }
283         if(this.cm){
284             this.colModel = this.cm;
285             delete this.cm;
286         }
287         if(this.sm){
288             this.selModel = this.sm;
289             delete this.sm;
290         }
291         this.store = Ext.StoreMgr.lookup(this.store);
292
293         this.addEvents(
294             // raw events
295             <div id="event-Ext.grid.GridPanel-click"></div>/**
296              * @event click
297              * The raw click event for the entire grid.
298              * @param {Ext.EventObject} e
299              */
300             'click',
301             <div id="event-Ext.grid.GridPanel-dblclick"></div>/**
302              * @event dblclick
303              * The raw dblclick event for the entire grid.
304              * @param {Ext.EventObject} e
305              */
306             'dblclick',
307             <div id="event-Ext.grid.GridPanel-contextmenu"></div>/**
308              * @event contextmenu
309              * The raw contextmenu event for the entire grid.
310              * @param {Ext.EventObject} e
311              */
312             'contextmenu',
313             <div id="event-Ext.grid.GridPanel-mousedown"></div>/**
314              * @event mousedown
315              * The raw mousedown event for the entire grid.
316              * @param {Ext.EventObject} e
317              */
318             'mousedown',
319             <div id="event-Ext.grid.GridPanel-mouseup"></div>/**
320              * @event mouseup
321              * The raw mouseup event for the entire grid.
322              * @param {Ext.EventObject} e
323              */
324             'mouseup',
325             <div id="event-Ext.grid.GridPanel-mouseover"></div>/**
326              * @event mouseover
327              * The raw mouseover event for the entire grid.
328              * @param {Ext.EventObject} e
329              */
330             'mouseover',
331             <div id="event-Ext.grid.GridPanel-mouseout"></div>/**
332              * @event mouseout
333              * The raw mouseout event for the entire grid.
334              * @param {Ext.EventObject} e
335              */
336             'mouseout',
337             <div id="event-Ext.grid.GridPanel-keypress"></div>/**
338              * @event keypress
339              * The raw keypress event for the entire grid.
340              * @param {Ext.EventObject} e
341              */
342             'keypress',
343             <div id="event-Ext.grid.GridPanel-keydown"></div>/**
344              * @event keydown
345              * The raw keydown event for the entire grid.
346              * @param {Ext.EventObject} e
347              */
348             'keydown',
349
350             // custom events
351             <div id="event-Ext.grid.GridPanel-cellmousedown"></div>/**
352              * @event cellmousedown
353              * Fires before a cell is clicked
354              * @param {Grid} this
355              * @param {Number} rowIndex
356              * @param {Number} columnIndex
357              * @param {Ext.EventObject} e
358              */
359             'cellmousedown',
360             <div id="event-Ext.grid.GridPanel-rowmousedown"></div>/**
361              * @event rowmousedown
362              * Fires before a row is clicked
363              * @param {Grid} this
364              * @param {Number} rowIndex
365              * @param {Ext.EventObject} e
366              */
367             'rowmousedown',
368             <div id="event-Ext.grid.GridPanel-headermousedown"></div>/**
369              * @event headermousedown
370              * Fires before a header is clicked
371              * @param {Grid} this
372              * @param {Number} columnIndex
373              * @param {Ext.EventObject} e
374              */
375             'headermousedown',
376
377             <div id="event-Ext.grid.GridPanel-groupmousedown"></div>/**
378              * @event groupmousedown
379              * Fires before a group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
380              * @param {Grid} this
381              * @param {String} groupField
382              * @param {String} groupValue
383              * @param {Ext.EventObject} e
384              */
385             'groupmousedown',
386
387             <div id="event-Ext.grid.GridPanel-rowbodymousedown"></div>/**
388              * @event rowbodymousedown
389              * Fires before the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
390              * @param {Grid} this
391              * @param {Number} rowIndex
392              * @param {Ext.EventObject} e
393              */
394             'rowbodymousedown',
395
396             <div id="event-Ext.grid.GridPanel-containermousedown"></div>/**
397              * @event containermousedown
398              * Fires before the container is clicked. The container consists of any part of the grid body that is not covered by a row.
399              * @param {Grid} this
400              * @param {Ext.EventObject} e
401              */
402             'containermousedown',
403
404             <div id="event-Ext.grid.GridPanel-cellclick"></div>/**
405              * @event cellclick
406              * Fires when a cell is clicked.
407              * The data for the cell is drawn from the {@link Ext.data.Record Record}
408              * for this row. To access the data in the listener function use the
409              * following technique:
410              * <pre><code>
411 function(grid, rowIndex, columnIndex, e) {
412     var record = grid.getStore().getAt(rowIndex);  // Get the Record
413     var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name
414     var data = record.get(fieldName);
415 }
416 </code></pre>
417              * @param {Grid} this
418              * @param {Number} rowIndex
419              * @param {Number} columnIndex
420              * @param {Ext.EventObject} e
421              */
422             'cellclick',
423             <div id="event-Ext.grid.GridPanel-celldblclick"></div>/**
424              * @event celldblclick
425              * Fires when a cell is double clicked
426              * @param {Grid} this
427              * @param {Number} rowIndex
428              * @param {Number} columnIndex
429              * @param {Ext.EventObject} e
430              */
431             'celldblclick',
432             <div id="event-Ext.grid.GridPanel-rowclick"></div>/**
433              * @event rowclick
434              * Fires when a row is clicked
435              * @param {Grid} this
436              * @param {Number} rowIndex
437              * @param {Ext.EventObject} e
438              */
439             'rowclick',
440             <div id="event-Ext.grid.GridPanel-rowdblclick"></div>/**
441              * @event rowdblclick
442              * Fires when a row is double clicked
443              * @param {Grid} this
444              * @param {Number} rowIndex
445              * @param {Ext.EventObject} e
446              */
447             'rowdblclick',
448             <div id="event-Ext.grid.GridPanel-headerclick"></div>/**
449              * @event headerclick
450              * Fires when a header is clicked
451              * @param {Grid} this
452              * @param {Number} columnIndex
453              * @param {Ext.EventObject} e
454              */
455             'headerclick',
456             <div id="event-Ext.grid.GridPanel-headerdblclick"></div>/**
457              * @event headerdblclick
458              * Fires when a header cell is double clicked
459              * @param {Grid} this
460              * @param {Number} columnIndex
461              * @param {Ext.EventObject} e
462              */
463             'headerdblclick',
464             <div id="event-Ext.grid.GridPanel-groupclick"></div>/**
465              * @event groupclick
466              * Fires when group header is clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
467              * @param {Grid} this
468              * @param {String} groupField
469              * @param {String} groupValue
470              * @param {Ext.EventObject} e
471              */
472             'groupclick',
473             <div id="event-Ext.grid.GridPanel-groupdblclick"></div>/**
474              * @event groupdblclick
475              * Fires when group header is double clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
476              * @param {Grid} this
477              * @param {String} groupField
478              * @param {String} groupValue
479              * @param {Ext.EventObject} e
480              */
481             'groupdblclick',
482             <div id="event-Ext.grid.GridPanel-containerclick"></div>/**
483              * @event containerclick
484              * Fires when the container is clicked. The container consists of any part of the grid body that is not covered by a row.
485              * @param {Grid} this
486              * @param {Ext.EventObject} e
487              */
488             'containerclick',
489             <div id="event-Ext.grid.GridPanel-containerdblclick"></div>/**
490              * @event containerdblclick
491              * Fires when the container is double clicked. The container consists of any part of the grid body that is not covered by a row.
492              * @param {Grid} this
493              * @param {Ext.EventObject} e
494              */
495             'containerdblclick',
496
497             <div id="event-Ext.grid.GridPanel-rowbodyclick"></div>/**
498              * @event rowbodyclick
499              * Fires when the row body is clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
500              * @param {Grid} this
501              * @param {Number} rowIndex
502              * @param {Ext.EventObject} e
503              */
504             'rowbodyclick',
505             <div id="event-Ext.grid.GridPanel-rowbodydblclick"></div>/**
506              * @event rowbodydblclick
507              * Fires when the row body is double clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
508              * @param {Grid} this
509              * @param {Number} rowIndex
510              * @param {Ext.EventObject} e
511              */
512             'rowbodydblclick',
513
514             <div id="event-Ext.grid.GridPanel-rowcontextmenu"></div>/**
515              * @event rowcontextmenu
516              * Fires when a row is right clicked
517              * @param {Grid} this
518              * @param {Number} rowIndex
519              * @param {Ext.EventObject} e
520              */
521             'rowcontextmenu',
522             <div id="event-Ext.grid.GridPanel-cellcontextmenu"></div>/**
523              * @event cellcontextmenu
524              * Fires when a cell is right clicked
525              * @param {Grid} this
526              * @param {Number} rowIndex
527              * @param {Number} cellIndex
528              * @param {Ext.EventObject} e
529              */
530             'cellcontextmenu',
531             <div id="event-Ext.grid.GridPanel-headercontextmenu"></div>/**
532              * @event headercontextmenu
533              * Fires when a header is right clicked
534              * @param {Grid} this
535              * @param {Number} columnIndex
536              * @param {Ext.EventObject} e
537              */
538             'headercontextmenu',
539             <div id="event-Ext.grid.GridPanel-groupcontextmenu"></div>/**
540              * @event groupcontextmenu
541              * Fires when group header is right clicked. <b>Only applies for grids with a {@link Ext.grid.GroupingView GroupingView}</b>.
542              * @param {Grid} this
543              * @param {String} groupField
544              * @param {String} groupValue
545              * @param {Ext.EventObject} e
546              */
547             'groupcontextmenu',
548             <div id="event-Ext.grid.GridPanel-containercontextmenu"></div>/**
549              * @event containercontextmenu
550              * Fires when the container is right clicked. The container consists of any part of the grid body that is not covered by a row.
551              * @param {Grid} this
552              * @param {Ext.EventObject} e
553              */
554             'containercontextmenu',
555             <div id="event-Ext.grid.GridPanel-rowbodycontextmenu"></div>/**
556              * @event rowbodycontextmenu
557              * Fires when the row body is right clicked. <b>Only applies for grids with {@link Ext.grid.GridView#enableRowBody enableRowBody} configured.</b>
558              * @param {Grid} this
559              * @param {Number} rowIndex
560              * @param {Ext.EventObject} e
561              */
562             'rowbodycontextmenu',
563             <div id="event-Ext.grid.GridPanel-bodyscroll"></div>/**
564              * @event bodyscroll
565              * Fires when the body element is scrolled
566              * @param {Number} scrollLeft
567              * @param {Number} scrollTop
568              */
569             'bodyscroll',
570             <div id="event-Ext.grid.GridPanel-columnresize"></div>/**
571              * @event columnresize
572              * Fires when the user resizes a column
573              * @param {Number} columnIndex
574              * @param {Number} newSize
575              */
576             'columnresize',
577             <div id="event-Ext.grid.GridPanel-columnmove"></div>/**
578              * @event columnmove
579              * Fires when the user moves a column
580              * @param {Number} oldIndex
581              * @param {Number} newIndex
582              */
583             'columnmove',
584             <div id="event-Ext.grid.GridPanel-sortchange"></div>/**
585              * @event sortchange
586              * Fires when the grid's store sort changes
587              * @param {Grid} this
588              * @param {Object} sortInfo An object with the keys field and direction
589              */
590             'sortchange',
591             <div id="event-Ext.grid.GridPanel-groupchange"></div>/**
592              * @event groupchange
593              * Fires when the grid's grouping changes (only applies for grids with a {@link Ext.grid.GroupingView GroupingView})
594              * @param {Grid} this
595              * @param {String} groupField A string with the grouping field, null if the store is not grouped.
596              */
597             'groupchange',
598             <div id="event-Ext.grid.GridPanel-reconfigure"></div>/**
599              * @event reconfigure
600              * Fires when the grid is reconfigured with a new store and/or column model.
601              * @param {Grid} this
602              * @param {Ext.data.Store} store The new store
603              * @param {Ext.grid.ColumnModel} colModel The new column model
604              */
605             'reconfigure',
606             <div id="event-Ext.grid.GridPanel-viewready"></div>/**
607              * @event viewready
608              * Fires when the grid view is available (use this for selecting a default row).
609              * @param {Grid} this
610              */
611             'viewready'
612         );
613     },
614
615     // private
616     onRender : function(ct, position){
617         Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
618
619         var c = this.getGridEl();
620
621         this.el.addClass('x-grid-panel');
622
623         this.mon(c, {
624             scope: this,
625             mousedown: this.onMouseDown,
626             click: this.onClick,
627             dblclick: this.onDblClick,
628             contextmenu: this.onContextMenu
629         });
630
631         this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);
632
633         var view = this.getView();
634         view.init(this);
635         view.render();
636         this.getSelectionModel().init(this);
637     },
638
639     // private
640     initEvents : function(){
641         Ext.grid.GridPanel.superclass.initEvents.call(this);
642
643         if(this.loadMask){
644             this.loadMask = new Ext.LoadMask(this.bwrap,
645                     Ext.apply({store:this.store}, this.loadMask));
646         }
647     },
648
649     initStateEvents : function(){
650         Ext.grid.GridPanel.superclass.initStateEvents.call(this);
651         this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100});
652     },
653
654     applyState : function(state){
655         var cm = this.colModel,
656             cs = state.columns,
657             store = this.store,
658             s,
659             c,
660             oldIndex;
661
662         if(cs){
663             for(var i = 0, len = cs.length; i < len; i++){
664                 s = cs[i];
665                 c = cm.getColumnById(s.id);
666                 if(c){
667                     c.hidden = s.hidden;
668                     c.width = s.width;
669                     oldIndex = cm.getIndexById(s.id);
670                     if(oldIndex != i){
671                         cm.moveColumn(oldIndex, i);
672                     }
673                 }
674             }
675         }
676         if(store){
677             s = state.sort;
678             if(s){
679                 store[store.remoteSort ? 'setDefaultSort' : 'sort'](s.field, s.direction);
680             }
681             s = state.group;
682             if(store.groupBy){
683                 if(s){
684                     store.groupBy(s);
685                 }else{
686                     store.clearGrouping();
687                 }
688             }
689
690         }
691         var o = Ext.apply({}, state);
692         delete o.columns;
693         delete o.sort;
694         Ext.grid.GridPanel.superclass.applyState.call(this, o);
695     },
696
697     getState : function(){
698         var o = {columns: []},
699             store = this.store,
700             ss,
701             gs;
702
703         for(var i = 0, c; (c = this.colModel.config[i]); i++){
704             o.columns[i] = {
705                 id: c.id,
706                 width: c.width
707             };
708             if(c.hidden){
709                 o.columns[i].hidden = true;
710             }
711         }
712         if(store){
713             ss = store.getSortState();
714             if(ss){
715                 o.sort = ss;
716             }
717             if(store.getGroupState){
718                 gs = store.getGroupState();
719                 if(gs){
720                     o.group = gs;
721                 }
722             }
723         }
724         return o;
725     },
726
727     // private
728     afterRender : function(){
729         Ext.grid.GridPanel.superclass.afterRender.call(this);
730         var v = this.view;
731         this.on('bodyresize', v.layout, v);
732         v.layout();
733         if(this.deferRowRender){
734             if (!this.deferRowRenderTask){
735                 this.deferRowRenderTask = new Ext.util.DelayedTask(v.afterRender, this.view);
736             }
737             this.deferRowRenderTask.delay(10);
738         }else{
739             v.afterRender();
740         }
741         this.viewReady = true;
742     },
743
744     <div id="method-Ext.grid.GridPanel-reconfigure"></div>/**
745      * <p>Reconfigures the grid to use a different Store and Column Model
746      * and fires the 'reconfigure' event. The View will be bound to the new
747      * objects and refreshed.</p>
748      * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become
749      * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the
750      * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound
751      * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring
752      * with the new data.</p>
753      * @param {Ext.data.Store} store The new {@link Ext.data.Store} object
754      * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object
755      */
756     reconfigure : function(store, colModel){
757         var rendered = this.rendered;
758         if(rendered){
759             if(this.loadMask){
760                 this.loadMask.destroy();
761                 this.loadMask = new Ext.LoadMask(this.bwrap,
762                         Ext.apply({}, {store:store}, this.initialConfig.loadMask));
763             }
764         }
765         if(this.view){
766             this.view.initData(store, colModel);
767         }
768         this.store = store;
769         this.colModel = colModel;
770         if(rendered){
771             this.view.refresh(true);
772         }
773         this.fireEvent('reconfigure', this, store, colModel);
774     },
775
776     // private
777     onDestroy : function(){
778         if (this.deferRowRenderTask && this.deferRowRenderTask.cancel){
779             this.deferRowRenderTask.cancel();
780         }
781         if(this.rendered){
782             Ext.destroy(this.view, this.loadMask);
783         }else if(this.store && this.store.autoDestroy){
784             this.store.destroy();
785         }
786         Ext.destroy(this.colModel, this.selModel);
787         this.store = this.selModel = this.colModel = this.view = this.loadMask = null;
788         Ext.grid.GridPanel.superclass.onDestroy.call(this);
789     },
790
791     // private
792     processEvent : function(name, e){
793         this.view.processEvent(name, e);
794     },
795
796     // private
797     onClick : function(e){
798         this.processEvent('click', e);
799     },
800
801     // private
802     onMouseDown : function(e){
803         this.processEvent('mousedown', e);
804     },
805
806     // private
807     onContextMenu : function(e, t){
808         this.processEvent('contextmenu', e);
809     },
810
811     // private
812     onDblClick : function(e){
813         this.processEvent('dblclick', e);
814     },
815
816     // private
817     walkCells : function(row, col, step, fn, scope){
818         var cm    = this.colModel,
819             clen  = cm.getColumnCount(),
820             ds    = this.store,
821             rlen  = ds.getCount(),
822             first = true;
823
824         if(step < 0){
825             if(col < 0){
826                 row--;
827                 first = false;
828             }
829             while(row >= 0){
830                 if(!first){
831                     col = clen-1;
832                 }
833                 first = false;
834                 while(col >= 0){
835                     if(fn.call(scope || this, row, col, cm) === true){
836                         return [row, col];
837                     }
838                     col--;
839                 }
840                 row--;
841             }
842         } else {
843             if(col >= clen){
844                 row++;
845                 first = false;
846             }
847             while(row < rlen){
848                 if(!first){
849                     col = 0;
850                 }
851                 first = false;
852                 while(col < clen){
853                     if(fn.call(scope || this, row, col, cm) === true){
854                         return [row, col];
855                     }
856                     col++;
857                 }
858                 row++;
859             }
860         }
861         return null;
862     },
863
864     <div id="method-Ext.grid.GridPanel-getGridEl"></div>/**
865      * Returns the grid's underlying element.
866      * @return {Element} The element
867      */
868     getGridEl : function(){
869         return this.body;
870     },
871
872     // private for compatibility, overridden by editor grid
873     stopEditing : Ext.emptyFn,
874
875     <div id="method-Ext.grid.GridPanel-getSelectionModel"></div>/**
876      * Returns the grid's selection model configured by the <code>{@link #selModel}</code>
877      * configuration option. If no selection model was configured, this will create
878      * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}.
879      * @return {SelectionModel}
880      */
881     getSelectionModel : function(){
882         if(!this.selModel){
883             this.selModel = new Ext.grid.RowSelectionModel(
884                     this.disableSelection ? {selectRow: Ext.emptyFn} : null);
885         }
886         return this.selModel;
887     },
888
889     <div id="method-Ext.grid.GridPanel-getStore"></div>/**
890      * Returns the grid's data store.
891      * @return {Ext.data.Store} The store
892      */
893     getStore : function(){
894         return this.store;
895     },
896
897     <div id="method-Ext.grid.GridPanel-getColumnModel"></div>/**
898      * Returns the grid's ColumnModel.
899      * @return {Ext.grid.ColumnModel} The column model
900      */
901     getColumnModel : function(){
902         return this.colModel;
903     },
904
905     <div id="method-Ext.grid.GridPanel-getView"></div>/**
906      * Returns the grid's GridView object.
907      * @return {Ext.grid.GridView} The grid view
908      */
909     getView : function(){
910         if(!this.view){
911             this.view = new Ext.grid.GridView(this.viewConfig);
912         }
913         return this.view;
914     },
915     <div id="method-Ext.grid.GridPanel-getDragDropText"></div>/**
916      * Called to get grid's drag proxy text, by default returns this.ddText.
917      * @return {String} The text
918      */
919     getDragDropText : function(){
920         var count = this.selModel.getCount();
921         return String.format(this.ddText, count, count == 1 ? '' : 's');
922     }
923
924     <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/**
925      * @cfg {String/Number} activeItem
926      * @hide
927      */
928     <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/**
929      * @cfg {Boolean} autoDestroy
930      * @hide
931      */
932     <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/**
933      * @cfg {Object/String/Function} autoLoad
934      * @hide
935      */
936     <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/**
937      * @cfg {Boolean} autoWidth
938      * @hide
939      */
940     <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/**
941      * @cfg {Boolean/Number} bufferResize
942      * @hide
943      */
944     <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/**
945      * @cfg {String} defaultType
946      * @hide
947      */
948     <div id="cfg-Ext.grid.GridPanel-defaults"></div>/**
949      * @cfg {Object} defaults
950      * @hide
951      */
952     <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/**
953      * @cfg {Boolean} hideBorders
954      * @hide
955      */
956     <div id="cfg-Ext.grid.GridPanel-items"></div>/**
957      * @cfg {Mixed} items
958      * @hide
959      */
960     <div id="cfg-Ext.grid.GridPanel-layout"></div>/**
961      * @cfg {String} layout
962      * @hide
963      */
964     <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/**
965      * @cfg {Object} layoutConfig
966      * @hide
967      */
968     <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/**
969      * @cfg {Boolean} monitorResize
970      * @hide
971      */
972     <div id="prop-Ext.grid.GridPanel-items"></div>/**
973      * @property items
974      * @hide
975      */
976     <div id="method-Ext.grid.GridPanel-add"></div>/**
977      * @method add
978      * @hide
979      */
980     <div id="method-Ext.grid.GridPanel-cascade"></div>/**
981      * @method cascade
982      * @hide
983      */
984     <div id="method-Ext.grid.GridPanel-doLayout"></div>/**
985      * @method doLayout
986      * @hide
987      */
988     <div id="method-Ext.grid.GridPanel-find"></div>/**
989      * @method find
990      * @hide
991      */
992     <div id="method-Ext.grid.GridPanel-findBy"></div>/**
993      * @method findBy
994      * @hide
995      */
996     <div id="method-Ext.grid.GridPanel-findById"></div>/**
997      * @method findById
998      * @hide
999      */
1000     <div id="method-Ext.grid.GridPanel-findByType"></div>/**
1001      * @method findByType
1002      * @hide
1003      */
1004     <div id="method-Ext.grid.GridPanel-getComponent"></div>/**
1005      * @method getComponent
1006      * @hide
1007      */
1008     <div id="method-Ext.grid.GridPanel-getLayout"></div>/**
1009      * @method getLayout
1010      * @hide
1011      */
1012     <div id="method-Ext.grid.GridPanel-getUpdater"></div>/**
1013      * @method getUpdater
1014      * @hide
1015      */
1016     <div id="method-Ext.grid.GridPanel-insert"></div>/**
1017      * @method insert
1018      * @hide
1019      */
1020     <div id="method-Ext.grid.GridPanel-load"></div>/**
1021      * @method load
1022      * @hide
1023      */
1024     <div id="method-Ext.grid.GridPanel-remove"></div>/**
1025      * @method remove
1026      * @hide
1027      */
1028     <div id="event-Ext.grid.GridPanel-add"></div>/**
1029      * @event add
1030      * @hide
1031      */
1032     <div id="event-Ext.grid.GridPanel-afterlayout"></div>/**
1033      * @event afterlayout
1034      * @hide
1035      */
1036     <div id="event-Ext.grid.GridPanel-beforeadd"></div>/**
1037      * @event beforeadd
1038      * @hide
1039      */
1040     <div id="event-Ext.grid.GridPanel-beforeremove"></div>/**
1041      * @event beforeremove
1042      * @hide
1043      */
1044     <div id="event-Ext.grid.GridPanel-remove"></div>/**
1045      * @event remove
1046      * @hide
1047      */
1048
1049
1050
1051     <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**
1052      * @cfg {String} allowDomMove  @hide
1053      */
1054     <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**
1055      * @cfg {String} autoEl @hide
1056      */
1057     <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**
1058      * @cfg {String} applyTo  @hide
1059      */
1060     <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**
1061      * @cfg {String} autoScroll  @hide
1062      */
1063     <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**
1064      * @cfg {String} bodyBorder  @hide
1065      */
1066     <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**
1067      * @cfg {String} bodyStyle  @hide
1068      */
1069     <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**
1070      * @cfg {String} contentEl  @hide
1071      */
1072     <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**
1073      * @cfg {String} disabledClass  @hide
1074      */
1075     <div id="cfg-Ext.grid.GridPanel-elements"></div>/**
1076      * @cfg {String} elements  @hide
1077      */
1078     <div id="cfg-Ext.grid.GridPanel-html"></div>/**
1079      * @cfg {String} html  @hide
1080      */
1081     <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**
1082      * @cfg {Boolean} preventBodyReset
1083      * @hide
1084      */
1085     <div id="prop-Ext.grid.GridPanel-disabled"></div>/**
1086      * @property disabled
1087      * @hide
1088      */
1089     <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**
1090      * @method applyToMarkup
1091      * @hide
1092      */
1093     <div id="method-Ext.grid.GridPanel-enable"></div>/**
1094      * @method enable
1095      * @hide
1096      */
1097     <div id="method-Ext.grid.GridPanel-disable"></div>/**
1098      * @method disable
1099      * @hide
1100      */
1101     <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**
1102      * @method setDisabled
1103      * @hide
1104      */
1105 });
1106 Ext.reg('grid', Ext.grid.GridPanel);</pre>    
1107 </body>
1108 </html>