examples/state/state.js

   1 Ext.require([
   2     'Ext.grid.*',
   3     'Ext.window.Window',
   4     'Ext.container.Viewport',
   5     'Ext.layout.container.Border',
   6     'Ext.state.*',
   7     'Ext.data.*'
   8 ]);
   9
  10 Ext.define('Person', {
  11     extend: 'Ext.data.Model',
  12     fields: ['first', 'last', 'review', {
  13         name: 'age',
  14         type: 'int'
  15     }]
  16 });
  17
  18 Ext.onReady(function(){
  19
  20     // setup the state provider, all state information will be saved to a cookie
  21     Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
  22
  23     Ext.create('Ext.container.Viewport', {
  24         layout: 'border',
  25         padding: '5',
  26         items: [{
  27             region: 'north',
  28             styleHtmlContent: true,
  29             height: 150,
  30             bodyPadding: 5,
  31             split: true,
  32             html: [
  33                 'Between refreshes, the grid below will remember',
  34                 '<ul>',
  35                     '<li>The hidden state of the columns</li>',
  36                     '<li>The width of the columns</li>',
  37                     '<li>The order of the columns</li>',
  38                     '<li>The sort state of the grid</li>',
  39                 '</ul>'
  40             ].join(''),
  41             dockedItems: [{
  42                 xtype: 'toolbar',
  43                 items: [{
  44                     text: 'Show window',
  45                     handler: function(btn){
  46                         Ext.create('Ext.window.Window', {
  47                             width: 300,
  48                             height: 300,
  49                             x: 5,
  50                             y: 5,
  51                             title: 'State Window',
  52                             maximizable: true,
  53                             stateId: 'stateWindowExample',
  54                             styleHtmlContent: true,
  55                             bodyPadding: 5,
  56                             html: [
  57                                 'Between refreshes, this window will remember:',
  58                                 '<ul>',
  59                                     '<li>The width and height</li>',
  60                                     '<li>The x and y position</li>',
  61                                     '<li>The maximized and restore states</li>',
  62                                 '</ul>'
  63                             ].join(''),
  64                             listeners: {
  65                                 destroy: function(){
  66                                     btn.enable();
  67                                 }
  68                             }
  69                         }).show();
  70                         btn.disable();
  71                     }
  72                 }]
  73             }]
  74         }, {
  75             bodyPadding: 5,
  76             region: 'west',
  77             title: 'Collapse/Width Panel',
  78             width: 200,
  79             stateId: 'statePanelExample',
  80             split: true,
  81             collapsible: true,
  82             html: [
  83                 'Between refreshes, this panel will remember:',
  84                 '<ul>',
  85                     '<li>The collapsed state</li>',
  86                     '<li>The width</li>',
  87                 '</ul>'
  88             ].join('')
  89         }, {
  90             region: 'center',
  91             stateId: 'stateGridExample',
  92             xtype: 'grid',
  93             store: Ext.create('Ext.data.Store', {
  94                 model: 'Person',
  95                 data: [{
  96                     first: 'John',
  97                     last: 'Smith',
  98                     age: 32,
  99                     review: 'Solid performance, needs to comment code more!'
 100                 }, {
 101                     first: 'Jane',
 102                     last: 'Brown',
 103                     age: 56,
 104                     review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.'
 105                 }, {
 106                     first: 'Kevin',
 107                     last: 'Jones',
 108                     age: 25,
 109                     review: 'Insists on using one letter variable names for everything, lots of bugs introduced.'
 110                 }, {
 111                     first: 'Will',
 112                     last: 'Zhang',
 113                     age: 41,
 114                     review: 'Average. Works at the pace of a snail but always produces reliable results.'
 115                 }, {
 116                     first: 'Sarah',
 117                     last: 'Carter',
 118                     age: 23,
 119                     review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.'
 120                 }]
 121             }),
 122             columns: [{
 123                 text: 'First Name',
 124                 dataIndex: 'first'
 125             }, {
 126                 text: 'Last Name',
 127                 dataIndex: 'last'
 128             }, {
 129                 text: 'Age',
 130                 dataIndex: 'age'
 131             }, {
 132                 flex: 1,
 133                 text: 'Review',
 134                 dataIndex: 'review'
 135             }]
 136         }]
 137     });
 138 });