/ext-4.0.7/examples/state/state.js

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