docs/source/Panel2.html

   1 <!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-grid.Panel'>/**
   2 </span> * @author Aaron Conran
   3  * @class Ext.grid.Panel
   4  * @extends Ext.panel.Table
   5  *
   6  * Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged
   7  * `&lt;table&gt;`, GridPanel makes it easy to fetch, sort and filter large amounts of data.
   8  *
   9  * Grids are composed of 2 main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render.
  10  *
  11  * {@img Ext.grid.Panel/Ext.grid.Panel1.png Ext.grid.Panel component}
  12  *
  13  * ## Basic GridPanel
  14  *
  15  *     Ext.create('Ext.data.Store', {
  16  *         storeId:'simpsonsStore',
  17  *         fields:['name', 'email', 'phone'],
  18  *         data:{'items':[
  19  *             {&quot;name&quot;:&quot;Lisa&quot;, &quot;email&quot;:&quot;lisa@simpsons.com&quot;, &quot;phone&quot;:&quot;555-111-1224&quot;},
  20  *             {&quot;name&quot;:&quot;Bart&quot;, &quot;email&quot;:&quot;bart@simpsons.com&quot;, &quot;phone&quot;:&quot;555--222-1234&quot;},
  21  *             {&quot;name&quot;:&quot;Homer&quot;, &quot;email&quot;:&quot;home@simpsons.com&quot;, &quot;phone&quot;:&quot;555-222-1244&quot;},
  22  *             {&quot;name&quot;:&quot;Marge&quot;, &quot;email&quot;:&quot;marge@simpsons.com&quot;, &quot;phone&quot;:&quot;555-222-1254&quot;}
  23  *         ]},
  24  *         proxy: {
  25  *             type: 'memory',
  26  *             reader: {
  27  *                 type: 'json',
  28  *                 root: 'items'
  29  *             }
  30  *         }
  31  *     });
  32  *
  33  *     Ext.create('Ext.grid.Panel', {
  34  *         title: 'Simpsons',
  35  *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
  36  *         columns: [
  37  *             {header: 'Name',  dataIndex: 'name'},
  38  *             {header: 'Email', dataIndex: 'email', flex:1},
  39  *             {header: 'Phone', dataIndex: 'phone'}
  40  *         ],
  41  *         height: 200,
  42  *         width: 400,
  43  *         renderTo: Ext.getBody()
  44  *     });
  45  *
  46  * The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.
  47  * In most apps we would be placing the grid inside another container and wouldn't need to use the
  48  * {@link #height}, {@link #width} and {@link #renderTo} configurations but they are included here to make it easy to get
  49  * up and running.
  50  *
  51  * The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath
  52  * and finally the grid rows under the headers.
  53  *
  54  * ## Configuring columns
  55  *
  56  * By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each
  57  * column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.
  58  * It's easy to configure each column - here we use the same example as above and just modify the columns config:
  59  *
  60  *     columns: [
  61  *         {
  62  *             header: 'Name',
  63  *             dataIndex: 'name',
  64  *             sortable: false,
  65  *             hideable: false,
  66  *             flex: 1
  67  *         },
  68  *         {
  69  *             header: 'Email',
  70  *             dataIndex: 'email',
  71  *             hidden: true
  72  *         },
  73  *         {
  74  *             header: 'Phone',
  75  *             dataIndex: 'phone',
  76  *             width: 100
  77  *         }
  78  *     ]
  79  *
  80  * We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email
  81  * column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to
  82  * a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns
  83  * have been accounted for. See the {@link Ext.grid.column.Column column docs} for more details.
  84  *
  85  * ## Renderers
  86  *
  87  * As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is
  88  * tied to a particular column and is passed the value that would be rendered into each cell in that column. For example,
  89  * we could define a renderer function for the email column to turn each email address into a mailto link:
  90  *
  91  *     columns: [
  92  *         {
  93  *             header: 'Email',
  94  *             dataIndex: 'email',
  95  *             renderer: function(value) {
  96  *                 return Ext.String.format('&lt;a href=&quot;mailto:{0}&quot;&gt;{1}&lt;/a&gt;', value, value);
  97  *             }
  98  *         }
  99  *     ]
 100  *
 101  * See the {@link Ext.grid.column.Column column docs} for more information on renderers.
 102  *
 103  * ## Selection Models
 104  *
 105  * Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or
 106  * update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of
 107  * the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and
 108  * CellSelectionModel, where individual cells are selected.
 109  *
 110  * Grids use a Row Selection Model by default, but this is easy to customise like so:
 111  *
 112  *     Ext.create('Ext.grid.Panel', {
 113  *         selType: 'cellmodel',
 114  *         store: ...
 115  *     });
 116  *
 117  * Specifying the `cellmodel` changes a couple of things. Firstly, clicking on a cell now
 118  * selects just that cell (using a {@link Ext.selection.RowModel rowmodel} will select the entire row), and secondly the
 119  * keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in
 120  * conjunction with editing.
 121  *
 122  * {@img Ext.grid.Panel/Ext.grid.Panel2.png Ext.grid.Panel cell editing}
 123  *
 124  * ## Editing
 125  *
 126  * Grid has built-in support for in-line editing. There are two chief editing modes - cell editing and row editing. Cell
 127  * editing is easy to add to your existing column setup - here we'll just modify the example above to include an editor
 128  * on both the name and the email columns:
 129  *
 130  *     Ext.create('Ext.grid.Panel', {
 131  *         title: 'Simpsons',
 132  *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
 133  *         columns: [
 134  *             {header: 'Name',  dataIndex: 'name', field: 'textfield'},
 135  *             {header: 'Email', dataIndex: 'email', flex:1,
 136  *                 field:{
 137  *                     xtype:'textfield',
 138  *                     allowBlank:false
 139  *                 }
 140  *             },
 141  *             {header: 'Phone', dataIndex: 'phone'}
 142  *         ],
 143  *         selType: 'cellmodel',
 144  *         plugins: [
 145  *             Ext.create('Ext.grid.plugin.CellEditing', {
 146  *                 clicksToEdit: 1
 147  *             })
 148  *         ],
 149  *         height: 200,
 150  *         width: 400,
 151  *         renderTo: Ext.getBody()
 152  *     });
 153  *
 154  * This requires a little explanation. We're passing in {@link #store store} and {@link #columns columns} as normal, but
 155  * this time we've also specified a {@link #field field} on two of our columns. For the Name column we just want a default
 156  * textfield to edit the value, so we specify 'textfield'. For the Email column we customized the editor slightly by
 157  * passing allowBlank: false, which will provide inline validation.
 158  *
 159  * To support cell editing, we also specified that the grid should use the 'cellmodel' {@link #selType}, and created an
 160  * instance of the {@link Ext.grid.plugin.CellEditing CellEditing plugin}, which we configured to activate each editor after a
 161  * single click.
 162  *
 163  * {@img Ext.grid.Panel/Ext.grid.Panel3.png Ext.grid.Panel row editing}
 164  *
 165  * ## Row Editing
 166  *
 167  * The other type of editing is row-based editing, using the RowEditor component. This enables you to edit an entire row
 168  * at a time, rather than editing cell by cell. Row Editing works in exactly the same way as cell editing, all we need to
 169  * do is change the plugin type to {@link Ext.grid.plugin.RowEditing}, and set the selType to 'rowmodel':
 170  *
 171  *     Ext.create('Ext.grid.Panel', {
 172  *         title: 'Simpsons',
 173  *         store: Ext.data.StoreManager.lookup('simpsonsStore'),
 174  *         columns: [
 175  *             {header: 'Name',  dataIndex: 'name', field: 'textfield'},
 176  *             {header: 'Email', dataIndex: 'email', flex:1,
 177  *                 field:{
 178  *                     xtype:'textfield',
 179  *                     allowBlank:false
 180  *                 }
 181  *             },
 182  *             {header: 'Phone', dataIndex: 'phone'}
 183  *         ],
 184  *         selType: 'rowmodel',
 185  *         plugins: [
 186  *             Ext.create('Ext.grid.plugin.RowEditing', {
 187  *                 clicksToEdit: 1
 188  *             })
 189  *         ],
 190  *         height: 200,
 191  *         width: 400,
 192  *         renderTo: Ext.getBody()
 193  *     });
 194  *
 195  * Again we passed some configuration to our {@link Ext.grid.plugin.RowEditing} plugin, and now when we click each row a row
 196  * editor will appear and enable us to edit each of the columns we have specified an editor for.
 197  *
 198  * ## Sorting &amp; Filtering
 199  *
 200  * Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and filtering capabilities. It's
 201  * easy to set up a grid to be sorted from the start:
 202  *
 203  *     var myGrid = Ext.create('Ext.grid.Panel', {
 204  *         store: {
 205  *             fields: ['name', 'email', 'phone'],
 206  *             sorters: ['name', 'phone']
 207  *         },
 208  *         columns: [
 209  *             {text: 'Name',  dataIndex: 'name'},
 210  *             {text: 'Email', dataIndex: 'email'}
 211  *         ]
 212  *     });
 213  *
 214  * Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on
 215  * more than one field at run time it's easy to do so by adding new sorters to the store:
 216  *
 217  *     myGrid.store.sort([
 218  *         {property: 'name',  direction: 'ASC'},
 219  *         {property: 'email', direction: 'DESC'},
 220  *     ]);
 221  *
 222  * {@img Ext.grid.Panel/Ext.grid.Panel4.png Ext.grid.Panel grouping}
 223  *
 224  * ## Grouping
 225  *
 226  * Grid supports the grouping of rows by any field. For example if we had a set of employee records, we might want to
 227  * group by the department that each employee works in. Here's how we might set that up:
 228  *
 229  *     var store = Ext.create('Ext.data.Store', {
 230  *         storeId:'employeeStore',
 231  *         fields:['name', 'senority', 'department'],
 232  *         groupField: 'department',
 233  *         data:{'employees':[
 234  *             {&quot;name&quot;:&quot;Michael Scott&quot;, &quot;senority&quot;:7, &quot;department&quot;:&quot;Manangement&quot;},
 235  *             {&quot;name&quot;:&quot;Dwight Schrute&quot;, &quot;senority&quot;:2, &quot;department&quot;:&quot;Sales&quot;},
 236  *             {&quot;name&quot;:&quot;Jim Halpert&quot;, &quot;senority&quot;:3, &quot;department&quot;:&quot;Sales&quot;},
 237  *             {&quot;name&quot;:&quot;Kevin Malone&quot;, &quot;senority&quot;:4, &quot;department&quot;:&quot;Accounting&quot;},
 238  *             {&quot;name&quot;:&quot;Angela Martin&quot;, &quot;senority&quot;:5, &quot;department&quot;:&quot;Accounting&quot;}
 239  *         ]},
 240  *         proxy: {
 241  *             type: 'memory',
 242  *             reader: {
 243  *                 type: 'json',
 244  *                 root: 'employees'
 245  *             }
 246  *         }
 247  *     });
 248  *
 249  *     Ext.create('Ext.grid.Panel', {
 250  *         title: 'Employees',
 251  *         store: Ext.data.StoreManager.lookup('employeeStore'),
 252  *         columns: [
 253  *             {header: 'Name',  dataIndex: 'name'},
 254  *             {header: 'Senority', dataIndex: 'senority'}
 255  *         ],
 256  *         features: [{ftype:'grouping'}],
 257  *         width: 200,
 258  *         height: 275,
 259  *         renderTo: Ext.getBody()
 260  *     });
 261  *
 262  * ## Infinite Scrolling
 263  *
 264  * Grid supports infinite scrolling as an alternative to using a paging toolbar. Your users can scroll through thousands
 265  * of records without the performance penalties of renderering all the records on screen at once. The grid should be bound
 266  * to a store with a pageSize specified.
 267  *
 268  *     var grid = Ext.create('Ext.grid.Panel', {
 269  *         // Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
 270  *         verticalScrollerType: 'paginggridscroller',
 271  *         // do not reset the scrollbar when the view refreshs
 272  *         invalidateScrollerOnRefresh: false,
 273  *         // infinite scrolling does not support selection
 274  *         disableSelection: true,
 275  *         // ...
 276  *     });
 277  *
 278  * ## Paging
 279  *
 280  * Grid supports paging through large sets of data via a PagingToolbar or PagingGridScroller (see the Infinite Scrolling section above).
 281  * To leverage paging via a toolbar or scroller, you need to set a pageSize configuration on the Store.
 282  *
 283  *     var itemsPerPage = 2;   // set the number of items you want per page
 284  *
 285  *     var store = Ext.create('Ext.data.Store', {
 286  *         id:'simpsonsStore',
 287  *         autoLoad: false,
 288  *         fields:['name', 'email', 'phone'],
 289  *         pageSize: itemsPerPage, // items per page
 290  *         proxy: {
 291  *             type: 'ajax',
 292  *             url: 'pagingstore.js',  // url that will load data with respect to start and limit params
 293  *             reader: {
 294  *                 type: 'json',
 295  *                 root: 'items',
 296  *                 totalProperty: 'total'
 297  *             }
 298  *         }
 299  *     });
 300  *
 301  *     // specify segment of data you want to load using params
 302  *     store.load({
 303  *         params:{
 304  *             start:0,
 305  *             limit: itemsPerPage
 306  *         }
 307  *     });
 308  *
 309  *     Ext.create('Ext.grid.Panel', {
 310  *         title: 'Simpsons',
 311  *         store: store,
 312  *         columns: [
 313  *             {header: 'Name',  dataIndex: 'name'},
 314  *             {header: 'Email', dataIndex: 'email', flex:1},
 315  *             {header: 'Phone', dataIndex: 'phone'}
 316  *         ],
 317  *         width: 400,
 318  *         height: 125,
 319  *         dockedItems: [{
 320  *             xtype: 'pagingtoolbar',
 321  *             store: store,   // same store GridPanel is using
 322  *             dock: 'bottom',
 323  *             displayInfo: true
 324  *         }],
 325  *         renderTo: Ext.getBody()
 326  *     });
 327  *
 328  * {@img Ext.grid.Panel/Ext.grid.Panel5.png Ext.grid.Panel grouping}
 329  *
 330  * @docauthor Ed Spencer
 331  */
 332 Ext.define('Ext.grid.Panel', {
 333     extend: 'Ext.panel.Table',
 334     requires: ['Ext.grid.View'],
 335     alias: ['widget.gridpanel', 'widget.grid'],
 336     alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'],
 337     viewType: 'gridview',
 338
 339     lockable: false,
 340
 341     // Required for the Lockable Mixin. These are the configurations which will be copied to the
 342     // normal and locked sub tablepanels
 343     normalCfgCopy: ['invalidateScrollerOnRefresh', 'verticalScroller', 'verticalScrollDock', 'verticalScrollerType', 'scroll'],
 344     lockedCfgCopy: ['invalidateScrollerOnRefresh'],
 345
 346 <span id='Ext-grid.Panel-cfg-columnLines'>    /**
 347 </span>     * @cfg {Boolean} columnLines Adds column line styling
 348      */
 349
 350     initComponent: function() {
 351         var me = this;
 352
 353         if (me.columnLines) {
 354             me.setColumnLines(me.columnLines);
 355         }
 356
 357         me.callParent();
 358     },
 359
 360     setColumnLines: function(show) {
 361         var me = this,
 362             method = (show) ? 'addClsWithUI' : 'removeClsWithUI';
 363
 364         me[method]('with-col-lines')
 365     }
 366 });</pre></pre></body></html>