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
re <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>
顯示如圖：
參考：
https://www.sencha.com/forum/showthread.php?146920-Grid-bug-when-using-reconfigure()-and-locked-column
https://www.sencha.com/forum/showthread.php?214173
https://www.sencha.com/forum/showthread.php?248686