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