Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / state / state.js

diff --git a/examples/state/state.js b/examples/state/state.js
new file mode 100644 (file)
index 0000000..cb2966c
--- /dev/null
+++ b/examples/state/state.js
@@ -0,0 +1,138 @@
+Ext.require([
+    'Ext.grid.*',
+    'Ext.window.Window',
+    'Ext.container.Viewport',
+    'Ext.layout.container.Border',
+    'Ext.state.*',
+    'Ext.data.*'
+]);
+
+Ext.define('Person', {
+    extend: 'Ext.data.Model',
+    fields: ['first', 'last', 'review', {
+        name: 'age',
+        type: 'int'
+    }]
+});
+
+Ext.onReady(function(){
+
+    // setup the state provider, all state information will be saved to a cookie
+    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
+
+    Ext.create('Ext.container.Viewport', {
+        layout: 'border',
+        padding: '5',
+        items: [{
+            region: 'north',
+            styleHtmlContent: true,
+            height: 150,
+            bodyPadding: 5,
+            split: true,
+            html: [
+                'Between refreshes, the grid below will remember',
+                '<ul>',
+                    '<li>The hidden state of the columns</li>',
+                    '<li>The width of the columns</li>',
+                    '<li>The order of the columns</li>',
+                    '<li>The sort state of the grid</li>',
+                '</ul>'
+            ].join(''),
+            dockedItems: [{
+                xtype: 'toolbar',
+                items: [{
+                    text: 'Show window',
+                    handler: function(btn){
+                        Ext.create('Ext.window.Window', {
+                            width: 300,
+                            height: 300,
+                            x: 5,
+                            y: 5,
+                            title: 'State Window',
+                            maximizable: true,
+                            stateId: 'stateWindowExample',
+                            styleHtmlContent: true,
+                            bodyPadding: 5,
+                            html: [
+                                'Between refreshes, this window will remember:',
+                                '<ul>',
+                                    '<li>The width and height</li>',
+                                    '<li>The x and y position</li>',
+                                    '<li>The maximized and restore states</li>',
+                                '</ul>'
+                            ].join(''),
+                            listeners: {
+                                destroy: function(){
+                                    btn.enable();
+                                }
+                            }
+                        }).show();
+                        btn.disable();
+                    }
+                }]
+            }]
+        }, {
+            bodyPadding: 5,
+            region: 'west',
+            title: 'Collapse/Width Panel',
+            width: 200,
+            stateId: 'statePanelExample',
+            split: true,
+            collapsible: true,
+            html: [
+                'Between refreshes, this panel will remember:',
+                '<ul>',
+                    '<li>The collapsed state</li>',
+                    '<li>The width</li>',
+                '</ul>'
+            ].join('')
+        }, {
+            region: 'center',
+            stateId: 'stateGridExample',
+            xtype: 'grid',
+            store: Ext.create('Ext.data.Store', {
+                model: 'Person',
+                data: [{
+                    first: 'John',
+                    last: 'Smith',
+                    age: 32,
+                    review: 'Solid performance, needs to comment code more!'
+                }, {
+                    first: 'Jane',
+                    last: 'Brown',
+                    age: 56,
+                    review: 'Excellent worker, has written over 100000 lines of code in 3 months. Deserves promotion.'
+                }, {
+                    first: 'Kevin',
+                    last: 'Jones',
+                    age: 25,
+                    review: 'Insists on using one letter variable names for everything, lots of bugs introduced.'
+                }, {
+                    first: 'Will',
+                    last: 'Zhang',
+                    age: 41,
+                    review: 'Average. Works at the pace of a snail but always produces reliable results.'
+                }, {
+                    first: 'Sarah',
+                    last: 'Carter',
+                    age: 23,
+                    review: 'Only a junior, but showing a lot of promise. Coded a Javascript parser in Assembler, very neat.'
+                }]
+            }),
+            columns: [{
+                text: 'First Name',
+                dataIndex: 'first'
+            }, {
+                text: 'Last Name',
+                dataIndex: 'last'
+            }, {
+                text: 'Age',
+                dataIndex: 'age'
+            }, {
+                flex: 1,
+                text: 'Review',
+                dataIndex: 'review'
+            }]
+        }]
+    });
+});