X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/examples/state/state.js
diff --git a/examples/state/state.js b/examples/state/state.js
new file mode 100644
index 00000000..cb2966c1
--- /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',
+ '
',
+ '- The hidden state of the columns
',
+ '- The width of the columns
',
+ '- The order of the columns
',
+ '- The sort state of the grid
',
+ '
'
+ ].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:',
+ '',
+ '- The width and height
',
+ '- The x and y position
',
+ '- The maximized and restore states
',
+ '
'
+ ].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:',
+ '',
+ '- The collapsed state
',
+ '- The width
',
+ '
'
+ ].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'
+ }]
+ }]
+ });
+});