Ext.js5重新配置的表格（动态建立列和仓库）(18)

来源：互联网发布：淘宝话费编辑：程序博客网时间：2024/05/16 15:32
/** * This example shows how a grid can have its store and columns reconfigured dynamically. * 这个例子展示了如何动态的重置仓库和列 * By default, we start with no store or columns, we can define them later using the * reconfigure method. * 默认的，我们开始的时候没有仓库和列，我们可以在之后使用重置的方法定义他们 */Ext.define('KitchenSink.view.grid.Reconfigure', {    extend: 'Ext.container.Container',    requires: [        'Ext.grid.*',        'Ext.layout.container.HBox',        'Ext.layout.container.VBox',        'KitchenSink.model.grid.Office',        'KitchenSink.model.grid.Employee'    ],     //也可以用这样的方法引用模型    xtype: 'reconfigure-grid',    layout: {        type: 'vbox',        align: 'stretch'    },    width: 500,    height: 330,    lastNames: ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'],    firstNames: ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'],    cities: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Philadelphia', 'Phoenix', 'San Antonio', 'San Diego', 'Dallas', 'San Jose'],    departments: ['Development', 'QA', 'Marketing', 'Accounting', 'Sales'],    initComponent: function(){        Ext.apply(this, {            items: [{                xtype: 'container',                layout: 'hbox',                defaultType: 'button',                items: [{                    itemId: 'showOffices',                    text: 'Show Offices',                    scope: this,                    handler: this.onShowOfficesClick                }, {                    itemId: 'showEmployees',//会用down取，用itemId代替id                    margin: '0 0 0 10',                    text: 'Show Employees',                    scope: this,                    handler: this.onShowEmployeesClick                }]            }, {                margin: '10 0 0 0',                xtype: 'grid',                flex: 1,                columns: [],                viewConfig: {                    emptyText: 'Click a button to show a dataset',                    deferEmptyText: false                }            }]            });        this.callParent();    },    onShowOfficesClick: function(){        var grid = this.down('grid');        Ext.suspendLayouts();        grid.setTitle('Offices');        grid.reconfigure(this.createOfficeStore(), [{            flex: 1,            text: 'City',            dataIndex: 'city'        }, {            text: 'Total Employees',            dataIndex: 'totalEmployees',            width: 140        }, {            text: 'Manager',            dataIndex: 'manager',            width: 120        //itemId原来是这样取得！        this.down('#showEmployees').enable();        this.down('#showOffices').disable();        Ext.resumeLayouts(true);      },    onShowEmployeesClick: function(){        var grid = this.down('grid');        Ext.suspendLayouts();        grid.setTitle('Employees');        grid.reconfigure(this.createEmployeeStore(), [{            text: 'First Name',            dataIndex: 'forename'        }, {            text: 'Last Name',            dataIndex: 'surname'        }, {            width: 130,            text: 'Employee No.',            dataIndex: 'employeeNo'        }, {            flex: 1,            text: 'Department',            dataIndex: 'department'        }]);        this.down('#showOffices').enable();        this.down('#showEmployees').disable();        Ext.resumeLayouts(true);    },    createEmployeeStore: function(){        var data = [],            i = 0,            usedNames = {},            name;        for (; i < 20; ++i) {            name = this.getUniqueName(usedNames);            data.push({                forename: name[0],                surname: name[1],                employeeNo: this.getEmployeeNo(),                department: this.getDepartment()            });        }        return new Ext.data.Store({            model: KitchenSink.model.grid.Employee,            data: data        });    },    createOfficeStore: function(){        var data = [],            i = 0,            usedNames = {},            usedCities = {};        for (; i < 7; ++i) {            data.push({                city: this.getUniqueCity(usedCities),                manager: this.getUniqueName(usedNames).join(' '),                totalEmployees: Ext.Number.randomInt(10, 25)            });        }        return new Ext.data.Store({            model: KitchenSink.model.grid.Office,            data: data        });    },    // Fake data generation functions    generateName: function(){        var lasts = this.lastNames,            firsts = this.firstNames,            lastLen = lasts.length,            firstLen = firsts.length,            getRandomInt = Ext.Number.randomInt,            first = firsts[getRandomInt(0, firstLen - 1)],            last = lasts[getRandomInt(0, lastLen - 1)];        return [first, last];    },    getUniqueName: function(used) {        var name = this.generateName(),            key = name[0] + name[1];        if (used[key]) {            return this.getUniqueName(used);        }        used[key] = true;        return name;    },    getCity: function(){        var cities = this.cities,            len = cities.length;        return cities[Ext.Number.randomInt(0, len - 1)];    },    getUniqueCity: function(used){        var city = this.getCity();        if (used[city]) {            return this.getUniqueCity(used);        }        used[city] = true;        return city;    },    getEmployeeNo: function() {        var out = '',            i = 0;        for (; i < 6; ++i) {            out += Ext.Number.randomInt(0, 7);        }        return out;    },    getDepartment: function() {        var departments = this.departments,            len = departments.length;        return departments[Ext.Number.randomInt(0, len - 1)];    }});
0 0