Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / GridPanel.html
1 <html>\r
2 <head>\r
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
7 </head>\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
23  * </ul></div>\r
24  * <p>Example usage:</p>\r
25  * <pre><code>\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
31     }),\r
32     {@link #colModel}: new {@link Ext.grid.ColumnModel}({\r
33         {@link Ext.grid.ColumnModel#defaults defaults}: {\r
34             width: 120,\r
35             sortable: true\r
36         },\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
43             {\r
44                 header: 'Last Updated', width: 135, dataIndex: 'lastChange',\r
45                 xtype: 'datecolumn', format: 'M d, Y'\r
46             }\r
47         ],\r
48     }),\r
49     {@link #viewConfig}: {\r
50         {@link Ext.grid.GridView#forceFit forceFit}: true,\r
51 \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
55             if (c < 0) {\r
56                 return 'price-fall';\r
57             } else if (c > 0) {\r
58                 return 'price-rise';\r
59             }\r
60         }\r
61     },\r
62     {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),\r
63     width: 600,\r
64     height: 300,\r
65     frame: true,\r
66     title: 'Framed with Row Selection and Horizontal Scrolling',\r
67     iconCls: 'icon-grid'\r
68 });\r
69  * </code></pre>\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
84  * </ul></div>\r
85  * @constructor\r
86  * @param {Object} config The config object\r
87  * @xtype grid\r
88  */\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
100      */\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
105      */\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
110      */\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
115      */\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
119      */\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
122      */\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
127      */\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
130      */\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
134      * <pre><code>\r
135      * ddText : '{0} selected row{1}'\r
136      * </code></pre>\r
137      * <tt>{0}</tt> is replaced with the number of selected rows.\r
138      */\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
144      */\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
149      */\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
152      */\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
157      */\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
162      */\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
169      * property.</p>\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
174      */\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
178      */\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
182      */\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
186      */\r
187     loadMask : false,\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
190      */\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
193      */\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
197      */\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
201      */\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
204      */\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
211      */\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
216      */\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
223      * </code></pre>\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
228      */\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
233      */\r
234     view : null,\r
235     \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
241      */\r
242     bubbleEvents: [],\r
243     \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
248      */\r
249 \r
250     // private\r
251     rendered : false,\r
252     // private\r
253     viewReady : false,\r
254 \r
255     // private\r
256     initComponent : function(){\r
257         Ext.grid.GridPanel.superclass.initComponent.call(this);\r
258 \r
259         if(this.columnLines){\r
260             this.cls = (this.cls || '') + ' x-grid-with-col-lines';\r
261         }\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
266 \r
267         if(Ext.isArray(this.columns)){\r
268             this.colModel = new Ext.grid.ColumnModel(this.columns);\r
269             delete this.columns;\r
270         }\r
271 \r
272         // check and correct shorthanded configs\r
273         if(this.ds){\r
274             this.store = this.ds;\r
275             delete this.ds;\r
276         }\r
277         if(this.cm){\r
278             this.colModel = this.cm;\r
279             delete this.cm;\r
280         }\r
281         if(this.sm){\r
282             this.selModel = this.sm;\r
283             delete this.sm;\r
284         }\r
285         this.store = Ext.StoreMgr.lookup(this.store);\r
286 \r
287         this.addEvents(\r
288             // raw events\r
289             <div id="event-Ext.grid.GridPanel-click"></div>/**\r
290              * @event click\r
291              * The raw click event for the entire grid.\r
292              * @param {Ext.EventObject} e\r
293              */\r
294             'click',\r
295             <div id="event-Ext.grid.GridPanel-dblclick"></div>/**\r
296              * @event dblclick\r
297              * The raw dblclick event for the entire grid.\r
298              * @param {Ext.EventObject} e\r
299              */\r
300             'dblclick',\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
305              */\r
306             'contextmenu',\r
307             <div id="event-Ext.grid.GridPanel-mousedown"></div>/**\r
308              * @event mousedown\r
309              * The raw mousedown event for the entire grid.\r
310              * @param {Ext.EventObject} e\r
311              */\r
312             'mousedown',\r
313             <div id="event-Ext.grid.GridPanel-mouseup"></div>/**\r
314              * @event mouseup\r
315              * The raw mouseup event for the entire grid.\r
316              * @param {Ext.EventObject} e\r
317              */\r
318             'mouseup',\r
319             <div id="event-Ext.grid.GridPanel-mouseover"></div>/**\r
320              * @event mouseover\r
321              * The raw mouseover event for the entire grid.\r
322              * @param {Ext.EventObject} e\r
323              */\r
324             'mouseover',\r
325             <div id="event-Ext.grid.GridPanel-mouseout"></div>/**\r
326              * @event mouseout\r
327              * The raw mouseout event for the entire grid.\r
328              * @param {Ext.EventObject} e\r
329              */\r
330             'mouseout',\r
331             <div id="event-Ext.grid.GridPanel-keypress"></div>/**\r
332              * @event keypress\r
333              * The raw keypress event for the entire grid.\r
334              * @param {Ext.EventObject} e\r
335              */\r
336             'keypress',\r
337             <div id="event-Ext.grid.GridPanel-keydown"></div>/**\r
338              * @event keydown\r
339              * The raw keydown event for the entire grid.\r
340              * @param {Ext.EventObject} e\r
341              */\r
342             'keydown',\r
343 \r
344             // custom events\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
352              */\r
353             'cellmousedown',\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
360              */\r
361             'rowmousedown',\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
368              */\r
369             'headermousedown',\r
370             \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
378              */\r
379             'groupmousedown',\r
380             \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
387              */\r
388             'rowbodymousedown',\r
389             \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
395              */\r
396             'containermousedown',\r
397 \r
398             <div id="event-Ext.grid.GridPanel-cellclick"></div>/**\r
399              * @event cellclick\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
404              * <pre><code>\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
409 }\r
410 </code></pre>\r
411              * @param {Grid} this\r
412              * @param {Number} rowIndex\r
413              * @param {Number} columnIndex\r
414              * @param {Ext.EventObject} e\r
415              */\r
416             'cellclick',\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
424              */\r
425             'celldblclick',\r
426             <div id="event-Ext.grid.GridPanel-rowclick"></div>/**\r
427              * @event rowclick\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
432              */\r
433             'rowclick',\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
440              */\r
441             'rowdblclick',\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
448              */\r
449             'headerclick',\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
456              */\r
457             'headerdblclick',\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
465              */\r
466             'groupclick',\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
474              */\r
475             'groupdblclick',\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
481              */\r
482             'containerclick',\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
488              */\r
489             'containerdblclick',\r
490             \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
497              */\r
498             'rowbodyclick',\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
505              */\r
506             'rowbodydblclick',\r
507             \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
514              */\r
515             'rowcontextmenu',\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
523              */\r
524             'cellcontextmenu',\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
531              */\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
540              */\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
547              */\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
555              */\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
562              */\r
563             'bodyscroll',\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
569              */\r
570             'columnresize',\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
576              */\r
577             'columnmove',\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
583              */\r
584             'sortchange',\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
591              */\r
592             'reconfigure',\r
593             <div id="event-Ext.grid.GridPanel-viewready"></div>/**\r
594              * @event viewready\r
595              * Fires when the grid view is available (use this for selecting a default row). \r
596              * @param {Grid} this\r
597              */\r
598             'viewready'\r
599         );\r
600     },\r
601 \r
602     // private\r
603     onRender : function(ct, position){\r
604         Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);\r
605 \r
606         var c = this.getGridEl();\r
607 \r
608         this.el.addClass('x-grid-panel');\r
609 \r
610         this.mon(c, {\r
611             scope: this,\r
612             mousedown: this.onMouseDown,\r
613             click: this.onClick,\r
614             dblclick: this.onDblClick,\r
615             contextmenu: this.onContextMenu\r
616         });\r
617 \r
618         this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress', 'keydown']);\r
619 \r
620         var view = this.getView();\r
621         view.init(this);\r
622         view.render();\r
623         this.getSelectionModel().init(this);\r
624     },\r
625 \r
626     // private\r
627     initEvents : function(){\r
628         Ext.grid.GridPanel.superclass.initEvents.call(this);\r
629 \r
630         if(this.loadMask){\r
631             this.loadMask = new Ext.LoadMask(this.bwrap,\r
632                     Ext.apply({store:this.store}, this.loadMask));\r
633         }\r
634     },\r
635 \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
639     },\r
640 \r
641     applyState : function(state){\r
642         var cm = this.colModel,\r
643             cs = state.columns;\r
644         if(cs){\r
645             for(var i = 0, len = cs.length; i < len; i++){\r
646                 var s = cs[i],\r
647                     c = cm.getColumnById(s.id);\r
648                 if(c){\r
649                     c.hidden = s.hidden;\r
650                     c.width = s.width;\r
651                     var oldIndex = cm.getIndexById(s.id);\r
652                     if(oldIndex != i){\r
653                         cm.moveColumn(oldIndex, i);\r
654                     }\r
655                 }\r
656             }\r
657         }\r
658         if(state.sort && this.store){\r
659             this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction);\r
660         }\r
661         var o = Ext.apply({}, state);\r
662         delete o.columns;\r
663         delete o.sort;\r
664         Ext.grid.GridPanel.superclass.applyState.call(this, o);\r
665     },\r
666 \r
667     getState : function(){\r
668         var o = {columns: []};\r
669         for(var i = 0, c; (c = this.colModel.config[i]); i++){\r
670             o.columns[i] = {\r
671                 id: c.id,\r
672                 width: c.width\r
673             };\r
674             if(c.hidden){\r
675                 o.columns[i].hidden = true;\r
676             }\r
677         }\r
678         if(this.store){\r
679             var ss = this.store.getSortState();\r
680             if(ss){\r
681                 o.sort = ss;\r
682             }\r
683         }\r
684         return o;\r
685     },\r
686 \r
687     // private\r
688     afterRender : function(){\r
689         Ext.grid.GridPanel.superclass.afterRender.call(this);\r
690         var v = this.view;\r
691         this.on('bodyresize', v.layout, v);\r
692         v.layout();\r
693         if(this.deferRowRender){\r
694             v.afterRender.defer(10, this.view);\r
695         }else{\r
696             v.afterRender();\r
697         }\r
698         this.viewReady = true;\r
699     },\r
700 \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
712      */\r
713     reconfigure : function(store, colModel){\r
714         var rendered = this.rendered;\r
715         if(rendered){\r
716             if(this.loadMask){\r
717                 this.loadMask.destroy();\r
718                 this.loadMask = new Ext.LoadMask(this.bwrap,\r
719                         Ext.apply({}, {store:store}, this.initialConfig.loadMask));\r
720             }\r
721         }\r
722         if(this.view){\r
723             this.view.initData(store, colModel);\r
724         }\r
725         this.store = store;\r
726         this.colModel = colModel;\r
727         if(rendered){\r
728             this.view.refresh(true);\r
729         }\r
730         this.fireEvent('reconfigure', this, store, colModel);\r
731     },\r
732 \r
733     // private\r
734     onDestroy : function(){\r
735         if(this.rendered){\r
736             Ext.destroy(this.view, this.loadMask);\r
737         }else if(this.store && this.store.autoDestroy){\r
738             this.store.destroy();\r
739         }\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
743     },\r
744 \r
745     // private\r
746     processEvent : function(name, e){\r
747         this.fireEvent(name, e);\r
748         var t = e.getTarget(),\r
749             v = this.view,\r
750             header = v.findHeaderIndex(t);\r
751             \r
752         if(header !== false){\r
753             this.fireEvent('header' + name, this, header, e);\r
754         }else{\r
755             var row = v.findRowIndex(t),\r
756                 cell,\r
757                 body;\r
758             if(row !== false){\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
764                 }\r
765                 if(body){\r
766                     this.fireEvent('rowbody' + name, this, row, e);\r
767                 }\r
768             }else{\r
769                 this.fireEvent('container' + name, this, e);\r
770             }\r
771         }\r
772         this.view.processEvent(name, e);\r
773     },\r
774 \r
775     // private\r
776     onClick : function(e){\r
777         this.processEvent('click', e);\r
778     },\r
779 \r
780     // private\r
781     onMouseDown : function(e){\r
782         this.processEvent('mousedown', e);\r
783     },\r
784 \r
785     // private\r
786     onContextMenu : function(e, t){\r
787         this.processEvent('contextmenu', e);\r
788     },\r
789 \r
790     // private\r
791     onDblClick : function(e){\r
792         this.processEvent('dblclick', e);\r
793     },\r
794 \r
795     // private\r
796     walkCells : function(row, col, step, fn, scope){\r
797         var cm = this.colModel, \r
798             clen = cm.getColumnCount(),\r
799             ds = this.store, \r
800             rlen = ds.getCount(), \r
801             first = true;\r
802         if(step < 0){\r
803             if(col < 0){\r
804                 row--;\r
805                 first = false;\r
806             }\r
807             while(row >= 0){\r
808                 if(!first){\r
809                     col = clen-1;\r
810                 }\r
811                 first = false;\r
812                 while(col >= 0){\r
813                     if(fn.call(scope || this, row, col, cm) === true){\r
814                         return [row, col];\r
815                     }\r
816                     col--;\r
817                 }\r
818                 row--;\r
819             }\r
820         } else {\r
821             if(col >= clen){\r
822                 row++;\r
823                 first = false;\r
824             }\r
825             while(row < rlen){\r
826                 if(!first){\r
827                     col = 0;\r
828                 }\r
829                 first = false;\r
830                 while(col < clen){\r
831                     if(fn.call(scope || this, row, col, cm) === true){\r
832                         return [row, col];\r
833                     }\r
834                     col++;\r
835                 }\r
836                 row++;\r
837             }\r
838         }\r
839         return null;\r
840     },\r
841 \r
842     // private\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
847         }\r
848     },\r
849 \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
853      */\r
854     getGridEl : function(){\r
855         return this.body;\r
856     },\r
857 \r
858     // private for compatibility, overridden by editor grid\r
859     stopEditing : Ext.emptyFn,\r
860 \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
866      */\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
871         }\r
872         return this.selModel;\r
873     },\r
874 \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
878      */\r
879     getStore : function(){\r
880         return this.store;\r
881     },\r
882 \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
886      */\r
887     getColumnModel : function(){\r
888         return this.colModel;\r
889     },\r
890 \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
894      */\r
895     getView : function(){\r
896         if(!this.view){\r
897             this.view = new Ext.grid.GridView(this.viewConfig);\r
898         }\r
899         return this.view;\r
900     },\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
904      */\r
905     getDragDropText : function(){\r
906         var count = this.selModel.getCount();\r
907         return String.format(this.ddText, count, count == 1 ? '' : 's');\r
908     }\r
909 \r
910     <div id="cfg-Ext.grid.GridPanel-activeItem"></div>/** \r
911      * @cfg {String/Number} activeItem \r
912      * @hide \r
913      */\r
914     <div id="cfg-Ext.grid.GridPanel-autoDestroy"></div>/** \r
915      * @cfg {Boolean} autoDestroy \r
916      * @hide \r
917      */\r
918     <div id="cfg-Ext.grid.GridPanel-autoLoad"></div>/** \r
919      * @cfg {Object/String/Function} autoLoad \r
920      * @hide \r
921      */\r
922     <div id="cfg-Ext.grid.GridPanel-autoWidth"></div>/** \r
923      * @cfg {Boolean} autoWidth \r
924      * @hide \r
925      */\r
926     <div id="cfg-Ext.grid.GridPanel-bufferResize"></div>/** \r
927      * @cfg {Boolean/Number} bufferResize \r
928      * @hide \r
929      */\r
930     <div id="cfg-Ext.grid.GridPanel-defaultType"></div>/** \r
931      * @cfg {String} defaultType \r
932      * @hide \r
933      */\r
934     <div id="cfg-Ext.grid.GridPanel-defaults"></div>/** \r
935      * @cfg {Object} defaults \r
936      * @hide \r
937      */\r
938     <div id="cfg-Ext.grid.GridPanel-hideBorders"></div>/** \r
939      * @cfg {Boolean} hideBorders \r
940      * @hide \r
941      */\r
942     <div id="cfg-Ext.grid.GridPanel-items"></div>/** \r
943      * @cfg {Mixed} items \r
944      * @hide \r
945      */\r
946     <div id="cfg-Ext.grid.GridPanel-layout"></div>/** \r
947      * @cfg {String} layout \r
948      * @hide \r
949      */\r
950     <div id="cfg-Ext.grid.GridPanel-layoutConfig"></div>/** \r
951      * @cfg {Object} layoutConfig \r
952      * @hide \r
953      */\r
954     <div id="cfg-Ext.grid.GridPanel-monitorResize"></div>/** \r
955      * @cfg {Boolean} monitorResize \r
956      * @hide \r
957      */\r
958     <div id="prop-Ext.grid.GridPanel-items"></div>/** \r
959      * @property items \r
960      * @hide \r
961      */\r
962     <div id="method-Ext.grid.GridPanel-add"></div>/** \r
963      * @method add \r
964      * @hide \r
965      */\r
966     <div id="method-Ext.grid.GridPanel-cascade"></div>/** \r
967      * @method cascade \r
968      * @hide \r
969      */\r
970     <div id="method-Ext.grid.GridPanel-doLayout"></div>/** \r
971      * @method doLayout \r
972      * @hide \r
973      */\r
974     <div id="method-Ext.grid.GridPanel-find"></div>/** \r
975      * @method find \r
976      * @hide \r
977      */\r
978     <div id="method-Ext.grid.GridPanel-findBy"></div>/** \r
979      * @method findBy \r
980      * @hide \r
981      */\r
982     <div id="method-Ext.grid.GridPanel-findById"></div>/** \r
983      * @method findById \r
984      * @hide \r
985      */\r
986     <div id="method-Ext.grid.GridPanel-findByType"></div>/** \r
987      * @method findByType \r
988      * @hide \r
989      */\r
990     <div id="method-Ext.grid.GridPanel-getComponent"></div>/** \r
991      * @method getComponent \r
992      * @hide \r
993      */\r
994     <div id="method-Ext.grid.GridPanel-getLayout"></div>/** \r
995      * @method getLayout \r
996      * @hide \r
997      */\r
998     <div id="method-Ext.grid.GridPanel-getUpdater"></div>/** \r
999      * @method getUpdater \r
1000      * @hide \r
1001      */\r
1002     <div id="method-Ext.grid.GridPanel-insert"></div>/** \r
1003      * @method insert \r
1004      * @hide \r
1005      */\r
1006     <div id="method-Ext.grid.GridPanel-load"></div>/** \r
1007      * @method load \r
1008      * @hide \r
1009      */\r
1010     <div id="method-Ext.grid.GridPanel-remove"></div>/** \r
1011      * @method remove \r
1012      * @hide \r
1013      */\r
1014     <div id="event-Ext.grid.GridPanel-add"></div>/** \r
1015      * @event add \r
1016      * @hide \r
1017      */\r
1018     <div id="event-Ext.grid.GridPanel-afterlayout"></div>/** \r
1019      * @event afterlayout \r
1020      * @hide \r
1021      */\r
1022     <div id="event-Ext.grid.GridPanel-beforeadd"></div>/** \r
1023      * @event beforeadd \r
1024      * @hide \r
1025      */\r
1026     <div id="event-Ext.grid.GridPanel-beforeremove"></div>/** \r
1027      * @event beforeremove \r
1028      * @hide \r
1029      */\r
1030     <div id="event-Ext.grid.GridPanel-remove"></div>/** \r
1031      * @event remove \r
1032      * @hide \r
1033      */\r
1034 \r
1035 \r
1036 \r
1037     <div id="cfg-Ext.grid.GridPanel-allowDomMove"></div>/**\r
1038      * @cfg {String} allowDomMove  @hide\r
1039      */\r
1040     <div id="cfg-Ext.grid.GridPanel-autoEl"></div>/**\r
1041      * @cfg {String} autoEl @hide\r
1042      */\r
1043     <div id="cfg-Ext.grid.GridPanel-applyTo"></div>/**\r
1044      * @cfg {String} applyTo  @hide\r
1045      */\r
1046     <div id="cfg-Ext.grid.GridPanel-autoScroll"></div>/**\r
1047      * @cfg {String} autoScroll  @hide\r
1048      */\r
1049     <div id="cfg-Ext.grid.GridPanel-bodyBorder"></div>/**\r
1050      * @cfg {String} bodyBorder  @hide\r
1051      */\r
1052     <div id="cfg-Ext.grid.GridPanel-bodyStyle"></div>/**\r
1053      * @cfg {String} bodyStyle  @hide\r
1054      */\r
1055     <div id="cfg-Ext.grid.GridPanel-contentEl"></div>/**\r
1056      * @cfg {String} contentEl  @hide\r
1057      */\r
1058     <div id="cfg-Ext.grid.GridPanel-disabledClass"></div>/**\r
1059      * @cfg {String} disabledClass  @hide\r
1060      */\r
1061     <div id="cfg-Ext.grid.GridPanel-elements"></div>/**\r
1062      * @cfg {String} elements  @hide\r
1063      */\r
1064     <div id="cfg-Ext.grid.GridPanel-html"></div>/**\r
1065      * @cfg {String} html  @hide\r
1066      */\r
1067     <div id="cfg-Ext.grid.GridPanel-preventBodyReset"></div>/**\r
1068      * @cfg {Boolean} preventBodyReset\r
1069      * @hide\r
1070      */\r
1071     <div id="prop-Ext.grid.GridPanel-disabled"></div>/**\r
1072      * @property disabled\r
1073      * @hide\r
1074      */\r
1075     <div id="method-Ext.grid.GridPanel-applyToMarkup"></div>/**\r
1076      * @method applyToMarkup\r
1077      * @hide\r
1078      */\r
1079     <div id="method-Ext.grid.GridPanel-enable"></div>/**\r
1080      * @method enable\r
1081      * @hide\r
1082      */\r
1083     <div id="method-Ext.grid.GridPanel-disable"></div>/**\r
1084      * @method disable\r
1085      * @hide\r
1086      */\r
1087     <div id="method-Ext.grid.GridPanel-setDisabled"></div>/**\r
1088      * @method setDisabled\r
1089      * @hide\r
1090      */\r
1091 });\r
1092 Ext.reg('grid', Ext.grid.GridPanel);</pre>    \r
1093 </body>\r
1094 </html>