sync
[roojs1] / docs / src / Roo_grid_Grid.js.html
1 <html><head><title>Roo/grid/Grid.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11
12 /**
13  * @class Roo.grid.Grid
14  * @extends Roo.util.Observable
15  * This class represents the primary interface of a component based grid control.
16  * &lt;br&gt;&lt;br&gt;Usage:&lt;pre&gt;&lt;code&gt;
17  var grid = new Roo.grid.Grid(&quot;my-container-id&quot;, {
18      ds: myDataStore,
19      cm: myColModel,
20      selModel: mySelectionModel,
21      autoSizeColumns: true,
22      monitorWindowResize: false,
23      trackMouseOver: true
24  });
25  // set any options
26  grid.render();
27  * &lt;/code&gt;&lt;/pre&gt;
28  * &lt;b&gt;Common Problems:&lt;/b&gt;&lt;br/&gt;
29  * - Grid does not resize properly when going smaller: Setting overflow hidden on the container
30  * element will correct this&lt;br/&gt;
31  * - If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
32  * dimensions. The grid adapts to your container's size, if your container has no size defined then the results
33  * are unpredictable.&lt;br/&gt;
34  * - Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
35  * grid to calculate dimensions/offsets.&lt;br/&gt;
36   * @constructor
37  * @param {String/HTMLElement/Roo.Element} container The element into which this grid will be rendered -
38  * The container MUST have some type of size defined for the grid to fill. The container will be
39  * automatically set to position relative if it isn't already.
40  * @param {Object} config A config object that sets properties on this grid.
41  */
42 </span><span class="jsdoc-var">Roo.grid.Grid </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
43         </span><span class="jsdoc-comment">// initialize the container
44         </span><span class="jsdoc-var">this.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">container</span><span class="jsdoc-syntax">);
45         </span><span class="jsdoc-var">this.container.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
46         </span><span class="jsdoc-var">this.container.setStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;overflow&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">);
47     </span><span class="jsdoc-var">this.container.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'x-grid-container'</span><span class="jsdoc-syntax">);
48
49     </span><span class="jsdoc-var">this.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container.id</span><span class="jsdoc-syntax">;
50
51     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
52     </span><span class="jsdoc-comment">// check and correct shorthanded configs
53     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.ds</span><span class="jsdoc-syntax">){
54         </span><span class="jsdoc-var">this.dataSource </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.ds</span><span class="jsdoc-syntax">;
55         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.ds</span><span class="jsdoc-syntax">;
56     }
57     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cm</span><span class="jsdoc-syntax">){
58         </span><span class="jsdoc-var">this.colModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cm</span><span class="jsdoc-syntax">;
59         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.cm</span><span class="jsdoc-syntax">;
60     }
61     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.sm</span><span class="jsdoc-syntax">){
62         </span><span class="jsdoc-var">this.selModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.sm</span><span class="jsdoc-syntax">;
63         </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.sm</span><span class="jsdoc-syntax">;
64     }
65
66     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selModel</span><span class="jsdoc-syntax">) {
67         </span><span class="jsdoc-var">this.selModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selModel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.grid</span><span class="jsdoc-syntax">);
68         </span><span class="jsdoc-var">this.sm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selModel</span><span class="jsdoc-syntax">;
69         </span><span class="jsdoc-var">this.sm.xmodule </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xmodule </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
70     }
71     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.colModel.config</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
72         </span><span class="jsdoc-var">this.colModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid.ColumnModel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.colModel</span><span class="jsdoc-syntax">);
73         </span><span class="jsdoc-var">this.cm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colModel</span><span class="jsdoc-syntax">;
74         </span><span class="jsdoc-var">this.cm.xmodule </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xmodule </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
75     }
76     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">) {
77         </span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.data</span><span class="jsdoc-syntax">);
78         </span><span class="jsdoc-var">this.ds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">;
79         </span><span class="jsdoc-var">this.ds.xmodule </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.xmodule </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
80
81     }
82
83
84
85     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">){
86         </span><span class="jsdoc-var">this.container.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">);
87     }
88
89     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">){
90         </span><span class="jsdoc-var">this.container.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.height</span><span class="jsdoc-syntax">);
91     }
92     </span><span class="jsdoc-comment">/** @private */
93         </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
94         </span><span class="jsdoc-comment">// raw events
95         /**
96          * @event click
97          * The raw click event for the entire grid.
98          * @param {Roo.EventObject} e
99          */
100         </span><span class="jsdoc-string">&quot;click&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
101         </span><span class="jsdoc-comment">/**
102          * @event dblclick
103          * The raw dblclick event for the entire grid.
104          * @param {Roo.EventObject} e
105          */
106         </span><span class="jsdoc-string">&quot;dblclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
107         </span><span class="jsdoc-comment">/**
108          * @event contextmenu
109          * The raw contextmenu event for the entire grid.
110          * @param {Roo.EventObject} e
111          */
112         </span><span class="jsdoc-string">&quot;contextmenu&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
113         </span><span class="jsdoc-comment">/**
114          * @event mousedown
115          * The raw mousedown event for the entire grid.
116          * @param {Roo.EventObject} e
117          */
118         </span><span class="jsdoc-string">&quot;mousedown&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
119         </span><span class="jsdoc-comment">/**
120          * @event mouseup
121          * The raw mouseup event for the entire grid.
122          * @param {Roo.EventObject} e
123          */
124         </span><span class="jsdoc-string">&quot;mouseup&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
125         </span><span class="jsdoc-comment">/**
126          * @event mouseover
127          * The raw mouseover event for the entire grid.
128          * @param {Roo.EventObject} e
129          */
130         </span><span class="jsdoc-string">&quot;mouseover&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
131         </span><span class="jsdoc-comment">/**
132          * @event mouseout
133          * The raw mouseout event for the entire grid.
134          * @param {Roo.EventObject} e
135          */
136         </span><span class="jsdoc-string">&quot;mouseout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
137         </span><span class="jsdoc-comment">/**
138          * @event keypress
139          * The raw keypress event for the entire grid.
140          * @param {Roo.EventObject} e
141          */
142         </span><span class="jsdoc-string">&quot;keypress&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
143         </span><span class="jsdoc-comment">/**
144          * @event keydown
145          * The raw keydown event for the entire grid.
146          * @param {Roo.EventObject} e
147          */
148         </span><span class="jsdoc-string">&quot;keydown&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
149
150         </span><span class="jsdoc-comment">// custom events
151
152         /**
153          * @event cellclick
154          * Fires when a cell is clicked
155          * @param {Grid} this
156          * @param {Number} rowIndex
157          * @param {Number} columnIndex
158          * @param {Roo.EventObject} e
159          */
160         </span><span class="jsdoc-string">&quot;cellclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
161         </span><span class="jsdoc-comment">/**
162          * @event celldblclick
163          * Fires when a cell is double clicked
164          * @param {Grid} this
165          * @param {Number} rowIndex
166          * @param {Number} columnIndex
167          * @param {Roo.EventObject} e
168          */
169         </span><span class="jsdoc-string">&quot;celldblclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
170         </span><span class="jsdoc-comment">/**
171          * @event rowclick
172          * Fires when a row is clicked
173          * @param {Grid} this
174          * @param {Number} rowIndex
175          * @param {Roo.EventObject} e
176          */
177         </span><span class="jsdoc-string">&quot;rowclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
178         </span><span class="jsdoc-comment">/**
179          * @event rowdblclick
180          * Fires when a row is double clicked
181          * @param {Grid} this
182          * @param {Number} rowIndex
183          * @param {Roo.EventObject} e
184          */
185         </span><span class="jsdoc-string">&quot;rowdblclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
186         </span><span class="jsdoc-comment">/**
187          * @event headerclick
188          * Fires when a header is clicked
189          * @param {Grid} this
190          * @param {Number} columnIndex
191          * @param {Roo.EventObject} e
192          */
193         </span><span class="jsdoc-string">&quot;headerclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
194         </span><span class="jsdoc-comment">/**
195          * @event headerdblclick
196          * Fires when a header cell is double clicked
197          * @param {Grid} this
198          * @param {Number} columnIndex
199          * @param {Roo.EventObject} e
200          */
201         </span><span class="jsdoc-string">&quot;headerdblclick&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
202         </span><span class="jsdoc-comment">/**
203          * @event rowcontextmenu
204          * Fires when a row is right clicked
205          * @param {Grid} this
206          * @param {Number} rowIndex
207          * @param {Roo.EventObject} e
208          */
209         </span><span class="jsdoc-string">&quot;rowcontextmenu&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
210         </span><span class="jsdoc-comment">/**
211          * @event cellcontextmenu
212          * Fires when a cell is right clicked
213          * @param {Grid} this
214          * @param {Number} rowIndex
215          * @param {Number} cellIndex
216          * @param {Roo.EventObject} e
217          */
218          </span><span class="jsdoc-string">&quot;cellcontextmenu&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
219         </span><span class="jsdoc-comment">/**
220          * @event headercontextmenu
221          * Fires when a header is right clicked
222          * @param {Grid} this
223          * @param {Number} columnIndex
224          * @param {Roo.EventObject} e
225          */
226         </span><span class="jsdoc-string">&quot;headercontextmenu&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
227         </span><span class="jsdoc-comment">/**
228          * @event bodyscroll
229          * Fires when the body element is scrolled
230          * @param {Number} scrollLeft
231          * @param {Number} scrollTop
232          */
233         </span><span class="jsdoc-string">&quot;bodyscroll&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
234         </span><span class="jsdoc-comment">/**
235          * @event columnresize
236          * Fires when the user resizes a column
237          * @param {Number} columnIndex
238          * @param {Number} newSize
239          */
240         </span><span class="jsdoc-string">&quot;columnresize&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
241         </span><span class="jsdoc-comment">/**
242          * @event columnmove
243          * Fires when the user moves a column
244          * @param {Number} oldIndex
245          * @param {Number} newIndex
246          */
247         </span><span class="jsdoc-string">&quot;columnmove&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
248         </span><span class="jsdoc-comment">/**
249          * @event startdrag
250          * Fires when row(s) start being dragged
251          * @param {Grid} this
252          * @param {Roo.GridDD} dd The drag drop object
253          * @param {event} e The raw browser event
254          */
255         </span><span class="jsdoc-string">&quot;startdrag&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
256         </span><span class="jsdoc-comment">/**
257          * @event enddrag
258          * Fires when a drag operation is complete
259          * @param {Grid} this
260          * @param {Roo.GridDD} dd The drag drop object
261          * @param {event} e The raw browser event
262          */
263         </span><span class="jsdoc-string">&quot;enddrag&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
264         </span><span class="jsdoc-comment">/**
265          * @event dragdrop
266          * Fires when dragged row(s) are dropped on a valid DD target
267          * @param {Grid} this
268          * @param {Roo.GridDD} dd The drag drop object
269          * @param {String} targetId The target drag drop object
270          * @param {event} e The raw browser event
271          */
272         </span><span class="jsdoc-string">&quot;dragdrop&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
273         </span><span class="jsdoc-comment">/**
274          * @event dragover
275          * Fires while row(s) are being dragged. &quot;targetId&quot; is the id of the Yahoo.util.DD object the selected rows are being dragged over.
276          * @param {Grid} this
277          * @param {Roo.GridDD} dd The drag drop object
278          * @param {String} targetId The target drag drop object
279          * @param {event} e The raw browser event
280          */
281         </span><span class="jsdoc-string">&quot;dragover&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
282         </span><span class="jsdoc-comment">/**
283          * @event dragenter
284          *  Fires when the dragged row(s) first cross another DD target while being dragged
285          * @param {Grid} this
286          * @param {Roo.GridDD} dd The drag drop object
287          * @param {String} targetId The target drag drop object
288          * @param {event} e The raw browser event
289          */
290         </span><span class="jsdoc-string">&quot;dragenter&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
291         </span><span class="jsdoc-comment">/**
292          * @event dragout
293          * Fires when the dragged row(s) leave another DD target while being dragged
294          * @param {Grid} this
295          * @param {Roo.GridDD} dd The drag drop object
296          * @param {String} targetId The target drag drop object
297          * @param {event} e The raw browser event
298          */
299         </span><span class="jsdoc-string">&quot;dragout&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
300         </span><span class="jsdoc-comment">/**
301          * @event rowclass
302          * Fires when a row is rendered, so you can change add a style to it.
303          * @param {GridView} gridview   The grid view
304          * @param {Object} rowcfg   contains record  rowIndex and rowClass - set rowClass to add a style.
305          */
306         </span><span class="jsdoc-string">'rowclass' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
307
308         </span><span class="jsdoc-comment">/**
309          * @event render
310          * Fires when the grid is rendered
311          * @param {Grid} grid
312          */
313         </span><span class="jsdoc-string">'render' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
314     </span><span class="jsdoc-syntax">});
315
316     </span><span class="jsdoc-var">Roo.grid.Grid.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
317 };
318 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.grid.Grid</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.util.Observable</span><span class="jsdoc-syntax">, {
319
320     </span><span class="jsdoc-comment">/**
321      * @cfg {String} ddGroup - drag drop group.
322      */
323
324     /**
325      * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Default is 25.
326      */
327     </span><span class="jsdoc-var">minColumnWidth </span><span class="jsdoc-syntax">: 25,
328
329     </span><span class="jsdoc-comment">/**
330      * @cfg {Boolean} autoSizeColumns True to automatically resize the columns to fit their content
331      * &lt;b&gt;on initial render.&lt;/b&gt; It is more efficient to explicitly size the columns
332      * through the ColumnModel's {@link Roo.grid.ColumnModel#width} config option.  Default is false.
333      */
334     </span><span class="jsdoc-var">autoSizeColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
335
336     </span><span class="jsdoc-comment">/**
337      * @cfg {Boolean} autoSizeHeaders True to measure headers with column data when auto sizing columns. Default is true.
338      */
339     </span><span class="jsdoc-var">autoSizeHeaders </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
340
341     </span><span class="jsdoc-comment">/**
342      * @cfg {Boolean} monitorWindowResize True to autoSize the grid when the window resizes. Default is true.
343      */
344     </span><span class="jsdoc-var">monitorWindowResize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
345
346     </span><span class="jsdoc-comment">/**
347      * @cfg {Boolean} maxRowsToMeasure If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of
348      * rows measured to get a columns size. Default is 0 (all rows).
349      */
350     </span><span class="jsdoc-var">maxRowsToMeasure </span><span class="jsdoc-syntax">: 0,
351
352     </span><span class="jsdoc-comment">/**
353      * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is true.
354      */
355     </span><span class="jsdoc-var">trackMouseOver </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
356
357     </span><span class="jsdoc-comment">/**
358     * @cfg {Boolean} enableDrag  True to enable drag of rows. Default is false. (double check if this is needed?)
359     */
360
361     /**
362     * @cfg {Boolean} enableDragDrop True to enable drag and drop of rows. Default is false.
363     */
364     </span><span class="jsdoc-var">enableDragDrop </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
365
366     </span><span class="jsdoc-comment">/**
367     * @cfg {Boolean} enableColumnMove True to enable drag and drop reorder of columns. Default is true.
368     */
369     </span><span class="jsdoc-var">enableColumnMove </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
370
371     </span><span class="jsdoc-comment">/**
372     * @cfg {Boolean} enableColumnHide True to enable hiding of columns with the header context menu. Default is true.
373     */
374     </span><span class="jsdoc-var">enableColumnHide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
375
376     </span><span class="jsdoc-comment">/**
377     * @cfg {Boolean} enableRowHeightSync True to manually sync row heights across locked and not locked rows. Default is false.
378     */
379     </span><span class="jsdoc-var">enableRowHeightSync </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
380
381     </span><span class="jsdoc-comment">/**
382     * @cfg {Boolean} stripeRows True to stripe the rows.  Default is true.
383     */
384     </span><span class="jsdoc-var">stripeRows </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
385
386     </span><span class="jsdoc-comment">/**
387     * @cfg {Boolean} autoHeight True to fit the height of the grid container to the height of the data. Default is false.
388     */
389     </span><span class="jsdoc-var">autoHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
390
391     </span><span class="jsdoc-comment">/**
392      * @cfg {String} autoExpandColumn The id (or dataIndex) of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
393      */
394     </span><span class="jsdoc-var">autoExpandColumn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
395
396     </span><span class="jsdoc-comment">/**
397     * @cfg {Number} autoExpandMin The minimum width the autoExpandColumn can have (if enabled).
398     * Default is 50.
399     */
400     </span><span class="jsdoc-var">autoExpandMin </span><span class="jsdoc-syntax">: 50,
401
402     </span><span class="jsdoc-comment">/**
403     * @cfg {Number} autoExpandMax The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
404     */
405     </span><span class="jsdoc-var">autoExpandMax </span><span class="jsdoc-syntax">: 1000,
406
407     </span><span class="jsdoc-comment">/**
408     * @cfg {Object} view The {@link Roo.grid.GridView} used by the grid. This can be set before a call to render().
409     */
410     </span><span class="jsdoc-var">view </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">,
411
412     </span><span class="jsdoc-comment">/**
413     * @cfg {Object} loadMask An {@link Roo.LoadMask} config or true to mask the grid while loading. Default is false.
414     */
415     </span><span class="jsdoc-var">loadMask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
416     </span><span class="jsdoc-comment">/**
417     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
418     */
419     </span><span class="jsdoc-var">dropTarget</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
420
421
422
423     </span><span class="jsdoc-comment">// private
424     </span><span class="jsdoc-var">rendered </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
425
426     </span><span class="jsdoc-comment">/**
427     * @cfg {Boolean} autoWidth True to set the grid's width to the default total width of the grid's columns instead
428     * of a fixed width. Default is false.
429     */
430     /**
431     * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if autoHeight is not on.
432     */
433     /**
434      * Called once after all setup has been completed and the grid is ready to be rendered.
435      * @return {Roo.grid.Grid} this
436      */
437     </span><span class="jsdoc-var">render </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
438     {
439         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">;
440         </span><span class="jsdoc-comment">// try to detect autoHeight/width mode
441         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">((!</span><span class="jsdoc-var">c.dom.offsetHeight </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">c.dom.offsetHeight </span><span class="jsdoc-syntax">&lt; 20) || </span><span class="jsdoc-var">c.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;height&quot;</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">&quot;auto&quot;</span><span class="jsdoc-syntax">){
442             </span><span class="jsdoc-var">this.autoHeight </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
443         }
444         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getView</span><span class="jsdoc-syntax">();
445         </span><span class="jsdoc-var">view.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
446
447         </span><span class="jsdoc-var">c.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
448         </span><span class="jsdoc-var">c.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;dblclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onDblClick</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
449         </span><span class="jsdoc-var">c.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;contextmenu&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onContextMenu</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
450         </span><span class="jsdoc-var">c.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onKeyDown</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
451         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isTouch</span><span class="jsdoc-syntax">) {
452             </span><span class="jsdoc-var">c.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;touchstart&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onTouchStart</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
453         }
454
455         </span><span class="jsdoc-var">this.relayEvents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-string">&quot;mousedown&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;mouseup&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;mouseover&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;mouseout&quot;</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">]);
456
457         </span><span class="jsdoc-var">this.getSelectionModel</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.init</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
458
459         </span><span class="jsdoc-var">view.render</span><span class="jsdoc-syntax">();
460
461         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
462             </span><span class="jsdoc-var">this.loadMask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.LoadMask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">,
463                     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">));
464         }
465
466
467         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.toolbar.xtype</span><span class="jsdoc-syntax">) {
468             </span><span class="jsdoc-var">this.toolbar.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getHeaderPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
469             </span><span class="jsdoc-var">this.toolbar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Toolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.toolbar</span><span class="jsdoc-syntax">);
470         }
471         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.footer.xtype</span><span class="jsdoc-syntax">) {
472             </span><span class="jsdoc-var">this.footer.dataSource </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getDataSource</span><span class="jsdoc-syntax">();
473             </span><span class="jsdoc-var">this.footer.container </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getFooterPanel</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
474             </span><span class="jsdoc-var">this.footer </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.footer</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo</span><span class="jsdoc-syntax">);
475         }
476         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dropTarget </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.dropTarget.xtype</span><span class="jsdoc-syntax">) {
477             </span><span class="jsdoc-keyword">delete </span><span class="jsdoc-var">this.dropTarget.xtype</span><span class="jsdoc-syntax">;
478             </span><span class="jsdoc-var">this.dropTarget </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.dd.DropTarget</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.getView</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.mainBody</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dropTarget</span><span class="jsdoc-syntax">);
479         }
480
481
482         </span><span class="jsdoc-var">this.rendered </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
483         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'render'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
484         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
485     },
486
487     </span><span class="jsdoc-comment">/**
488      * Reconfigures the grid to use a different Store and Column Model.
489      * The View will be bound to the new objects and refreshed.
490      * @param {Roo.data.Store} dataSource The new {@link Roo.data.Store} object
491      * @param {Roo.grid.ColumnModel} The new {@link Roo.grid.ColumnModel} object
492      */
493     </span><span class="jsdoc-var">reconfigure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataSource</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">colModel</span><span class="jsdoc-syntax">){
494         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
495             </span><span class="jsdoc-var">this.loadMask.destroy</span><span class="jsdoc-syntax">();
496             </span><span class="jsdoc-var">this.loadMask </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.LoadMask</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">,
497                     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">store</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">dataSource</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">));
498         }
499         </span><span class="jsdoc-var">this.view.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">dataSource</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">colModel</span><span class="jsdoc-syntax">);
500         </span><span class="jsdoc-var">this.dataSource </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">dataSource</span><span class="jsdoc-syntax">;
501         </span><span class="jsdoc-var">this.colModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">colModel</span><span class="jsdoc-syntax">;
502         </span><span class="jsdoc-var">this.view.refresh</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
503     },
504     </span><span class="jsdoc-comment">/**
505      * addColumns
506      * Add's a column, default at the end..
507      
508      * @param {int} position to add (default end)
509      * @param {Array} of objects of column configuration see {@link Roo.grid.ColumnModel} 
510      */
511     </span><span class="jsdoc-var">addColumns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">)
512     {
513
514         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
515             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
516             </span><span class="jsdoc-var">cfg.id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg.id</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo.id</span><span class="jsdoc-syntax">() : </span><span class="jsdoc-var">cfg.id</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// don't normally use this..
517             </span><span class="jsdoc-var">this.cm.lookup</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">cfg.id</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
518         }
519
520
521         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">this.cm.config.length</span><span class="jsdoc-syntax">) {
522             </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.cm.config.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">//this.cm.config.push(cfg);
523         </span><span class="jsdoc-syntax">}
524         </span><span class="jsdoc-var">pos </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(0,</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
525         </span><span class="jsdoc-var">ar.shift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar.length</span><span class="jsdoc-syntax">);
526         </span><span class="jsdoc-var">ar.shift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
527         </span><span class="jsdoc-var">this.cm.config.splice.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ar</span><span class="jsdoc-syntax">);
528
529
530
531         </span><span class="jsdoc-var">this.view.generateRules</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cm</span><span class="jsdoc-syntax">);
532         </span><span class="jsdoc-var">this.view.refresh</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
533
534     },
535
536
537
538
539     </span><span class="jsdoc-comment">// private
540     </span><span class="jsdoc-var">onKeyDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
541         </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
542     },
543
544     </span><span class="jsdoc-comment">/**
545      * Destroy this grid.
546      * @param {Boolean} removeEl True to remove the element
547      */
548     </span><span class="jsdoc-var">destroy </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">keepListeners</span><span class="jsdoc-syntax">){
549         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
550             </span><span class="jsdoc-var">this.loadMask.destroy</span><span class="jsdoc-syntax">();
551         }
552         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">;
553         </span><span class="jsdoc-var">c.removeAllListeners</span><span class="jsdoc-syntax">();
554         </span><span class="jsdoc-var">this.view.destroy</span><span class="jsdoc-syntax">();
555         </span><span class="jsdoc-var">this.colModel.purgeListeners</span><span class="jsdoc-syntax">();
556         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">keepListeners</span><span class="jsdoc-syntax">){
557             </span><span class="jsdoc-var">this.purgeListeners</span><span class="jsdoc-syntax">();
558         }
559         </span><span class="jsdoc-var">c.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;&quot;</span><span class="jsdoc-syntax">);
560         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">removeEl </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
561             </span><span class="jsdoc-var">c.remove</span><span class="jsdoc-syntax">();
562         }
563     },
564
565     </span><span class="jsdoc-comment">// private
566     </span><span class="jsdoc-var">processEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
567         </span><span class="jsdoc-comment">// does this fire select???
568         //Roo.log('grid:processEvent '  + name);
569
570         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">) {
571             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
572         }
573
574         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getTarget</span><span class="jsdoc-syntax">();
575         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.view</span><span class="jsdoc-syntax">;
576         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.findHeaderIndex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
577         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">header </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
578             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ename </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'touchstart' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'click' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">;
579
580             </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;header&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">ename</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">header</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
581         }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
582             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.findRowIndex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
583             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cell </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">v.findCellIndex</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">);
584             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'touchstart'</span><span class="jsdoc-syntax">) {
585                 </span><span class="jsdoc-comment">// first touch is always a click.
586                 // hopefull this happens after selection is updated.?
587                 </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
588
589                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selModel.getSelectedCell</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
590                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selModel.getSelectedCell</span><span class="jsdoc-syntax">();
591                     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0] &amp;&amp; </span><span class="jsdoc-var">cell </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[1]){
592                         </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'dblclick'</span><span class="jsdoc-syntax">;
593                     }
594                 }
595                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.selModel.getSelections</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'undefined'</span><span class="jsdoc-syntax">) {
596                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selModel.getSelections</span><span class="jsdoc-syntax">();
597                     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">;
598                     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cs.length </span><span class="jsdoc-syntax">== 1 &amp;&amp; </span><span class="jsdoc-var">ds.getAt</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-var">cs</span><span class="jsdoc-syntax">[0]){
599                         </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'dblclick'</span><span class="jsdoc-syntax">;
600                     }
601                 }
602                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">) {
603                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
604                 }
605             }
606
607
608             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
609                 </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;row&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
610                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cell </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
611                     </span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;cell&quot; </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">name</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
612                 }
613             }
614         }
615     },
616
617     </span><span class="jsdoc-comment">// private
618     </span><span class="jsdoc-var">onClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
619         </span><span class="jsdoc-var">this.processEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;click&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
620     },
621    </span><span class="jsdoc-comment">// private
622     </span><span class="jsdoc-var">onTouchStart </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
623         </span><span class="jsdoc-var">this.processEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;touchstart&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
624     },
625
626     </span><span class="jsdoc-comment">// private
627     </span><span class="jsdoc-var">onContextMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">t</span><span class="jsdoc-syntax">){
628         </span><span class="jsdoc-var">this.processEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;contextmenu&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
629     },
630
631     </span><span class="jsdoc-comment">// private
632     </span><span class="jsdoc-var">onDblClick </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
633         </span><span class="jsdoc-var">this.processEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;dblclick&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
634     },
635
636     </span><span class="jsdoc-comment">// private
637     </span><span class="jsdoc-var">walkCells </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">step</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">scope</span><span class="jsdoc-syntax">){
638         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cm </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colModel</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">clen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cm.getColumnCount</span><span class="jsdoc-syntax">();
639         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ds </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">rlen </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ds.getCount</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
640         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">step </span><span class="jsdoc-syntax">&lt; 0){
641             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">&lt; 0){
642                 </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">--;
643                 </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
644             }
645             </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">&gt;= 0){
646                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">first</span><span class="jsdoc-syntax">){
647                     </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">clen</span><span class="jsdoc-syntax">-1;
648                 }
649                 </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
650                 </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">&gt;= 0){
651                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cm</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
652                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">];
653                     }
654                     </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">--;
655                 }
656                 </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">--;
657             }
658         } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
659             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">&gt;= </span><span class="jsdoc-var">clen</span><span class="jsdoc-syntax">){
660                 </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">++;
661                 </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
662             }
663             </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">rlen</span><span class="jsdoc-syntax">){
664                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">first</span><span class="jsdoc-syntax">){
665                     </span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">= 0;
666                 }
667                 </span><span class="jsdoc-var">first </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
668                 </span><span class="jsdoc-keyword">while</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">col </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">clen</span><span class="jsdoc-syntax">){
669                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cm</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
670                         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">];
671                     }
672                     </span><span class="jsdoc-var">col</span><span class="jsdoc-syntax">++;
673                 }
674                 </span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">++;
675             }
676         }
677         </span><span class="jsdoc-keyword">return null</span><span class="jsdoc-syntax">;
678     },
679
680     </span><span class="jsdoc-comment">// private
681     </span><span class="jsdoc-var">getSelections </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
682         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.selModel.getSelections</span><span class="jsdoc-syntax">();
683     },
684
685     </span><span class="jsdoc-comment">/**
686      * Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
687      * but if manual update is required this method will initiate it.
688      */
689     </span><span class="jsdoc-var">autoSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
690         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rendered</span><span class="jsdoc-syntax">){
691             </span><span class="jsdoc-var">this.view.layout</span><span class="jsdoc-syntax">();
692             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.view.adjustForScroll</span><span class="jsdoc-syntax">){
693                 </span><span class="jsdoc-var">this.view.adjustForScroll</span><span class="jsdoc-syntax">();
694             }
695         }
696     },
697
698     </span><span class="jsdoc-comment">/**
699      * Returns the grid's underlying element.
700      * @return {Element} The element
701      */
702     </span><span class="jsdoc-var">getGridEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
703         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.container</span><span class="jsdoc-syntax">;
704     },
705
706     </span><span class="jsdoc-comment">// private for compatibility, overridden by editor grid
707     </span><span class="jsdoc-var">stopEditing </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){},
708
709     </span><span class="jsdoc-comment">/**
710      * Returns the grid's SelectionModel.
711      * @return {SelectionModel}
712      */
713     </span><span class="jsdoc-var">getSelectionModel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
714         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.selModel</span><span class="jsdoc-syntax">){
715             </span><span class="jsdoc-var">this.selModel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid.RowSelectionModel</span><span class="jsdoc-syntax">();
716         }
717         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.selModel</span><span class="jsdoc-syntax">;
718     },
719
720     </span><span class="jsdoc-comment">/**
721      * Returns the grid's DataSource.
722      * @return {DataSource}
723      */
724     </span><span class="jsdoc-var">getDataSource </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
725         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.dataSource</span><span class="jsdoc-syntax">;
726     },
727
728     </span><span class="jsdoc-comment">/**
729      * Returns the grid's ColumnModel.
730      * @return {ColumnModel}
731      */
732     </span><span class="jsdoc-var">getColumnModel </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
733         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.colModel</span><span class="jsdoc-syntax">;
734     },
735
736     </span><span class="jsdoc-comment">/**
737      * Returns the grid's GridView object.
738      * @return {GridView}
739      */
740     </span><span class="jsdoc-var">getView </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
741         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.view</span><span class="jsdoc-syntax">){
742             </span><span class="jsdoc-var">this.view </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.grid.GridView</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.viewConfig</span><span class="jsdoc-syntax">);
743         }
744         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.view</span><span class="jsdoc-syntax">;
745     },
746     </span><span class="jsdoc-comment">/**
747      * Called to get grid's drag proxy text, by default returns this.ddText.
748      * @return {String}
749      */
750     </span><span class="jsdoc-var">getDragDropText </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
751         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.selModel.getCount</span><span class="jsdoc-syntax">();
752         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">String.format</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.ddText</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">count</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">== 1 ? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'s'</span><span class="jsdoc-syntax">);
753     }
754 });
755 </span><span class="jsdoc-comment">/**
756  * Configures the text is the drag proxy (defaults to &quot;%0 selected row(s)&quot;).
757  * %0 is replaced with the number of selected rows.
758  * @type String
759  */
760 </span><span class="jsdoc-var">Roo.grid.Grid.prototype.ddText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">&quot;{0} selected row{1}&quot;</span><span class="jsdoc-syntax">;</span></code></body></html>