docs/source/Panel4.html

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