我们在使用Grid的rowEditing插件时希望能够根据自己的业务需求能够动态的实现那一列是用户可以编辑的,那一列用户不可编辑,下面给出一个方案能够实现rowEditing的动态编辑功能。
之前我通过rowEditing的beforeedit事件获得它的行对象来控制列是否可编辑,这样做之后效果是实现了,但是之后它又会被置为可编辑,以此想到我们直接控制grid的editor配置,控制这个edior的readOnly属性,在数据grid的store数据显示之前,肯定会触发事件,这样我们在事件里面来改变grid的editor配置。
下面这段代码是我在一个按钮中控制rowEditing的动态编辑:
1 xtype: 'button', 2 text: '添加', 3 tooltip: '添加', 4 cls : 'x-btn-text-icon', 5 icon: '../images/extjs/add.png', 6 handler: function(){ 7 8 //判断当前是引入操作的数据还是查询的数据 9 var opertype = false;//是不是引入操作 10 jinmgl_grid_store.each(function(record){ 11 if(parseInt(record.get('id')) < 0){ 12 opertype = true; 13 } 14 }); 15 if(opertype){ 16 Ext.Msg.alert("提示信息", "请点击查询按钮查询数据!"); 17 return false; 18 } 19 20 //将所有信息都置为可以编辑的 21 if(typeof(rowEditingOfJinmgl.grid) != "undefined"){ 22 for(var i=0; i<rowEditingOfJinmgl.grid.columns.length; i++){ 23 var editor = rowEditingOfJinmgl.grid.columns[i]; 24 if(typeof(editor.editor) != "undefined"){ 25 editor.editor.readOnly = false; 26 } 27 } 28 } 29 if(typeof(rowEditingOfJinmgl.editor) != "undefined"){ 30 for(var i=0; i<rowEditingOfJinmgl.editor.items.items.length; i++){ 31 var editor = rowEditingOfJinmgl.editor.items.items[i]; 32 if(typeof(editor) != "undefined"){ 33 rowEditingOfJinmgl.editor.items.items[i].readOnly = false; 34 } 35 } 36 } 37 38 rowEditingOfJinmgl.cancelEdit(); 39 var newRow = Ext.create('jinmgl_grid_data',{ 40 id: '0', 41 operatedate : Ext.getCmp('operateDate').getValue() == null ? Ext.Date.clearTime(new Date(), 'yy-mm-dd') : Ext.Date.clearTime(Ext.getCmp('operateDate').getValue(), 'yy-mm-dd'), 42 storeposition: '', 43 coaltype: '', 44 supplierarea: '', 45 supplierdep: '', 46 amount: 0, 47 qe: 0, 48 ag: 0, 49 wq: 0, 50 sgq: 0, 51 vdaf: 0, 52 price: 0, 53 comments:'', 54 jinmid: 0 55 }); 56 var position = jinmgl_grid_store.getCount(); 57 jinmgl_grid_store.insert(position,newRow); 58 rowEditingOfJinmgl.startEdit(position,position); 59 }