Ext js lock grid reconfig demo

Ext js lock grid reconfig demo

grid在调用reconfigure函数时有时lock列不能正确显示。在版本Extjs 4.2.2.1144 grid 初始时增加属性enableLocking : true即可正常显示。

另：

 columnLines: false,//是否显示列边框

 rowLines : false,//是否显示行边框

reconfiggrid.js

Ext.define('KitchenSink.model.grid.Office', {
    extend: 'Ext.data.Model',
    fields: ['city', 'totalEmployees', 'manager']
});

Ext.define('KitchenSink.model.grid.Employee', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'employeeNo'
    }, {
        name: 'rating',
        type: 'int'
    }, {
        name: 'salary',
        type: 'float'
    }, {
        name: 'forename'
    }, {
        name: 'surname'
    }, {
        name: 'name',
        convert: function(v, rec) {
            return rec.editing ? v : rec.get('forename') + ' ' + rec.get('surname');
        }
    }, {
        name: 'email'
    }, {
        name: 'department'
    }, {
        name: 'dob',
        type: 'date',
        dateFormat: 'Ymd'
    }, {
        name: 'joinDate',
        type: 'date',
        dateFormat: 'Ymd'
    }, {
        name: 'noticePeriod'
    }, {
        name: 'sickDays',
        type: 'int'
    }, {
        name: 'holidayDays',
        type: 'int'
    }, {
        name: 'holidayAllowance',
        type: 'int'
    }, {
        name: 'avatar'
    }],
    idField: 'employeeNo',

    afterEdit: function(modifiedFieldNames) {
        // "name" is a calculated field, so update it on edit of "forename" or "surname".
        if (Ext.Array.contains(modifiedFieldNames, 'forename') || Ext.Array.contains(modifiedFieldNames, 'surname')) {
            this.data.name = this.data.forename + ' ' + this.data.surname;
            modifiedFieldNames.push('name');
        }
        // Likewise, update two name fields if whole name gets updated
        else if (Ext.Array.contains(modifiedFieldNames, 'name')) {
            var names = this.convertName(this.data.name);
            this.data.forename = names[0];
            this.data.surname = names[1];
            modifiedFieldNames.push('forename', 'surname');
        }
        return this.callParent(arguments);
    },

    convertName: function(name) {
        var names = /([^\s+]+)(?:\s+(.*))?/.exec(name);
        return names ? [names[1], names[2]||''] : ['', ''];
    }
});

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',
                    margin: '0 0 0 10',
                    text: 'Show Employees',
                    scope: this,
                    handler: this.onShowEmployeesClick
                }]
            }, {
                margin: '10 0 0 0',
                xtype: 'grid',
                flex: 1,
                columns: [],
                enableLocking : true,//必须有
                columnLines: false,
                rowLines : false,
                viewConfig: {
                	trackOver : false,
    	            stripeRows: false,
                    emptyText: 'Click a button to show a dataset',
                    deferEmptyText: false
                }
            }]
        });
        this.callParent();
    },

    onShowOfficesClick: function(){//reconfigure grid
        var grid = this.down('grid');

        Ext.suspendLayouts();
        grid.setTitle('Employees');
        grid.reconfigure(this.createOfficeStore(), [{
		    xtype : 'rownumberer',
		    width : 40,
		    align : 'center',
            locked : true,
		    resizable : false
		},{
            flex: 1,
            text: 'City',
            dataIndex: 'city'
        }, {
            text: 'Total Employees',
            dataIndex: 'totalEmployees',
            width: 140
        }, {
            text: 'Manager',
            dataIndex: 'manager',
            width: 120
        }]);
        this.down('#showEmployees').enable();
        this.down('#showOffices').disable();
        Ext.resumeLayouts(true);
    },

    onShowEmployeesClick: function(){//reconfigure grid
        var grid = this.down('grid');

        Ext.suspendLayouts();
        grid.setTitle('Employees');
        grid.reconfigure(this.createEmployeeStore(), [{
		    xtype : 'rownumberer',
		    width : 40,
		    align : 'center',
            locked : true,
		    resizable : false
		},{
            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)];
    }
});


Ext.onReady(function () {

    Ext.QuickTips.init();
    Ext.BLANK_IMAGE_URL = '/images/s.gif';

    var mainGrid = Ext.create('KitchenSink.view.grid.Reconfigure');

    mainGrid.render(Ext.getBody());
});

reconfiggrid.html

<!DOCTYPE html>
<html>
<head>
<title>re</title>

	    
	    <meta http-equiv="description" content="no-cache">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

	    
	    
	    <link rel="stylesheet" type="text/css" href="./Ext/resources/css/ext-all-neptune-debug.css">
       
            <script type="text/javascript" src="./Ext/ext-all-debug.js"></script>
	    <script type="text/javascript" src="./Ext/ext-theme-neptune.js"></script>	    
	    <script type="text/javascript" src="./reconfiggrid.js"></script>
</head>

<body>
</body>
</html>

显示如图：

参考：

http://www.sencha.com/forum/showthread.php?146920-Grid-bug-when-using-reconfigure()-and-locked-column

http://www.sencha.com/forum/showthread.php?214173

http://www.sencha.com/forum/showthread.php?248686