[625] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.0.0 |
---|
| 3 | * Copyright(c) 2006-2009 Ext JS, LLC |
---|
| 4 | * licensing@extjs.com |
---|
| 5 | * http://www.extjs.com/license |
---|
| 6 | */ |
---|
| 7 | /** |
---|
| 8 | * @class Ext.grid.GridPanel |
---|
| 9 | * @extends Ext.Panel |
---|
| 10 | * <p>This class represents the primary interface of a component based grid control to represent data |
---|
| 11 | * in a tabular format of rows and columns. The GridPanel is composed of the following:</p> |
---|
| 12 | * <div class="mdetail-params"><ul> |
---|
| 13 | * <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows) |
---|
| 14 | * <div class="sub-desc"></div></li> |
---|
| 15 | * <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup |
---|
| 16 | * <div class="sub-desc"></div></li> |
---|
| 17 | * <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface |
---|
| 18 | * <div class="sub-desc"></div></li> |
---|
| 19 | * <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior |
---|
| 20 | * <div class="sub-desc"></div></li> |
---|
| 21 | * </ul></div> |
---|
| 22 | * <p>Example usage:</p> |
---|
| 23 | * <pre><code> |
---|
| 24 | var grid = new Ext.grid.GridPanel({ |
---|
| 25 | {@link #store}: new (@link Ext.data.Store}({ |
---|
| 26 | {@link Ext.data.Store#autoDestroy autoDestroy}: true, |
---|
| 27 | {@link Ext.data.Store#reader reader}: reader, |
---|
| 28 | {@link Ext.data.Store#data data}: xg.dummyData |
---|
| 29 | }), |
---|
| 30 | {@link #columns}: [ |
---|
| 31 | {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}, |
---|
| 32 | {header: 'Price', width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, |
---|
| 33 | {header: 'Change', width: 120, sortable: true, dataIndex: 'change'}, |
---|
| 34 | {header: '% Change', width: 120, sortable: true, dataIndex: 'pctChange'}, |
---|
| 35 | // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype |
---|
| 36 | {header: 'Last Updated', width: 135, sortable: true, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y'} |
---|
| 37 | ], |
---|
| 38 | {@link #viewConfig}: { |
---|
| 39 | {@link Ext.grid.GridView#forceFit forceFit}: true, |
---|
| 40 | |
---|
| 41 | // Return CSS class to apply to rows depending upon data values |
---|
| 42 | {@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) { |
---|
| 43 | var c = record.{@link Ext.data.Record#get get}('change'); |
---|
| 44 | if (c < 0) { |
---|
| 45 | return 'price-fall'; |
---|
| 46 | } else if (c > 0) { |
---|
| 47 | return 'price-rise'; |
---|
| 48 | } |
---|
| 49 | } |
---|
| 50 | }, |
---|
| 51 | {@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}), |
---|
| 52 | width: 600, |
---|
| 53 | height: 300, |
---|
| 54 | frame: true, |
---|
| 55 | title: 'Framed with Row Selection and Horizontal Scrolling', |
---|
| 56 | iconCls: 'icon-grid' |
---|
| 57 | }); |
---|
| 58 | * </code></pre> |
---|
| 59 | * <p><b><u>Notes:</u></b></p> |
---|
| 60 | * <div class="mdetail-params"><ul> |
---|
| 61 | * <li>Although this class inherits many configuration options from base classes, some of them |
---|
| 62 | * (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will |
---|
| 63 | * have no effect.</li> |
---|
| 64 | * <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to |
---|
| 65 | * scroll its rows. These dimensions can either be set explicitly through the |
---|
| 66 | * <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt> |
---|
| 67 | * configuration options or implicitly set by using the grid as a child item of a |
---|
| 68 | * {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager} |
---|
| 69 | * provide the sizing of its child items (for example the Container of the Grid may specify |
---|
| 70 | * <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li> |
---|
| 71 | * <li>To access the data in a Grid, it is necessary to use the data model encapsulated |
---|
| 72 | * by the {@link #store Store}. See the {@link #cellclick} event for more details.</li> |
---|
| 73 | * </ul></div> |
---|
| 74 | * @constructor |
---|
| 75 | * @param {Object} config The config object |
---|
| 76 | * @xtype grid |
---|
| 77 | */ |
---|
| 78 | Ext.grid.GridPanel = Ext.extend(Ext.Panel, { |
---|
| 79 | /** |
---|
| 80 | * @cfg {String} autoExpandColumn |
---|
| 81 | * <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in |
---|
| 82 | * this grid that should expand to fill unused space. This value specified here can not |
---|
| 83 | * be <tt>0</tt>.</p> |
---|
| 84 | * <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with |
---|
| 85 | * <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt> |
---|
| 86 | * is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt> |
---|
| 87 | * for additional details.</p> |
---|
| 88 | * <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p> |
---|
| 89 | */ |
---|
| 90 | autoExpandColumn : false, |
---|
| 91 | /** |
---|
| 92 | * @cfg {Number} autoExpandMax The maximum width the <tt>{@link #autoExpandColumn}</tt> |
---|
| 93 | * can have (if enabled). Defaults to <tt>1000</tt>. |
---|
| 94 | */ |
---|
| 95 | autoExpandMax : 1000, |
---|
| 96 | /** |
---|
| 97 | * @cfg {Number} autoExpandMin The minimum width the <tt>{@link #autoExpandColumn}</tt> |
---|
| 98 | * can have (if enabled). Defaults to <tt>50</tt>. |
---|
| 99 | */ |
---|
| 100 | autoExpandMin : 50, |
---|
| 101 | /** |
---|
| 102 | * @cfg {Boolean} columnLines <tt>true</tt> to add css for column separation lines. |
---|
| 103 | * Default is <tt>false</tt>. |
---|
| 104 | */ |
---|
| 105 | columnLines : false, |
---|
| 106 | /** |
---|
| 107 | * @cfg {Object} cm Shorthand for <tt>{@link #colModel}</tt>. |
---|
| 108 | */ |
---|
| 109 | /** |
---|
| 110 | * @cfg {Object} colModel The {@link Ext.grid.ColumnModel} to use when rendering the grid (required). |
---|
| 111 | */ |
---|
| 112 | /** |
---|
| 113 | * @cfg {Array} columns An array of {@link Ext.grid.Column columns} to auto create a |
---|
| 114 | * {@link Ext.grid.ColumnModel}. The ColumnModel may be explicitly created via the |
---|
| 115 | * <tt>{@link #colModel}</tt> configuration property. |
---|
| 116 | */ |
---|
| 117 | /** |
---|
| 118 | * @cfg {String} ddGroup The DD group this GridPanel belongs to. Defaults to <tt>'GridDD'</tt> if not specified. |
---|
| 119 | */ |
---|
| 120 | /** |
---|
| 121 | * @cfg {String} ddText |
---|
| 122 | * Configures the text in the drag proxy. Defaults to: |
---|
| 123 | * <pre><code> |
---|
| 124 | * ddText : '{0} selected row{1}' |
---|
| 125 | * </code></pre> |
---|
| 126 | * <tt>{0}</tt> is replaced with the number of selected rows. |
---|
| 127 | */ |
---|
| 128 | ddText : '{0} selected row{1}', |
---|
| 129 | /** |
---|
| 130 | * @cfg {Boolean} deferRowRender <P>Defaults to <tt>true</tt> to enable deferred row rendering.</p> |
---|
| 131 | * <p>This allows the GridPanel to be initially rendered empty, with the expensive update of the row |
---|
| 132 | * structure deferred so that layouts with GridPanels appear more quickly.</p> |
---|
| 133 | */ |
---|
| 134 | deferRowRender : true, |
---|
| 135 | /** |
---|
| 136 | * @cfg {Boolean} disableSelection <p><tt>true</tt> to disable selections in the grid. Defaults to <tt>false</tt>.</p> |
---|
| 137 | * <p>Ignored if a {@link #selModel SelectionModel} is specified.</p> |
---|
| 138 | */ |
---|
| 139 | /** |
---|
| 140 | * @cfg {Boolean} enableColumnResize <tt>false</tt> to turn off column resizing for the whole grid. Defaults to <tt>true</tt>. |
---|
| 141 | */ |
---|
| 142 | /** |
---|
| 143 | * @cfg {Boolean} enableColumnHide Defaults to <tt>true</tt> to enable hiding of columns with the header context menu. |
---|
| 144 | */ |
---|
| 145 | enableColumnHide : true, |
---|
| 146 | /** |
---|
| 147 | * @cfg {Boolean} enableColumnMove Defaults to <tt>true</tt> to enable drag and drop reorder of columns. <tt>false</tt> |
---|
| 148 | * to turn off column reordering via drag drop. |
---|
| 149 | */ |
---|
| 150 | enableColumnMove : true, |
---|
| 151 | /** |
---|
| 152 | * @cfg {Boolean} enableDragDrop <p>Enables dragging of the selected rows of the GridPanel. Defaults to <tt>false</tt>.</p> |
---|
| 153 | * <p>Setting this to <b><tt>true</tt></b> causes this GridPanel's {@link #getView GridView} to |
---|
| 154 | * create an instance of {@link Ext.grid.GridDragZone}. <b>Note</b>: this is available only <b>after</b> |
---|
| 155 | * the Grid has been rendered as the GridView's <tt>{@link Ext.grid.GridView#dragZone dragZone}</tt> |
---|
| 156 | * property.</p> |
---|
| 157 | * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's implementations of |
---|
| 158 | * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
| 159 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} are able |
---|
| 160 | * to process the {@link Ext.grid.GridDragZone#getDragData data} which is provided.</p> |
---|
| 161 | */ |
---|
| 162 | enableDragDrop : false, |
---|
| 163 | /** |
---|
| 164 | * @cfg {Boolean} enableHdMenu Defaults to <tt>true</tt> to enable the drop down button for menu in the headers. |
---|
| 165 | */ |
---|
| 166 | enableHdMenu : true, |
---|
| 167 | /** |
---|
| 168 | * @cfg {Boolean} hideHeaders True to hide the grid's header. Defaults to <code>false</code>. |
---|
| 169 | */ |
---|
| 170 | /** |
---|
| 171 | * @cfg {Object} loadMask An {@link Ext.LoadMask} config or true to mask the grid while |
---|
| 172 | * loading. Defaults to <code>false</code>. |
---|
| 173 | */ |
---|
| 174 | loadMask : false, |
---|
| 175 | /** |
---|
| 176 | * @cfg {Number} maxHeight Sets the maximum height of the grid - ignored if <tt>autoHeight</tt> is not on. |
---|
| 177 | */ |
---|
| 178 | /** |
---|
| 179 | * @cfg {Number} minColumnWidth The minimum width a column can be resized to. Defaults to <tt>25</tt>. |
---|
| 180 | */ |
---|
| 181 | minColumnWidth : 25, |
---|
| 182 | /** |
---|
| 183 | * @cfg {Object} sm Shorthand for <tt>{@link #selModel}</tt>. |
---|
| 184 | */ |
---|
| 185 | /** |
---|
| 186 | * @cfg {Object} selModel Any subclass of {@link Ext.grid.AbstractSelectionModel} that will provide |
---|
| 187 | * the selection model for the grid (defaults to {@link Ext.grid.RowSelectionModel} if not specified). |
---|
| 188 | */ |
---|
| 189 | /** |
---|
| 190 | * @cfg {Ext.data.Store} store The {@link Ext.data.Store} the grid should use as its data source (required). |
---|
| 191 | */ |
---|
| 192 | /** |
---|
| 193 | * @cfg {Boolean} stripeRows <tt>true</tt> to stripe the rows. Default is <tt>false</tt>. |
---|
| 194 | * <p>This causes the CSS class <tt><b>x-grid3-row-alt</b></tt> to be added to alternate rows of |
---|
| 195 | * the grid. A default CSS rule is provided which sets a background colour, but you can override this |
---|
| 196 | * with a rule which either overrides the <b>background-color</b> style using the '!important' |
---|
| 197 | * modifier, or which uses a CSS selector of higher specificity.</p> |
---|
| 198 | */ |
---|
| 199 | stripeRows : false, |
---|
| 200 | /** |
---|
| 201 | * @cfg {Boolean} trackMouseOver True to highlight rows when the mouse is over. Default is <tt>true</tt> |
---|
| 202 | * for GridPanel, but <tt>false</tt> for EditorGridPanel. |
---|
| 203 | */ |
---|
| 204 | trackMouseOver : true, |
---|
| 205 | /** |
---|
| 206 | * @cfg {Array} stateEvents |
---|
| 207 | * An array of events that, when fired, should trigger this component to save its state. |
---|
| 208 | * Defaults to:<pre><code> |
---|
| 209 | * stateEvents: ['columnmove', 'columnresize', 'sortchange'] |
---|
| 210 | * </code></pre> |
---|
| 211 | * <p>These can be any types of events supported by this component, including browser or |
---|
| 212 | * custom events (e.g., <tt>['click', 'customerchange']</tt>).</p> |
---|
| 213 | * <p>See {@link Ext.Component#stateful} for an explanation of saving and restoring |
---|
| 214 | * Component state.</p> |
---|
| 215 | */ |
---|
| 216 | stateEvents : ['columnmove', 'columnresize', 'sortchange'], |
---|
| 217 | /** |
---|
| 218 | * @cfg {Object} view The {@link Ext.grid.GridView} used by the grid. This can be set |
---|
| 219 | * before a call to {@link Ext.Component#render render()}. |
---|
| 220 | */ |
---|
| 221 | view : null, |
---|
| 222 | /** |
---|
| 223 | * @cfg {Object} viewConfig A config object that will be applied to the grid's UI view. Any of |
---|
| 224 | * the config options available for {@link Ext.grid.GridView} can be specified here. This option |
---|
| 225 | * is ignored if <tt>{@link #view}</tt> is specified. |
---|
| 226 | */ |
---|
| 227 | |
---|
| 228 | // private |
---|
| 229 | rendered : false, |
---|
| 230 | // private |
---|
| 231 | viewReady : false, |
---|
| 232 | |
---|
| 233 | // private |
---|
| 234 | initComponent : function(){ |
---|
| 235 | Ext.grid.GridPanel.superclass.initComponent.call(this); |
---|
| 236 | |
---|
| 237 | if(this.columnLines){ |
---|
| 238 | this.cls = (this.cls || '') + ' x-grid-with-col-lines'; |
---|
| 239 | } |
---|
| 240 | // override any provided value since it isn't valid |
---|
| 241 | // and is causing too many bug reports ;) |
---|
| 242 | this.autoScroll = false; |
---|
| 243 | this.autoWidth = false; |
---|
| 244 | |
---|
| 245 | if(Ext.isArray(this.columns)){ |
---|
| 246 | this.colModel = new Ext.grid.ColumnModel(this.columns); |
---|
| 247 | delete this.columns; |
---|
| 248 | } |
---|
| 249 | |
---|
| 250 | // check and correct shorthanded configs |
---|
| 251 | if(this.ds){ |
---|
| 252 | this.store = this.ds; |
---|
| 253 | delete this.ds; |
---|
| 254 | } |
---|
| 255 | if(this.cm){ |
---|
| 256 | this.colModel = this.cm; |
---|
| 257 | delete this.cm; |
---|
| 258 | } |
---|
| 259 | if(this.sm){ |
---|
| 260 | this.selModel = this.sm; |
---|
| 261 | delete this.sm; |
---|
| 262 | } |
---|
| 263 | this.store = Ext.StoreMgr.lookup(this.store); |
---|
| 264 | |
---|
| 265 | this.addEvents( |
---|
| 266 | // raw events |
---|
| 267 | /** |
---|
| 268 | * @event click |
---|
| 269 | * The raw click event for the entire grid. |
---|
| 270 | * @param {Ext.EventObject} e |
---|
| 271 | */ |
---|
| 272 | 'click', |
---|
| 273 | /** |
---|
| 274 | * @event dblclick |
---|
| 275 | * The raw dblclick event for the entire grid. |
---|
| 276 | * @param {Ext.EventObject} e |
---|
| 277 | */ |
---|
| 278 | 'dblclick', |
---|
| 279 | /** |
---|
| 280 | * @event contextmenu |
---|
| 281 | * The raw contextmenu event for the entire grid. |
---|
| 282 | * @param {Ext.EventObject} e |
---|
| 283 | */ |
---|
| 284 | 'contextmenu', |
---|
| 285 | /** |
---|
| 286 | * @event mousedown |
---|
| 287 | * The raw mousedown event for the entire grid. |
---|
| 288 | * @param {Ext.EventObject} e |
---|
| 289 | */ |
---|
| 290 | 'mousedown', |
---|
| 291 | /** |
---|
| 292 | * @event mouseup |
---|
| 293 | * The raw mouseup event for the entire grid. |
---|
| 294 | * @param {Ext.EventObject} e |
---|
| 295 | */ |
---|
| 296 | 'mouseup', |
---|
| 297 | /** |
---|
| 298 | * @event mouseover |
---|
| 299 | * The raw mouseover event for the entire grid. |
---|
| 300 | * @param {Ext.EventObject} e |
---|
| 301 | */ |
---|
| 302 | 'mouseover', |
---|
| 303 | /** |
---|
| 304 | * @event mouseout |
---|
| 305 | * The raw mouseout event for the entire grid. |
---|
| 306 | * @param {Ext.EventObject} e |
---|
| 307 | */ |
---|
| 308 | 'mouseout', |
---|
| 309 | /** |
---|
| 310 | * @event keypress |
---|
| 311 | * The raw keypress event for the entire grid. |
---|
| 312 | * @param {Ext.EventObject} e |
---|
| 313 | */ |
---|
| 314 | 'keypress', |
---|
| 315 | /** |
---|
| 316 | * @event keydown |
---|
| 317 | * The raw keydown event for the entire grid. |
---|
| 318 | * @param {Ext.EventObject} e |
---|
| 319 | */ |
---|
| 320 | 'keydown', |
---|
| 321 | |
---|
| 322 | // custom events |
---|
| 323 | /** |
---|
| 324 | * @event cellmousedown |
---|
| 325 | * Fires before a cell is clicked |
---|
| 326 | * @param {Grid} this |
---|
| 327 | * @param {Number} rowIndex |
---|
| 328 | * @param {Number} columnIndex |
---|
| 329 | * @param {Ext.EventObject} e |
---|
| 330 | */ |
---|
| 331 | 'cellmousedown', |
---|
| 332 | /** |
---|
| 333 | * @event rowmousedown |
---|
| 334 | * Fires before a row is clicked |
---|
| 335 | * @param {Grid} this |
---|
| 336 | * @param {Number} rowIndex |
---|
| 337 | * @param {Ext.EventObject} e |
---|
| 338 | */ |
---|
| 339 | 'rowmousedown', |
---|
| 340 | /** |
---|
| 341 | * @event headermousedown |
---|
| 342 | * Fires before a header is clicked |
---|
| 343 | * @param {Grid} this |
---|
| 344 | * @param {Number} columnIndex |
---|
| 345 | * @param {Ext.EventObject} e |
---|
| 346 | */ |
---|
| 347 | 'headermousedown', |
---|
| 348 | |
---|
| 349 | /** |
---|
| 350 | * @event cellclick |
---|
| 351 | * Fires when a cell is clicked. |
---|
| 352 | * The data for the cell is drawn from the {@link Ext.data.Record Record} |
---|
| 353 | * for this row. To access the data in the listener function use the |
---|
| 354 | * following technique: |
---|
| 355 | * <pre><code> |
---|
| 356 | function(grid, rowIndex, columnIndex, e) { |
---|
| 357 | var record = grid.getStore().getAt(rowIndex); // Get the Record |
---|
| 358 | var fieldName = grid.getColumnModel().getDataIndex(columnIndex); // Get field name |
---|
| 359 | var data = record.get(fieldName); |
---|
| 360 | } |
---|
| 361 | </code></pre> |
---|
| 362 | * @param {Grid} this |
---|
| 363 | * @param {Number} rowIndex |
---|
| 364 | * @param {Number} columnIndex |
---|
| 365 | * @param {Ext.EventObject} e |
---|
| 366 | */ |
---|
| 367 | 'cellclick', |
---|
| 368 | /** |
---|
| 369 | * @event celldblclick |
---|
| 370 | * Fires when a cell is double clicked |
---|
| 371 | * @param {Grid} this |
---|
| 372 | * @param {Number} rowIndex |
---|
| 373 | * @param {Number} columnIndex |
---|
| 374 | * @param {Ext.EventObject} e |
---|
| 375 | */ |
---|
| 376 | 'celldblclick', |
---|
| 377 | /** |
---|
| 378 | * @event rowclick |
---|
| 379 | * Fires when a row is clicked |
---|
| 380 | * @param {Grid} this |
---|
| 381 | * @param {Number} rowIndex |
---|
| 382 | * @param {Ext.EventObject} e |
---|
| 383 | */ |
---|
| 384 | 'rowclick', |
---|
| 385 | /** |
---|
| 386 | * @event rowdblclick |
---|
| 387 | * Fires when a row is double clicked |
---|
| 388 | * @param {Grid} this |
---|
| 389 | * @param {Number} rowIndex |
---|
| 390 | * @param {Ext.EventObject} e |
---|
| 391 | */ |
---|
| 392 | 'rowdblclick', |
---|
| 393 | /** |
---|
| 394 | * @event headerclick |
---|
| 395 | * Fires when a header is clicked |
---|
| 396 | * @param {Grid} this |
---|
| 397 | * @param {Number} columnIndex |
---|
| 398 | * @param {Ext.EventObject} e |
---|
| 399 | */ |
---|
| 400 | 'headerclick', |
---|
| 401 | /** |
---|
| 402 | * @event headerdblclick |
---|
| 403 | * Fires when a header cell is double clicked |
---|
| 404 | * @param {Grid} this |
---|
| 405 | * @param {Number} columnIndex |
---|
| 406 | * @param {Ext.EventObject} e |
---|
| 407 | */ |
---|
| 408 | 'headerdblclick', |
---|
| 409 | /** |
---|
| 410 | * @event rowcontextmenu |
---|
| 411 | * Fires when a row is right clicked |
---|
| 412 | * @param {Grid} this |
---|
| 413 | * @param {Number} rowIndex |
---|
| 414 | * @param {Ext.EventObject} e |
---|
| 415 | */ |
---|
| 416 | 'rowcontextmenu', |
---|
| 417 | /** |
---|
| 418 | * @event cellcontextmenu |
---|
| 419 | * Fires when a cell is right clicked |
---|
| 420 | * @param {Grid} this |
---|
| 421 | * @param {Number} rowIndex |
---|
| 422 | * @param {Number} cellIndex |
---|
| 423 | * @param {Ext.EventObject} e |
---|
| 424 | */ |
---|
| 425 | 'cellcontextmenu', |
---|
| 426 | /** |
---|
| 427 | * @event headercontextmenu |
---|
| 428 | * Fires when a header is right clicked |
---|
| 429 | * @param {Grid} this |
---|
| 430 | * @param {Number} columnIndex |
---|
| 431 | * @param {Ext.EventObject} e |
---|
| 432 | */ |
---|
| 433 | 'headercontextmenu', |
---|
| 434 | /** |
---|
| 435 | * @event bodyscroll |
---|
| 436 | * Fires when the body element is scrolled |
---|
| 437 | * @param {Number} scrollLeft |
---|
| 438 | * @param {Number} scrollTop |
---|
| 439 | */ |
---|
| 440 | 'bodyscroll', |
---|
| 441 | /** |
---|
| 442 | * @event columnresize |
---|
| 443 | * Fires when the user resizes a column |
---|
| 444 | * @param {Number} columnIndex |
---|
| 445 | * @param {Number} newSize |
---|
| 446 | */ |
---|
| 447 | 'columnresize', |
---|
| 448 | /** |
---|
| 449 | * @event columnmove |
---|
| 450 | * Fires when the user moves a column |
---|
| 451 | * @param {Number} oldIndex |
---|
| 452 | * @param {Number} newIndex |
---|
| 453 | */ |
---|
| 454 | 'columnmove', |
---|
| 455 | /** |
---|
| 456 | * @event sortchange |
---|
| 457 | * Fires when the grid's store sort changes |
---|
| 458 | * @param {Grid} this |
---|
| 459 | * @param {Object} sortInfo An object with the keys field and direction |
---|
| 460 | */ |
---|
| 461 | 'sortchange', |
---|
| 462 | /** |
---|
| 463 | * @event reconfigure |
---|
| 464 | * Fires when the grid is reconfigured with a new store and/or column model. |
---|
| 465 | * @param {Grid} this |
---|
| 466 | * @param {Ext.data.Store} store The new store |
---|
| 467 | * @param {Ext.grid.ColumnModel} colModel The new column model |
---|
| 468 | */ |
---|
| 469 | 'reconfigure' |
---|
| 470 | ); |
---|
| 471 | }, |
---|
| 472 | |
---|
| 473 | // private |
---|
| 474 | onRender : function(ct, position){ |
---|
| 475 | Ext.grid.GridPanel.superclass.onRender.apply(this, arguments); |
---|
| 476 | |
---|
| 477 | var c = this.body; |
---|
| 478 | |
---|
| 479 | this.el.addClass('x-grid-panel'); |
---|
| 480 | |
---|
| 481 | var view = this.getView(); |
---|
| 482 | view.init(this); |
---|
| 483 | |
---|
| 484 | this.mon(c, { |
---|
| 485 | mousedown: this.onMouseDown, |
---|
| 486 | click: this.onClick, |
---|
| 487 | dblclick: this.onDblClick, |
---|
| 488 | contextmenu: this.onContextMenu, |
---|
| 489 | keydown: this.onKeyDown, |
---|
| 490 | scope: this |
---|
| 491 | }); |
---|
| 492 | |
---|
| 493 | this.relayEvents(c, ['mousedown','mouseup','mouseover','mouseout','keypress']); |
---|
| 494 | |
---|
| 495 | this.getSelectionModel().init(this); |
---|
| 496 | this.view.render(); |
---|
| 497 | }, |
---|
| 498 | |
---|
| 499 | // private |
---|
| 500 | initEvents : function(){ |
---|
| 501 | Ext.grid.GridPanel.superclass.initEvents.call(this); |
---|
| 502 | |
---|
| 503 | if(this.loadMask){ |
---|
| 504 | this.loadMask = new Ext.LoadMask(this.bwrap, |
---|
| 505 | Ext.apply({store:this.store}, this.loadMask)); |
---|
| 506 | } |
---|
| 507 | }, |
---|
| 508 | |
---|
| 509 | initStateEvents : function(){ |
---|
| 510 | Ext.grid.GridPanel.superclass.initStateEvents.call(this); |
---|
| 511 | this.mon(this.colModel, 'hiddenchange', this.saveState, this, {delay: 100}); |
---|
| 512 | }, |
---|
| 513 | |
---|
| 514 | applyState : function(state){ |
---|
| 515 | var cm = this.colModel; |
---|
| 516 | var cs = state.columns; |
---|
| 517 | if(cs){ |
---|
| 518 | for(var i = 0, len = cs.length; i < len; i++){ |
---|
| 519 | var s = cs[i]; |
---|
| 520 | var c = cm.getColumnById(s.id); |
---|
| 521 | if(c){ |
---|
| 522 | c.hidden = s.hidden; |
---|
| 523 | c.width = s.width; |
---|
| 524 | var oldIndex = cm.getIndexById(s.id); |
---|
| 525 | if(oldIndex != i){ |
---|
| 526 | cm.moveColumn(oldIndex, i); |
---|
| 527 | } |
---|
| 528 | } |
---|
| 529 | } |
---|
| 530 | } |
---|
| 531 | if(state.sort && this.store){ |
---|
| 532 | this.store[this.store.remoteSort ? 'setDefaultSort' : 'sort'](state.sort.field, state.sort.direction); |
---|
| 533 | } |
---|
| 534 | delete state.columns; |
---|
| 535 | delete state.sort; |
---|
| 536 | Ext.grid.GridPanel.superclass.applyState.call(this, state); |
---|
| 537 | }, |
---|
| 538 | |
---|
| 539 | getState : function(){ |
---|
| 540 | var o = {columns: []}; |
---|
| 541 | for(var i = 0, c; (c = this.colModel.config[i]); i++){ |
---|
| 542 | o.columns[i] = { |
---|
| 543 | id: c.id, |
---|
| 544 | width: c.width |
---|
| 545 | }; |
---|
| 546 | if(c.hidden){ |
---|
| 547 | o.columns[i].hidden = true; |
---|
| 548 | } |
---|
| 549 | } |
---|
| 550 | if(this.store){ |
---|
| 551 | var ss = this.store.getSortState(); |
---|
| 552 | if(ss){ |
---|
| 553 | o.sort = ss; |
---|
| 554 | } |
---|
| 555 | } |
---|
| 556 | return o; |
---|
| 557 | }, |
---|
| 558 | |
---|
| 559 | // private |
---|
| 560 | afterRender : function(){ |
---|
| 561 | Ext.grid.GridPanel.superclass.afterRender.call(this); |
---|
| 562 | this.view.layout(); |
---|
| 563 | if(this.deferRowRender){ |
---|
| 564 | this.view.afterRender.defer(10, this.view); |
---|
| 565 | }else{ |
---|
| 566 | this.view.afterRender(); |
---|
| 567 | } |
---|
| 568 | this.viewReady = true; |
---|
| 569 | }, |
---|
| 570 | |
---|
| 571 | /** |
---|
| 572 | * <p>Reconfigures the grid to use a different Store and Column Model |
---|
| 573 | * and fires the 'reconfigure' event. The View will be bound to the new |
---|
| 574 | * objects and refreshed.</p> |
---|
| 575 | * <p>Be aware that upon reconfiguring a GridPanel, certain existing settings <i>may</i> become |
---|
| 576 | * invalidated. For example the configured {@link #autoExpandColumn} may no longer exist in the |
---|
| 577 | * new ColumnModel. Also, an existing {@link Ext.PagingToolbar PagingToolbar} will still be bound |
---|
| 578 | * to the old Store, and will need rebinding. Any {@link #plugins} might also need reconfiguring |
---|
| 579 | * with the new data.</p> |
---|
| 580 | * @param {Ext.data.Store} store The new {@link Ext.data.Store} object |
---|
| 581 | * @param {Ext.grid.ColumnModel} colModel The new {@link Ext.grid.ColumnModel} object |
---|
| 582 | */ |
---|
| 583 | reconfigure : function(store, colModel){ |
---|
| 584 | if(this.loadMask){ |
---|
| 585 | this.loadMask.destroy(); |
---|
| 586 | this.loadMask = new Ext.LoadMask(this.bwrap, |
---|
| 587 | Ext.apply({}, {store:store}, this.initialConfig.loadMask)); |
---|
| 588 | } |
---|
| 589 | this.view.initData(store, colModel); |
---|
| 590 | this.store = store; |
---|
| 591 | this.colModel = colModel; |
---|
| 592 | if(this.rendered){ |
---|
| 593 | this.view.refresh(true); |
---|
| 594 | } |
---|
| 595 | this.fireEvent('reconfigure', this, store, colModel); |
---|
| 596 | }, |
---|
| 597 | |
---|
| 598 | // private |
---|
| 599 | onKeyDown : function(e){ |
---|
| 600 | this.fireEvent('keydown', e); |
---|
| 601 | }, |
---|
| 602 | |
---|
| 603 | // private |
---|
| 604 | onDestroy : function(){ |
---|
| 605 | if(this.rendered){ |
---|
| 606 | var c = this.body; |
---|
| 607 | c.removeAllListeners(); |
---|
| 608 | c.update(''); |
---|
| 609 | Ext.destroy(this.view, this.loadMask); |
---|
| 610 | }else if(this.store && this.store.autoDestroy){ |
---|
| 611 | this.store.destroy(); |
---|
| 612 | } |
---|
| 613 | Ext.destroy(this.colModel, this.selModel); |
---|
| 614 | this.store = this.selModel = this.colModel = this.view = this.loadMask = null; |
---|
| 615 | Ext.grid.GridPanel.superclass.onDestroy.call(this); |
---|
| 616 | }, |
---|
| 617 | |
---|
| 618 | // private |
---|
| 619 | processEvent : function(name, e){ |
---|
| 620 | this.fireEvent(name, e); |
---|
| 621 | var t = e.getTarget(); |
---|
| 622 | var v = this.view; |
---|
| 623 | var header = v.findHeaderIndex(t); |
---|
| 624 | if(header !== false){ |
---|
| 625 | this.fireEvent('header' + name, this, header, e); |
---|
| 626 | }else{ |
---|
| 627 | var row = v.findRowIndex(t); |
---|
| 628 | var cell = v.findCellIndex(t); |
---|
| 629 | if(row !== false){ |
---|
| 630 | this.fireEvent('row' + name, this, row, e); |
---|
| 631 | if(cell !== false){ |
---|
| 632 | this.fireEvent('cell' + name, this, row, cell, e); |
---|
| 633 | } |
---|
| 634 | } |
---|
| 635 | } |
---|
| 636 | }, |
---|
| 637 | |
---|
| 638 | // private |
---|
| 639 | onClick : function(e){ |
---|
| 640 | this.processEvent('click', e); |
---|
| 641 | }, |
---|
| 642 | |
---|
| 643 | // private |
---|
| 644 | onMouseDown : function(e){ |
---|
| 645 | this.processEvent('mousedown', e); |
---|
| 646 | }, |
---|
| 647 | |
---|
| 648 | // private |
---|
| 649 | onContextMenu : function(e, t){ |
---|
| 650 | this.processEvent('contextmenu', e); |
---|
| 651 | }, |
---|
| 652 | |
---|
| 653 | // private |
---|
| 654 | onDblClick : function(e){ |
---|
| 655 | this.processEvent('dblclick', e); |
---|
| 656 | }, |
---|
| 657 | |
---|
| 658 | // private |
---|
| 659 | walkCells : function(row, col, step, fn, scope){ |
---|
| 660 | var cm = this.colModel, clen = cm.getColumnCount(); |
---|
| 661 | var ds = this.store, rlen = ds.getCount(), first = true; |
---|
| 662 | if(step < 0){ |
---|
| 663 | if(col < 0){ |
---|
| 664 | row--; |
---|
| 665 | first = false; |
---|
| 666 | } |
---|
| 667 | while(row >= 0){ |
---|
| 668 | if(!first){ |
---|
| 669 | col = clen-1; |
---|
| 670 | } |
---|
| 671 | first = false; |
---|
| 672 | while(col >= 0){ |
---|
| 673 | if(fn.call(scope || this, row, col, cm) === true){ |
---|
| 674 | return [row, col]; |
---|
| 675 | } |
---|
| 676 | col--; |
---|
| 677 | } |
---|
| 678 | row--; |
---|
| 679 | } |
---|
| 680 | } else { |
---|
| 681 | if(col >= clen){ |
---|
| 682 | row++; |
---|
| 683 | first = false; |
---|
| 684 | } |
---|
| 685 | while(row < rlen){ |
---|
| 686 | if(!first){ |
---|
| 687 | col = 0; |
---|
| 688 | } |
---|
| 689 | first = false; |
---|
| 690 | while(col < clen){ |
---|
| 691 | if(fn.call(scope || this, row, col, cm) === true){ |
---|
| 692 | return [row, col]; |
---|
| 693 | } |
---|
| 694 | col++; |
---|
| 695 | } |
---|
| 696 | row++; |
---|
| 697 | } |
---|
| 698 | } |
---|
| 699 | return null; |
---|
| 700 | }, |
---|
| 701 | |
---|
| 702 | // private |
---|
| 703 | onResize : function(){ |
---|
| 704 | Ext.grid.GridPanel.superclass.onResize.apply(this, arguments); |
---|
| 705 | if(this.viewReady){ |
---|
| 706 | this.view.layout(); |
---|
| 707 | } |
---|
| 708 | }, |
---|
| 709 | |
---|
| 710 | /** |
---|
| 711 | * Returns the grid's underlying element. |
---|
| 712 | * @return {Element} The element |
---|
| 713 | */ |
---|
| 714 | getGridEl : function(){ |
---|
| 715 | return this.body; |
---|
| 716 | }, |
---|
| 717 | |
---|
| 718 | // private for compatibility, overridden by editor grid |
---|
| 719 | stopEditing : Ext.emptyFn, |
---|
| 720 | |
---|
| 721 | /** |
---|
| 722 | * Returns the grid's selection model configured by the <code>{@link #selModel}</code> |
---|
| 723 | * configuration option. If no selection model was configured, this will create |
---|
| 724 | * and return a {@link Ext.grid.RowSelectionModel RowSelectionModel}. |
---|
| 725 | * @return {SelectionModel} |
---|
| 726 | */ |
---|
| 727 | getSelectionModel : function(){ |
---|
| 728 | if(!this.selModel){ |
---|
| 729 | this.selModel = new Ext.grid.RowSelectionModel( |
---|
| 730 | this.disableSelection ? {selectRow: Ext.emptyFn} : null); |
---|
| 731 | } |
---|
| 732 | return this.selModel; |
---|
| 733 | }, |
---|
| 734 | |
---|
| 735 | /** |
---|
| 736 | * Returns the grid's data store. |
---|
| 737 | * @return {Ext.data.Store} The store |
---|
| 738 | */ |
---|
| 739 | getStore : function(){ |
---|
| 740 | return this.store; |
---|
| 741 | }, |
---|
| 742 | |
---|
| 743 | /** |
---|
| 744 | * Returns the grid's ColumnModel. |
---|
| 745 | * @return {Ext.grid.ColumnModel} The column model |
---|
| 746 | */ |
---|
| 747 | getColumnModel : function(){ |
---|
| 748 | return this.colModel; |
---|
| 749 | }, |
---|
| 750 | |
---|
| 751 | /** |
---|
| 752 | * Returns the grid's GridView object. |
---|
| 753 | * @return {Ext.grid.GridView} The grid view |
---|
| 754 | */ |
---|
| 755 | getView : function(){ |
---|
| 756 | if(!this.view){ |
---|
| 757 | this.view = new Ext.grid.GridView(this.viewConfig); |
---|
| 758 | } |
---|
| 759 | return this.view; |
---|
| 760 | }, |
---|
| 761 | /** |
---|
| 762 | * Called to get grid's drag proxy text, by default returns this.ddText. |
---|
| 763 | * @return {String} The text |
---|
| 764 | */ |
---|
| 765 | getDragDropText : function(){ |
---|
| 766 | var count = this.selModel.getCount(); |
---|
| 767 | return String.format(this.ddText, count, count == 1 ? '' : 's'); |
---|
| 768 | } |
---|
| 769 | |
---|
| 770 | /** |
---|
| 771 | * @cfg {String/Number} activeItem |
---|
| 772 | * @hide |
---|
| 773 | */ |
---|
| 774 | /** |
---|
| 775 | * @cfg {Boolean} autoDestroy |
---|
| 776 | * @hide |
---|
| 777 | */ |
---|
| 778 | /** |
---|
| 779 | * @cfg {Object/String/Function} autoLoad |
---|
| 780 | * @hide |
---|
| 781 | */ |
---|
| 782 | /** |
---|
| 783 | * @cfg {Boolean} autoWidth |
---|
| 784 | * @hide |
---|
| 785 | */ |
---|
| 786 | /** |
---|
| 787 | * @cfg {Boolean/Number} bufferResize |
---|
| 788 | * @hide |
---|
| 789 | */ |
---|
| 790 | /** |
---|
| 791 | * @cfg {String} defaultType |
---|
| 792 | * @hide |
---|
| 793 | */ |
---|
| 794 | /** |
---|
| 795 | * @cfg {Object} defaults |
---|
| 796 | * @hide |
---|
| 797 | */ |
---|
| 798 | /** |
---|
| 799 | * @cfg {Boolean} hideBorders |
---|
| 800 | * @hide |
---|
| 801 | */ |
---|
| 802 | /** |
---|
| 803 | * @cfg {Mixed} items |
---|
| 804 | * @hide |
---|
| 805 | */ |
---|
| 806 | /** |
---|
| 807 | * @cfg {String} layout |
---|
| 808 | * @hide |
---|
| 809 | */ |
---|
| 810 | /** |
---|
| 811 | * @cfg {Object} layoutConfig |
---|
| 812 | * @hide |
---|
| 813 | */ |
---|
| 814 | /** |
---|
| 815 | * @cfg {Boolean} monitorResize |
---|
| 816 | * @hide |
---|
| 817 | */ |
---|
| 818 | /** |
---|
| 819 | * @property items |
---|
| 820 | * @hide |
---|
| 821 | */ |
---|
| 822 | /** |
---|
| 823 | * @method add |
---|
| 824 | * @hide |
---|
| 825 | */ |
---|
| 826 | /** |
---|
| 827 | * @method cascade |
---|
| 828 | * @hide |
---|
| 829 | */ |
---|
| 830 | /** |
---|
| 831 | * @method doLayout |
---|
| 832 | * @hide |
---|
| 833 | */ |
---|
| 834 | /** |
---|
| 835 | * @method find |
---|
| 836 | * @hide |
---|
| 837 | */ |
---|
| 838 | /** |
---|
| 839 | * @method findBy |
---|
| 840 | * @hide |
---|
| 841 | */ |
---|
| 842 | /** |
---|
| 843 | * @method findById |
---|
| 844 | * @hide |
---|
| 845 | */ |
---|
| 846 | /** |
---|
| 847 | * @method findByType |
---|
| 848 | * @hide |
---|
| 849 | */ |
---|
| 850 | /** |
---|
| 851 | * @method getComponent |
---|
| 852 | * @hide |
---|
| 853 | */ |
---|
| 854 | /** |
---|
| 855 | * @method getLayout |
---|
| 856 | * @hide |
---|
| 857 | */ |
---|
| 858 | /** |
---|
| 859 | * @method getUpdater |
---|
| 860 | * @hide |
---|
| 861 | */ |
---|
| 862 | /** |
---|
| 863 | * @method insert |
---|
| 864 | * @hide |
---|
| 865 | */ |
---|
| 866 | /** |
---|
| 867 | * @method load |
---|
| 868 | * @hide |
---|
| 869 | */ |
---|
| 870 | /** |
---|
| 871 | * @method remove |
---|
| 872 | * @hide |
---|
| 873 | */ |
---|
| 874 | /** |
---|
| 875 | * @event add |
---|
| 876 | * @hide |
---|
| 877 | */ |
---|
| 878 | /** |
---|
| 879 | * @event afterLayout |
---|
| 880 | * @hide |
---|
| 881 | */ |
---|
| 882 | /** |
---|
| 883 | * @event beforeadd |
---|
| 884 | * @hide |
---|
| 885 | */ |
---|
| 886 | /** |
---|
| 887 | * @event beforeremove |
---|
| 888 | * @hide |
---|
| 889 | */ |
---|
| 890 | /** |
---|
| 891 | * @event remove |
---|
| 892 | * @hide |
---|
| 893 | */ |
---|
| 894 | |
---|
| 895 | |
---|
| 896 | |
---|
| 897 | /** |
---|
| 898 | * @cfg {String} allowDomMove @hide |
---|
| 899 | */ |
---|
| 900 | /** |
---|
| 901 | * @cfg {String} autoEl @hide |
---|
| 902 | */ |
---|
| 903 | /** |
---|
| 904 | * @cfg {String} applyTo @hide |
---|
| 905 | */ |
---|
| 906 | /** |
---|
| 907 | * @cfg {String} autoScroll @hide |
---|
| 908 | */ |
---|
| 909 | /** |
---|
| 910 | * @cfg {String} bodyBorder @hide |
---|
| 911 | */ |
---|
| 912 | /** |
---|
| 913 | * @cfg {String} bodyStyle @hide |
---|
| 914 | */ |
---|
| 915 | /** |
---|
| 916 | * @cfg {String} contentEl @hide |
---|
| 917 | */ |
---|
| 918 | /** |
---|
| 919 | * @cfg {String} disabledClass @hide |
---|
| 920 | */ |
---|
| 921 | /** |
---|
| 922 | * @cfg {String} elements @hide |
---|
| 923 | */ |
---|
| 924 | /** |
---|
| 925 | * @cfg {String} html @hide |
---|
| 926 | */ |
---|
| 927 | /** |
---|
| 928 | * @cfg {Boolean} preventBodyReset |
---|
| 929 | * @hide |
---|
| 930 | */ |
---|
| 931 | /** |
---|
| 932 | * @property disabled |
---|
| 933 | * @hide |
---|
| 934 | */ |
---|
| 935 | /** |
---|
| 936 | * @method applyToMarkup |
---|
| 937 | * @hide |
---|
| 938 | */ |
---|
| 939 | /** |
---|
| 940 | * @method enable |
---|
| 941 | * @hide |
---|
| 942 | */ |
---|
| 943 | /** |
---|
| 944 | * @method disable |
---|
| 945 | * @hide |
---|
| 946 | */ |
---|
| 947 | /** |
---|
| 948 | * @method setDisabled |
---|
| 949 | * @hide |
---|
| 950 | */ |
---|
| 951 | }); |
---|
| 952 | Ext.reg('grid', Ext.grid.GridPanel);/** |
---|
| 953 | * @class Ext.grid.GridView |
---|
| 954 | * @extends Ext.util.Observable |
---|
| 955 | * <p>This class encapsulates the user interface of an {@link Ext.grid.GridPanel}. |
---|
| 956 | * Methods of this class may be used to access user interface elements to enable |
---|
| 957 | * special display effects. Do not change the DOM structure of the user interface.</p> |
---|
| 958 | * <p>This class does not provide ways to manipulate the underlying data. The data |
---|
| 959 | * model of a Grid is held in an {@link Ext.data.Store}.</p> |
---|
| 960 | * @constructor |
---|
| 961 | * @param {Object} config |
---|
| 962 | */ |
---|
| 963 | Ext.grid.GridView = function(config){ |
---|
| 964 | Ext.apply(this, config); |
---|
| 965 | // These events are only used internally by the grid components |
---|
| 966 | this.addEvents( |
---|
| 967 | /** |
---|
| 968 | * @event beforerowremoved |
---|
| 969 | * Internal UI Event. Fired before a row is removed. |
---|
| 970 | * @param {Ext.grid.GridView} view |
---|
| 971 | * @param {Number} rowIndex The index of the row to be removed. |
---|
| 972 | * @param {Ext.data.Record} record The Record to be removed |
---|
| 973 | */ |
---|
| 974 | "beforerowremoved", |
---|
| 975 | /** |
---|
| 976 | * @event beforerowsinserted |
---|
| 977 | * Internal UI Event. Fired before rows are inserted. |
---|
| 978 | * @param {Ext.grid.GridView} view |
---|
| 979 | * @param {Number} firstRow The index of the first row to be inserted. |
---|
| 980 | * @param {Number} lastRow The index of the last row to be inserted. |
---|
| 981 | */ |
---|
| 982 | "beforerowsinserted", |
---|
| 983 | /** |
---|
| 984 | * @event beforerefresh |
---|
| 985 | * Internal UI Event. Fired before the view is refreshed. |
---|
| 986 | * @param {Ext.grid.GridView} view |
---|
| 987 | */ |
---|
| 988 | "beforerefresh", |
---|
| 989 | /** |
---|
| 990 | * @event rowremoved |
---|
| 991 | * Internal UI Event. Fired after a row is removed. |
---|
| 992 | * @param {Ext.grid.GridView} view |
---|
| 993 | * @param {Number} rowIndex The index of the row that was removed. |
---|
| 994 | * @param {Ext.data.Record} record The Record that was removed |
---|
| 995 | */ |
---|
| 996 | "rowremoved", |
---|
| 997 | /** |
---|
| 998 | * @event rowsinserted |
---|
| 999 | * Internal UI Event. Fired after rows are inserted. |
---|
| 1000 | * @param {Ext.grid.GridView} view |
---|
| 1001 | * @param {Number} firstRow The index of the first inserted. |
---|
| 1002 | * @param {Number} lastRow The index of the last row inserted. |
---|
| 1003 | */ |
---|
| 1004 | "rowsinserted", |
---|
| 1005 | /** |
---|
| 1006 | * @event rowupdated |
---|
| 1007 | * Internal UI Event. Fired after a row has been updated. |
---|
| 1008 | * @param {Ext.grid.GridView} view |
---|
| 1009 | * @param {Number} firstRow The index of the row updated. |
---|
| 1010 | * @param {Ext.data.record} record The Record backing the row updated. |
---|
| 1011 | */ |
---|
| 1012 | "rowupdated", |
---|
| 1013 | /** |
---|
| 1014 | * @event refresh |
---|
| 1015 | * Internal UI Event. Fired after the GridView's body has been refreshed. |
---|
| 1016 | * @param {Ext.grid.GridView} view |
---|
| 1017 | */ |
---|
| 1018 | "refresh" |
---|
| 1019 | ); |
---|
| 1020 | Ext.grid.GridView.superclass.constructor.call(this); |
---|
| 1021 | }; |
---|
| 1022 | |
---|
| 1023 | Ext.extend(Ext.grid.GridView, Ext.util.Observable, { |
---|
| 1024 | /** |
---|
| 1025 | * Override this function to apply custom CSS classes to rows during rendering. You can also supply custom |
---|
| 1026 | * parameters to the row template for the current row to customize how it is rendered using the <b>rowParams</b> |
---|
| 1027 | * parameter. This function should return the CSS class name (or empty string '' for none) that will be added |
---|
| 1028 | * to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string |
---|
| 1029 | * (e.g., 'my-class another-class'). Example usage: |
---|
| 1030 | <pre><code> |
---|
| 1031 | viewConfig: { |
---|
| 1032 | forceFit: true, |
---|
| 1033 | showPreview: true, // custom property |
---|
| 1034 | enableRowBody: true, // required to create a second, full-width row to show expanded Record data |
---|
| 1035 | getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams |
---|
| 1036 | if(this.showPreview){ |
---|
| 1037 | rp.body = '<p>'+record.data.excerpt+'</p>'; |
---|
| 1038 | return 'x-grid3-row-expanded'; |
---|
| 1039 | } |
---|
| 1040 | return 'x-grid3-row-collapsed'; |
---|
| 1041 | } |
---|
| 1042 | }, |
---|
| 1043 | </code></pre> |
---|
| 1044 | * @param {Record} record The {@link Ext.data.Record} corresponding to the current row. |
---|
| 1045 | * @param {Number} index The row index. |
---|
| 1046 | * @param {Object} rowParams A config object that is passed to the row template during rendering that allows |
---|
| 1047 | * customization of various aspects of a grid row. |
---|
| 1048 | * <p>If {@link #enableRowBody} is configured <b><tt></tt>true</b>, then the following properties may be set |
---|
| 1049 | * by this function, and will be used to render a full-width expansion row below each grid row:</p> |
---|
| 1050 | * <ul> |
---|
| 1051 | * <li><code>body</code> : String <div class="sub-desc">An HTML fragment to be used as the expansion row's body content (defaults to '').</div></li> |
---|
| 1052 | * <li><code>bodyStyle</code> : String <div class="sub-desc">A CSS style specification that will be applied to the expansion row's <tr> element. (defaults to '').</div></li> |
---|
| 1053 | * </ul> |
---|
| 1054 | * The following property will be passed in, and may be appended to: |
---|
| 1055 | * <ul> |
---|
| 1056 | * <li><code>tstyle</code> : String <div class="sub-desc">A CSS style specification that willl be applied to the <table> element which encapsulates |
---|
| 1057 | * both the standard grid row, and any expansion row.</div></li> |
---|
| 1058 | * </ul> |
---|
| 1059 | * @param {Store} store The {@link Ext.data.Store} this grid is bound to |
---|
| 1060 | * @method getRowClass |
---|
| 1061 | * @return {String} a CSS class name to add to the row. |
---|
| 1062 | */ |
---|
| 1063 | /** |
---|
| 1064 | * @cfg {Boolean} enableRowBody True to add a second TR element per row that can be used to provide a row body |
---|
| 1065 | * that spans beneath the data row. Use the {@link #getRowClass} method's rowParams config to customize the row body. |
---|
| 1066 | */ |
---|
| 1067 | /** |
---|
| 1068 | * @cfg {String} emptyText Default text (html tags are accepted) to display in the grid body when no rows |
---|
| 1069 | * are available (defaults to ''). This value will be used to update the <tt>{@link #mainBody}</tt>: |
---|
| 1070 | <pre><code> |
---|
| 1071 | this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>'); |
---|
| 1072 | </code></pre> |
---|
| 1073 | */ |
---|
| 1074 | /** |
---|
| 1075 | * @cfg {Boolean} headersDisabled True to disable the grid column headers (defaults to <tt>false</tt>). |
---|
| 1076 | * Use the {@link Ext.grid.ColumnModel ColumnModel} <tt>{@link Ext.grid.ColumnModel#menuDisabled menuDisabled}</tt> |
---|
| 1077 | * config to disable the <i>menu</i> for individual columns. While this config is true the |
---|
| 1078 | * following will be disabled:<div class="mdetail-params"><ul> |
---|
| 1079 | * <li>clicking on header to sort</li> |
---|
| 1080 | * <li>the trigger to reveal the menu.</li> |
---|
| 1081 | * </ul></div> |
---|
| 1082 | */ |
---|
| 1083 | /** |
---|
| 1084 | * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations |
---|
| 1085 | * of the template methods of DragZone to enable dragging of the selected rows of a GridPanel. |
---|
| 1086 | * See {@link Ext.grid.GridDragZone} for details.</p> |
---|
| 1087 | * <p>This will <b>only</b> be present:<div class="mdetail-params"><ul> |
---|
| 1088 | * <li><i>if</i> the owning GridPanel was configured with {@link Ext.grid.GridPanel#enableDragDrop enableDragDrop}: <tt>true</tt>.</li> |
---|
| 1089 | * <li><i>after</i> the owning GridPanel has been rendered.</li> |
---|
| 1090 | * </ul></div> |
---|
| 1091 | * @property dragZone |
---|
| 1092 | * @type {Ext.grid.GridDragZone} |
---|
| 1093 | */ |
---|
| 1094 | /** |
---|
| 1095 | * @cfg {Boolean} deferEmptyText True to defer <tt>{@link #emptyText}</tt> being applied until the store's |
---|
| 1096 | * first load (defaults to <tt>true</tt>). |
---|
| 1097 | */ |
---|
| 1098 | deferEmptyText : true, |
---|
| 1099 | /** |
---|
| 1100 | * @cfg {Number} scrollOffset The amount of space to reserve for the vertical scrollbar |
---|
| 1101 | * (defaults to <tt>19</tt> pixels). |
---|
| 1102 | */ |
---|
| 1103 | scrollOffset : 19, |
---|
| 1104 | /** |
---|
| 1105 | * @cfg {Boolean} autoFill |
---|
| 1106 | * Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned |
---|
| 1107 | * when the grid is <b>initially rendered</b>. The |
---|
| 1108 | * {@link Ext.grid.Column#width initially configured width}</tt> of each column will be adjusted |
---|
| 1109 | * to fit the grid width and prevent horizontal scrolling. If columns are later resized (manually |
---|
| 1110 | * or programmatically), the other columns in the grid will <b>not</b> be resized to fit the grid width. |
---|
| 1111 | * See <tt>{@link #forceFit}</tt> also. |
---|
| 1112 | */ |
---|
| 1113 | autoFill : false, |
---|
| 1114 | /** |
---|
| 1115 | * @cfg {Boolean} forceFit |
---|
| 1116 | * Defaults to <tt>false</tt>. Specify <tt>true</tt> to have the column widths re-proportioned |
---|
| 1117 | * at <b>all times</b>. The {@link Ext.grid.Column#width initially configured width}</tt> of each |
---|
| 1118 | * column will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are |
---|
| 1119 | * later resized (manually or programmatically), the other columns in the grid <b>will</b> be resized |
---|
| 1120 | * to fit the grid width. See <tt>{@link #autoFill}</tt> also. |
---|
| 1121 | */ |
---|
| 1122 | forceFit : false, |
---|
| 1123 | /** |
---|
| 1124 | * @cfg {Array} sortClasses The CSS classes applied to a header when it is sorted. (defaults to <tt>["sort-asc", "sort-desc"]</tt>) |
---|
| 1125 | */ |
---|
| 1126 | sortClasses : ["sort-asc", "sort-desc"], |
---|
| 1127 | /** |
---|
| 1128 | * @cfg {String} sortAscText The text displayed in the "Sort Ascending" menu item (defaults to <tt>"Sort Ascending"</tt>) |
---|
| 1129 | */ |
---|
| 1130 | sortAscText : "Sort Ascending", |
---|
| 1131 | /** |
---|
| 1132 | * @cfg {String} sortDescText The text displayed in the "Sort Descending" menu item (defaults to <tt>"Sort Descending"</tt>) |
---|
| 1133 | */ |
---|
| 1134 | sortDescText : "Sort Descending", |
---|
| 1135 | /** |
---|
| 1136 | * @cfg {String} columnsText The text displayed in the "Columns" menu item (defaults to <tt>"Columns"</tt>) |
---|
| 1137 | */ |
---|
| 1138 | columnsText : "Columns", |
---|
| 1139 | |
---|
| 1140 | /** |
---|
| 1141 | * @cfg {String} selectedRowClass The CSS class applied to a selected row (defaults to <tt>"x-grid3-row-selected"</tt>). An |
---|
| 1142 | * example overriding the default styling: |
---|
| 1143 | <pre><code> |
---|
| 1144 | .x-grid3-row-selected {background-color: yellow;} |
---|
| 1145 | </code></pre> |
---|
| 1146 | * Note that this only controls the row, and will not do anything for the text inside it. To style inner |
---|
| 1147 | * facets (like text) use something like: |
---|
| 1148 | <pre><code> |
---|
| 1149 | .x-grid3-row-selected .x-grid3-cell-inner { |
---|
| 1150 | color: #FFCC00; |
---|
| 1151 | } |
---|
| 1152 | </code></pre> |
---|
| 1153 | * @type String |
---|
| 1154 | */ |
---|
| 1155 | selectedRowClass : "x-grid3-row-selected", |
---|
| 1156 | |
---|
| 1157 | // private |
---|
| 1158 | borderWidth : 2, |
---|
| 1159 | tdClass : 'x-grid3-cell', |
---|
| 1160 | hdCls : 'x-grid3-hd', |
---|
| 1161 | markDirty : true, |
---|
| 1162 | |
---|
| 1163 | /** |
---|
| 1164 | * @cfg {Number} cellSelectorDepth The number of levels to search for cells in event delegation (defaults to <tt>4</tt>) |
---|
| 1165 | */ |
---|
| 1166 | cellSelectorDepth : 4, |
---|
| 1167 | /** |
---|
| 1168 | * @cfg {Number} rowSelectorDepth The number of levels to search for rows in event delegation (defaults to <tt>10</tt>) |
---|
| 1169 | */ |
---|
| 1170 | rowSelectorDepth : 10, |
---|
| 1171 | |
---|
| 1172 | /** |
---|
| 1173 | * @cfg {String} cellSelector The selector used to find cells internally (defaults to <tt>'td.x-grid3-cell'</tt>) |
---|
| 1174 | */ |
---|
| 1175 | cellSelector : 'td.x-grid3-cell', |
---|
| 1176 | /** |
---|
| 1177 | * @cfg {String} rowSelector The selector used to find rows internally (defaults to <tt>'div.x-grid3-row'</tt>) |
---|
| 1178 | */ |
---|
| 1179 | rowSelector : 'div.x-grid3-row', |
---|
| 1180 | |
---|
| 1181 | // private |
---|
| 1182 | firstRowCls: 'x-grid3-row-first', |
---|
| 1183 | lastRowCls: 'x-grid3-row-last', |
---|
| 1184 | rowClsRe: /(?:^|\s+)x-grid3-row-(first|last|alt)(?:\s+|$)/g, |
---|
| 1185 | |
---|
| 1186 | /* -------------------------------- UI Specific ----------------------------- */ |
---|
| 1187 | |
---|
| 1188 | // private |
---|
| 1189 | initTemplates : function(){ |
---|
| 1190 | var ts = this.templates || {}; |
---|
| 1191 | if(!ts.master){ |
---|
| 1192 | ts.master = new Ext.Template( |
---|
| 1193 | '<div class="x-grid3" hidefocus="true">', |
---|
| 1194 | '<div class="x-grid3-viewport">', |
---|
| 1195 | '<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>', |
---|
| 1196 | '<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>', |
---|
| 1197 | '</div>', |
---|
| 1198 | '<div class="x-grid3-resize-marker"> </div>', |
---|
| 1199 | '<div class="x-grid3-resize-proxy"> </div>', |
---|
| 1200 | '</div>' |
---|
| 1201 | ); |
---|
| 1202 | } |
---|
| 1203 | |
---|
| 1204 | if(!ts.header){ |
---|
| 1205 | ts.header = new Ext.Template( |
---|
| 1206 | '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', |
---|
| 1207 | '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>', |
---|
| 1208 | '</table>' |
---|
| 1209 | ); |
---|
| 1210 | } |
---|
| 1211 | |
---|
| 1212 | if(!ts.hcell){ |
---|
| 1213 | ts.hcell = new Ext.Template( |
---|
| 1214 | '<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', this.grid.enableHdMenu ? '<a class="x-grid3-hd-btn" href="#"></a>' : '', |
---|
| 1215 | '{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" />', |
---|
| 1216 | '</div></td>' |
---|
| 1217 | ); |
---|
| 1218 | } |
---|
| 1219 | |
---|
| 1220 | if(!ts.body){ |
---|
| 1221 | ts.body = new Ext.Template('{rows}'); |
---|
| 1222 | } |
---|
| 1223 | |
---|
| 1224 | if(!ts.row){ |
---|
| 1225 | ts.row = new Ext.Template( |
---|
| 1226 | '<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', |
---|
| 1227 | '<tbody><tr>{cells}</tr>', |
---|
| 1228 | (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''), |
---|
| 1229 | '</tbody></table></div>' |
---|
| 1230 | ); |
---|
| 1231 | } |
---|
| 1232 | |
---|
| 1233 | if(!ts.cell){ |
---|
| 1234 | ts.cell = new Ext.Template( |
---|
| 1235 | '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}" tabIndex="0" {cellAttr}>', |
---|
| 1236 | '<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on" {attr}>{value}</div>', |
---|
| 1237 | '</td>' |
---|
| 1238 | ); |
---|
| 1239 | } |
---|
| 1240 | |
---|
| 1241 | for(var k in ts){ |
---|
| 1242 | var t = ts[k]; |
---|
| 1243 | if(t && typeof t.compile == 'function' && !t.compiled){ |
---|
| 1244 | t.disableFormats = true; |
---|
| 1245 | t.compile(); |
---|
| 1246 | } |
---|
| 1247 | } |
---|
| 1248 | |
---|
| 1249 | this.templates = ts; |
---|
| 1250 | this.colRe = new RegExp("x-grid3-td-([^\\s]+)", ""); |
---|
| 1251 | }, |
---|
| 1252 | |
---|
| 1253 | // private |
---|
| 1254 | fly : function(el){ |
---|
| 1255 | if(!this._flyweight){ |
---|
| 1256 | this._flyweight = new Ext.Element.Flyweight(document.body); |
---|
| 1257 | } |
---|
| 1258 | this._flyweight.dom = el; |
---|
| 1259 | return this._flyweight; |
---|
| 1260 | }, |
---|
| 1261 | |
---|
| 1262 | // private |
---|
| 1263 | getEditorParent : function(){ |
---|
| 1264 | return this.scroller.dom; |
---|
| 1265 | }, |
---|
| 1266 | |
---|
| 1267 | // private |
---|
| 1268 | initElements : function(){ |
---|
| 1269 | var E = Ext.Element; |
---|
| 1270 | |
---|
| 1271 | var el = this.grid.getGridEl().dom.firstChild; |
---|
| 1272 | var cs = el.childNodes; |
---|
| 1273 | |
---|
| 1274 | this.el = new E(el); |
---|
| 1275 | |
---|
| 1276 | this.mainWrap = new E(cs[0]); |
---|
| 1277 | this.mainHd = new E(this.mainWrap.dom.firstChild); |
---|
| 1278 | |
---|
| 1279 | if(this.grid.hideHeaders){ |
---|
| 1280 | this.mainHd.setDisplayed(false); |
---|
| 1281 | } |
---|
| 1282 | |
---|
| 1283 | this.innerHd = this.mainHd.dom.firstChild; |
---|
| 1284 | this.scroller = new E(this.mainWrap.dom.childNodes[1]); |
---|
| 1285 | if(this.forceFit){ |
---|
| 1286 | this.scroller.setStyle('overflow-x', 'hidden'); |
---|
| 1287 | } |
---|
| 1288 | /** |
---|
| 1289 | * <i>Read-only</i>. The GridView's body Element which encapsulates all rows in the Grid. |
---|
| 1290 | * This {@link Ext.Element Element} is only available after the GridPanel has been rendered. |
---|
| 1291 | * @type Ext.Element |
---|
| 1292 | * @property mainBody |
---|
| 1293 | */ |
---|
| 1294 | this.mainBody = new E(this.scroller.dom.firstChild); |
---|
| 1295 | |
---|
| 1296 | this.focusEl = new E(this.scroller.dom.childNodes[1]); |
---|
| 1297 | this.focusEl.swallowEvent("click", true); |
---|
| 1298 | |
---|
| 1299 | this.resizeMarker = new E(cs[1]); |
---|
| 1300 | this.resizeProxy = new E(cs[2]); |
---|
| 1301 | }, |
---|
| 1302 | |
---|
| 1303 | // private |
---|
| 1304 | getRows : function(){ |
---|
| 1305 | return this.hasRows() ? this.mainBody.dom.childNodes : []; |
---|
| 1306 | }, |
---|
| 1307 | |
---|
| 1308 | // finder methods, used with delegation |
---|
| 1309 | |
---|
| 1310 | // private |
---|
| 1311 | findCell : function(el){ |
---|
| 1312 | if(!el){ |
---|
| 1313 | return false; |
---|
| 1314 | } |
---|
| 1315 | return this.fly(el).findParent(this.cellSelector, this.cellSelectorDepth); |
---|
| 1316 | }, |
---|
| 1317 | |
---|
| 1318 | /** |
---|
| 1319 | * <p>Return the index of the grid column which contains the passed element.</p> |
---|
| 1320 | * See also {@link #findRowIndex} |
---|
| 1321 | * @param {Element} el The target element |
---|
| 1322 | * @return The column index, or <b>false</b> if the target element is not within a row of this GridView. |
---|
| 1323 | */ |
---|
| 1324 | findCellIndex : function(el, requiredCls){ |
---|
| 1325 | var cell = this.findCell(el); |
---|
| 1326 | if(cell && (!requiredCls || this.fly(cell).hasClass(requiredCls))){ |
---|
| 1327 | return this.getCellIndex(cell); |
---|
| 1328 | } |
---|
| 1329 | return false; |
---|
| 1330 | }, |
---|
| 1331 | |
---|
| 1332 | // private |
---|
| 1333 | getCellIndex : function(el){ |
---|
| 1334 | if(el){ |
---|
| 1335 | var m = el.className.match(this.colRe); |
---|
| 1336 | if(m && m[1]){ |
---|
| 1337 | return this.cm.getIndexById(m[1]); |
---|
| 1338 | } |
---|
| 1339 | } |
---|
| 1340 | return false; |
---|
| 1341 | }, |
---|
| 1342 | |
---|
| 1343 | // private |
---|
| 1344 | findHeaderCell : function(el){ |
---|
| 1345 | var cell = this.findCell(el); |
---|
| 1346 | return cell && this.fly(cell).hasClass(this.hdCls) ? cell : null; |
---|
| 1347 | }, |
---|
| 1348 | |
---|
| 1349 | // private |
---|
| 1350 | findHeaderIndex : function(el){ |
---|
| 1351 | return this.findCellIndex(el, this.hdCls); |
---|
| 1352 | }, |
---|
| 1353 | |
---|
| 1354 | /** |
---|
| 1355 | * Return the HtmlElement representing the grid row which contains the passed element. |
---|
| 1356 | * @param {Element} el The target element |
---|
| 1357 | * @return The row element, or null if the target element is not within a row of this GridView. |
---|
| 1358 | */ |
---|
| 1359 | findRow : function(el){ |
---|
| 1360 | if(!el){ |
---|
| 1361 | return false; |
---|
| 1362 | } |
---|
| 1363 | return this.fly(el).findParent(this.rowSelector, this.rowSelectorDepth); |
---|
| 1364 | }, |
---|
| 1365 | |
---|
| 1366 | /** |
---|
| 1367 | * <p>Return the index of the grid row which contains the passed element.</p> |
---|
| 1368 | * See also {@link #findCellIndex} |
---|
| 1369 | * @param {Element} el The target element |
---|
| 1370 | * @return The row index, or <b>false</b> if the target element is not within a row of this GridView. |
---|
| 1371 | */ |
---|
| 1372 | findRowIndex : function(el){ |
---|
| 1373 | var r = this.findRow(el); |
---|
| 1374 | return r ? r.rowIndex : false; |
---|
| 1375 | }, |
---|
| 1376 | |
---|
| 1377 | // getter methods for fetching elements dynamically in the grid |
---|
| 1378 | |
---|
| 1379 | /** |
---|
| 1380 | * Return the <tt><div></tt> HtmlElement which represents a Grid row for the specified index. |
---|
| 1381 | * @param {Number} index The row index |
---|
| 1382 | * @return {HtmlElement} The div element. |
---|
| 1383 | */ |
---|
| 1384 | getRow : function(row){ |
---|
| 1385 | return this.getRows()[row]; |
---|
| 1386 | }, |
---|
| 1387 | |
---|
| 1388 | /** |
---|
| 1389 | * Returns the grid's <tt><td></tt> HtmlElement at the specified coordinates. |
---|
| 1390 | * @param {Number} row The row index in which to find the cell. |
---|
| 1391 | * @param {Number} col The column index of the cell. |
---|
| 1392 | * @return {HtmlElement} The td at the specified coordinates. |
---|
| 1393 | */ |
---|
| 1394 | getCell : function(row, col){ |
---|
| 1395 | return this.getRow(row).getElementsByTagName('td')[col]; |
---|
| 1396 | }, |
---|
| 1397 | |
---|
| 1398 | /** |
---|
| 1399 | * Return the <tt><td></tt> HtmlElement which represents the Grid's header cell for the specified column index. |
---|
| 1400 | * @param {Number} index The column index |
---|
| 1401 | * @return {HtmlElement} The td element. |
---|
| 1402 | */ |
---|
| 1403 | getHeaderCell : function(index){ |
---|
| 1404 | return this.mainHd.dom.getElementsByTagName('td')[index]; |
---|
| 1405 | }, |
---|
| 1406 | |
---|
| 1407 | // manipulating elements |
---|
| 1408 | |
---|
| 1409 | // private - use getRowClass to apply custom row classes |
---|
| 1410 | addRowClass : function(row, cls){ |
---|
| 1411 | var r = this.getRow(row); |
---|
| 1412 | if(r){ |
---|
| 1413 | this.fly(r).addClass(cls); |
---|
| 1414 | } |
---|
| 1415 | }, |
---|
| 1416 | |
---|
| 1417 | // private |
---|
| 1418 | removeRowClass : function(row, cls){ |
---|
| 1419 | var r = this.getRow(row); |
---|
| 1420 | if(r){ |
---|
| 1421 | this.fly(r).removeClass(cls); |
---|
| 1422 | } |
---|
| 1423 | }, |
---|
| 1424 | |
---|
| 1425 | // private |
---|
| 1426 | removeRow : function(row){ |
---|
| 1427 | Ext.removeNode(this.getRow(row)); |
---|
| 1428 | this.syncFocusEl(row); |
---|
| 1429 | }, |
---|
| 1430 | |
---|
| 1431 | // private |
---|
| 1432 | removeRows : function(firstRow, lastRow){ |
---|
| 1433 | var bd = this.mainBody.dom; |
---|
| 1434 | for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){ |
---|
| 1435 | Ext.removeNode(bd.childNodes[firstRow]); |
---|
| 1436 | } |
---|
| 1437 | this.syncFocusEl(firstRow); |
---|
| 1438 | }, |
---|
| 1439 | |
---|
| 1440 | // scrolling stuff |
---|
| 1441 | |
---|
| 1442 | // private |
---|
| 1443 | getScrollState : function(){ |
---|
| 1444 | var sb = this.scroller.dom; |
---|
| 1445 | return {left: sb.scrollLeft, top: sb.scrollTop}; |
---|
| 1446 | }, |
---|
| 1447 | |
---|
| 1448 | // private |
---|
| 1449 | restoreScroll : function(state){ |
---|
| 1450 | var sb = this.scroller.dom; |
---|
| 1451 | sb.scrollLeft = state.left; |
---|
| 1452 | sb.scrollTop = state.top; |
---|
| 1453 | }, |
---|
| 1454 | |
---|
| 1455 | /** |
---|
| 1456 | * Scrolls the grid to the top |
---|
| 1457 | */ |
---|
| 1458 | scrollToTop : function(){ |
---|
| 1459 | this.scroller.dom.scrollTop = 0; |
---|
| 1460 | this.scroller.dom.scrollLeft = 0; |
---|
| 1461 | }, |
---|
| 1462 | |
---|
| 1463 | // private |
---|
| 1464 | syncScroll : function(){ |
---|
| 1465 | this.syncHeaderScroll(); |
---|
| 1466 | var mb = this.scroller.dom; |
---|
| 1467 | this.grid.fireEvent("bodyscroll", mb.scrollLeft, mb.scrollTop); |
---|
| 1468 | }, |
---|
| 1469 | |
---|
| 1470 | // private |
---|
| 1471 | syncHeaderScroll : function(){ |
---|
| 1472 | var mb = this.scroller.dom; |
---|
| 1473 | this.innerHd.scrollLeft = mb.scrollLeft; |
---|
| 1474 | this.innerHd.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) |
---|
| 1475 | }, |
---|
| 1476 | |
---|
| 1477 | // private |
---|
| 1478 | updateSortIcon : function(col, dir){ |
---|
| 1479 | var sc = this.sortClasses; |
---|
| 1480 | var hds = this.mainHd.select('td').removeClass(sc); |
---|
| 1481 | hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]); |
---|
| 1482 | }, |
---|
| 1483 | |
---|
| 1484 | // private |
---|
| 1485 | updateAllColumnWidths : function(){ |
---|
| 1486 | var tw = this.getTotalWidth(), |
---|
| 1487 | clen = this.cm.getColumnCount(), |
---|
| 1488 | ws = [], |
---|
| 1489 | len, |
---|
| 1490 | i; |
---|
| 1491 | for(i = 0; i < clen; i++){ |
---|
| 1492 | ws[i] = this.getColumnWidth(i); |
---|
| 1493 | } |
---|
| 1494 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
| 1495 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
| 1496 | this.mainBody.dom.style.width = tw; |
---|
| 1497 | for(i = 0; i < clen; i++){ |
---|
| 1498 | var hd = this.getHeaderCell(i); |
---|
| 1499 | hd.style.width = ws[i]; |
---|
| 1500 | } |
---|
| 1501 | |
---|
| 1502 | var ns = this.getRows(), row, trow; |
---|
| 1503 | for(i = 0, len = ns.length; i < len; i++){ |
---|
| 1504 | row = ns[i]; |
---|
| 1505 | row.style.width = tw; |
---|
| 1506 | if(row.firstChild){ |
---|
| 1507 | row.firstChild.style.width = tw; |
---|
| 1508 | trow = row.firstChild.rows[0]; |
---|
| 1509 | for (var j = 0; j < clen; j++) { |
---|
| 1510 | trow.childNodes[j].style.width = ws[j]; |
---|
| 1511 | } |
---|
| 1512 | } |
---|
| 1513 | } |
---|
| 1514 | |
---|
| 1515 | this.onAllColumnWidthsUpdated(ws, tw); |
---|
| 1516 | }, |
---|
| 1517 | |
---|
| 1518 | // private |
---|
| 1519 | updateColumnWidth : function(col, width){ |
---|
| 1520 | var w = this.getColumnWidth(col); |
---|
| 1521 | var tw = this.getTotalWidth(); |
---|
| 1522 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
| 1523 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
| 1524 | this.mainBody.dom.style.width = tw; |
---|
| 1525 | var hd = this.getHeaderCell(col); |
---|
| 1526 | hd.style.width = w; |
---|
| 1527 | |
---|
| 1528 | var ns = this.getRows(), row; |
---|
| 1529 | for(var i = 0, len = ns.length; i < len; i++){ |
---|
| 1530 | row = ns[i]; |
---|
| 1531 | row.style.width = tw; |
---|
| 1532 | if(row.firstChild){ |
---|
| 1533 | row.firstChild.style.width = tw; |
---|
| 1534 | row.firstChild.rows[0].childNodes[col].style.width = w; |
---|
| 1535 | } |
---|
| 1536 | } |
---|
| 1537 | |
---|
| 1538 | this.onColumnWidthUpdated(col, w, tw); |
---|
| 1539 | }, |
---|
| 1540 | |
---|
| 1541 | // private |
---|
| 1542 | updateColumnHidden : function(col, hidden){ |
---|
| 1543 | var tw = this.getTotalWidth(); |
---|
| 1544 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
| 1545 | this.innerHd.firstChild.firstChild.style.width = tw; |
---|
| 1546 | this.mainBody.dom.style.width = tw; |
---|
| 1547 | var display = hidden ? 'none' : ''; |
---|
| 1548 | |
---|
| 1549 | var hd = this.getHeaderCell(col); |
---|
| 1550 | hd.style.display = display; |
---|
| 1551 | |
---|
| 1552 | var ns = this.getRows(), row; |
---|
| 1553 | for(var i = 0, len = ns.length; i < len; i++){ |
---|
| 1554 | row = ns[i]; |
---|
| 1555 | row.style.width = tw; |
---|
| 1556 | if(row.firstChild){ |
---|
| 1557 | row.firstChild.style.width = tw; |
---|
| 1558 | row.firstChild.rows[0].childNodes[col].style.display = display; |
---|
| 1559 | } |
---|
| 1560 | } |
---|
| 1561 | |
---|
| 1562 | this.onColumnHiddenUpdated(col, hidden, tw); |
---|
| 1563 | delete this.lastViewWidth; // force recalc |
---|
| 1564 | this.layout(); |
---|
| 1565 | }, |
---|
| 1566 | |
---|
| 1567 | // private |
---|
| 1568 | doRender : function(cs, rs, ds, startRow, colCount, stripe){ |
---|
| 1569 | var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1; |
---|
| 1570 | var tstyle = 'width:'+this.getTotalWidth()+';'; |
---|
| 1571 | // buffers |
---|
| 1572 | var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; |
---|
| 1573 | for(var j = 0, len = rs.length; j < len; j++){ |
---|
| 1574 | r = rs[j]; cb = []; |
---|
| 1575 | var rowIndex = (j+startRow); |
---|
| 1576 | for(var i = 0; i < colCount; i++){ |
---|
| 1577 | c = cs[i]; |
---|
| 1578 | p.id = c.id; |
---|
| 1579 | p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); |
---|
| 1580 | p.attr = p.cellAttr = ""; |
---|
| 1581 | p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds); |
---|
| 1582 | p.style = c.style; |
---|
| 1583 | if(Ext.isEmpty(p.value)){ |
---|
| 1584 | p.value = " "; |
---|
| 1585 | } |
---|
| 1586 | if(this.markDirty && r.dirty && typeof r.modified[c.name] !== 'undefined'){ |
---|
| 1587 | p.css += ' x-grid3-dirty-cell'; |
---|
| 1588 | } |
---|
| 1589 | cb[cb.length] = ct.apply(p); |
---|
| 1590 | } |
---|
| 1591 | var alt = []; |
---|
| 1592 | if(stripe && ((rowIndex+1) % 2 === 0)){ |
---|
| 1593 | alt[0] = "x-grid3-row-alt"; |
---|
| 1594 | } |
---|
| 1595 | if(r.dirty){ |
---|
| 1596 | alt[1] = " x-grid3-dirty-row"; |
---|
| 1597 | } |
---|
| 1598 | rp.cols = colCount; |
---|
| 1599 | if(this.getRowClass){ |
---|
| 1600 | alt[2] = this.getRowClass(r, rowIndex, rp, ds); |
---|
| 1601 | } |
---|
| 1602 | rp.alt = alt.join(" "); |
---|
| 1603 | rp.cells = cb.join(""); |
---|
| 1604 | buf[buf.length] = rt.apply(rp); |
---|
| 1605 | } |
---|
| 1606 | return buf.join(""); |
---|
| 1607 | }, |
---|
| 1608 | |
---|
| 1609 | // private |
---|
| 1610 | processRows : function(startRow, skipStripe){ |
---|
| 1611 | if(!this.ds || this.ds.getCount() < 1){ |
---|
| 1612 | return; |
---|
| 1613 | } |
---|
| 1614 | var rows = this.getRows(); |
---|
| 1615 | skipStripe = skipStripe || !this.grid.stripeRows; |
---|
| 1616 | startRow = startRow || 0; |
---|
| 1617 | Ext.each(rows, function(row, idx){ |
---|
| 1618 | row.rowIndex = idx; |
---|
| 1619 | row.className = row.className.replace(this.rowClsRe, ' '); |
---|
| 1620 | if (!skipStripe && (idx + 1) % 2 === 0) { |
---|
| 1621 | row.className += ' x-grid3-row-alt'; |
---|
| 1622 | } |
---|
| 1623 | }); |
---|
| 1624 | // add first/last-row classes |
---|
| 1625 | if(startRow === 0){ |
---|
| 1626 | Ext.fly(rows[0]).addClass(this.firstRowCls); |
---|
| 1627 | } |
---|
| 1628 | Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls); |
---|
| 1629 | }, |
---|
| 1630 | |
---|
| 1631 | afterRender : function(){ |
---|
| 1632 | if(!this.ds || !this.cm){ |
---|
| 1633 | return; |
---|
| 1634 | } |
---|
| 1635 | this.mainBody.dom.innerHTML = this.renderRows() || ' '; |
---|
| 1636 | this.processRows(0, true); |
---|
| 1637 | |
---|
| 1638 | if(this.deferEmptyText !== true){ |
---|
| 1639 | this.applyEmptyText(); |
---|
| 1640 | } |
---|
| 1641 | }, |
---|
| 1642 | |
---|
| 1643 | // private |
---|
| 1644 | renderUI : function(){ |
---|
| 1645 | |
---|
| 1646 | var header = this.renderHeaders(); |
---|
| 1647 | var body = this.templates.body.apply({rows:' '}); |
---|
| 1648 | |
---|
| 1649 | |
---|
| 1650 | var html = this.templates.master.apply({ |
---|
| 1651 | body: body, |
---|
| 1652 | header: header, |
---|
| 1653 | ostyle: 'width:'+this.getOffsetWidth()+';', |
---|
| 1654 | bstyle: 'width:'+this.getTotalWidth()+';' |
---|
| 1655 | }); |
---|
| 1656 | |
---|
| 1657 | var g = this.grid; |
---|
| 1658 | |
---|
| 1659 | g.getGridEl().dom.innerHTML = html; |
---|
| 1660 | |
---|
| 1661 | this.initElements(); |
---|
| 1662 | |
---|
| 1663 | // get mousedowns early |
---|
| 1664 | Ext.fly(this.innerHd).on("click", this.handleHdDown, this); |
---|
| 1665 | this.mainHd.on({ |
---|
| 1666 | scope: this, |
---|
| 1667 | mouseover: this.handleHdOver, |
---|
| 1668 | mouseout: this.handleHdOut, |
---|
| 1669 | mousemove: this.handleHdMove |
---|
| 1670 | }); |
---|
| 1671 | |
---|
| 1672 | this.scroller.on('scroll', this.syncScroll, this); |
---|
| 1673 | if(g.enableColumnResize !== false){ |
---|
| 1674 | this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom); |
---|
| 1675 | } |
---|
| 1676 | |
---|
| 1677 | if(g.enableColumnMove){ |
---|
| 1678 | this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd); |
---|
| 1679 | this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom); |
---|
| 1680 | } |
---|
| 1681 | |
---|
| 1682 | if(g.enableHdMenu !== false){ |
---|
| 1683 | this.hmenu = new Ext.menu.Menu({id: g.id + "-hctx"}); |
---|
| 1684 | this.hmenu.add( |
---|
| 1685 | {itemId:"asc", text: this.sortAscText, cls: "xg-hmenu-sort-asc"}, |
---|
| 1686 | {itemId:"desc", text: this.sortDescText, cls: "xg-hmenu-sort-desc"} |
---|
| 1687 | ); |
---|
| 1688 | if(g.enableColumnHide !== false){ |
---|
| 1689 | this.colMenu = new Ext.menu.Menu({id:g.id + "-hcols-menu"}); |
---|
| 1690 | this.colMenu.on({ |
---|
| 1691 | scope: this, |
---|
| 1692 | beforeshow: this.beforeColMenuShow, |
---|
| 1693 | itemclick: this.handleHdMenuClick |
---|
| 1694 | }); |
---|
| 1695 | this.hmenu.add('-', { |
---|
| 1696 | itemId:"columns", |
---|
| 1697 | hideOnClick: false, |
---|
| 1698 | text: this.columnsText, |
---|
| 1699 | menu: this.colMenu, |
---|
| 1700 | iconCls: 'x-cols-icon' |
---|
| 1701 | }); |
---|
| 1702 | } |
---|
| 1703 | this.hmenu.on("itemclick", this.handleHdMenuClick, this); |
---|
| 1704 | } |
---|
| 1705 | |
---|
| 1706 | if(g.trackMouseOver){ |
---|
| 1707 | this.mainBody.on({ |
---|
| 1708 | scope: this, |
---|
| 1709 | mouseover: this.onRowOver, |
---|
| 1710 | mouseout: this.onRowOut |
---|
| 1711 | }); |
---|
| 1712 | } |
---|
| 1713 | |
---|
| 1714 | if(g.enableDragDrop || g.enableDrag){ |
---|
| 1715 | this.dragZone = new Ext.grid.GridDragZone(g, { |
---|
| 1716 | ddGroup : g.ddGroup || 'GridDD' |
---|
| 1717 | }); |
---|
| 1718 | } |
---|
| 1719 | |
---|
| 1720 | this.updateHeaderSortState(); |
---|
| 1721 | |
---|
| 1722 | }, |
---|
| 1723 | |
---|
| 1724 | // private |
---|
| 1725 | layout : function(){ |
---|
| 1726 | if(!this.mainBody){ |
---|
| 1727 | return; // not rendered |
---|
| 1728 | } |
---|
| 1729 | var g = this.grid; |
---|
| 1730 | var c = g.getGridEl(); |
---|
| 1731 | var csize = c.getSize(true); |
---|
| 1732 | var vw = csize.width; |
---|
| 1733 | |
---|
| 1734 | if(!g.hideHeaders && (vw < 20 || csize.height < 20)){ // display: none? |
---|
| 1735 | return; |
---|
| 1736 | } |
---|
| 1737 | |
---|
| 1738 | if(g.autoHeight){ |
---|
| 1739 | this.scroller.dom.style.overflow = 'visible'; |
---|
| 1740 | if(Ext.isWebKit){ |
---|
| 1741 | this.scroller.dom.style.position = 'static'; |
---|
| 1742 | } |
---|
| 1743 | }else{ |
---|
| 1744 | this.el.setSize(csize.width, csize.height); |
---|
| 1745 | |
---|
| 1746 | var hdHeight = this.mainHd.getHeight(); |
---|
| 1747 | var vh = csize.height - (hdHeight); |
---|
| 1748 | |
---|
| 1749 | this.scroller.setSize(vw, vh); |
---|
| 1750 | if(this.innerHd){ |
---|
| 1751 | this.innerHd.style.width = (vw)+'px'; |
---|
| 1752 | } |
---|
| 1753 | } |
---|
| 1754 | if(this.forceFit){ |
---|
| 1755 | if(this.lastViewWidth != vw){ |
---|
| 1756 | this.fitColumns(false, false); |
---|
| 1757 | this.lastViewWidth = vw; |
---|
| 1758 | } |
---|
| 1759 | }else { |
---|
| 1760 | this.autoExpand(); |
---|
| 1761 | this.syncHeaderScroll(); |
---|
| 1762 | } |
---|
| 1763 | this.onLayout(vw, vh); |
---|
| 1764 | }, |
---|
| 1765 | |
---|
| 1766 | // template functions for subclasses and plugins |
---|
| 1767 | // these functions include precalculated values |
---|
| 1768 | onLayout : function(vw, vh){ |
---|
| 1769 | // do nothing |
---|
| 1770 | }, |
---|
| 1771 | |
---|
| 1772 | onColumnWidthUpdated : function(col, w, tw){ |
---|
| 1773 | //template method |
---|
| 1774 | }, |
---|
| 1775 | |
---|
| 1776 | onAllColumnWidthsUpdated : function(ws, tw){ |
---|
| 1777 | //template method |
---|
| 1778 | }, |
---|
| 1779 | |
---|
| 1780 | onColumnHiddenUpdated : function(col, hidden, tw){ |
---|
| 1781 | // template method |
---|
| 1782 | }, |
---|
| 1783 | |
---|
| 1784 | updateColumnText : function(col, text){ |
---|
| 1785 | // template method |
---|
| 1786 | }, |
---|
| 1787 | |
---|
| 1788 | afterMove : function(colIndex){ |
---|
| 1789 | // template method |
---|
| 1790 | }, |
---|
| 1791 | |
---|
| 1792 | /* ----------------------------------- Core Specific -------------------------------------------*/ |
---|
| 1793 | // private |
---|
| 1794 | init : function(grid){ |
---|
| 1795 | this.grid = grid; |
---|
| 1796 | |
---|
| 1797 | this.initTemplates(); |
---|
| 1798 | this.initData(grid.store, grid.colModel); |
---|
| 1799 | this.initUI(grid); |
---|
| 1800 | }, |
---|
| 1801 | |
---|
| 1802 | // private |
---|
| 1803 | getColumnId : function(index){ |
---|
| 1804 | return this.cm.getColumnId(index); |
---|
| 1805 | }, |
---|
| 1806 | |
---|
| 1807 | // private |
---|
| 1808 | getOffsetWidth : function() { |
---|
| 1809 | return (this.cm.getTotalWidth() + this.scrollOffset) + 'px'; |
---|
| 1810 | }, |
---|
| 1811 | |
---|
| 1812 | // private |
---|
| 1813 | renderHeaders : function(){ |
---|
| 1814 | var cm = this.cm, |
---|
| 1815 | ts = this.templates, |
---|
| 1816 | ct = ts.hcell, |
---|
| 1817 | cb = [], |
---|
| 1818 | p = {}, |
---|
| 1819 | len = cm.getColumnCount(), |
---|
| 1820 | last = len - 1; |
---|
| 1821 | |
---|
| 1822 | for(var i = 0; i < len; i++){ |
---|
| 1823 | p.id = cm.getColumnId(i); |
---|
| 1824 | p.value = cm.getColumnHeader(i) || ""; |
---|
| 1825 | p.style = this.getColumnStyle(i, true); |
---|
| 1826 | p.tooltip = this.getColumnTooltip(i); |
---|
| 1827 | p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); |
---|
| 1828 | if(cm.config[i].align == 'right'){ |
---|
| 1829 | p.istyle = 'padding-right:16px'; |
---|
| 1830 | } else { |
---|
| 1831 | delete p.istyle; |
---|
| 1832 | } |
---|
| 1833 | cb[cb.length] = ct.apply(p); |
---|
| 1834 | } |
---|
| 1835 | return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'}); |
---|
| 1836 | }, |
---|
| 1837 | |
---|
| 1838 | // private |
---|
| 1839 | getColumnTooltip : function(i){ |
---|
| 1840 | var tt = this.cm.getColumnTooltip(i); |
---|
| 1841 | if(tt){ |
---|
| 1842 | if(Ext.QuickTips.isEnabled()){ |
---|
| 1843 | return 'ext:qtip="'+tt+'"'; |
---|
| 1844 | }else{ |
---|
| 1845 | return 'title="'+tt+'"'; |
---|
| 1846 | } |
---|
| 1847 | } |
---|
| 1848 | return ""; |
---|
| 1849 | }, |
---|
| 1850 | |
---|
| 1851 | // private |
---|
| 1852 | beforeUpdate : function(){ |
---|
| 1853 | this.grid.stopEditing(true); |
---|
| 1854 | }, |
---|
| 1855 | |
---|
| 1856 | // private |
---|
| 1857 | updateHeaders : function(){ |
---|
| 1858 | this.innerHd.firstChild.innerHTML = this.renderHeaders(); |
---|
| 1859 | this.innerHd.firstChild.style.width = this.getOffsetWidth(); |
---|
| 1860 | this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth(); |
---|
| 1861 | }, |
---|
| 1862 | |
---|
| 1863 | /** |
---|
| 1864 | * Focuses the specified row. |
---|
| 1865 | * @param {Number} row The row index |
---|
| 1866 | */ |
---|
| 1867 | focusRow : function(row){ |
---|
| 1868 | this.focusCell(row, 0, false); |
---|
| 1869 | }, |
---|
| 1870 | |
---|
| 1871 | /** |
---|
| 1872 | * Focuses the specified cell. |
---|
| 1873 | * @param {Number} row The row index |
---|
| 1874 | * @param {Number} col The column index |
---|
| 1875 | */ |
---|
| 1876 | focusCell : function(row, col, hscroll){ |
---|
| 1877 | this.syncFocusEl(this.ensureVisible(row, col, hscroll)); |
---|
| 1878 | if(Ext.isGecko){ |
---|
| 1879 | this.focusEl.focus(); |
---|
| 1880 | }else{ |
---|
| 1881 | this.focusEl.focus.defer(1, this.focusEl); |
---|
| 1882 | } |
---|
| 1883 | }, |
---|
| 1884 | |
---|
| 1885 | resolveCell : function(row, col, hscroll){ |
---|
| 1886 | if(typeof row != "number"){ |
---|
| 1887 | row = row.rowIndex; |
---|
| 1888 | } |
---|
| 1889 | if(!this.ds){ |
---|
| 1890 | return null; |
---|
| 1891 | } |
---|
| 1892 | if(row < 0 || row >= this.ds.getCount()){ |
---|
| 1893 | return null; |
---|
| 1894 | } |
---|
| 1895 | col = (col !== undefined ? col : 0); |
---|
| 1896 | |
---|
| 1897 | var rowEl = this.getRow(row), |
---|
| 1898 | cm = this.cm, |
---|
| 1899 | colCount = cm.getColumnCount(), |
---|
| 1900 | cellEl; |
---|
| 1901 | if(!(hscroll === false && col === 0)){ |
---|
| 1902 | while(col < colCount && cm.isHidden(col)){ |
---|
| 1903 | col++; |
---|
| 1904 | } |
---|
| 1905 | cellEl = this.getCell(row, col); |
---|
| 1906 | } |
---|
| 1907 | |
---|
| 1908 | return {row: rowEl, cell: cellEl}; |
---|
| 1909 | }, |
---|
| 1910 | |
---|
| 1911 | getResolvedXY : function(resolved){ |
---|
| 1912 | if(!resolved){ |
---|
| 1913 | return null; |
---|
| 1914 | } |
---|
| 1915 | var s = this.scroller.dom, c = resolved.cell, r = resolved.row; |
---|
| 1916 | return c ? Ext.fly(c).getXY() : [this.el.getX(), Ext.fly(r).getY()]; |
---|
| 1917 | }, |
---|
| 1918 | |
---|
| 1919 | syncFocusEl : function(row, col, hscroll){ |
---|
| 1920 | var xy = row; |
---|
| 1921 | if(!Ext.isArray(xy)){ |
---|
| 1922 | row = Math.min(row, Math.max(0, this.getRows().length-1)); |
---|
| 1923 | xy = this.getResolvedXY(this.resolveCell(row, col, hscroll)); |
---|
| 1924 | } |
---|
| 1925 | this.focusEl.setXY(xy||this.scroller.getXY()); |
---|
| 1926 | }, |
---|
| 1927 | |
---|
| 1928 | ensureVisible : function(row, col, hscroll){ |
---|
| 1929 | var resolved = this.resolveCell(row, col, hscroll); |
---|
| 1930 | if(!resolved || !resolved.row){ |
---|
| 1931 | return; |
---|
| 1932 | } |
---|
| 1933 | |
---|
| 1934 | var rowEl = resolved.row, |
---|
| 1935 | cellEl = resolved.cell, |
---|
| 1936 | c = this.scroller.dom, |
---|
| 1937 | ctop = 0, |
---|
| 1938 | p = rowEl, |
---|
| 1939 | stop = this.el.dom; |
---|
| 1940 | |
---|
| 1941 | while(p && p != stop){ |
---|
| 1942 | ctop += p.offsetTop; |
---|
| 1943 | p = p.offsetParent; |
---|
| 1944 | } |
---|
| 1945 | ctop -= this.mainHd.dom.offsetHeight; |
---|
| 1946 | |
---|
| 1947 | var cbot = ctop + rowEl.offsetHeight, |
---|
| 1948 | ch = c.clientHeight, |
---|
| 1949 | sbot = stop + ch; |
---|
| 1950 | |
---|
| 1951 | stop = parseInt(c.scrollTop, 10); |
---|
| 1952 | |
---|
| 1953 | |
---|
| 1954 | if(ctop < stop){ |
---|
| 1955 | c.scrollTop = ctop; |
---|
| 1956 | }else if(cbot > sbot){ |
---|
| 1957 | c.scrollTop = cbot-ch; |
---|
| 1958 | } |
---|
| 1959 | |
---|
| 1960 | if(hscroll !== false){ |
---|
| 1961 | var cleft = parseInt(cellEl.offsetLeft, 10); |
---|
| 1962 | var cright = cleft + cellEl.offsetWidth; |
---|
| 1963 | |
---|
| 1964 | var sleft = parseInt(c.scrollLeft, 10); |
---|
| 1965 | var sright = sleft + c.clientWidth; |
---|
| 1966 | if(cleft < sleft){ |
---|
| 1967 | c.scrollLeft = cleft; |
---|
| 1968 | }else if(cright > sright){ |
---|
| 1969 | c.scrollLeft = cright-c.clientWidth; |
---|
| 1970 | } |
---|
| 1971 | } |
---|
| 1972 | return this.getResolvedXY(resolved); |
---|
| 1973 | }, |
---|
| 1974 | |
---|
| 1975 | // private |
---|
| 1976 | insertRows : function(dm, firstRow, lastRow, isUpdate){ |
---|
| 1977 | var last = dm.getCount() - 1; |
---|
| 1978 | if(!isUpdate && firstRow === 0 && lastRow >= last){ |
---|
| 1979 | this.refresh(); |
---|
| 1980 | }else{ |
---|
| 1981 | if(!isUpdate){ |
---|
| 1982 | this.fireEvent("beforerowsinserted", this, firstRow, lastRow); |
---|
| 1983 | } |
---|
| 1984 | var html = this.renderRows(firstRow, lastRow), |
---|
| 1985 | before = this.getRow(firstRow); |
---|
| 1986 | if(before){ |
---|
| 1987 | if(firstRow === 0){ |
---|
| 1988 | Ext.fly(this.getRow(0)).removeClass(this.firstRowCls); |
---|
| 1989 | } |
---|
| 1990 | Ext.DomHelper.insertHtml('beforeBegin', before, html); |
---|
| 1991 | }else{ |
---|
| 1992 | var r = this.getRow(last - 1); |
---|
| 1993 | if(r){ |
---|
| 1994 | Ext.fly(r).removeClass(this.lastRowCls); |
---|
| 1995 | } |
---|
| 1996 | Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html); |
---|
| 1997 | } |
---|
| 1998 | if(!isUpdate){ |
---|
| 1999 | this.fireEvent("rowsinserted", this, firstRow, lastRow); |
---|
| 2000 | this.processRows(firstRow); |
---|
| 2001 | }else if(firstRow === 0 || firstRow >= last){ |
---|
| 2002 | //ensure first/last row is kept after an update. |
---|
| 2003 | Ext.fly(this.getRow(firstRow)).addClass(firstRow === 0 ? this.firstRowCls : this.lastRowCls); |
---|
| 2004 | } |
---|
| 2005 | } |
---|
| 2006 | this.syncFocusEl(firstRow); |
---|
| 2007 | }, |
---|
| 2008 | |
---|
| 2009 | // private |
---|
| 2010 | deleteRows : function(dm, firstRow, lastRow){ |
---|
| 2011 | if(dm.getRowCount()<1){ |
---|
| 2012 | this.refresh(); |
---|
| 2013 | }else{ |
---|
| 2014 | this.fireEvent("beforerowsdeleted", this, firstRow, lastRow); |
---|
| 2015 | |
---|
| 2016 | this.removeRows(firstRow, lastRow); |
---|
| 2017 | |
---|
| 2018 | this.processRows(firstRow); |
---|
| 2019 | this.fireEvent("rowsdeleted", this, firstRow, lastRow); |
---|
| 2020 | } |
---|
| 2021 | }, |
---|
| 2022 | |
---|
| 2023 | // private |
---|
| 2024 | getColumnStyle : function(col, isHeader){ |
---|
| 2025 | var style = !isHeader ? (this.cm.config[col].css || '') : ''; |
---|
| 2026 | style += 'width:'+this.getColumnWidth(col)+';'; |
---|
| 2027 | if(this.cm.isHidden(col)){ |
---|
| 2028 | style += 'display:none;'; |
---|
| 2029 | } |
---|
| 2030 | var align = this.cm.config[col].align; |
---|
| 2031 | if(align){ |
---|
| 2032 | style += 'text-align:'+align+';'; |
---|
| 2033 | } |
---|
| 2034 | return style; |
---|
| 2035 | }, |
---|
| 2036 | |
---|
| 2037 | // private |
---|
| 2038 | getColumnWidth : function(col){ |
---|
| 2039 | var w = this.cm.getColumnWidth(col); |
---|
| 2040 | if(typeof w == 'number'){ |
---|
| 2041 | return (Ext.isBorderBox ? w : (w-this.borderWidth > 0 ? w-this.borderWidth:0)) + 'px'; |
---|
| 2042 | } |
---|
| 2043 | return w; |
---|
| 2044 | }, |
---|
| 2045 | |
---|
| 2046 | // private |
---|
| 2047 | getTotalWidth : function(){ |
---|
| 2048 | return this.cm.getTotalWidth()+'px'; |
---|
| 2049 | }, |
---|
| 2050 | |
---|
| 2051 | // private |
---|
| 2052 | fitColumns : function(preventRefresh, onlyExpand, omitColumn){ |
---|
| 2053 | var cm = this.cm, i; |
---|
| 2054 | var tw = cm.getTotalWidth(false); |
---|
| 2055 | var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; |
---|
| 2056 | |
---|
| 2057 | if(aw < 20){ // not initialized, so don't screw up the default widths |
---|
| 2058 | return; |
---|
| 2059 | } |
---|
| 2060 | var extra = aw - tw; |
---|
| 2061 | |
---|
| 2062 | if(extra === 0){ |
---|
| 2063 | return false; |
---|
| 2064 | } |
---|
| 2065 | |
---|
| 2066 | var vc = cm.getColumnCount(true); |
---|
| 2067 | var ac = vc-(typeof omitColumn == 'number' ? 1 : 0); |
---|
| 2068 | if(ac === 0){ |
---|
| 2069 | ac = 1; |
---|
| 2070 | omitColumn = undefined; |
---|
| 2071 | } |
---|
| 2072 | var colCount = cm.getColumnCount(); |
---|
| 2073 | var cols = []; |
---|
| 2074 | var extraCol = 0; |
---|
| 2075 | var width = 0; |
---|
| 2076 | var w; |
---|
| 2077 | for (i = 0; i < colCount; i++){ |
---|
| 2078 | if(!cm.isHidden(i) && !cm.isFixed(i) && i !== omitColumn){ |
---|
| 2079 | w = cm.getColumnWidth(i); |
---|
| 2080 | cols.push(i); |
---|
| 2081 | extraCol = i; |
---|
| 2082 | cols.push(w); |
---|
| 2083 | width += w; |
---|
| 2084 | } |
---|
| 2085 | } |
---|
| 2086 | var frac = (aw - cm.getTotalWidth())/width; |
---|
| 2087 | while (cols.length){ |
---|
| 2088 | w = cols.pop(); |
---|
| 2089 | i = cols.pop(); |
---|
| 2090 | cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true); |
---|
| 2091 | } |
---|
| 2092 | |
---|
| 2093 | if((tw = cm.getTotalWidth(false)) > aw){ |
---|
| 2094 | var adjustCol = ac != vc ? omitColumn : extraCol; |
---|
| 2095 | cm.setColumnWidth(adjustCol, Math.max(1, |
---|
| 2096 | cm.getColumnWidth(adjustCol)- (tw-aw)), true); |
---|
| 2097 | } |
---|
| 2098 | |
---|
| 2099 | if(preventRefresh !== true){ |
---|
| 2100 | this.updateAllColumnWidths(); |
---|
| 2101 | } |
---|
| 2102 | |
---|
| 2103 | |
---|
| 2104 | return true; |
---|
| 2105 | }, |
---|
| 2106 | |
---|
| 2107 | // private |
---|
| 2108 | autoExpand : function(preventUpdate){ |
---|
| 2109 | var g = this.grid, cm = this.cm; |
---|
| 2110 | if(!this.userResized && g.autoExpandColumn){ |
---|
| 2111 | var tw = cm.getTotalWidth(false); |
---|
| 2112 | var aw = this.grid.getGridEl().getWidth(true)-this.scrollOffset; |
---|
| 2113 | if(tw != aw){ |
---|
| 2114 | var ci = cm.getIndexById(g.autoExpandColumn); |
---|
| 2115 | var currentWidth = cm.getColumnWidth(ci); |
---|
| 2116 | var cw = Math.min(Math.max(((aw-tw)+currentWidth), g.autoExpandMin), g.autoExpandMax); |
---|
| 2117 | if(cw != currentWidth){ |
---|
| 2118 | cm.setColumnWidth(ci, cw, true); |
---|
| 2119 | if(preventUpdate !== true){ |
---|
| 2120 | this.updateColumnWidth(ci, cw); |
---|
| 2121 | } |
---|
| 2122 | } |
---|
| 2123 | } |
---|
| 2124 | } |
---|
| 2125 | }, |
---|
| 2126 | |
---|
| 2127 | // private |
---|
| 2128 | getColumnData : function(){ |
---|
| 2129 | // build a map for all the columns |
---|
| 2130 | var cs = [], cm = this.cm, colCount = cm.getColumnCount(); |
---|
| 2131 | for(var i = 0; i < colCount; i++){ |
---|
| 2132 | var name = cm.getDataIndex(i); |
---|
| 2133 | cs[i] = { |
---|
| 2134 | name : (typeof name == 'undefined' ? this.ds.fields.get(i).name : name), |
---|
| 2135 | renderer : cm.getRenderer(i), |
---|
| 2136 | id : cm.getColumnId(i), |
---|
| 2137 | style : this.getColumnStyle(i) |
---|
| 2138 | }; |
---|
| 2139 | } |
---|
| 2140 | return cs; |
---|
| 2141 | }, |
---|
| 2142 | |
---|
| 2143 | // private |
---|
| 2144 | renderRows : function(startRow, endRow){ |
---|
| 2145 | // pull in all the crap needed to render rows |
---|
| 2146 | var g = this.grid, cm = g.colModel, ds = g.store, stripe = g.stripeRows; |
---|
| 2147 | var colCount = cm.getColumnCount(); |
---|
| 2148 | |
---|
| 2149 | if(ds.getCount() < 1){ |
---|
| 2150 | return ""; |
---|
| 2151 | } |
---|
| 2152 | |
---|
| 2153 | var cs = this.getColumnData(); |
---|
| 2154 | |
---|
| 2155 | startRow = startRow || 0; |
---|
| 2156 | endRow = typeof endRow == "undefined"? ds.getCount()-1 : endRow; |
---|
| 2157 | |
---|
| 2158 | // records to render |
---|
| 2159 | var rs = ds.getRange(startRow, endRow); |
---|
| 2160 | |
---|
| 2161 | return this.doRender(cs, rs, ds, startRow, colCount, stripe); |
---|
| 2162 | }, |
---|
| 2163 | |
---|
| 2164 | // private |
---|
| 2165 | renderBody : function(){ |
---|
| 2166 | var markup = this.renderRows() || ' '; |
---|
| 2167 | return this.templates.body.apply({rows: markup}); |
---|
| 2168 | }, |
---|
| 2169 | |
---|
| 2170 | // private |
---|
| 2171 | refreshRow : function(record){ |
---|
| 2172 | var ds = this.ds, index; |
---|
| 2173 | if(typeof record == 'number'){ |
---|
| 2174 | index = record; |
---|
| 2175 | record = ds.getAt(index); |
---|
| 2176 | if(!record){ |
---|
| 2177 | return; |
---|
| 2178 | } |
---|
| 2179 | }else{ |
---|
| 2180 | index = ds.indexOf(record); |
---|
| 2181 | if(index < 0){ |
---|
| 2182 | return; |
---|
| 2183 | } |
---|
| 2184 | } |
---|
| 2185 | this.insertRows(ds, index, index, true); |
---|
| 2186 | this.getRow(index).rowIndex = index; |
---|
| 2187 | this.onRemove(ds, record, index+1, true); |
---|
| 2188 | this.fireEvent("rowupdated", this, index, record); |
---|
| 2189 | }, |
---|
| 2190 | |
---|
| 2191 | /** |
---|
| 2192 | * Refreshs the grid UI |
---|
| 2193 | * @param {Boolean} headersToo (optional) True to also refresh the headers |
---|
| 2194 | */ |
---|
| 2195 | refresh : function(headersToo){ |
---|
| 2196 | this.fireEvent("beforerefresh", this); |
---|
| 2197 | this.grid.stopEditing(true); |
---|
| 2198 | |
---|
| 2199 | var result = this.renderBody(); |
---|
| 2200 | this.mainBody.update(result).setWidth(this.getTotalWidth()); |
---|
| 2201 | if(headersToo === true){ |
---|
| 2202 | this.updateHeaders(); |
---|
| 2203 | this.updateHeaderSortState(); |
---|
| 2204 | } |
---|
| 2205 | this.processRows(0, true); |
---|
| 2206 | this.layout(); |
---|
| 2207 | this.applyEmptyText(); |
---|
| 2208 | this.fireEvent("refresh", this); |
---|
| 2209 | }, |
---|
| 2210 | |
---|
| 2211 | // private |
---|
| 2212 | applyEmptyText : function(){ |
---|
| 2213 | if(this.emptyText && !this.hasRows()){ |
---|
| 2214 | this.mainBody.update('<div class="x-grid-empty">' + this.emptyText + '</div>'); |
---|
| 2215 | } |
---|
| 2216 | }, |
---|
| 2217 | |
---|
| 2218 | // private |
---|
| 2219 | updateHeaderSortState : function(){ |
---|
| 2220 | var state = this.ds.getSortState(); |
---|
| 2221 | if(!state){ |
---|
| 2222 | return; |
---|
| 2223 | } |
---|
| 2224 | if(!this.sortState || (this.sortState.field != state.field || this.sortState.direction != state.direction)){ |
---|
| 2225 | this.grid.fireEvent('sortchange', this.grid, state); |
---|
| 2226 | } |
---|
| 2227 | this.sortState = state; |
---|
| 2228 | var sortColumn = this.cm.findColumnIndex(state.field); |
---|
| 2229 | if(sortColumn != -1){ |
---|
| 2230 | var sortDir = state.direction; |
---|
| 2231 | this.updateSortIcon(sortColumn, sortDir); |
---|
| 2232 | } |
---|
| 2233 | }, |
---|
| 2234 | |
---|
| 2235 | // private |
---|
| 2236 | destroy : function(){ |
---|
| 2237 | if(this.colMenu){ |
---|
| 2238 | Ext.menu.MenuMgr.unregister(this.colMenu); |
---|
| 2239 | this.colMenu.destroy(); |
---|
| 2240 | delete this.colMenu; |
---|
| 2241 | } |
---|
| 2242 | if(this.hmenu){ |
---|
| 2243 | Ext.menu.MenuMgr.unregister(this.hmenu); |
---|
| 2244 | this.hmenu.destroy(); |
---|
| 2245 | delete this.hmenu; |
---|
| 2246 | } |
---|
| 2247 | if(this.grid.enableColumnMove){ |
---|
| 2248 | var dds = Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id]; |
---|
| 2249 | if(dds){ |
---|
| 2250 | for(var dd in dds){ |
---|
| 2251 | if(!dds[dd].config.isTarget && dds[dd].dragElId){ |
---|
| 2252 | var elid = dds[dd].dragElId; |
---|
| 2253 | dds[dd].unreg(); |
---|
| 2254 | Ext.get(elid).remove(); |
---|
| 2255 | } else if(dds[dd].config.isTarget){ |
---|
| 2256 | dds[dd].proxyTop.remove(); |
---|
| 2257 | dds[dd].proxyBottom.remove(); |
---|
| 2258 | dds[dd].unreg(); |
---|
| 2259 | } |
---|
| 2260 | if(Ext.dd.DDM.locationCache[dd]){ |
---|
| 2261 | delete Ext.dd.DDM.locationCache[dd]; |
---|
| 2262 | } |
---|
| 2263 | } |
---|
| 2264 | delete Ext.dd.DDM.ids['gridHeader' + this.grid.getGridEl().id]; |
---|
| 2265 | } |
---|
| 2266 | } |
---|
| 2267 | |
---|
| 2268 | if(this.dragZone){ |
---|
| 2269 | this.dragZone.unreg(); |
---|
| 2270 | } |
---|
| 2271 | |
---|
| 2272 | Ext.fly(this.innerHd).removeAllListeners(); |
---|
| 2273 | Ext.removeNode(this.innerHd); |
---|
| 2274 | |
---|
| 2275 | Ext.destroy(this.resizeMarker, this.resizeProxy, this.focusEl, this.mainBody, |
---|
| 2276 | this.scroller, this.mainHd, this.mainWrap, this.dragZone, |
---|
| 2277 | this.splitZone, this.columnDrag, this.columnDrop); |
---|
| 2278 | |
---|
| 2279 | this.initData(null, null); |
---|
| 2280 | Ext.EventManager.removeResizeListener(this.onWindowResize, this); |
---|
| 2281 | this.purgeListeners(); |
---|
| 2282 | }, |
---|
| 2283 | |
---|
| 2284 | // private |
---|
| 2285 | onDenyColumnHide : function(){ |
---|
| 2286 | |
---|
| 2287 | }, |
---|
| 2288 | |
---|
| 2289 | // private |
---|
| 2290 | render : function(){ |
---|
| 2291 | if(this.autoFill){ |
---|
| 2292 | var ct = this.grid.ownerCt; |
---|
| 2293 | if (ct && ct.getLayout()){ |
---|
| 2294 | ct.on('afterlayout', function(){ |
---|
| 2295 | this.fitColumns(true, true); |
---|
| 2296 | this.updateHeaders(); |
---|
| 2297 | }, this, {single: true}); |
---|
| 2298 | }else{ |
---|
| 2299 | this.fitColumns(true, true); |
---|
| 2300 | } |
---|
| 2301 | }else if(this.forceFit){ |
---|
| 2302 | this.fitColumns(true, false); |
---|
| 2303 | }else if(this.grid.autoExpandColumn){ |
---|
| 2304 | this.autoExpand(true); |
---|
| 2305 | } |
---|
| 2306 | |
---|
| 2307 | this.renderUI(); |
---|
| 2308 | }, |
---|
| 2309 | |
---|
| 2310 | /* --------------------------------- Model Events and Handlers --------------------------------*/ |
---|
| 2311 | // private |
---|
| 2312 | initData : function(ds, cm){ |
---|
| 2313 | if(this.ds){ |
---|
| 2314 | this.ds.un("load", this.onLoad, this); |
---|
| 2315 | this.ds.un("datachanged", this.onDataChange, this); |
---|
| 2316 | this.ds.un("add", this.onAdd, this); |
---|
| 2317 | this.ds.un("remove", this.onRemove, this); |
---|
| 2318 | this.ds.un("update", this.onUpdate, this); |
---|
| 2319 | this.ds.un("clear", this.onClear, this); |
---|
| 2320 | if(this.ds !== ds && this.ds.autoDestroy){ |
---|
| 2321 | this.ds.destroy(); |
---|
| 2322 | } |
---|
| 2323 | } |
---|
| 2324 | if(ds){ |
---|
| 2325 | ds.on({ |
---|
| 2326 | scope: this, |
---|
| 2327 | load: this.onLoad, |
---|
| 2328 | datachanged: this.onDataChange, |
---|
| 2329 | add: this.onAdd, |
---|
| 2330 | remove: this.onRemove, |
---|
| 2331 | update: this.onUpdate, |
---|
| 2332 | clear: this.onClear |
---|
| 2333 | }); |
---|
| 2334 | } |
---|
| 2335 | this.ds = ds; |
---|
| 2336 | |
---|
| 2337 | if(this.cm){ |
---|
| 2338 | this.cm.un("configchange", this.onColConfigChange, this); |
---|
| 2339 | this.cm.un("widthchange", this.onColWidthChange, this); |
---|
| 2340 | this.cm.un("headerchange", this.onHeaderChange, this); |
---|
| 2341 | this.cm.un("hiddenchange", this.onHiddenChange, this); |
---|
| 2342 | this.cm.un("columnmoved", this.onColumnMove, this); |
---|
| 2343 | } |
---|
| 2344 | if(cm){ |
---|
| 2345 | delete this.lastViewWidth; |
---|
| 2346 | cm.on({ |
---|
| 2347 | scope: this, |
---|
| 2348 | configchange: this.onColConfigChange, |
---|
| 2349 | widthchange: this.onColWidthChange, |
---|
| 2350 | headerchange: this.onHeaderChange, |
---|
| 2351 | hiddenchange: this.onHiddenChange, |
---|
| 2352 | columnmoved: this.onColumnMove |
---|
| 2353 | }); |
---|
| 2354 | } |
---|
| 2355 | this.cm = cm; |
---|
| 2356 | }, |
---|
| 2357 | |
---|
| 2358 | // private |
---|
| 2359 | onDataChange : function(){ |
---|
| 2360 | this.refresh(); |
---|
| 2361 | this.updateHeaderSortState(); |
---|
| 2362 | this.syncFocusEl(0); |
---|
| 2363 | }, |
---|
| 2364 | |
---|
| 2365 | // private |
---|
| 2366 | onClear : function(){ |
---|
| 2367 | this.refresh(); |
---|
| 2368 | this.syncFocusEl(0); |
---|
| 2369 | }, |
---|
| 2370 | |
---|
| 2371 | // private |
---|
| 2372 | onUpdate : function(ds, record){ |
---|
| 2373 | this.refreshRow(record); |
---|
| 2374 | }, |
---|
| 2375 | |
---|
| 2376 | // private |
---|
| 2377 | onAdd : function(ds, records, index){ |
---|
| 2378 | this.insertRows(ds, index, index + (records.length-1)); |
---|
| 2379 | }, |
---|
| 2380 | |
---|
| 2381 | // private |
---|
| 2382 | onRemove : function(ds, record, index, isUpdate){ |
---|
| 2383 | if(isUpdate !== true){ |
---|
| 2384 | this.fireEvent("beforerowremoved", this, index, record); |
---|
| 2385 | } |
---|
| 2386 | this.removeRow(index); |
---|
| 2387 | if(isUpdate !== true){ |
---|
| 2388 | this.processRows(index); |
---|
| 2389 | this.applyEmptyText(); |
---|
| 2390 | this.fireEvent("rowremoved", this, index, record); |
---|
| 2391 | } |
---|
| 2392 | }, |
---|
| 2393 | |
---|
| 2394 | // private |
---|
| 2395 | onLoad : function(){ |
---|
| 2396 | this.scrollToTop(); |
---|
| 2397 | }, |
---|
| 2398 | |
---|
| 2399 | // private |
---|
| 2400 | onColWidthChange : function(cm, col, width){ |
---|
| 2401 | this.updateColumnWidth(col, width); |
---|
| 2402 | }, |
---|
| 2403 | |
---|
| 2404 | // private |
---|
| 2405 | onHeaderChange : function(cm, col, text){ |
---|
| 2406 | this.updateHeaders(); |
---|
| 2407 | }, |
---|
| 2408 | |
---|
| 2409 | // private |
---|
| 2410 | onHiddenChange : function(cm, col, hidden){ |
---|
| 2411 | this.updateColumnHidden(col, hidden); |
---|
| 2412 | }, |
---|
| 2413 | |
---|
| 2414 | // private |
---|
| 2415 | onColumnMove : function(cm, oldIndex, newIndex){ |
---|
| 2416 | this.indexMap = null; |
---|
| 2417 | var s = this.getScrollState(); |
---|
| 2418 | this.refresh(true); |
---|
| 2419 | this.restoreScroll(s); |
---|
| 2420 | this.afterMove(newIndex); |
---|
| 2421 | this.grid.fireEvent('columnmove', oldIndex, newIndex); |
---|
| 2422 | }, |
---|
| 2423 | |
---|
| 2424 | // private |
---|
| 2425 | onColConfigChange : function(){ |
---|
| 2426 | delete this.lastViewWidth; |
---|
| 2427 | this.indexMap = null; |
---|
| 2428 | this.refresh(true); |
---|
| 2429 | }, |
---|
| 2430 | |
---|
| 2431 | /* -------------------- UI Events and Handlers ------------------------------ */ |
---|
| 2432 | // private |
---|
| 2433 | initUI : function(grid){ |
---|
| 2434 | grid.on("headerclick", this.onHeaderClick, this); |
---|
| 2435 | }, |
---|
| 2436 | |
---|
| 2437 | // private |
---|
| 2438 | initEvents : function(){ |
---|
| 2439 | }, |
---|
| 2440 | |
---|
| 2441 | // private |
---|
| 2442 | onHeaderClick : function(g, index){ |
---|
| 2443 | if(this.headersDisabled || !this.cm.isSortable(index)){ |
---|
| 2444 | return; |
---|
| 2445 | } |
---|
| 2446 | g.stopEditing(true); |
---|
| 2447 | g.store.sort(this.cm.getDataIndex(index)); |
---|
| 2448 | }, |
---|
| 2449 | |
---|
| 2450 | // private |
---|
| 2451 | onRowOver : function(e, t){ |
---|
| 2452 | var row; |
---|
| 2453 | if((row = this.findRowIndex(t)) !== false){ |
---|
| 2454 | this.addRowClass(row, "x-grid3-row-over"); |
---|
| 2455 | } |
---|
| 2456 | }, |
---|
| 2457 | |
---|
| 2458 | // private |
---|
| 2459 | onRowOut : function(e, t){ |
---|
| 2460 | var row; |
---|
| 2461 | if((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)){ |
---|
| 2462 | this.removeRowClass(row, "x-grid3-row-over"); |
---|
| 2463 | } |
---|
| 2464 | }, |
---|
| 2465 | |
---|
| 2466 | // private |
---|
| 2467 | handleWheel : function(e){ |
---|
| 2468 | e.stopPropagation(); |
---|
| 2469 | }, |
---|
| 2470 | |
---|
| 2471 | // private |
---|
| 2472 | onRowSelect : function(row){ |
---|
| 2473 | this.addRowClass(row, this.selectedRowClass); |
---|
| 2474 | }, |
---|
| 2475 | |
---|
| 2476 | // private |
---|
| 2477 | onRowDeselect : function(row){ |
---|
| 2478 | this.removeRowClass(row, this.selectedRowClass); |
---|
| 2479 | }, |
---|
| 2480 | |
---|
| 2481 | // private |
---|
| 2482 | onCellSelect : function(row, col){ |
---|
| 2483 | var cell = this.getCell(row, col); |
---|
| 2484 | if(cell){ |
---|
| 2485 | this.fly(cell).addClass("x-grid3-cell-selected"); |
---|
| 2486 | } |
---|
| 2487 | }, |
---|
| 2488 | |
---|
| 2489 | // private |
---|
| 2490 | onCellDeselect : function(row, col){ |
---|
| 2491 | var cell = this.getCell(row, col); |
---|
| 2492 | if(cell){ |
---|
| 2493 | this.fly(cell).removeClass("x-grid3-cell-selected"); |
---|
| 2494 | } |
---|
| 2495 | }, |
---|
| 2496 | |
---|
| 2497 | // private |
---|
| 2498 | onColumnSplitterMoved : function(i, w){ |
---|
| 2499 | this.userResized = true; |
---|
| 2500 | var cm = this.grid.colModel; |
---|
| 2501 | cm.setColumnWidth(i, w, true); |
---|
| 2502 | |
---|
| 2503 | if(this.forceFit){ |
---|
| 2504 | this.fitColumns(true, false, i); |
---|
| 2505 | this.updateAllColumnWidths(); |
---|
| 2506 | }else{ |
---|
| 2507 | this.updateColumnWidth(i, w); |
---|
| 2508 | this.syncHeaderScroll(); |
---|
| 2509 | } |
---|
| 2510 | |
---|
| 2511 | this.grid.fireEvent("columnresize", i, w); |
---|
| 2512 | }, |
---|
| 2513 | |
---|
| 2514 | // private |
---|
| 2515 | handleHdMenuClick : function(item){ |
---|
| 2516 | var index = this.hdCtxIndex; |
---|
| 2517 | var cm = this.cm, ds = this.ds; |
---|
| 2518 | switch(item.itemId){ |
---|
| 2519 | case "asc": |
---|
| 2520 | ds.sort(cm.getDataIndex(index), "ASC"); |
---|
| 2521 | break; |
---|
| 2522 | case "desc": |
---|
| 2523 | ds.sort(cm.getDataIndex(index), "DESC"); |
---|
| 2524 | break; |
---|
| 2525 | default: |
---|
| 2526 | index = cm.getIndexById(item.itemId.substr(4)); |
---|
| 2527 | if(index != -1){ |
---|
| 2528 | if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){ |
---|
| 2529 | this.onDenyColumnHide(); |
---|
| 2530 | return false; |
---|
| 2531 | } |
---|
| 2532 | cm.setHidden(index, item.checked); |
---|
| 2533 | } |
---|
| 2534 | } |
---|
| 2535 | return true; |
---|
| 2536 | }, |
---|
| 2537 | |
---|
| 2538 | // private |
---|
| 2539 | isHideableColumn : function(c){ |
---|
| 2540 | return !c.hidden && !c.fixed; |
---|
| 2541 | }, |
---|
| 2542 | |
---|
| 2543 | // private |
---|
| 2544 | beforeColMenuShow : function(){ |
---|
| 2545 | var cm = this.cm, colCount = cm.getColumnCount(); |
---|
| 2546 | this.colMenu.removeAll(); |
---|
| 2547 | for(var i = 0; i < colCount; i++){ |
---|
| 2548 | if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){ |
---|
| 2549 | this.colMenu.add(new Ext.menu.CheckItem({ |
---|
| 2550 | itemId: "col-"+cm.getColumnId(i), |
---|
| 2551 | text: cm.getColumnHeader(i), |
---|
| 2552 | checked: !cm.isHidden(i), |
---|
| 2553 | hideOnClick:false, |
---|
| 2554 | disabled: cm.config[i].hideable === false |
---|
| 2555 | })); |
---|
| 2556 | } |
---|
| 2557 | } |
---|
| 2558 | }, |
---|
| 2559 | |
---|
| 2560 | // private |
---|
| 2561 | handleHdDown : function(e, t){ |
---|
| 2562 | if(Ext.fly(t).hasClass('x-grid3-hd-btn')){ |
---|
| 2563 | e.stopEvent(); |
---|
| 2564 | var hd = this.findHeaderCell(t); |
---|
| 2565 | Ext.fly(hd).addClass('x-grid3-hd-menu-open'); |
---|
| 2566 | var index = this.getCellIndex(hd); |
---|
| 2567 | this.hdCtxIndex = index; |
---|
| 2568 | var ms = this.hmenu.items, cm = this.cm; |
---|
| 2569 | ms.get("asc").setDisabled(!cm.isSortable(index)); |
---|
| 2570 | ms.get("desc").setDisabled(!cm.isSortable(index)); |
---|
| 2571 | this.hmenu.on("hide", function(){ |
---|
| 2572 | Ext.fly(hd).removeClass('x-grid3-hd-menu-open'); |
---|
| 2573 | }, this, {single:true}); |
---|
| 2574 | this.hmenu.show(t, "tl-bl?"); |
---|
| 2575 | } |
---|
| 2576 | }, |
---|
| 2577 | |
---|
| 2578 | // private |
---|
| 2579 | handleHdOver : function(e, t){ |
---|
| 2580 | var hd = this.findHeaderCell(t); |
---|
| 2581 | if(hd && !this.headersDisabled){ |
---|
| 2582 | this.activeHd = hd; |
---|
| 2583 | this.activeHdIndex = this.getCellIndex(hd); |
---|
| 2584 | var fly = this.fly(hd); |
---|
| 2585 | this.activeHdRegion = fly.getRegion(); |
---|
| 2586 | if(!this.cm.isMenuDisabled(this.activeHdIndex)){ |
---|
| 2587 | fly.addClass("x-grid3-hd-over"); |
---|
| 2588 | this.activeHdBtn = fly.child('.x-grid3-hd-btn'); |
---|
| 2589 | if(this.activeHdBtn){ |
---|
| 2590 | this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px'; |
---|
| 2591 | } |
---|
| 2592 | } |
---|
| 2593 | } |
---|
| 2594 | }, |
---|
| 2595 | |
---|
| 2596 | // private |
---|
| 2597 | handleHdMove : function(e, t){ |
---|
| 2598 | if(this.activeHd && !this.headersDisabled){ |
---|
| 2599 | var hw = this.splitHandleWidth || 5; |
---|
| 2600 | var r = this.activeHdRegion; |
---|
| 2601 | var x = e.getPageX(); |
---|
| 2602 | var ss = this.activeHd.style; |
---|
| 2603 | if(x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){ |
---|
| 2604 | ss.cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'e-resize' : 'col-resize'; // col-resize not always supported |
---|
| 2605 | }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){ |
---|
| 2606 | ss.cursor = Ext.isAir ? 'move' : Ext.isWebKit ? 'w-resize' : 'col-resize'; |
---|
| 2607 | }else{ |
---|
| 2608 | ss.cursor = ''; |
---|
| 2609 | } |
---|
| 2610 | } |
---|
| 2611 | }, |
---|
| 2612 | |
---|
| 2613 | // private |
---|
| 2614 | handleHdOut : function(e, t){ |
---|
| 2615 | var hd = this.findHeaderCell(t); |
---|
| 2616 | if(hd && (!Ext.isIE || !e.within(hd, true))){ |
---|
| 2617 | this.activeHd = null; |
---|
| 2618 | this.fly(hd).removeClass("x-grid3-hd-over"); |
---|
| 2619 | hd.style.cursor = ''; |
---|
| 2620 | } |
---|
| 2621 | }, |
---|
| 2622 | |
---|
| 2623 | // private |
---|
| 2624 | hasRows : function(){ |
---|
| 2625 | var fc = this.mainBody.dom.firstChild; |
---|
| 2626 | return fc && fc.nodeType == 1 && fc.className != 'x-grid-empty'; |
---|
| 2627 | }, |
---|
| 2628 | |
---|
| 2629 | // back compat |
---|
| 2630 | bind : function(d, c){ |
---|
| 2631 | this.initData(d, c); |
---|
| 2632 | } |
---|
| 2633 | }); |
---|
| 2634 | |
---|
| 2635 | |
---|
| 2636 | // private |
---|
| 2637 | // This is a support class used internally by the Grid components |
---|
| 2638 | Ext.grid.GridView.SplitDragZone = function(grid, hd){ |
---|
| 2639 | this.grid = grid; |
---|
| 2640 | this.view = grid.getView(); |
---|
| 2641 | this.marker = this.view.resizeMarker; |
---|
| 2642 | this.proxy = this.view.resizeProxy; |
---|
| 2643 | Ext.grid.GridView.SplitDragZone.superclass.constructor.call(this, hd, |
---|
| 2644 | "gridSplitters" + this.grid.getGridEl().id, { |
---|
| 2645 | dragElId : Ext.id(this.proxy.dom), resizeFrame:false |
---|
| 2646 | }); |
---|
| 2647 | this.scroll = false; |
---|
| 2648 | this.hw = this.view.splitHandleWidth || 5; |
---|
| 2649 | }; |
---|
| 2650 | Ext.extend(Ext.grid.GridView.SplitDragZone, Ext.dd.DDProxy, { |
---|
| 2651 | |
---|
| 2652 | b4StartDrag : function(x, y){ |
---|
| 2653 | this.view.headersDisabled = true; |
---|
| 2654 | var h = this.view.mainWrap.getHeight(); |
---|
| 2655 | this.marker.setHeight(h); |
---|
| 2656 | this.marker.show(); |
---|
| 2657 | this.marker.alignTo(this.view.getHeaderCell(this.cellIndex), 'tl-tl', [-2, 0]); |
---|
| 2658 | this.proxy.setHeight(h); |
---|
| 2659 | var w = this.cm.getColumnWidth(this.cellIndex); |
---|
| 2660 | var minw = Math.max(w-this.grid.minColumnWidth, 0); |
---|
| 2661 | this.resetConstraints(); |
---|
| 2662 | this.setXConstraint(minw, 1000); |
---|
| 2663 | this.setYConstraint(0, 0); |
---|
| 2664 | this.minX = x - minw; |
---|
| 2665 | this.maxX = x + 1000; |
---|
| 2666 | this.startPos = x; |
---|
| 2667 | Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y); |
---|
| 2668 | }, |
---|
| 2669 | |
---|
| 2670 | |
---|
| 2671 | handleMouseDown : function(e){ |
---|
| 2672 | var t = this.view.findHeaderCell(e.getTarget()); |
---|
| 2673 | if(t){ |
---|
| 2674 | var xy = this.view.fly(t).getXY(), x = xy[0], y = xy[1]; |
---|
| 2675 | var exy = e.getXY(), ex = exy[0]; |
---|
| 2676 | var w = t.offsetWidth, adjust = false; |
---|
| 2677 | if((ex - x) <= this.hw){ |
---|
| 2678 | adjust = -1; |
---|
| 2679 | }else if((x+w) - ex <= this.hw){ |
---|
| 2680 | adjust = 0; |
---|
| 2681 | } |
---|
| 2682 | if(adjust !== false){ |
---|
| 2683 | this.cm = this.grid.colModel; |
---|
| 2684 | var ci = this.view.getCellIndex(t); |
---|
| 2685 | if(adjust == -1){ |
---|
| 2686 | if (ci + adjust < 0) { |
---|
| 2687 | return; |
---|
| 2688 | } |
---|
| 2689 | while(this.cm.isHidden(ci+adjust)){ |
---|
| 2690 | --adjust; |
---|
| 2691 | if(ci+adjust < 0){ |
---|
| 2692 | return; |
---|
| 2693 | } |
---|
| 2694 | } |
---|
| 2695 | } |
---|
| 2696 | this.cellIndex = ci+adjust; |
---|
| 2697 | this.split = t.dom; |
---|
| 2698 | if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){ |
---|
| 2699 | Ext.grid.GridView.SplitDragZone.superclass.handleMouseDown.apply(this, arguments); |
---|
| 2700 | } |
---|
| 2701 | }else if(this.view.columnDrag){ |
---|
| 2702 | this.view.columnDrag.callHandleMouseDown(e); |
---|
| 2703 | } |
---|
| 2704 | } |
---|
| 2705 | }, |
---|
| 2706 | |
---|
| 2707 | endDrag : function(e){ |
---|
| 2708 | this.marker.hide(); |
---|
| 2709 | var v = this.view; |
---|
| 2710 | var endX = Math.max(this.minX, e.getPageX()); |
---|
| 2711 | var diff = endX - this.startPos; |
---|
| 2712 | v.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff); |
---|
| 2713 | setTimeout(function(){ |
---|
| 2714 | v.headersDisabled = false; |
---|
| 2715 | }, 50); |
---|
| 2716 | }, |
---|
| 2717 | |
---|
| 2718 | autoOffset : function(){ |
---|
| 2719 | this.setDelta(0,0); |
---|
| 2720 | } |
---|
| 2721 | }); |
---|
| 2722 | // private |
---|
| 2723 | // This is a support class used internally by the Grid components |
---|
| 2724 | Ext.grid.HeaderDragZone = function(grid, hd, hd2){ |
---|
| 2725 | this.grid = grid; |
---|
| 2726 | this.view = grid.getView(); |
---|
| 2727 | this.ddGroup = "gridHeader" + this.grid.getGridEl().id; |
---|
| 2728 | Ext.grid.HeaderDragZone.superclass.constructor.call(this, hd); |
---|
| 2729 | if(hd2){ |
---|
| 2730 | this.setHandleElId(Ext.id(hd)); |
---|
| 2731 | this.setOuterHandleElId(Ext.id(hd2)); |
---|
| 2732 | } |
---|
| 2733 | this.scroll = false; |
---|
| 2734 | }; |
---|
| 2735 | Ext.extend(Ext.grid.HeaderDragZone, Ext.dd.DragZone, { |
---|
| 2736 | maxDragWidth: 120, |
---|
| 2737 | getDragData : function(e){ |
---|
| 2738 | var t = Ext.lib.Event.getTarget(e); |
---|
| 2739 | var h = this.view.findHeaderCell(t); |
---|
| 2740 | if(h){ |
---|
| 2741 | return {ddel: h.firstChild, header:h}; |
---|
| 2742 | } |
---|
| 2743 | return false; |
---|
| 2744 | }, |
---|
| 2745 | |
---|
| 2746 | onInitDrag : function(e){ |
---|
| 2747 | this.view.headersDisabled = true; |
---|
| 2748 | var clone = this.dragData.ddel.cloneNode(true); |
---|
| 2749 | clone.id = Ext.id(); |
---|
| 2750 | clone.style.width = Math.min(this.dragData.header.offsetWidth,this.maxDragWidth) + "px"; |
---|
| 2751 | this.proxy.update(clone); |
---|
| 2752 | return true; |
---|
| 2753 | }, |
---|
| 2754 | |
---|
| 2755 | afterValidDrop : function(){ |
---|
| 2756 | var v = this.view; |
---|
| 2757 | setTimeout(function(){ |
---|
| 2758 | v.headersDisabled = false; |
---|
| 2759 | }, 50); |
---|
| 2760 | }, |
---|
| 2761 | |
---|
| 2762 | afterInvalidDrop : function(){ |
---|
| 2763 | var v = this.view; |
---|
| 2764 | setTimeout(function(){ |
---|
| 2765 | v.headersDisabled = false; |
---|
| 2766 | }, 50); |
---|
| 2767 | } |
---|
| 2768 | }); |
---|
| 2769 | |
---|
| 2770 | // private |
---|
| 2771 | // This is a support class used internally by the Grid components |
---|
| 2772 | Ext.grid.HeaderDropZone = function(grid, hd, hd2){ |
---|
| 2773 | this.grid = grid; |
---|
| 2774 | this.view = grid.getView(); |
---|
| 2775 | // split the proxies so they don't interfere with mouse events |
---|
| 2776 | this.proxyTop = Ext.DomHelper.append(document.body, { |
---|
| 2777 | cls:"col-move-top", html:" " |
---|
| 2778 | }, true); |
---|
| 2779 | this.proxyBottom = Ext.DomHelper.append(document.body, { |
---|
| 2780 | cls:"col-move-bottom", html:" " |
---|
| 2781 | }, true); |
---|
| 2782 | this.proxyTop.hide = this.proxyBottom.hide = function(){ |
---|
| 2783 | this.setLeftTop(-100,-100); |
---|
| 2784 | this.setStyle("visibility", "hidden"); |
---|
| 2785 | }; |
---|
| 2786 | this.ddGroup = "gridHeader" + this.grid.getGridEl().id; |
---|
| 2787 | // temporarily disabled |
---|
| 2788 | //Ext.dd.ScrollManager.register(this.view.scroller.dom); |
---|
| 2789 | Ext.grid.HeaderDropZone.superclass.constructor.call(this, grid.getGridEl().dom); |
---|
| 2790 | }; |
---|
| 2791 | Ext.extend(Ext.grid.HeaderDropZone, Ext.dd.DropZone, { |
---|
| 2792 | proxyOffsets : [-4, -9], |
---|
| 2793 | fly: Ext.Element.fly, |
---|
| 2794 | |
---|
| 2795 | getTargetFromEvent : function(e){ |
---|
| 2796 | var t = Ext.lib.Event.getTarget(e); |
---|
| 2797 | var cindex = this.view.findCellIndex(t); |
---|
| 2798 | if(cindex !== false){ |
---|
| 2799 | return this.view.getHeaderCell(cindex); |
---|
| 2800 | } |
---|
| 2801 | }, |
---|
| 2802 | |
---|
| 2803 | nextVisible : function(h){ |
---|
| 2804 | var v = this.view, cm = this.grid.colModel; |
---|
| 2805 | h = h.nextSibling; |
---|
| 2806 | while(h){ |
---|
| 2807 | if(!cm.isHidden(v.getCellIndex(h))){ |
---|
| 2808 | return h; |
---|
| 2809 | } |
---|
| 2810 | h = h.nextSibling; |
---|
| 2811 | } |
---|
| 2812 | return null; |
---|
| 2813 | }, |
---|
| 2814 | |
---|
| 2815 | prevVisible : function(h){ |
---|
| 2816 | var v = this.view, cm = this.grid.colModel; |
---|
| 2817 | h = h.prevSibling; |
---|
| 2818 | while(h){ |
---|
| 2819 | if(!cm.isHidden(v.getCellIndex(h))){ |
---|
| 2820 | return h; |
---|
| 2821 | } |
---|
| 2822 | h = h.prevSibling; |
---|
| 2823 | } |
---|
| 2824 | return null; |
---|
| 2825 | }, |
---|
| 2826 | |
---|
| 2827 | positionIndicator : function(h, n, e){ |
---|
| 2828 | var x = Ext.lib.Event.getPageX(e); |
---|
| 2829 | var r = Ext.lib.Dom.getRegion(n.firstChild); |
---|
| 2830 | var px, pt, py = r.top + this.proxyOffsets[1]; |
---|
| 2831 | if((r.right - x) <= (r.right-r.left)/2){ |
---|
| 2832 | px = r.right+this.view.borderWidth; |
---|
| 2833 | pt = "after"; |
---|
| 2834 | }else{ |
---|
| 2835 | px = r.left; |
---|
| 2836 | pt = "before"; |
---|
| 2837 | } |
---|
| 2838 | |
---|
| 2839 | if(this.grid.colModel.isFixed(this.view.getCellIndex(n))){ |
---|
| 2840 | return false; |
---|
| 2841 | } |
---|
| 2842 | |
---|
| 2843 | px += this.proxyOffsets[0]; |
---|
| 2844 | this.proxyTop.setLeftTop(px, py); |
---|
| 2845 | this.proxyTop.show(); |
---|
| 2846 | if(!this.bottomOffset){ |
---|
| 2847 | this.bottomOffset = this.view.mainHd.getHeight(); |
---|
| 2848 | } |
---|
| 2849 | this.proxyBottom.setLeftTop(px, py+this.proxyTop.dom.offsetHeight+this.bottomOffset); |
---|
| 2850 | this.proxyBottom.show(); |
---|
| 2851 | return pt; |
---|
| 2852 | }, |
---|
| 2853 | |
---|
| 2854 | onNodeEnter : function(n, dd, e, data){ |
---|
| 2855 | if(data.header != n){ |
---|
| 2856 | this.positionIndicator(data.header, n, e); |
---|
| 2857 | } |
---|
| 2858 | }, |
---|
| 2859 | |
---|
| 2860 | onNodeOver : function(n, dd, e, data){ |
---|
| 2861 | var result = false; |
---|
| 2862 | if(data.header != n){ |
---|
| 2863 | result = this.positionIndicator(data.header, n, e); |
---|
| 2864 | } |
---|
| 2865 | if(!result){ |
---|
| 2866 | this.proxyTop.hide(); |
---|
| 2867 | this.proxyBottom.hide(); |
---|
| 2868 | } |
---|
| 2869 | return result ? this.dropAllowed : this.dropNotAllowed; |
---|
| 2870 | }, |
---|
| 2871 | |
---|
| 2872 | onNodeOut : function(n, dd, e, data){ |
---|
| 2873 | this.proxyTop.hide(); |
---|
| 2874 | this.proxyBottom.hide(); |
---|
| 2875 | }, |
---|
| 2876 | |
---|
| 2877 | onNodeDrop : function(n, dd, e, data){ |
---|
| 2878 | var h = data.header; |
---|
| 2879 | if(h != n){ |
---|
| 2880 | var cm = this.grid.colModel; |
---|
| 2881 | var x = Ext.lib.Event.getPageX(e); |
---|
| 2882 | var r = Ext.lib.Dom.getRegion(n.firstChild); |
---|
| 2883 | var pt = (r.right - x) <= ((r.right-r.left)/2) ? "after" : "before"; |
---|
| 2884 | var oldIndex = this.view.getCellIndex(h); |
---|
| 2885 | var newIndex = this.view.getCellIndex(n); |
---|
| 2886 | if(pt == "after"){ |
---|
| 2887 | newIndex++; |
---|
| 2888 | } |
---|
| 2889 | if(oldIndex < newIndex){ |
---|
| 2890 | newIndex--; |
---|
| 2891 | } |
---|
| 2892 | cm.moveColumn(oldIndex, newIndex); |
---|
| 2893 | this.grid.fireEvent("columnmove", oldIndex, newIndex); |
---|
| 2894 | return true; |
---|
| 2895 | } |
---|
| 2896 | return false; |
---|
| 2897 | } |
---|
| 2898 | }); |
---|
| 2899 | |
---|
| 2900 | |
---|
| 2901 | Ext.grid.GridView.ColumnDragZone = function(grid, hd){ |
---|
| 2902 | Ext.grid.GridView.ColumnDragZone.superclass.constructor.call(this, grid, hd, null); |
---|
| 2903 | this.proxy.el.addClass('x-grid3-col-dd'); |
---|
| 2904 | }; |
---|
| 2905 | |
---|
| 2906 | Ext.extend(Ext.grid.GridView.ColumnDragZone, Ext.grid.HeaderDragZone, { |
---|
| 2907 | handleMouseDown : function(e){ |
---|
| 2908 | |
---|
| 2909 | }, |
---|
| 2910 | |
---|
| 2911 | callHandleMouseDown : function(e){ |
---|
| 2912 | Ext.grid.GridView.ColumnDragZone.superclass.handleMouseDown.call(this, e); |
---|
| 2913 | } |
---|
| 2914 | });// private |
---|
| 2915 | // This is a support class used internally by the Grid components |
---|
| 2916 | Ext.grid.SplitDragZone = function(grid, hd, hd2){ |
---|
| 2917 | this.grid = grid; |
---|
| 2918 | this.view = grid.getView(); |
---|
| 2919 | this.proxy = this.view.resizeProxy; |
---|
| 2920 | Ext.grid.SplitDragZone.superclass.constructor.call(this, hd, |
---|
| 2921 | "gridSplitters" + this.grid.getGridEl().id, { |
---|
| 2922 | dragElId : Ext.id(this.proxy.dom), resizeFrame:false |
---|
| 2923 | }); |
---|
| 2924 | this.setHandleElId(Ext.id(hd)); |
---|
| 2925 | this.setOuterHandleElId(Ext.id(hd2)); |
---|
| 2926 | this.scroll = false; |
---|
| 2927 | }; |
---|
| 2928 | Ext.extend(Ext.grid.SplitDragZone, Ext.dd.DDProxy, { |
---|
| 2929 | fly: Ext.Element.fly, |
---|
| 2930 | |
---|
| 2931 | b4StartDrag : function(x, y){ |
---|
| 2932 | this.view.headersDisabled = true; |
---|
| 2933 | this.proxy.setHeight(this.view.mainWrap.getHeight()); |
---|
| 2934 | var w = this.cm.getColumnWidth(this.cellIndex); |
---|
| 2935 | var minw = Math.max(w-this.grid.minColumnWidth, 0); |
---|
| 2936 | this.resetConstraints(); |
---|
| 2937 | this.setXConstraint(minw, 1000); |
---|
| 2938 | this.setYConstraint(0, 0); |
---|
| 2939 | this.minX = x - minw; |
---|
| 2940 | this.maxX = x + 1000; |
---|
| 2941 | this.startPos = x; |
---|
| 2942 | Ext.dd.DDProxy.prototype.b4StartDrag.call(this, x, y); |
---|
| 2943 | }, |
---|
| 2944 | |
---|
| 2945 | |
---|
| 2946 | handleMouseDown : function(e){ |
---|
| 2947 | var ev = Ext.EventObject.setEvent(e); |
---|
| 2948 | var t = this.fly(ev.getTarget()); |
---|
| 2949 | if(t.hasClass("x-grid-split")){ |
---|
| 2950 | this.cellIndex = this.view.getCellIndex(t.dom); |
---|
| 2951 | this.split = t.dom; |
---|
| 2952 | this.cm = this.grid.colModel; |
---|
| 2953 | if(this.cm.isResizable(this.cellIndex) && !this.cm.isFixed(this.cellIndex)){ |
---|
| 2954 | Ext.grid.SplitDragZone.superclass.handleMouseDown.apply(this, arguments); |
---|
| 2955 | } |
---|
| 2956 | } |
---|
| 2957 | }, |
---|
| 2958 | |
---|
| 2959 | endDrag : function(e){ |
---|
| 2960 | this.view.headersDisabled = false; |
---|
| 2961 | var endX = Math.max(this.minX, Ext.lib.Event.getPageX(e)); |
---|
| 2962 | var diff = endX - this.startPos; |
---|
| 2963 | this.view.onColumnSplitterMoved(this.cellIndex, this.cm.getColumnWidth(this.cellIndex)+diff); |
---|
| 2964 | }, |
---|
| 2965 | |
---|
| 2966 | autoOffset : function(){ |
---|
| 2967 | this.setDelta(0,0); |
---|
| 2968 | } |
---|
| 2969 | });/** |
---|
| 2970 | * @class Ext.grid.GridDragZone |
---|
| 2971 | * @extends Ext.dd.DragZone |
---|
| 2972 | * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations of two of the |
---|
| 2973 | * template methods of DragZone to enable dragging of the selected rows of a GridPanel.</p> |
---|
| 2974 | * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's template method implementations of |
---|
| 2975 | * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
| 2976 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop}</p> are able |
---|
| 2977 | * to process the {@link #getDragData data} which is provided. |
---|
| 2978 | */ |
---|
| 2979 | Ext.grid.GridDragZone = function(grid, config){ |
---|
| 2980 | this.view = grid.getView(); |
---|
| 2981 | Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config); |
---|
| 2982 | this.scroll = false; |
---|
| 2983 | this.grid = grid; |
---|
| 2984 | this.ddel = document.createElement('div'); |
---|
| 2985 | this.ddel.className = 'x-grid-dd-wrap'; |
---|
| 2986 | }; |
---|
| 2987 | |
---|
| 2988 | Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, { |
---|
| 2989 | ddGroup : "GridDD", |
---|
| 2990 | |
---|
| 2991 | /** |
---|
| 2992 | * <p>The provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.</p> |
---|
| 2993 | * <p>This data is available for processing in the {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver}, |
---|
| 2994 | * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} methods of a cooperating {@link Ext.dd.DropZone DropZone}.</p> |
---|
| 2995 | * <p>The data object contains the following properties:<ul> |
---|
| 2996 | * <li><b>grid</b> : Ext.Grid.GridPanel<div class="sub-desc">The GridPanel from which the data is being dragged.</div></li> |
---|
| 2997 | * <li><b>ddel</b> : htmlElement<div class="sub-desc">An htmlElement which provides the "picture" of the data being dragged.</div></li> |
---|
| 2998 | * <li><b>rowIndex</b> : Number<div class="sub-desc">The index of the row which receieved the mousedown gesture which triggered the drag.</div></li> |
---|
| 2999 | * <li><b>selections</b> : Array<div class="sub-desc">An Array of the selected Records which are being dragged from the GridPanel.</div></li> |
---|
| 3000 | * </ul></p> |
---|
| 3001 | */ |
---|
| 3002 | getDragData : function(e){ |
---|
| 3003 | var t = Ext.lib.Event.getTarget(e); |
---|
| 3004 | var rowIndex = this.view.findRowIndex(t); |
---|
| 3005 | if(rowIndex !== false){ |
---|
| 3006 | var sm = this.grid.selModel; |
---|
| 3007 | if(!sm.isSelected(rowIndex) || e.hasModifier()){ |
---|
| 3008 | sm.handleMouseDown(this.grid, rowIndex, e); |
---|
| 3009 | } |
---|
| 3010 | return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()}; |
---|
| 3011 | } |
---|
| 3012 | return false; |
---|
| 3013 | }, |
---|
| 3014 | |
---|
| 3015 | /** |
---|
| 3016 | * <p>The provided implementation of the onInitDrag method. Sets the <tt>innerHTML</tt> of the drag proxy which provides the "picture" |
---|
| 3017 | * of the data being dragged.</p> |
---|
| 3018 | * <p>The <tt>innerHTML</tt> data is found by calling the owning GridPanel's {@link Ext.grid.GridPanel#getDragDropText getDragDropText}.</p> |
---|
| 3019 | */ |
---|
| 3020 | onInitDrag : function(e){ |
---|
| 3021 | var data = this.dragData; |
---|
| 3022 | this.ddel.innerHTML = this.grid.getDragDropText(); |
---|
| 3023 | this.proxy.update(this.ddel); |
---|
| 3024 | // fire start drag? |
---|
| 3025 | }, |
---|
| 3026 | |
---|
| 3027 | /** |
---|
| 3028 | * An empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight |
---|
| 3029 | * the selected rows to show that they have not been dragged. |
---|
| 3030 | */ |
---|
| 3031 | afterRepair : function(){ |
---|
| 3032 | this.dragging = false; |
---|
| 3033 | }, |
---|
| 3034 | |
---|
| 3035 | /** |
---|
| 3036 | * <p>An empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.</p> |
---|
| 3037 | * <p>Called before a repair of an invalid drop to get the XY to animate to.</p> |
---|
| 3038 | * @param {EventObject} e The mouse up event |
---|
| 3039 | * @return {Array} The xy location (e.g. [100, 200]) |
---|
| 3040 | */ |
---|
| 3041 | getRepairXY : function(e, data){ |
---|
| 3042 | return false; |
---|
| 3043 | }, |
---|
| 3044 | |
---|
| 3045 | onEndDrag : function(data, e){ |
---|
| 3046 | // fire end drag? |
---|
| 3047 | }, |
---|
| 3048 | |
---|
| 3049 | onValidDrop : function(dd, e, id){ |
---|
| 3050 | // fire drag drop? |
---|
| 3051 | this.hideProxy(); |
---|
| 3052 | }, |
---|
| 3053 | |
---|
| 3054 | beforeInvalidDrop : function(e, id){ |
---|
| 3055 | |
---|
| 3056 | } |
---|
| 3057 | }); |
---|
| 3058 | /** |
---|
| 3059 | * @class Ext.grid.ColumnModel |
---|
| 3060 | * @extends Ext.util.Observable |
---|
| 3061 | * <p>After the data has been read into the client side cache (<b>{@link Ext.data.Store Store}</b>), |
---|
| 3062 | * the ColumnModel is used to configure how and what parts of that data will be displayed in the |
---|
| 3063 | * vertical slices (columns) of the grid. The Ext.grid.ColumnModel Class is the default implementation |
---|
| 3064 | * of a ColumnModel used by implentations of {@link Ext.grid.GridPanel GridPanel}.</p> |
---|
| 3065 | * <p>Data is mapped into the store's records and then indexed into the ColumnModel using the |
---|
| 3066 | * <tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt>:</p> |
---|
| 3067 | * <pre><code> |
---|
| 3068 | {data source} == mapping ==> {data store} == <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b> ==> {ColumnModel} |
---|
| 3069 | * </code></pre> |
---|
| 3070 | * <p>Each {@link Ext.grid.Column Column} in the grid's ColumnModel is configured with a |
---|
| 3071 | * <tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt> to specify how the data within |
---|
| 3072 | * each record in the store is indexed into the ColumnModel.</p> |
---|
| 3073 | * <p>There are two ways to initialize the ColumnModel class:</p> |
---|
| 3074 | * <p><u>Initialization Method 1: an Array</u></p> |
---|
| 3075 | <pre><code> |
---|
| 3076 | var colModel = new Ext.grid.ColumnModel([ |
---|
| 3077 | { header: "Ticker", width: 60, sortable: true}, |
---|
| 3078 | { header: "Company Name", width: 150, sortable: true, id: 'company'}, |
---|
| 3079 | { header: "Market Cap.", width: 100, sortable: true}, |
---|
| 3080 | { header: "$ Sales", width: 100, sortable: true, renderer: money}, |
---|
| 3081 | { header: "Employees", width: 100, sortable: true, resizable: false} |
---|
| 3082 | ]); |
---|
| 3083 | </code></pre> |
---|
| 3084 | * <p>The ColumnModel may be initialized with an Array of {@link Ext.grid.Column} column configuration |
---|
| 3085 | * objects to define the initial layout / display of the columns in the Grid. The order of each |
---|
| 3086 | * {@link Ext.grid.Column} column configuration object within the specified Array defines the initial |
---|
| 3087 | * order of the column display. A Column's display may be initially hidden using the |
---|
| 3088 | * <tt>{@link Ext.grid.Column#hidden hidden}</tt></b> config property (and then shown using the column |
---|
| 3089 | * header menu). Field's that are not included in the ColumnModel will not be displayable at all.</p> |
---|
| 3090 | * <p>How each column in the grid correlates (maps) to the {@link Ext.data.Record} field in the |
---|
| 3091 | * {@link Ext.data.Store Store} the column draws its data from is configured through the |
---|
| 3092 | * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b>. If the |
---|
| 3093 | * <b><tt>{@link Ext.grid.Column#dataIndex dataIndex}</tt></b> is not explicitly defined (as shown in the |
---|
| 3094 | * example above) it will use the column configuration's index in the Array as the index.</p> |
---|
| 3095 | * <p>See <b><tt>{@link Ext.grid.Column}</tt></b> for additional configuration options for each column.</p> |
---|
| 3096 | * <p><u>Initialization Method 2: an Object</u></p> |
---|
| 3097 | * <p>In order to use configuration options from <tt>Ext.grid.ColumnModel</tt>, an Object may be used to |
---|
| 3098 | * initialize the ColumnModel. The column configuration Array will be specified in the <tt><b>{@link #columns}</b></tt> |
---|
| 3099 | * config property. The <tt><b>{@link #defaults}</b></tt> config property can be used to apply defaults |
---|
| 3100 | * for all columns, e.g.:</p><pre><code> |
---|
| 3101 | var colModel = new Ext.grid.ColumnModel({ |
---|
| 3102 | columns: [ |
---|
| 3103 | { header: "Ticker", width: 60, menuDisabled: false}, |
---|
| 3104 | { header: "Company Name", width: 150, id: 'company'}, |
---|
| 3105 | { header: "Market Cap."}, |
---|
| 3106 | { header: "$ Sales", renderer: money}, |
---|
| 3107 | { header: "Employees", resizable: false} |
---|
| 3108 | ], |
---|
| 3109 | defaults: { |
---|
| 3110 | sortable: true, |
---|
| 3111 | menuDisabled: true, |
---|
| 3112 | width: 100 |
---|
| 3113 | }, |
---|
| 3114 | listeners: { |
---|
| 3115 | {@link #hiddenchange}: function(cm, colIndex, hidden) { |
---|
| 3116 | saveConfig(colIndex, hidden); |
---|
| 3117 | } |
---|
| 3118 | } |
---|
| 3119 | }); |
---|
| 3120 | </code></pre> |
---|
| 3121 | * <p>In both examples above, the ability to apply a CSS class to all cells in a column (including the |
---|
| 3122 | * header) is demonstrated through the use of the <b><tt>{@link Ext.grid.Column#id id}</tt></b> config |
---|
| 3123 | * option. This column could be styled by including the following css:</p><pre><code> |
---|
| 3124 | //add this css *after* the core css is loaded |
---|
| 3125 | .x-grid3-td-company { |
---|
| 3126 | color: red; // entire column will have red font |
---|
| 3127 | } |
---|
| 3128 | // modify the header row only, adding an icon to the column header |
---|
| 3129 | .x-grid3-hd-company { |
---|
| 3130 | background: transparent |
---|
| 3131 | url(../../resources/images/icons/silk/building.png) |
---|
| 3132 | no-repeat 3px 3px ! important; |
---|
| 3133 | padding-left:20px; |
---|
| 3134 | } |
---|
| 3135 | </code></pre> |
---|
| 3136 | * Note that the "Company Name" column could be specified as the |
---|
| 3137 | * <b><tt>{@link Ext.grid.GridPanel}.{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></b>. |
---|
| 3138 | * @constructor |
---|
| 3139 | * @param {Mixed} config Specify either an Array of {@link Ext.grid.Column} configuration objects or specify |
---|
| 3140 | * a configuration Object (see introductory section discussion utilizing Initialization Method 2 above). |
---|
| 3141 | */ |
---|
| 3142 | Ext.grid.ColumnModel = function(config){ |
---|
| 3143 | /** |
---|
| 3144 | * An Array of {@link Ext.grid.Column Column definition} objects representing the configuration |
---|
| 3145 | * of this ColumnModel. See {@link Ext.grid.Column} for the configuration properties that may |
---|
| 3146 | * be specified. |
---|
| 3147 | * @property config |
---|
| 3148 | * @type Array |
---|
| 3149 | */ |
---|
| 3150 | if(config.columns){ |
---|
| 3151 | Ext.apply(this, config); |
---|
| 3152 | this.setConfig(config.columns, true); |
---|
| 3153 | }else{ |
---|
| 3154 | this.setConfig(config, true); |
---|
| 3155 | } |
---|
| 3156 | this.addEvents( |
---|
| 3157 | /** |
---|
| 3158 | * @event widthchange |
---|
| 3159 | * Fires when the width of a column is programmaticially changed using |
---|
| 3160 | * <code>{@link #setColumnWidth}</code>. |
---|
| 3161 | * Note internal resizing suppresses the event from firing. See also |
---|
| 3162 | * {@link Ext.grid.GridPanel}.<code>{@link #columnresize}</code>. |
---|
| 3163 | * @param {ColumnModel} this |
---|
| 3164 | * @param {Number} columnIndex The column index |
---|
| 3165 | * @param {Number} newWidth The new width |
---|
| 3166 | */ |
---|
| 3167 | "widthchange", |
---|
| 3168 | /** |
---|
| 3169 | * @event headerchange |
---|
| 3170 | * Fires when the text of a header changes. |
---|
| 3171 | * @param {ColumnModel} this |
---|
| 3172 | * @param {Number} columnIndex The column index |
---|
| 3173 | * @param {String} newText The new header text |
---|
| 3174 | */ |
---|
| 3175 | "headerchange", |
---|
| 3176 | /** |
---|
| 3177 | * @event hiddenchange |
---|
| 3178 | * Fires when a column is hidden or "unhidden". |
---|
| 3179 | * @param {ColumnModel} this |
---|
| 3180 | * @param {Number} columnIndex The column index |
---|
| 3181 | * @param {Boolean} hidden true if hidden, false otherwise |
---|
| 3182 | */ |
---|
| 3183 | "hiddenchange", |
---|
| 3184 | /** |
---|
| 3185 | * @event columnmoved |
---|
| 3186 | * Fires when a column is moved. |
---|
| 3187 | * @param {ColumnModel} this |
---|
| 3188 | * @param {Number} oldIndex |
---|
| 3189 | * @param {Number} newIndex |
---|
| 3190 | */ |
---|
| 3191 | "columnmoved", |
---|
| 3192 | /** |
---|
| 3193 | * @event configchange |
---|
| 3194 | * Fires when the configuration is changed |
---|
| 3195 | * @param {ColumnModel} this |
---|
| 3196 | */ |
---|
| 3197 | "configchange" |
---|
| 3198 | ); |
---|
| 3199 | Ext.grid.ColumnModel.superclass.constructor.call(this); |
---|
| 3200 | }; |
---|
| 3201 | Ext.extend(Ext.grid.ColumnModel, Ext.util.Observable, { |
---|
| 3202 | /** |
---|
| 3203 | * @cfg {Number} defaultWidth (optional) The width of columns which have no <tt>{@link #width}</tt> |
---|
| 3204 | * specified (defaults to <tt>100</tt>). This property shall preferably be configured through the |
---|
| 3205 | * <tt><b>{@link #defaults}</b></tt> config property. |
---|
| 3206 | */ |
---|
| 3207 | defaultWidth: 100, |
---|
| 3208 | /** |
---|
| 3209 | * @cfg {Boolean} defaultSortable (optional) Default sortable of columns which have no |
---|
| 3210 | * sortable specified (defaults to <tt>false</tt>). This property shall preferably be configured |
---|
| 3211 | * through the <tt><b>{@link #defaults}</b></tt> config property. |
---|
| 3212 | */ |
---|
| 3213 | defaultSortable: false, |
---|
| 3214 | /** |
---|
| 3215 | * @cfg {Array} columns An Array of object literals. The config options defined by |
---|
| 3216 | * <b>{@link Ext.grid.Column}</b> are the options which may appear in the object literal for each |
---|
| 3217 | * individual column definition. |
---|
| 3218 | */ |
---|
| 3219 | /** |
---|
| 3220 | * @cfg {Object} defaults Object literal which will be used to apply {@link Ext.grid.Column} |
---|
| 3221 | * configuration options to all <tt><b>{@link #columns}</b></tt>. Configuration options specified with |
---|
| 3222 | * individual {@link Ext.grid.Column column} configs will supersede these <tt><b>{@link #defaults}</b></tt>. |
---|
| 3223 | */ |
---|
| 3224 | |
---|
| 3225 | /** |
---|
| 3226 | * Returns the id of the column at the specified index. |
---|
| 3227 | * @param {Number} index The column index |
---|
| 3228 | * @return {String} the id |
---|
| 3229 | */ |
---|
| 3230 | getColumnId : function(index){ |
---|
| 3231 | return this.config[index].id; |
---|
| 3232 | }, |
---|
| 3233 | |
---|
| 3234 | getColumnAt : function(index){ |
---|
| 3235 | return this.config[index]; |
---|
| 3236 | }, |
---|
| 3237 | |
---|
| 3238 | /** |
---|
| 3239 | * <p>Reconfigures this column model according to the passed Array of column definition objects. |
---|
| 3240 | * For a description of the individual properties of a column definition object, see the |
---|
| 3241 | * <a href="#Ext.grid.ColumnModel-configs">Config Options</a>.</p> |
---|
| 3242 | * <p>Causes the {@link #configchange} event to be fired. A {@link Ext.grid.GridPanel GridPanel} |
---|
| 3243 | * using this ColumnModel will listen for this event and refresh its UI automatically.</p> |
---|
| 3244 | * @param {Array} config Array of Column definition objects. |
---|
| 3245 | * @param {Boolean} initial Specify <tt>true</tt> to bypass cleanup which deletes the <tt>totalWidth</tt> |
---|
| 3246 | * and destroys existing editors. |
---|
| 3247 | */ |
---|
| 3248 | setConfig : function(config, initial){ |
---|
| 3249 | var i, c, len; |
---|
| 3250 | if(!initial){ // cleanup |
---|
| 3251 | delete this.totalWidth; |
---|
| 3252 | for(i = 0, len = this.config.length; i < len; i++){ |
---|
| 3253 | c = this.config[i]; |
---|
| 3254 | if(c.editor){ |
---|
| 3255 | c.editor.destroy(); |
---|
| 3256 | } |
---|
| 3257 | } |
---|
| 3258 | } |
---|
| 3259 | |
---|
| 3260 | // backward compatibility |
---|
| 3261 | this.defaults = Ext.apply({ |
---|
| 3262 | width: this.defaultWidth, |
---|
| 3263 | sortable: this.defaultSortable |
---|
| 3264 | }, this.defaults); |
---|
| 3265 | |
---|
| 3266 | this.config = config; |
---|
| 3267 | this.lookup = {}; |
---|
| 3268 | // if no id, create one |
---|
| 3269 | for(i = 0, len = config.length; i < len; i++){ |
---|
| 3270 | c = Ext.applyIf(config[i], this.defaults); |
---|
| 3271 | if(!c.isColumn){ |
---|
| 3272 | var cls = Ext.grid.Column.types[c.xtype || 'gridcolumn']; |
---|
| 3273 | c = new cls(c); |
---|
| 3274 | config[i] = c; |
---|
| 3275 | } |
---|
| 3276 | this.lookup[c.id] = c; |
---|
| 3277 | } |
---|
| 3278 | if(!initial){ |
---|
| 3279 | this.fireEvent('configchange', this); |
---|
| 3280 | } |
---|
| 3281 | }, |
---|
| 3282 | |
---|
| 3283 | /** |
---|
| 3284 | * Returns the column for a specified id. |
---|
| 3285 | * @param {String} id The column id |
---|
| 3286 | * @return {Object} the column |
---|
| 3287 | */ |
---|
| 3288 | getColumnById : function(id){ |
---|
| 3289 | return this.lookup[id]; |
---|
| 3290 | }, |
---|
| 3291 | |
---|
| 3292 | /** |
---|
| 3293 | * Returns the index for a specified column id. |
---|
| 3294 | * @param {String} id The column id |
---|
| 3295 | * @return {Number} the index, or -1 if not found |
---|
| 3296 | */ |
---|
| 3297 | getIndexById : function(id){ |
---|
| 3298 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
| 3299 | if(this.config[i].id == id){ |
---|
| 3300 | return i; |
---|
| 3301 | } |
---|
| 3302 | } |
---|
| 3303 | return -1; |
---|
| 3304 | }, |
---|
| 3305 | |
---|
| 3306 | /** |
---|
| 3307 | * Moves a column from one position to another. |
---|
| 3308 | * @param {Number} oldIndex The index of the column to move. |
---|
| 3309 | * @param {Number} newIndex The position at which to reinsert the coolumn. |
---|
| 3310 | */ |
---|
| 3311 | moveColumn : function(oldIndex, newIndex){ |
---|
| 3312 | var c = this.config[oldIndex]; |
---|
| 3313 | this.config.splice(oldIndex, 1); |
---|
| 3314 | this.config.splice(newIndex, 0, c); |
---|
| 3315 | this.dataMap = null; |
---|
| 3316 | this.fireEvent("columnmoved", this, oldIndex, newIndex); |
---|
| 3317 | }, |
---|
| 3318 | |
---|
| 3319 | /** |
---|
| 3320 | * Returns the number of columns. |
---|
| 3321 | * @param {Boolean} visibleOnly Optional. Pass as true to only include visible columns. |
---|
| 3322 | * @return {Number} |
---|
| 3323 | */ |
---|
| 3324 | getColumnCount : function(visibleOnly){ |
---|
| 3325 | if(visibleOnly === true){ |
---|
| 3326 | var c = 0; |
---|
| 3327 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
| 3328 | if(!this.isHidden(i)){ |
---|
| 3329 | c++; |
---|
| 3330 | } |
---|
| 3331 | } |
---|
| 3332 | return c; |
---|
| 3333 | } |
---|
| 3334 | return this.config.length; |
---|
| 3335 | }, |
---|
| 3336 | |
---|
| 3337 | /** |
---|
| 3338 | * Returns the column configs that return true by the passed function that is called |
---|
| 3339 | * with (columnConfig, index) |
---|
| 3340 | <pre><code> |
---|
| 3341 | // returns an array of column config objects for all hidden columns |
---|
| 3342 | var columns = grid.getColumnModel().getColumnsBy(function(c){ |
---|
| 3343 | return c.hidden; |
---|
| 3344 | }); |
---|
| 3345 | </code></pre> |
---|
| 3346 | * @param {Function} fn |
---|
| 3347 | * @param {Object} scope (optional) |
---|
| 3348 | * @return {Array} result |
---|
| 3349 | */ |
---|
| 3350 | getColumnsBy : function(fn, scope){ |
---|
| 3351 | var r = []; |
---|
| 3352 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
| 3353 | var c = this.config[i]; |
---|
| 3354 | if(fn.call(scope||this, c, i) === true){ |
---|
| 3355 | r[r.length] = c; |
---|
| 3356 | } |
---|
| 3357 | } |
---|
| 3358 | return r; |
---|
| 3359 | }, |
---|
| 3360 | |
---|
| 3361 | /** |
---|
| 3362 | * Returns true if the specified column is sortable. |
---|
| 3363 | * @param {Number} col The column index |
---|
| 3364 | * @return {Boolean} |
---|
| 3365 | */ |
---|
| 3366 | isSortable : function(col){ |
---|
| 3367 | return this.config[col].sortable; |
---|
| 3368 | }, |
---|
| 3369 | |
---|
| 3370 | /** |
---|
| 3371 | * Returns true if the specified column menu is disabled. |
---|
| 3372 | * @param {Number} col The column index |
---|
| 3373 | * @return {Boolean} |
---|
| 3374 | */ |
---|
| 3375 | isMenuDisabled : function(col){ |
---|
| 3376 | return !!this.config[col].menuDisabled; |
---|
| 3377 | }, |
---|
| 3378 | |
---|
| 3379 | /** |
---|
| 3380 | * Returns the rendering (formatting) function defined for the column. |
---|
| 3381 | * @param {Number} col The column index. |
---|
| 3382 | * @return {Function} The function used to render the cell. See {@link #setRenderer}. |
---|
| 3383 | */ |
---|
| 3384 | getRenderer : function(col){ |
---|
| 3385 | if(!this.config[col].renderer){ |
---|
| 3386 | return Ext.grid.ColumnModel.defaultRenderer; |
---|
| 3387 | } |
---|
| 3388 | return this.config[col].renderer; |
---|
| 3389 | }, |
---|
| 3390 | |
---|
| 3391 | /** |
---|
| 3392 | * Sets the rendering (formatting) function for a column. See {@link Ext.util.Format} for some |
---|
| 3393 | * default formatting functions. |
---|
| 3394 | * @param {Number} col The column index |
---|
| 3395 | * @param {Function} fn The function to use to process the cell's raw data |
---|
| 3396 | * to return HTML markup for the grid view. The render function is called with |
---|
| 3397 | * the following parameters:<ul> |
---|
| 3398 | * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> |
---|
| 3399 | * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> |
---|
| 3400 | * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> |
---|
| 3401 | * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell |
---|
| 3402 | * (e.g. 'style="color:red;"').</p></li></ul></p></li> |
---|
| 3403 | * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was extracted.</p></li> |
---|
| 3404 | * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> |
---|
| 3405 | * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> |
---|
| 3406 | * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record was extracted.</p></li></ul> |
---|
| 3407 | */ |
---|
| 3408 | setRenderer : function(col, fn){ |
---|
| 3409 | this.config[col].renderer = fn; |
---|
| 3410 | }, |
---|
| 3411 | |
---|
| 3412 | /** |
---|
| 3413 | * Returns the width for the specified column. |
---|
| 3414 | * @param {Number} col The column index |
---|
| 3415 | * @return {Number} |
---|
| 3416 | */ |
---|
| 3417 | getColumnWidth : function(col){ |
---|
| 3418 | return this.config[col].width; |
---|
| 3419 | }, |
---|
| 3420 | |
---|
| 3421 | /** |
---|
| 3422 | * Sets the width for a column. |
---|
| 3423 | * @param {Number} col The column index |
---|
| 3424 | * @param {Number} width The new width |
---|
| 3425 | * @param {Boolean} suppressEvent True to suppress firing the <code>{@link #widthchange}</code> |
---|
| 3426 | * event. Defaults to false. |
---|
| 3427 | */ |
---|
| 3428 | setColumnWidth : function(col, width, suppressEvent){ |
---|
| 3429 | this.config[col].width = width; |
---|
| 3430 | this.totalWidth = null; |
---|
| 3431 | if(!suppressEvent){ |
---|
| 3432 | this.fireEvent("widthchange", this, col, width); |
---|
| 3433 | } |
---|
| 3434 | }, |
---|
| 3435 | |
---|
| 3436 | /** |
---|
| 3437 | * Returns the total width of all columns. |
---|
| 3438 | * @param {Boolean} includeHidden True to include hidden column widths |
---|
| 3439 | * @return {Number} |
---|
| 3440 | */ |
---|
| 3441 | getTotalWidth : function(includeHidden){ |
---|
| 3442 | if(!this.totalWidth){ |
---|
| 3443 | this.totalWidth = 0; |
---|
| 3444 | for(var i = 0, len = this.config.length; i < len; i++){ |
---|
| 3445 | if(includeHidden || !this.isHidden(i)){ |
---|
| 3446 | this.totalWidth += this.getColumnWidth(i); |
---|
| 3447 | } |
---|
| 3448 | } |
---|
| 3449 | } |
---|
| 3450 | return this.totalWidth; |
---|
| 3451 | }, |
---|
| 3452 | |
---|
| 3453 | /** |
---|
| 3454 | * Returns the header for the specified column. |
---|
| 3455 | * @param {Number} col The column index |
---|
| 3456 | * @return {String} |
---|
| 3457 | */ |
---|
| 3458 | getColumnHeader : function(col){ |
---|
| 3459 | return this.config[col].header; |
---|
| 3460 | }, |
---|
| 3461 | |
---|
| 3462 | /** |
---|
| 3463 | * Sets the header for a column. |
---|
| 3464 | * @param {Number} col The column index |
---|
| 3465 | * @param {String} header The new header |
---|
| 3466 | */ |
---|
| 3467 | setColumnHeader : function(col, header){ |
---|
| 3468 | this.config[col].header = header; |
---|
| 3469 | this.fireEvent("headerchange", this, col, header); |
---|
| 3470 | }, |
---|
| 3471 | |
---|
| 3472 | /** |
---|
| 3473 | * Returns the tooltip for the specified column. |
---|
| 3474 | * @param {Number} col The column index |
---|
| 3475 | * @return {String} |
---|
| 3476 | */ |
---|
| 3477 | getColumnTooltip : function(col){ |
---|
| 3478 | return this.config[col].tooltip; |
---|
| 3479 | }, |
---|
| 3480 | /** |
---|
| 3481 | * Sets the tooltip for a column. |
---|
| 3482 | * @param {Number} col The column index |
---|
| 3483 | * @param {String} tooltip The new tooltip |
---|
| 3484 | */ |
---|
| 3485 | setColumnTooltip : function(col, tooltip){ |
---|
| 3486 | this.config[col].tooltip = tooltip; |
---|
| 3487 | }, |
---|
| 3488 | |
---|
| 3489 | /** |
---|
| 3490 | * Returns the dataIndex for the specified column. |
---|
| 3491 | <pre><code> |
---|
| 3492 | // Get field name for the column |
---|
| 3493 | var fieldName = grid.getColumnModel().getDataIndex(columnIndex); |
---|
| 3494 | </code></pre> |
---|
| 3495 | * @param {Number} col The column index |
---|
| 3496 | * @return {String} The column's dataIndex |
---|
| 3497 | */ |
---|
| 3498 | getDataIndex : function(col){ |
---|
| 3499 | return this.config[col].dataIndex; |
---|
| 3500 | }, |
---|
| 3501 | |
---|
| 3502 | /** |
---|
| 3503 | * Sets the dataIndex for a column. |
---|
| 3504 | * @param {Number} col The column index |
---|
| 3505 | * @param {String} dataIndex The new dataIndex |
---|
| 3506 | */ |
---|
| 3507 | setDataIndex : function(col, dataIndex){ |
---|
| 3508 | this.config[col].dataIndex = dataIndex; |
---|
| 3509 | }, |
---|
| 3510 | |
---|
| 3511 | /** |
---|
| 3512 | * Finds the index of the first matching column for the given dataIndex. |
---|
| 3513 | * @param {String} col The dataIndex to find |
---|
| 3514 | * @return {Number} The column index, or -1 if no match was found |
---|
| 3515 | */ |
---|
| 3516 | findColumnIndex : function(dataIndex){ |
---|
| 3517 | var c = this.config; |
---|
| 3518 | for(var i = 0, len = c.length; i < len; i++){ |
---|
| 3519 | if(c[i].dataIndex == dataIndex){ |
---|
| 3520 | return i; |
---|
| 3521 | } |
---|
| 3522 | } |
---|
| 3523 | return -1; |
---|
| 3524 | }, |
---|
| 3525 | |
---|
| 3526 | /** |
---|
| 3527 | * Returns true if the cell is editable. |
---|
| 3528 | <pre><code> |
---|
| 3529 | var store = new Ext.data.Store({...}); |
---|
| 3530 | var colModel = new Ext.grid.ColumnModel({ |
---|
| 3531 | columns: [...], |
---|
| 3532 | isCellEditable: function(col, row) { |
---|
| 3533 | var record = store.getAt(row); |
---|
| 3534 | if (record.get('readonly')) { // replace with your condition |
---|
| 3535 | return false; |
---|
| 3536 | } |
---|
| 3537 | return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row); |
---|
| 3538 | } |
---|
| 3539 | }); |
---|
| 3540 | var grid = new Ext.grid.GridPanel({ |
---|
| 3541 | store: store, |
---|
| 3542 | colModel: colModel, |
---|
| 3543 | ... |
---|
| 3544 | }); |
---|
| 3545 | </code></pre> |
---|
| 3546 | * @param {Number} colIndex The column index |
---|
| 3547 | * @param {Number} rowIndex The row index |
---|
| 3548 | * @return {Boolean} |
---|
| 3549 | */ |
---|
| 3550 | isCellEditable : function(colIndex, rowIndex){ |
---|
| 3551 | return (this.config[colIndex].editable || (typeof this.config[colIndex].editable == "undefined" && this.config[colIndex].editor)) ? true : false; |
---|
| 3552 | }, |
---|
| 3553 | |
---|
| 3554 | /** |
---|
| 3555 | * Returns the editor defined for the cell/column. |
---|
| 3556 | * @param {Number} colIndex The column index |
---|
| 3557 | * @param {Number} rowIndex The row index |
---|
| 3558 | * @return {Ext.Editor} The {@link Ext.Editor Editor} that was created to wrap |
---|
| 3559 | * the {@link Ext.form.Field Field} used to edit the cell. |
---|
| 3560 | */ |
---|
| 3561 | getCellEditor : function(colIndex, rowIndex){ |
---|
| 3562 | return this.config[colIndex].getCellEditor(rowIndex); |
---|
| 3563 | }, |
---|
| 3564 | |
---|
| 3565 | /** |
---|
| 3566 | * Sets if a column is editable. |
---|
| 3567 | * @param {Number} col The column index |
---|
| 3568 | * @param {Boolean} editable True if the column is editable |
---|
| 3569 | */ |
---|
| 3570 | setEditable : function(col, editable){ |
---|
| 3571 | this.config[col].editable = editable; |
---|
| 3572 | }, |
---|
| 3573 | |
---|
| 3574 | |
---|
| 3575 | /** |
---|
| 3576 | * Returns true if the column is hidden. |
---|
| 3577 | * @param {Number} colIndex The column index |
---|
| 3578 | * @return {Boolean} |
---|
| 3579 | */ |
---|
| 3580 | isHidden : function(colIndex){ |
---|
| 3581 | return this.config[colIndex].hidden; |
---|
| 3582 | }, |
---|
| 3583 | |
---|
| 3584 | |
---|
| 3585 | /** |
---|
| 3586 | * Returns true if the column width cannot be changed |
---|
| 3587 | */ |
---|
| 3588 | isFixed : function(colIndex){ |
---|
| 3589 | return this.config[colIndex].fixed; |
---|
| 3590 | }, |
---|
| 3591 | |
---|
| 3592 | /** |
---|
| 3593 | * Returns true if the column can be resized |
---|
| 3594 | * @return {Boolean} |
---|
| 3595 | */ |
---|
| 3596 | isResizable : function(colIndex){ |
---|
| 3597 | return colIndex >= 0 && this.config[colIndex].resizable !== false && this.config[colIndex].fixed !== true; |
---|
| 3598 | }, |
---|
| 3599 | /** |
---|
| 3600 | * Sets if a column is hidden. |
---|
| 3601 | <pre><code> |
---|
| 3602 | myGrid.getColumnModel().setHidden(0, true); // hide column 0 (0 = the first column). |
---|
| 3603 | </code></pre> |
---|
| 3604 | * @param {Number} colIndex The column index |
---|
| 3605 | * @param {Boolean} hidden True if the column is hidden |
---|
| 3606 | */ |
---|
| 3607 | setHidden : function(colIndex, hidden){ |
---|
| 3608 | var c = this.config[colIndex]; |
---|
| 3609 | if(c.hidden !== hidden){ |
---|
| 3610 | c.hidden = hidden; |
---|
| 3611 | this.totalWidth = null; |
---|
| 3612 | this.fireEvent("hiddenchange", this, colIndex, hidden); |
---|
| 3613 | } |
---|
| 3614 | }, |
---|
| 3615 | |
---|
| 3616 | /** |
---|
| 3617 | * Sets the editor for a column and destroys the prior editor. |
---|
| 3618 | * @param {Number} col The column index |
---|
| 3619 | * @param {Object} editor The editor object |
---|
| 3620 | */ |
---|
| 3621 | setEditor : function(col, editor){ |
---|
| 3622 | Ext.destroy(this.config[col].editor); |
---|
| 3623 | this.config[col].editor = editor; |
---|
| 3624 | }, |
---|
| 3625 | |
---|
| 3626 | /** |
---|
| 3627 | * Destroys this column model by purging any event listeners, and removing any editors. |
---|
| 3628 | */ |
---|
| 3629 | destroy : function(){ |
---|
| 3630 | for(var i = 0, c = this.config, len = c.length; i < len; i++){ |
---|
| 3631 | Ext.destroy(c[i].editor); |
---|
| 3632 | } |
---|
| 3633 | this.purgeListeners(); |
---|
| 3634 | } |
---|
| 3635 | }); |
---|
| 3636 | |
---|
| 3637 | // private |
---|
| 3638 | Ext.grid.ColumnModel.defaultRenderer = function(value){ |
---|
| 3639 | if(typeof value == "string" && value.length < 1){ |
---|
| 3640 | return " "; |
---|
| 3641 | } |
---|
| 3642 | return value; |
---|
| 3643 | };/** |
---|
| 3644 | * @class Ext.grid.AbstractSelectionModel |
---|
| 3645 | * @extends Ext.util.Observable |
---|
| 3646 | * Abstract base class for grid SelectionModels. It provides the interface that should be |
---|
| 3647 | * implemented by descendant classes. This class should not be directly instantiated. |
---|
| 3648 | * @constructor |
---|
| 3649 | */ |
---|
| 3650 | Ext.grid.AbstractSelectionModel = function(){ |
---|
| 3651 | this.locked = false; |
---|
| 3652 | Ext.grid.AbstractSelectionModel.superclass.constructor.call(this); |
---|
| 3653 | }; |
---|
| 3654 | |
---|
| 3655 | Ext.extend(Ext.grid.AbstractSelectionModel, Ext.util.Observable, { |
---|
| 3656 | /** |
---|
| 3657 | * The GridPanel for which this SelectionModel is handling selection. Read-only. |
---|
| 3658 | * @type Object |
---|
| 3659 | * @property grid |
---|
| 3660 | */ |
---|
| 3661 | |
---|
| 3662 | /** @ignore Called by the grid automatically. Do not call directly. */ |
---|
| 3663 | init : function(grid){ |
---|
| 3664 | this.grid = grid; |
---|
| 3665 | this.initEvents(); |
---|
| 3666 | }, |
---|
| 3667 | |
---|
| 3668 | /** |
---|
| 3669 | * Locks the selections. |
---|
| 3670 | */ |
---|
| 3671 | lock : function(){ |
---|
| 3672 | this.locked = true; |
---|
| 3673 | }, |
---|
| 3674 | |
---|
| 3675 | /** |
---|
| 3676 | * Unlocks the selections. |
---|
| 3677 | */ |
---|
| 3678 | unlock : function(){ |
---|
| 3679 | this.locked = false; |
---|
| 3680 | }, |
---|
| 3681 | |
---|
| 3682 | /** |
---|
| 3683 | * Returns true if the selections are locked. |
---|
| 3684 | * @return {Boolean} |
---|
| 3685 | */ |
---|
| 3686 | isLocked : function(){ |
---|
| 3687 | return this.locked; |
---|
| 3688 | }, |
---|
| 3689 | |
---|
| 3690 | destroy: function(){ |
---|
| 3691 | this.purgeListeners(); |
---|
| 3692 | } |
---|
| 3693 | });/** |
---|
| 3694 | * @class Ext.grid.RowSelectionModel |
---|
| 3695 | * @extends Ext.grid.AbstractSelectionModel |
---|
| 3696 | * The default SelectionModel used by {@link Ext.grid.GridPanel}. |
---|
| 3697 | * It supports multiple selections and keyboard selection/navigation. The objects stored |
---|
| 3698 | * as selections and returned by {@link #getSelected}, and {@link #getSelections} are |
---|
| 3699 | * the {@link Ext.data.Record Record}s which provide the data for the selected rows. |
---|
| 3700 | * @constructor |
---|
| 3701 | * @param {Object} config |
---|
| 3702 | */ |
---|
| 3703 | Ext.grid.RowSelectionModel = function(config){ |
---|
| 3704 | Ext.apply(this, config); |
---|
| 3705 | this.selections = new Ext.util.MixedCollection(false, function(o){ |
---|
| 3706 | return o.id; |
---|
| 3707 | }); |
---|
| 3708 | |
---|
| 3709 | this.last = false; |
---|
| 3710 | this.lastActive = false; |
---|
| 3711 | |
---|
| 3712 | this.addEvents( |
---|
| 3713 | /** |
---|
| 3714 | * @event selectionchange |
---|
| 3715 | * Fires when the selection changes |
---|
| 3716 | * @param {SelectionModel} this |
---|
| 3717 | */ |
---|
| 3718 | "selectionchange", |
---|
| 3719 | /** |
---|
| 3720 | * @event beforerowselect |
---|
| 3721 | * Fires before a row is selected, return false to cancel the selection. |
---|
| 3722 | * @param {SelectionModel} this |
---|
| 3723 | * @param {Number} rowIndex The index to be selected |
---|
| 3724 | * @param {Boolean} keepExisting False if other selections will be cleared |
---|
| 3725 | * @param {Record} record The record to be selected |
---|
| 3726 | */ |
---|
| 3727 | "beforerowselect", |
---|
| 3728 | /** |
---|
| 3729 | * @event rowselect |
---|
| 3730 | * Fires when a row is selected. |
---|
| 3731 | * @param {SelectionModel} this |
---|
| 3732 | * @param {Number} rowIndex The selected index |
---|
| 3733 | * @param {Ext.data.Record} r The selected record |
---|
| 3734 | */ |
---|
| 3735 | "rowselect", |
---|
| 3736 | /** |
---|
| 3737 | * @event rowdeselect |
---|
| 3738 | * Fires when a row is deselected. To prevent deselection |
---|
| 3739 | * {@link Ext.grid.AbstractSelectionModel#lock lock the selections}. |
---|
| 3740 | * @param {SelectionModel} this |
---|
| 3741 | * @param {Number} rowIndex |
---|
| 3742 | * @param {Record} record |
---|
| 3743 | */ |
---|
| 3744 | "rowdeselect" |
---|
| 3745 | ); |
---|
| 3746 | |
---|
| 3747 | Ext.grid.RowSelectionModel.superclass.constructor.call(this); |
---|
| 3748 | }; |
---|
| 3749 | |
---|
| 3750 | Ext.extend(Ext.grid.RowSelectionModel, Ext.grid.AbstractSelectionModel, { |
---|
| 3751 | /** |
---|
| 3752 | * @cfg {Boolean} singleSelect |
---|
| 3753 | * <tt>true</tt> to allow selection of only one row at a time (defaults to <tt>false</tt> |
---|
| 3754 | * allowing multiple selections) |
---|
| 3755 | */ |
---|
| 3756 | singleSelect : false, |
---|
| 3757 | |
---|
| 3758 | /** |
---|
| 3759 | * @cfg {Boolean} moveEditorOnEnter |
---|
| 3760 | * <tt>false</tt> to turn off moving the editor to the next row down when the enter key is pressed |
---|
| 3761 | * or the next row up when shift + enter keys are pressed. |
---|
| 3762 | */ |
---|
| 3763 | // private |
---|
| 3764 | initEvents : function(){ |
---|
| 3765 | |
---|
| 3766 | if(!this.grid.enableDragDrop && !this.grid.enableDrag){ |
---|
| 3767 | this.grid.on("rowmousedown", this.handleMouseDown, this); |
---|
| 3768 | }else{ // allow click to work like normal |
---|
| 3769 | this.grid.on("rowclick", function(grid, rowIndex, e) { |
---|
| 3770 | if(e.button === 0 && !e.shiftKey && !e.ctrlKey) { |
---|
| 3771 | this.selectRow(rowIndex, false); |
---|
| 3772 | grid.view.focusRow(rowIndex); |
---|
| 3773 | } |
---|
| 3774 | }, this); |
---|
| 3775 | } |
---|
| 3776 | |
---|
| 3777 | this.rowNav = new Ext.KeyNav(this.grid.getGridEl(), { |
---|
| 3778 | "up" : function(e){ |
---|
| 3779 | if(!e.shiftKey || this.singleSelect){ |
---|
| 3780 | this.selectPrevious(false); |
---|
| 3781 | }else if(this.last !== false && this.lastActive !== false){ |
---|
| 3782 | var last = this.last; |
---|
| 3783 | this.selectRange(this.last, this.lastActive-1); |
---|
| 3784 | this.grid.getView().focusRow(this.lastActive); |
---|
| 3785 | if(last !== false){ |
---|
| 3786 | this.last = last; |
---|
| 3787 | } |
---|
| 3788 | }else{ |
---|
| 3789 | this.selectFirstRow(); |
---|
| 3790 | } |
---|
| 3791 | }, |
---|
| 3792 | "down" : function(e){ |
---|
| 3793 | if(!e.shiftKey || this.singleSelect){ |
---|
| 3794 | this.selectNext(false); |
---|
| 3795 | }else if(this.last !== false && this.lastActive !== false){ |
---|
| 3796 | var last = this.last; |
---|
| 3797 | this.selectRange(this.last, this.lastActive+1); |
---|
| 3798 | this.grid.getView().focusRow(this.lastActive); |
---|
| 3799 | if(last !== false){ |
---|
| 3800 | this.last = last; |
---|
| 3801 | } |
---|
| 3802 | }else{ |
---|
| 3803 | this.selectFirstRow(); |
---|
| 3804 | } |
---|
| 3805 | }, |
---|
| 3806 | scope: this |
---|
| 3807 | }); |
---|
| 3808 | |
---|
| 3809 | var view = this.grid.view; |
---|
| 3810 | view.on("refresh", this.onRefresh, this); |
---|
| 3811 | view.on("rowupdated", this.onRowUpdated, this); |
---|
| 3812 | view.on("rowremoved", this.onRemove, this); |
---|
| 3813 | }, |
---|
| 3814 | |
---|
| 3815 | // private |
---|
| 3816 | onRefresh : function(){ |
---|
| 3817 | var ds = this.grid.store, index; |
---|
| 3818 | var s = this.getSelections(); |
---|
| 3819 | this.clearSelections(true); |
---|
| 3820 | for(var i = 0, len = s.length; i < len; i++){ |
---|
| 3821 | var r = s[i]; |
---|
| 3822 | if((index = ds.indexOfId(r.id)) != -1){ |
---|
| 3823 | this.selectRow(index, true); |
---|
| 3824 | } |
---|
| 3825 | } |
---|
| 3826 | if(s.length != this.selections.getCount()){ |
---|
| 3827 | this.fireEvent("selectionchange", this); |
---|
| 3828 | } |
---|
| 3829 | }, |
---|
| 3830 | |
---|
| 3831 | // private |
---|
| 3832 | onRemove : function(v, index, r){ |
---|
| 3833 | if(this.selections.remove(r) !== false){ |
---|
| 3834 | this.fireEvent('selectionchange', this); |
---|
| 3835 | } |
---|
| 3836 | }, |
---|
| 3837 | |
---|
| 3838 | // private |
---|
| 3839 | onRowUpdated : function(v, index, r){ |
---|
| 3840 | if(this.isSelected(r)){ |
---|
| 3841 | v.onRowSelect(index); |
---|
| 3842 | } |
---|
| 3843 | }, |
---|
| 3844 | |
---|
| 3845 | /** |
---|
| 3846 | * Select records. |
---|
| 3847 | * @param {Array} records The records to select |
---|
| 3848 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
| 3849 | */ |
---|
| 3850 | selectRecords : function(records, keepExisting){ |
---|
| 3851 | if(!keepExisting){ |
---|
| 3852 | this.clearSelections(); |
---|
| 3853 | } |
---|
| 3854 | var ds = this.grid.store; |
---|
| 3855 | for(var i = 0, len = records.length; i < len; i++){ |
---|
| 3856 | this.selectRow(ds.indexOf(records[i]), true); |
---|
| 3857 | } |
---|
| 3858 | }, |
---|
| 3859 | |
---|
| 3860 | /** |
---|
| 3861 | * Gets the number of selected rows. |
---|
| 3862 | * @return {Number} |
---|
| 3863 | */ |
---|
| 3864 | getCount : function(){ |
---|
| 3865 | return this.selections.length; |
---|
| 3866 | }, |
---|
| 3867 | |
---|
| 3868 | /** |
---|
| 3869 | * Selects the first row in the grid. |
---|
| 3870 | */ |
---|
| 3871 | selectFirstRow : function(){ |
---|
| 3872 | this.selectRow(0); |
---|
| 3873 | }, |
---|
| 3874 | |
---|
| 3875 | /** |
---|
| 3876 | * Select the last row. |
---|
| 3877 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
| 3878 | */ |
---|
| 3879 | selectLastRow : function(keepExisting){ |
---|
| 3880 | this.selectRow(this.grid.store.getCount() - 1, keepExisting); |
---|
| 3881 | }, |
---|
| 3882 | |
---|
| 3883 | /** |
---|
| 3884 | * Selects the row immediately following the last selected row. |
---|
| 3885 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
| 3886 | * @return {Boolean} <tt>true</tt> if there is a next row, else <tt>false</tt> |
---|
| 3887 | */ |
---|
| 3888 | selectNext : function(keepExisting){ |
---|
| 3889 | if(this.hasNext()){ |
---|
| 3890 | this.selectRow(this.last+1, keepExisting); |
---|
| 3891 | this.grid.getView().focusRow(this.last); |
---|
| 3892 | return true; |
---|
| 3893 | } |
---|
| 3894 | return false; |
---|
| 3895 | }, |
---|
| 3896 | |
---|
| 3897 | /** |
---|
| 3898 | * Selects the row that precedes the last selected row. |
---|
| 3899 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
| 3900 | * @return {Boolean} <tt>true</tt> if there is a previous row, else <tt>false</tt> |
---|
| 3901 | */ |
---|
| 3902 | selectPrevious : function(keepExisting){ |
---|
| 3903 | if(this.hasPrevious()){ |
---|
| 3904 | this.selectRow(this.last-1, keepExisting); |
---|
| 3905 | this.grid.getView().focusRow(this.last); |
---|
| 3906 | return true; |
---|
| 3907 | } |
---|
| 3908 | return false; |
---|
| 3909 | }, |
---|
| 3910 | |
---|
| 3911 | /** |
---|
| 3912 | * Returns true if there is a next record to select |
---|
| 3913 | * @return {Boolean} |
---|
| 3914 | */ |
---|
| 3915 | hasNext : function(){ |
---|
| 3916 | return this.last !== false && (this.last+1) < this.grid.store.getCount(); |
---|
| 3917 | }, |
---|
| 3918 | |
---|
| 3919 | /** |
---|
| 3920 | * Returns true if there is a previous record to select |
---|
| 3921 | * @return {Boolean} |
---|
| 3922 | */ |
---|
| 3923 | hasPrevious : function(){ |
---|
| 3924 | return !!this.last; |
---|
| 3925 | }, |
---|
| 3926 | |
---|
| 3927 | |
---|
| 3928 | /** |
---|
| 3929 | * Returns the selected records |
---|
| 3930 | * @return {Array} Array of selected records |
---|
| 3931 | */ |
---|
| 3932 | getSelections : function(){ |
---|
| 3933 | return [].concat(this.selections.items); |
---|
| 3934 | }, |
---|
| 3935 | |
---|
| 3936 | /** |
---|
| 3937 | * Returns the first selected record. |
---|
| 3938 | * @return {Record} |
---|
| 3939 | */ |
---|
| 3940 | getSelected : function(){ |
---|
| 3941 | return this.selections.itemAt(0); |
---|
| 3942 | }, |
---|
| 3943 | |
---|
| 3944 | /** |
---|
| 3945 | * Calls the passed function with each selection. If the function returns |
---|
| 3946 | * <tt>false</tt>, iteration is stopped and this function returns |
---|
| 3947 | * <tt>false</tt>. Otherwise it returns <tt>true</tt>. |
---|
| 3948 | * @param {Function} fn |
---|
| 3949 | * @param {Object} scope (optional) |
---|
| 3950 | * @return {Boolean} true if all selections were iterated |
---|
| 3951 | */ |
---|
| 3952 | each : function(fn, scope){ |
---|
| 3953 | var s = this.getSelections(); |
---|
| 3954 | for(var i = 0, len = s.length; i < len; i++){ |
---|
| 3955 | if(fn.call(scope || this, s[i], i) === false){ |
---|
| 3956 | return false; |
---|
| 3957 | } |
---|
| 3958 | } |
---|
| 3959 | return true; |
---|
| 3960 | }, |
---|
| 3961 | |
---|
| 3962 | /** |
---|
| 3963 | * Clears all selections if the selection model |
---|
| 3964 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
| 3965 | * @param {Boolean} fast (optional) <tt>true</tt> to bypass the |
---|
| 3966 | * conditional checks and events described in {@link #deselectRow}. |
---|
| 3967 | */ |
---|
| 3968 | clearSelections : function(fast){ |
---|
| 3969 | if(this.isLocked()){ |
---|
| 3970 | return; |
---|
| 3971 | } |
---|
| 3972 | if(fast !== true){ |
---|
| 3973 | var ds = this.grid.store; |
---|
| 3974 | var s = this.selections; |
---|
| 3975 | s.each(function(r){ |
---|
| 3976 | this.deselectRow(ds.indexOfId(r.id)); |
---|
| 3977 | }, this); |
---|
| 3978 | s.clear(); |
---|
| 3979 | }else{ |
---|
| 3980 | this.selections.clear(); |
---|
| 3981 | } |
---|
| 3982 | this.last = false; |
---|
| 3983 | }, |
---|
| 3984 | |
---|
| 3985 | |
---|
| 3986 | /** |
---|
| 3987 | * Selects all rows if the selection model |
---|
| 3988 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
| 3989 | */ |
---|
| 3990 | selectAll : function(){ |
---|
| 3991 | if(this.isLocked()){ |
---|
| 3992 | return; |
---|
| 3993 | } |
---|
| 3994 | this.selections.clear(); |
---|
| 3995 | for(var i = 0, len = this.grid.store.getCount(); i < len; i++){ |
---|
| 3996 | this.selectRow(i, true); |
---|
| 3997 | } |
---|
| 3998 | }, |
---|
| 3999 | |
---|
| 4000 | /** |
---|
| 4001 | * Returns <tt>true</tt> if there is a selection. |
---|
| 4002 | * @return {Boolean} |
---|
| 4003 | */ |
---|
| 4004 | hasSelection : function(){ |
---|
| 4005 | return this.selections.length > 0; |
---|
| 4006 | }, |
---|
| 4007 | |
---|
| 4008 | /** |
---|
| 4009 | * Returns <tt>true</tt> if the specified row is selected. |
---|
| 4010 | * @param {Number/Record} index The record or index of the record to check |
---|
| 4011 | * @return {Boolean} |
---|
| 4012 | */ |
---|
| 4013 | isSelected : function(index){ |
---|
| 4014 | var r = typeof index == "number" ? this.grid.store.getAt(index) : index; |
---|
| 4015 | return (r && this.selections.key(r.id) ? true : false); |
---|
| 4016 | }, |
---|
| 4017 | |
---|
| 4018 | /** |
---|
| 4019 | * Returns <tt>true</tt> if the specified record id is selected. |
---|
| 4020 | * @param {String} id The id of record to check |
---|
| 4021 | * @return {Boolean} |
---|
| 4022 | */ |
---|
| 4023 | isIdSelected : function(id){ |
---|
| 4024 | return (this.selections.key(id) ? true : false); |
---|
| 4025 | }, |
---|
| 4026 | |
---|
| 4027 | // private |
---|
| 4028 | handleMouseDown : function(g, rowIndex, e){ |
---|
| 4029 | if(e.button !== 0 || this.isLocked()){ |
---|
| 4030 | return; |
---|
| 4031 | } |
---|
| 4032 | var view = this.grid.getView(); |
---|
| 4033 | if(e.shiftKey && !this.singleSelect && this.last !== false){ |
---|
| 4034 | var last = this.last; |
---|
| 4035 | this.selectRange(last, rowIndex, e.ctrlKey); |
---|
| 4036 | this.last = last; // reset the last |
---|
| 4037 | view.focusRow(rowIndex); |
---|
| 4038 | }else{ |
---|
| 4039 | var isSelected = this.isSelected(rowIndex); |
---|
| 4040 | if(e.ctrlKey && isSelected){ |
---|
| 4041 | this.deselectRow(rowIndex); |
---|
| 4042 | }else if(!isSelected || this.getCount() > 1){ |
---|
| 4043 | this.selectRow(rowIndex, e.ctrlKey || e.shiftKey); |
---|
| 4044 | view.focusRow(rowIndex); |
---|
| 4045 | } |
---|
| 4046 | } |
---|
| 4047 | }, |
---|
| 4048 | |
---|
| 4049 | /** |
---|
| 4050 | * Selects multiple rows. |
---|
| 4051 | * @param {Array} rows Array of the indexes of the row to select |
---|
| 4052 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep |
---|
| 4053 | * existing selections (defaults to <tt>false</tt>) |
---|
| 4054 | */ |
---|
| 4055 | selectRows : function(rows, keepExisting){ |
---|
| 4056 | if(!keepExisting){ |
---|
| 4057 | this.clearSelections(); |
---|
| 4058 | } |
---|
| 4059 | for(var i = 0, len = rows.length; i < len; i++){ |
---|
| 4060 | this.selectRow(rows[i], true); |
---|
| 4061 | } |
---|
| 4062 | }, |
---|
| 4063 | |
---|
| 4064 | /** |
---|
| 4065 | * Selects a range of rows if the selection model |
---|
| 4066 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
| 4067 | * All rows in between startRow and endRow are also selected. |
---|
| 4068 | * @param {Number} startRow The index of the first row in the range |
---|
| 4069 | * @param {Number} endRow The index of the last row in the range |
---|
| 4070 | * @param {Boolean} keepExisting (optional) True to retain existing selections |
---|
| 4071 | */ |
---|
| 4072 | selectRange : function(startRow, endRow, keepExisting){ |
---|
| 4073 | var i; |
---|
| 4074 | if(this.isLocked()){ |
---|
| 4075 | return; |
---|
| 4076 | } |
---|
| 4077 | if(!keepExisting){ |
---|
| 4078 | this.clearSelections(); |
---|
| 4079 | } |
---|
| 4080 | if(startRow <= endRow){ |
---|
| 4081 | for(i = startRow; i <= endRow; i++){ |
---|
| 4082 | this.selectRow(i, true); |
---|
| 4083 | } |
---|
| 4084 | }else{ |
---|
| 4085 | for(i = startRow; i >= endRow; i--){ |
---|
| 4086 | this.selectRow(i, true); |
---|
| 4087 | } |
---|
| 4088 | } |
---|
| 4089 | }, |
---|
| 4090 | |
---|
| 4091 | /** |
---|
| 4092 | * Deselects a range of rows if the selection model |
---|
| 4093 | * {@link Ext.grid.AbstractSelectionModel#isLocked is not locked}. |
---|
| 4094 | * All rows in between startRow and endRow are also deselected. |
---|
| 4095 | * @param {Number} startRow The index of the first row in the range |
---|
| 4096 | * @param {Number} endRow The index of the last row in the range |
---|
| 4097 | */ |
---|
| 4098 | deselectRange : function(startRow, endRow, preventViewNotify){ |
---|
| 4099 | if(this.isLocked()){ |
---|
| 4100 | return; |
---|
| 4101 | } |
---|
| 4102 | for(var i = startRow; i <= endRow; i++){ |
---|
| 4103 | this.deselectRow(i, preventViewNotify); |
---|
| 4104 | } |
---|
| 4105 | }, |
---|
| 4106 | |
---|
| 4107 | /** |
---|
| 4108 | * Selects a row. Before selecting a row, checks if the selection model |
---|
| 4109 | * {@link Ext.grid.AbstractSelectionModel#isLocked is locked} and fires the |
---|
| 4110 | * {@link #beforerowselect} event. If these checks are satisfied the row |
---|
| 4111 | * will be selected and followed up by firing the {@link #rowselect} and |
---|
| 4112 | * {@link #selectionchange} events. |
---|
| 4113 | * @param {Number} row The index of the row to select |
---|
| 4114 | * @param {Boolean} keepExisting (optional) <tt>true</tt> to keep existing selections |
---|
| 4115 | * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to |
---|
| 4116 | * prevent notifying the view (disables updating the selected appearance) |
---|
| 4117 | */ |
---|
| 4118 | selectRow : function(index, keepExisting, preventViewNotify){ |
---|
| 4119 | if(this.isLocked() || (index < 0 || index >= this.grid.store.getCount()) || (keepExisting && this.isSelected(index))){ |
---|
| 4120 | return; |
---|
| 4121 | } |
---|
| 4122 | var r = this.grid.store.getAt(index); |
---|
| 4123 | if(r && this.fireEvent("beforerowselect", this, index, keepExisting, r) !== false){ |
---|
| 4124 | if(!keepExisting || this.singleSelect){ |
---|
| 4125 | this.clearSelections(); |
---|
| 4126 | } |
---|
| 4127 | this.selections.add(r); |
---|
| 4128 | this.last = this.lastActive = index; |
---|
| 4129 | if(!preventViewNotify){ |
---|
| 4130 | this.grid.getView().onRowSelect(index); |
---|
| 4131 | } |
---|
| 4132 | this.fireEvent("rowselect", this, index, r); |
---|
| 4133 | this.fireEvent("selectionchange", this); |
---|
| 4134 | } |
---|
| 4135 | }, |
---|
| 4136 | |
---|
| 4137 | /** |
---|
| 4138 | * Deselects a row. Before deselecting a row, checks if the selection model |
---|
| 4139 | * {@link Ext.grid.AbstractSelectionModel#isLocked is locked}. |
---|
| 4140 | * If this check is satisfied the row will be deselected and followed up by |
---|
| 4141 | * firing the {@link #rowdeselect} and {@link #selectionchange} events. |
---|
| 4142 | * @param {Number} row The index of the row to deselect |
---|
| 4143 | * @param {Boolean} preventViewNotify (optional) Specify <tt>true</tt> to |
---|
| 4144 | * prevent notifying the view (disables updating the selected appearance) |
---|
| 4145 | */ |
---|
| 4146 | deselectRow : function(index, preventViewNotify){ |
---|
| 4147 | if(this.isLocked()){ |
---|
| 4148 | return; |
---|
| 4149 | } |
---|
| 4150 | if(this.last == index){ |
---|
| 4151 | this.last = false; |
---|
| 4152 | } |
---|
| 4153 | if(this.lastActive == index){ |
---|
| 4154 | this.lastActive = false; |
---|
| 4155 | } |
---|
| 4156 | var r = this.grid.store.getAt(index); |
---|
| 4157 | if(r){ |
---|
| 4158 | this.selections.remove(r); |
---|
| 4159 | if(!preventViewNotify){ |
---|
| 4160 | this.grid.getView().onRowDeselect(index); |
---|
| 4161 | } |
---|
| 4162 | this.fireEvent("rowdeselect", this, index, r); |
---|
| 4163 | this.fireEvent("selectionchange", this); |
---|
| 4164 | } |
---|
| 4165 | }, |
---|
| 4166 | |
---|
| 4167 | // private |
---|
| 4168 | restoreLast : function(){ |
---|
| 4169 | if(this._last){ |
---|
| 4170 | this.last = this._last; |
---|
| 4171 | } |
---|
| 4172 | }, |
---|
| 4173 | |
---|
| 4174 | // private |
---|
| 4175 | acceptsNav : function(row, col, cm){ |
---|
| 4176 | return !cm.isHidden(col) && cm.isCellEditable(col, row); |
---|
| 4177 | }, |
---|
| 4178 | |
---|
| 4179 | // private |
---|
| 4180 | onEditorKey : function(field, e){ |
---|
| 4181 | var k = e.getKey(), newCell, g = this.grid, ed = g.activeEditor; |
---|
| 4182 | var shift = e.shiftKey; |
---|
| 4183 | if(k == e.TAB){ |
---|
| 4184 | e.stopEvent(); |
---|
| 4185 | ed.completeEdit(); |
---|
| 4186 | if(shift){ |
---|
| 4187 | newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this); |
---|
| 4188 | }else{ |
---|
| 4189 | newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this); |
---|
| 4190 | } |
---|
| 4191 | }else if(k == e.ENTER){ |
---|
| 4192 | e.stopEvent(); |
---|
| 4193 | ed.completeEdit(); |
---|
| 4194 | if(this.moveEditorOnEnter !== false){ |
---|
| 4195 | if(shift){ |
---|
| 4196 | newCell = g.walkCells(ed.row - 1, ed.col, -1, this.acceptsNav, this); |
---|
| 4197 | }else{ |
---|
| 4198 | newCell = g.walkCells(ed.row + 1, ed.col, 1, this.acceptsNav, this); |
---|
| 4199 | } |
---|
| 4200 | } |
---|
| 4201 | }else if(k == e.ESC){ |
---|
| 4202 | ed.cancelEdit(); |
---|
| 4203 | } |
---|
| 4204 | if(newCell){ |
---|
| 4205 | g.startEditing(newCell[0], newCell[1]); |
---|
| 4206 | } |
---|
| 4207 | }, |
---|
| 4208 | |
---|
| 4209 | destroy: function(){ |
---|
| 4210 | if(this.rowNav){ |
---|
| 4211 | this.rowNav.disable(); |
---|
| 4212 | this.rowNav = null; |
---|
| 4213 | } |
---|
| 4214 | Ext.grid.RowSelectionModel.superclass.destroy.call(this); |
---|
| 4215 | } |
---|
| 4216 | });/** |
---|
| 4217 | * @class Ext.grid.Column |
---|
| 4218 | * <p>This class encapsulates column configuration data to be used in the initialization of a |
---|
| 4219 | * {@link Ext.grid.ColumnModel ColumnModel}.</p> |
---|
| 4220 | * <p>While subclasses are provided to render data in different ways, this class renders a passed |
---|
| 4221 | * data field unchanged and is usually used for textual columns.</p> |
---|
| 4222 | */ |
---|
| 4223 | Ext.grid.Column = function(config){ |
---|
| 4224 | Ext.apply(this, config); |
---|
| 4225 | |
---|
| 4226 | if(typeof this.renderer == 'string'){ |
---|
| 4227 | this.renderer = Ext.util.Format[this.renderer]; |
---|
| 4228 | } else if(Ext.isObject(this.renderer)){ |
---|
| 4229 | this.scope = this.renderer.scope; |
---|
| 4230 | this.renderer = this.renderer.fn; |
---|
| 4231 | } |
---|
| 4232 | this.renderer = this.renderer.createDelegate(this.scope || config); |
---|
| 4233 | |
---|
| 4234 | if(this.id === undefined){ |
---|
| 4235 | this.id = ++Ext.grid.Column.AUTO_ID; |
---|
| 4236 | } |
---|
| 4237 | if(this.editor){ |
---|
| 4238 | this.editor = Ext.create(this.editor, 'textfield'); |
---|
| 4239 | } |
---|
| 4240 | }; |
---|
| 4241 | |
---|
| 4242 | Ext.grid.Column.AUTO_ID = 0; |
---|
| 4243 | |
---|
| 4244 | Ext.grid.Column.prototype = { |
---|
| 4245 | /** |
---|
| 4246 | * @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured |
---|
| 4247 | * <tt>{@link #editor}</tt>. Set to <tt>false</tt> to initially disable editing on this column. |
---|
| 4248 | * The initial configuration may be dynamically altered using |
---|
| 4249 | * {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}. |
---|
| 4250 | */ |
---|
| 4251 | /** |
---|
| 4252 | * @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial |
---|
| 4253 | * ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all |
---|
| 4254 | * table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be |
---|
| 4255 | * unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre> |
---|
| 4256 | * Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre> |
---|
| 4257 | * So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre> |
---|
| 4258 | * The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this |
---|
| 4259 | * unique identifier. |
---|
| 4260 | */ |
---|
| 4261 | /** |
---|
| 4262 | * @cfg {String} header Optional. The header text to be used as innerHTML |
---|
| 4263 | * (html tags are accepted) to display in the Grid view. <b>Note</b>: to |
---|
| 4264 | * have a clickable header with no text displayed use <tt>' '</tt>. |
---|
| 4265 | */ |
---|
| 4266 | /** |
---|
| 4267 | * @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
| 4268 | * may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>, |
---|
| 4269 | * which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the |
---|
| 4270 | * group option in the header menu for the column. See also <code>{@link #groupName}</code>. |
---|
| 4271 | */ |
---|
| 4272 | /** |
---|
| 4273 | * @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
| 4274 | * may be used to specify the text with which to prefix the group field value in the group header line. |
---|
| 4275 | * See also {@link #groupRenderer} and |
---|
| 4276 | * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}. |
---|
| 4277 | */ |
---|
| 4278 | /** |
---|
| 4279 | * @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
| 4280 | * may be used to specify the function used to format the grouping field value for display in the group |
---|
| 4281 | * {@link #groupName header}. If a <tt><b>groupRenderer</b></tt> is not specified, the configured |
---|
| 4282 | * <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified |
---|
| 4283 | * the new value of the group field will be used.</p> |
---|
| 4284 | * <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be |
---|
| 4285 | * passed the following parameters: |
---|
| 4286 | * <div class="mdetail-params"><ul> |
---|
| 4287 | * <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li> |
---|
| 4288 | * <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li> |
---|
| 4289 | * <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data |
---|
| 4290 | * for the row which caused group change.</p></li> |
---|
| 4291 | * <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li> |
---|
| 4292 | * <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li> |
---|
| 4293 | * <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li> |
---|
| 4294 | * </ul></div></p> |
---|
| 4295 | * <p>The function should return a string value.</p> |
---|
| 4296 | */ |
---|
| 4297 | /** |
---|
| 4298 | * @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option |
---|
| 4299 | * may be used to specify the text to display when there is an empty group value. Defaults to the |
---|
| 4300 | * {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}. |
---|
| 4301 | */ |
---|
| 4302 | /** |
---|
| 4303 | * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the |
---|
| 4304 | * grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from |
---|
| 4305 | * which to draw the column's value.</p> |
---|
| 4306 | */ |
---|
| 4307 | /** |
---|
| 4308 | * @cfg {Number} width |
---|
| 4309 | * Optional. The initial width in pixels of the column. |
---|
| 4310 | * The width of each column can also be affected if any of the following are configured: |
---|
| 4311 | * <div class="mdetail-params"><ul> |
---|
| 4312 | * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li> |
---|
| 4313 | * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt> |
---|
| 4314 | * <div class="sub-desc"> |
---|
| 4315 | * <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be |
---|
| 4316 | * re-proportioned (based on the relative initial widths) to fill the width of the grid so |
---|
| 4317 | * that no horizontal scrollbar is shown.</p> |
---|
| 4318 | * </div></li> |
---|
| 4319 | * <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li> |
---|
| 4320 | * <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li> |
---|
| 4321 | * <br><p><b>Note</b>: when the width of each column is determined, a space on the right side |
---|
| 4322 | * is reserved for the vertical scrollbar. The |
---|
| 4323 | * {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt> |
---|
| 4324 | * can be modified to reduce or eliminate the reserved offset.</p> |
---|
| 4325 | */ |
---|
| 4326 | /** |
---|
| 4327 | * @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column. |
---|
| 4328 | * Defaults to the value of the {@link #defaultSortable} property. |
---|
| 4329 | * Whether local/remote sorting is used is specified in {@link Ext.data.Store#remoteSort}. |
---|
| 4330 | */ |
---|
| 4331 | /** |
---|
| 4332 | * @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>. |
---|
| 4333 | */ |
---|
| 4334 | /** |
---|
| 4335 | * @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>. |
---|
| 4336 | */ |
---|
| 4337 | /** |
---|
| 4338 | * @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>. |
---|
| 4339 | */ |
---|
| 4340 | /** |
---|
| 4341 | * @cfg {Boolean} hidden Optional. <tt>true</tt> to hide the column. Defaults to <tt>false</tt>. |
---|
| 4342 | */ |
---|
| 4343 | /** |
---|
| 4344 | * @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips |
---|
| 4345 | * are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the |
---|
| 4346 | * header's HTML title attribute. Defaults to ''. |
---|
| 4347 | */ |
---|
| 4348 | /** |
---|
| 4349 | * @cfg {Mixed} renderer |
---|
| 4350 | * <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p> |
---|
| 4351 | * <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value, |
---|
| 4352 | * appearance, etc.) before it is rendered). This may be specified in either of three ways: |
---|
| 4353 | * <div class="mdetail-params"><ul> |
---|
| 4354 | * <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li> |
---|
| 4355 | * <li>A string which references a property name of the {@link Ext.util.Format} class which |
---|
| 4356 | * provides a renderer function.</li> |
---|
| 4357 | * <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt> |
---|
| 4358 | * reference) e.g.:<pre style="margin-left:1.2em"><code> |
---|
| 4359 | { |
---|
| 4360 | fn: this.gridRenderer, |
---|
| 4361 | scope: this |
---|
| 4362 | } |
---|
| 4363 | </code></pre></li></ul></div> |
---|
| 4364 | * If not specified, the default renderer uses the raw data value.</p> |
---|
| 4365 | * <p>For information about the renderer function (passed parameters, etc.), see |
---|
| 4366 | * {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code> |
---|
| 4367 | var companyColumn = { |
---|
| 4368 | header: 'Company Name', |
---|
| 4369 | dataIndex: 'company', |
---|
| 4370 | renderer: function(value, metaData, record, rowIndex, colIndex, store) { |
---|
| 4371 | // provide the logic depending on business rules |
---|
| 4372 | // name of your own choosing to manipulate the cell depending upon |
---|
| 4373 | // the data in the underlying Record object. |
---|
| 4374 | if (value == 'whatever') { |
---|
| 4375 | //metaData.css : String : A CSS class name to add to the TD element of the cell. |
---|
| 4376 | //metaData.attr : String : An html attribute definition string to apply to |
---|
| 4377 | // the data container element within the table |
---|
| 4378 | // cell (e.g. 'style="color:red;"'). |
---|
| 4379 | metaData.css = 'name-of-css-class-you-will-define'; |
---|
| 4380 | } |
---|
| 4381 | return value; |
---|
| 4382 | } |
---|
| 4383 | } |
---|
| 4384 | * </code></pre> |
---|
| 4385 | * See also {@link #scope}. |
---|
| 4386 | */ |
---|
| 4387 | /** |
---|
| 4388 | * @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass |
---|
| 4389 | * type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily |
---|
| 4390 | * configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are: |
---|
| 4391 | * <div class="mdetail-params"><ul> |
---|
| 4392 | * <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li> |
---|
| 4393 | * <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li> |
---|
| 4394 | * <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li> |
---|
| 4395 | * <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li> |
---|
| 4396 | * <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li> |
---|
| 4397 | * </ul></div> |
---|
| 4398 | * <p>Configuration properties for the specified <code>xtype</code> may be specified with |
---|
| 4399 | * the Column configuration properties, for example:</p> |
---|
| 4400 | * <pre><code> |
---|
| 4401 | var grid = new Ext.grid.GridPanel({ |
---|
| 4402 | ... |
---|
| 4403 | columns: [{ |
---|
| 4404 | header: 'Last Updated', |
---|
| 4405 | dataIndex: 'lastChange', |
---|
| 4406 | width: 85, |
---|
| 4407 | sortable: true, |
---|
| 4408 | //renderer: Ext.util.Format.dateRenderer('m/d/Y'), |
---|
| 4409 | xtype: 'datecolumn', // use xtype instead of renderer |
---|
| 4410 | format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn} |
---|
| 4411 | }, { |
---|
| 4412 | ... |
---|
| 4413 | }] |
---|
| 4414 | }); |
---|
| 4415 | * </code></pre> |
---|
| 4416 | */ |
---|
| 4417 | /** |
---|
| 4418 | * @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the |
---|
| 4419 | * renderer. Defaults to the Column configuration object. |
---|
| 4420 | */ |
---|
| 4421 | /** |
---|
| 4422 | * @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined. |
---|
| 4423 | */ |
---|
| 4424 | /** |
---|
| 4425 | * @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column |
---|
| 4426 | * (excluding headers). Defaults to undefined. |
---|
| 4427 | */ |
---|
| 4428 | /** |
---|
| 4429 | * @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column |
---|
| 4430 | * (defaults to true). To disallow column hiding globally for all columns in the grid, use |
---|
| 4431 | * {@link Ext.grid.GridPanel#enableColumnHide} instead. |
---|
| 4432 | */ |
---|
| 4433 | /** |
---|
| 4434 | * @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column |
---|
| 4435 | * if editing is supported by the grid. See <tt>{@link #editable}</tt> also. |
---|
| 4436 | */ |
---|
| 4437 | |
---|
| 4438 | // private. Used by ColumnModel to avoid reprocessing |
---|
| 4439 | isColumn : true, |
---|
| 4440 | /** |
---|
| 4441 | * Optional. A function which returns displayable data when passed the following parameters: |
---|
| 4442 | * <div class="mdetail-params"><ul> |
---|
| 4443 | * <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li> |
---|
| 4444 | * <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul> |
---|
| 4445 | * <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li> |
---|
| 4446 | * <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container |
---|
| 4447 | * element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li> |
---|
| 4448 | * <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was |
---|
| 4449 | * extracted.</p></li> |
---|
| 4450 | * <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li> |
---|
| 4451 | * <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li> |
---|
| 4452 | * <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record |
---|
| 4453 | * was extracted.</p></li> |
---|
| 4454 | * </ul></div> |
---|
| 4455 | * @property renderer |
---|
| 4456 | * @type Function |
---|
| 4457 | */ |
---|
| 4458 | renderer : function(value){ |
---|
| 4459 | if(typeof value == 'string' && value.length < 1){ |
---|
| 4460 | return ' '; |
---|
| 4461 | } |
---|
| 4462 | return value; |
---|
| 4463 | }, |
---|
| 4464 | |
---|
| 4465 | // private |
---|
| 4466 | getEditor: function(rowIndex){ |
---|
| 4467 | return this.editable !== false ? this.editor : null; |
---|
| 4468 | }, |
---|
| 4469 | |
---|
| 4470 | /** |
---|
| 4471 | * Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field} |
---|
| 4472 | * used to edit the cell. |
---|
| 4473 | * @param {Number} rowIndex The row index |
---|
| 4474 | * @return {Ext.Editor} |
---|
| 4475 | */ |
---|
| 4476 | getCellEditor: function(rowIndex){ |
---|
| 4477 | var editor = this.getEditor(rowIndex); |
---|
| 4478 | if(editor){ |
---|
| 4479 | if(!editor.startEdit){ |
---|
| 4480 | if(!editor.gridEditor){ |
---|
| 4481 | editor.gridEditor = new Ext.grid.GridEditor(editor); |
---|
| 4482 | } |
---|
| 4483 | return editor.gridEditor; |
---|
| 4484 | }else if(editor.startEdit){ |
---|
| 4485 | return editor; |
---|
| 4486 | } |
---|
| 4487 | } |
---|
| 4488 | return null; |
---|
| 4489 | } |
---|
| 4490 | }; |
---|
| 4491 | |
---|
| 4492 | /** |
---|
| 4493 | * @class Ext.grid.BooleanColumn |
---|
| 4494 | * @extends Ext.grid.Column |
---|
| 4495 | * <p>A Column definition class which renders boolean data fields. See the {@link Ext.grid.ColumnModel#xtype xtype} |
---|
| 4496 | * config option of {@link Ext.grid.ColumnModel} for more details.</p> |
---|
| 4497 | */ |
---|
| 4498 | Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, { |
---|
| 4499 | /** |
---|
| 4500 | * @cfg {String} trueText |
---|
| 4501 | * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>). |
---|
| 4502 | */ |
---|
| 4503 | trueText: 'true', |
---|
| 4504 | /** |
---|
| 4505 | * @cfg {String} falseText |
---|
| 4506 | * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to |
---|
| 4507 | * <tt>'false'</tt>). |
---|
| 4508 | */ |
---|
| 4509 | falseText: 'false', |
---|
| 4510 | /** |
---|
| 4511 | * @cfg {String} undefinedText |
---|
| 4512 | * The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>). |
---|
| 4513 | */ |
---|
| 4514 | undefinedText: ' ', |
---|
| 4515 | |
---|
| 4516 | constructor: function(cfg){ |
---|
| 4517 | Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg); |
---|
| 4518 | var t = this.trueText, f = this.falseText, u = this.undefinedText; |
---|
| 4519 | this.renderer = function(v){ |
---|
| 4520 | if(v === undefined){ |
---|
| 4521 | return u; |
---|
| 4522 | } |
---|
| 4523 | if(!v || v === 'false'){ |
---|
| 4524 | return f; |
---|
| 4525 | } |
---|
| 4526 | return t; |
---|
| 4527 | }; |
---|
| 4528 | } |
---|
| 4529 | }); |
---|
| 4530 | |
---|
| 4531 | /** |
---|
| 4532 | * @class Ext.grid.NumberColumn |
---|
| 4533 | * @extends Ext.grid.Column |
---|
| 4534 | * <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the |
---|
| 4535 | * {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more details.</p> |
---|
| 4536 | */ |
---|
| 4537 | Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, { |
---|
| 4538 | /** |
---|
| 4539 | * @cfg {String} format |
---|
| 4540 | * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column |
---|
| 4541 | * (defaults to <tt>'0,000.00'</tt>). |
---|
| 4542 | */ |
---|
| 4543 | format : '0,000.00', |
---|
| 4544 | constructor: function(cfg){ |
---|
| 4545 | Ext.grid.NumberColumn.superclass.constructor.call(this, cfg); |
---|
| 4546 | this.renderer = Ext.util.Format.numberRenderer(this.format); |
---|
| 4547 | } |
---|
| 4548 | }); |
---|
| 4549 | |
---|
| 4550 | /** |
---|
| 4551 | * @class Ext.grid.DateColumn |
---|
| 4552 | * @extends Ext.grid.Column |
---|
| 4553 | * <p>A Column definition class which renders a passed date according to the default locale, or a configured |
---|
| 4554 | * {@link #format}. See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} |
---|
| 4555 | * for more details.</p> |
---|
| 4556 | */ |
---|
| 4557 | Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, { |
---|
| 4558 | /** |
---|
| 4559 | * @cfg {String} format |
---|
| 4560 | * A formatting string as used by {@link Date#format} to format a Date for this Column |
---|
| 4561 | * (defaults to <tt>'m/d/Y'</tt>). |
---|
| 4562 | */ |
---|
| 4563 | format : 'm/d/Y', |
---|
| 4564 | constructor: function(cfg){ |
---|
| 4565 | Ext.grid.DateColumn.superclass.constructor.call(this, cfg); |
---|
| 4566 | this.renderer = Ext.util.Format.dateRenderer(this.format); |
---|
| 4567 | } |
---|
| 4568 | }); |
---|
| 4569 | |
---|
| 4570 | /** |
---|
| 4571 | * @class Ext.grid.TemplateColumn |
---|
| 4572 | * @extends Ext.grid.Column |
---|
| 4573 | * <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s |
---|
| 4574 | * {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}. |
---|
| 4575 | * See the {@link Ext.grid.ColumnModel#xtype xtype} config option of {@link Ext.grid.ColumnModel} for more |
---|
| 4576 | * details.</p> |
---|
| 4577 | */ |
---|
| 4578 | Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, { |
---|
| 4579 | /** |
---|
| 4580 | * @cfg {String/XTemplate} tpl |
---|
| 4581 | * An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a |
---|
| 4582 | * {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value. |
---|
| 4583 | */ |
---|
| 4584 | constructor: function(cfg){ |
---|
| 4585 | Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg); |
---|
| 4586 | var tpl = typeof Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl); |
---|
| 4587 | this.renderer = function(value, p, r){ |
---|
| 4588 | return tpl.apply(r.data); |
---|
| 4589 | }; |
---|
| 4590 | this.tpl = tpl; |
---|
| 4591 | } |
---|
| 4592 | }); |
---|
| 4593 | |
---|
| 4594 | /* |
---|
| 4595 | * @property types |
---|
| 4596 | * @type Object |
---|
| 4597 | * @member Ext.grid.Column |
---|
| 4598 | * @static |
---|
| 4599 | * <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced |
---|
| 4600 | * by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p> |
---|
| 4601 | * <p>This contains the following properties</p><div class="mdesc-details"><ul> |
---|
| 4602 | * <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li> |
---|
| 4603 | * <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li> |
---|
| 4604 | * <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li> |
---|
| 4605 | * <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li> |
---|
| 4606 | * <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li> |
---|
| 4607 | * </ul></div> |
---|
| 4608 | */ |
---|
| 4609 | Ext.grid.Column.types = { |
---|
| 4610 | gridcolumn : Ext.grid.Column, |
---|
| 4611 | booleancolumn: Ext.grid.BooleanColumn, |
---|
| 4612 | numbercolumn: Ext.grid.NumberColumn, |
---|
| 4613 | datecolumn: Ext.grid.DateColumn, |
---|
| 4614 | templatecolumn: Ext.grid.TemplateColumn |
---|
| 4615 | };/** |
---|
| 4616 | * @class Ext.grid.RowNumberer |
---|
| 4617 | * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides |
---|
| 4618 | * an automatic row numbering column. |
---|
| 4619 | * <br>Usage:<br> |
---|
| 4620 | <pre><code> |
---|
| 4621 | // This is a typical column config with the first column providing row numbers |
---|
| 4622 | var colModel = new Ext.grid.ColumnModel([ |
---|
| 4623 | new Ext.grid.RowNumberer(), |
---|
| 4624 | {header: "Name", width: 80, sortable: true}, |
---|
| 4625 | {header: "Code", width: 50, sortable: true}, |
---|
| 4626 | {header: "Description", width: 200, sortable: true} |
---|
| 4627 | ]); |
---|
| 4628 | </code></pre> |
---|
| 4629 | * @constructor |
---|
| 4630 | * @param {Object} config The configuration options |
---|
| 4631 | */ |
---|
| 4632 | Ext.grid.RowNumberer = function(config){ |
---|
| 4633 | Ext.apply(this, config); |
---|
| 4634 | if(this.rowspan){ |
---|
| 4635 | this.renderer = this.renderer.createDelegate(this); |
---|
| 4636 | } |
---|
| 4637 | }; |
---|
| 4638 | |
---|
| 4639 | Ext.grid.RowNumberer.prototype = { |
---|
| 4640 | /** |
---|
| 4641 | * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the row |
---|
| 4642 | * number column (defaults to ''). |
---|
| 4643 | */ |
---|
| 4644 | header: "", |
---|
| 4645 | /** |
---|
| 4646 | * @cfg {Number} width The default width in pixels of the row number column (defaults to 23). |
---|
| 4647 | */ |
---|
| 4648 | width: 23, |
---|
| 4649 | /** |
---|
| 4650 | * @cfg {Boolean} sortable True if the row number column is sortable (defaults to false). |
---|
| 4651 | * @hide |
---|
| 4652 | */ |
---|
| 4653 | sortable: false, |
---|
| 4654 | |
---|
| 4655 | // private |
---|
| 4656 | fixed:true, |
---|
| 4657 | menuDisabled:true, |
---|
| 4658 | dataIndex: '', |
---|
| 4659 | id: 'numberer', |
---|
| 4660 | rowspan: undefined, |
---|
| 4661 | |
---|
| 4662 | // private |
---|
| 4663 | renderer : function(v, p, record, rowIndex){ |
---|
| 4664 | if(this.rowspan){ |
---|
| 4665 | p.cellAttr = 'rowspan="'+this.rowspan+'"'; |
---|
| 4666 | } |
---|
| 4667 | return rowIndex+1; |
---|
| 4668 | } |
---|
| 4669 | };/** |
---|
| 4670 | * @class Ext.grid.CheckboxSelectionModel |
---|
| 4671 | * @extends Ext.grid.RowSelectionModel |
---|
| 4672 | * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows. |
---|
| 4673 | * @constructor |
---|
| 4674 | * @param {Object} config The configuration options |
---|
| 4675 | */ |
---|
| 4676 | Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, { |
---|
| 4677 | |
---|
| 4678 | /** |
---|
| 4679 | * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the |
---|
| 4680 | * checkbox column (defaults to <tt>false</tt>). |
---|
| 4681 | */ |
---|
| 4682 | /** |
---|
| 4683 | * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the |
---|
| 4684 | * checkbox column. Defaults to:<pre><code> |
---|
| 4685 | * '<div class="x-grid3-hd-checker">&#160;</div>'</tt> |
---|
| 4686 | * </code></pre> |
---|
| 4687 | * The default CSS class of <tt>'x-grid3-hd-checker'</tt> displays a checkbox in the header |
---|
| 4688 | * and provides support for automatic check all/none behavior on header click. This string |
---|
| 4689 | * can be replaced by any valid HTML fragment, including a simple text string (e.g., |
---|
| 4690 | * <tt>'Select Rows'</tt>), but the automatic check all/none behavior will only work if the |
---|
| 4691 | * <tt>'x-grid3-hd-checker'</tt> class is supplied. |
---|
| 4692 | */ |
---|
| 4693 | header: '<div class="x-grid3-hd-checker"> </div>', |
---|
| 4694 | /** |
---|
| 4695 | * @cfg {Number} width The default width in pixels of the checkbox column (defaults to <tt>20</tt>). |
---|
| 4696 | */ |
---|
| 4697 | width: 20, |
---|
| 4698 | /** |
---|
| 4699 | * @cfg {Boolean} sortable <tt>true</tt> if the checkbox column is sortable (defaults to |
---|
| 4700 | * <tt>false</tt>). |
---|
| 4701 | */ |
---|
| 4702 | sortable: false, |
---|
| 4703 | |
---|
| 4704 | // private |
---|
| 4705 | menuDisabled:true, |
---|
| 4706 | fixed:true, |
---|
| 4707 | dataIndex: '', |
---|
| 4708 | id: 'checker', |
---|
| 4709 | |
---|
| 4710 | constructor: function(){ |
---|
| 4711 | Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments); |
---|
| 4712 | |
---|
| 4713 | if(this.checkOnly){ |
---|
| 4714 | this.handleMouseDown = Ext.emptyFn; |
---|
| 4715 | } |
---|
| 4716 | }, |
---|
| 4717 | |
---|
| 4718 | // private |
---|
| 4719 | initEvents : function(){ |
---|
| 4720 | Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this); |
---|
| 4721 | this.grid.on('render', function(){ |
---|
| 4722 | var view = this.grid.getView(); |
---|
| 4723 | view.mainBody.on('mousedown', this.onMouseDown, this); |
---|
| 4724 | Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this); |
---|
| 4725 | |
---|
| 4726 | }, this); |
---|
| 4727 | }, |
---|
| 4728 | |
---|
| 4729 | // private |
---|
| 4730 | onMouseDown : function(e, t){ |
---|
| 4731 | if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click |
---|
| 4732 | e.stopEvent(); |
---|
| 4733 | var row = e.getTarget('.x-grid3-row'); |
---|
| 4734 | if(row){ |
---|
| 4735 | var index = row.rowIndex; |
---|
| 4736 | if(this.isSelected(index)){ |
---|
| 4737 | this.deselectRow(index); |
---|
| 4738 | }else{ |
---|
| 4739 | this.selectRow(index, true); |
---|
| 4740 | } |
---|
| 4741 | } |
---|
| 4742 | } |
---|
| 4743 | }, |
---|
| 4744 | |
---|
| 4745 | // private |
---|
| 4746 | onHdMouseDown : function(e, t){ |
---|
| 4747 | if(t.className == 'x-grid3-hd-checker'){ |
---|
| 4748 | e.stopEvent(); |
---|
| 4749 | var hd = Ext.fly(t.parentNode); |
---|
| 4750 | var isChecked = hd.hasClass('x-grid3-hd-checker-on'); |
---|
| 4751 | if(isChecked){ |
---|
| 4752 | hd.removeClass('x-grid3-hd-checker-on'); |
---|
| 4753 | this.clearSelections(); |
---|
| 4754 | }else{ |
---|
| 4755 | hd.addClass('x-grid3-hd-checker-on'); |
---|
| 4756 | this.selectAll(); |
---|
| 4757 | } |
---|
| 4758 | } |
---|
| 4759 | }, |
---|
| 4760 | |
---|
| 4761 | // private |
---|
| 4762 | renderer : function(v, p, record){ |
---|
| 4763 | return '<div class="x-grid3-row-checker"> </div>'; |
---|
| 4764 | } |
---|
| 4765 | }); |
---|