add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / grid / Reconfigure.js

/**\r
 * This example shows how a grid can have its store and columns reconfigured dynamically.\r
 * By default, we start with no store or columns, we can define them later using the\r
 * reconfigure method.\r
 */\r
Ext.define('KitchenSink.view.grid.Reconfigure', {\r
    extend: 'Ext.container.Container',\r
   \r
    requires: [\r
        'Ext.grid.*',\r
        'Ext.layout.container.HBox',\r
        'Ext.layout.container.VBox',\r
        'KitchenSink.model.grid.Office',\r
        'KitchenSink.model.grid.Employee'\r
    ], \r
    xtype: 'reconfigure-grid',\r
    \r
    //<example>\r
    exampleTitle: 'Grid Reconfigure',\r
    profiles: {\r
        classic: {\r
            employeeWidth: 100    \r
        },\r
        neptune: {\r
            employeeWidth: 130\r
        }\r
    },\r
    //</example>\r
    \r
    layout: {\r
        type: 'vbox',\r
        align: 'stretch'\r
    },\r
    \r
    width: 500,\r
    height: 330,\r
    \r
    lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],\r
    firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],\r
    cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],\r
    departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],\r
    \r
    initComponent: function(){\r
        Ext.apply(this, {\r
            items: [{\r
                xtype: 'container',\r
                layout: 'hbox',\r
                defaultType: 'button',\r
                items: [{\r
                    itemId: 'showOffices',\r
                    text: 'Show Offices',\r
                    scope: this,\r
                    handler: this.onShowOfficesClick\r
                }, {\r
                    itemId: 'showEmployees',\r
                    margin: '0 0 0 10',\r
                    text: 'Show Employees',\r
                    scope: this,\r
                    handler: this.onShowEmployeesClick\r
                }]\r
            }, {\r
                margin: '10 0 0 0',\r
                xtype: 'grid',\r
                flex: 1,\r
                columns: [],\r
                viewConfig: {\r
                    emptyText: 'Click a button to show a dataset',\r
                    deferEmptyText: false\r
                }\r
            }]    \r
        });\r
        this.callParent();\r
    },\r
    \r
    onShowOfficesClick: function(){\r
        var grid = this.down('grid');\r
        \r
        Ext.suspendLayouts();\r
        grid.setTitle('Offices');\r
        grid.reconfigure(this.createOfficeStore(), [{\r
            flex: 1,\r
            text: 'City',\r
            dataIndex: 'city'\r
        }, {\r
            text: 'Total Employees',\r
            dataIndex: 'totalEmployees',\r
            width: 140\r
        }, {\r
            text: 'Manager',\r
            dataIndex: 'manager',\r
            width: 120\r
        }]);\r
        this.down('#showEmployees').enable();\r
        this.down('#showOffices').disable();\r
        Ext.resumeLayouts(true);  \r
    },\r
    \r
    onShowEmployeesClick: function(){\r
        var grid = this.down('grid');\r
        \r
        Ext.suspendLayouts();\r
        grid.setTitle('Employees');\r
        grid.reconfigure(this.createEmployeeStore(), [{\r
            text: 'First Name',\r
            dataIndex: 'forename'\r
        }, {\r
            text: 'Last Name',\r
            dataIndex: 'surname'\r
        }, {\r
            width: this.profileInfo.employeeWidth,\r
            text: 'Employee No.',\r
            dataIndex: 'employeeNo'\r
        }, {\r
            flex: 1,\r
            text: 'Department',\r
            dataIndex: 'department'\r
        }]);\r
        this.down('#showOffices').enable();\r
        this.down('#showEmployees').disable();\r
        Ext.resumeLayouts(true);\r
    },\r
    \r
    createEmployeeStore: function(){\r
        var data = [],\r
            i = 0,\r
            usedNames = {},\r
            name;\r
                \r
        for (; i < 20; ++i) {\r
            name = this.getUniqueName(usedNames);\r
            data.push({\r
                forename: name[0],\r
                surname: name[1],\r
                employeeNo: this.getEmployeeNo(),\r
                department: this.getDepartment()\r
            });\r
        }\r
        return new Ext.data.Store({\r
            model: KitchenSink.model.grid.Employee,\r
            data: data\r
        });\r
    },\r
    \r
    createOfficeStore: function(){\r
        var data = [],\r
            i = 0,\r
            usedNames = {},\r
            usedCities = {};\r
                \r
        for (; i < 7; ++i) {\r
            data.push({\r
                city: this.getUniqueCity(usedCities),\r
                manager: this.getUniqueName(usedNames).join(' '),\r
                totalEmployees: Ext.Number.randomInt(10, 25)\r
            });\r
        }\r
        return new Ext.data.Store({\r
            model: KitchenSink.model.grid.Office,\r
            data: data\r
        });\r
    },\r
    \r
    // Fake data generation functions\r
    generateName: function(){\r
        var lasts = this.lastNames,\r
            firsts = this.firstNames,\r
            lastLen = lasts.length,\r
            firstLen = firsts.length,\r
            getRandomInt = Ext.Number.randomInt,\r
            first = firsts[getRandomInt(0, firstLen - 1)],\r
            last = lasts[getRandomInt(0, lastLen - 1)];\r
        \r
        return [first, last];\r
    },\r
    \r
    getUniqueName: function(used) {\r
        var name = this.generateName(),\r
            key = name[0] + name[1];\r
            \r
        if (used[key]) {\r
            return this.getUniqueName(used);\r
        }\r
    \r
        used[key] = true;\r
        return name;\r
    },\r
    \r
    getCity: function(){\r
        var cities = this.cities,\r
            len = cities.length;\r
        \r
        return cities[Ext.Number.randomInt(0, len - 1)];\r
    },\r
    \r
    getUniqueCity: function(used){\r
        var city = this.getCity();\r
        if (used[city]) {\r
            return this.getUniqueCity(used);\r
        }\r
    \r
        used[city] = true;\r
        return city;\r
    },\r
    \r
    getEmployeeNo: function() {\r
        var out = '',\r
            i = 0;\r
        for (; i < 6; ++i) {\r
            out += Ext.Number.randomInt(0, 7);\r
        }\r
        return out;\r
    },\r
    \r
    getDepartment: function() {\r
        var departments = this.departments,\r
            len = departments.length;\r
        \r
        return departments[Ext.Number.randomInt(0, len - 1)];\r
    }\r
});