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?214173
http://www.sencha.com/forum/showthread.php?248686
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。