javascript代码实例教程-Ext js lock grid reconfig demo

发布时间:2019-02-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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

   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>      

显示如图:

javascript代码实例教程-Ext js lock grid reconfig demo


参考:

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







觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Ext js lock grid reconfig demo全部内容,希望文章能够帮你解决javascript代码实例教程-Ext js lock grid reconfig demo所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。