add extjs 6.0.1 sources

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

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