Extjs EditorGrid 可编辑表格控件

定义Ext.grid.ColumnModel时,列的信息项editor设置为new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}));就指定单元格编辑采用文本域。


默认情况下,需要双击单元格才能激活编辑器,从而进行修改。当给Grid配置上clicksToEdit:1时,就可以通过单击单元格激活编辑器,从而进行修改。


------------------------------

添加一行数据。


定义记录类:var MyRecord = Ext.data.Record.create([...]);


创建记录实例:var record = new MyRecord({...});


MyRecord.getField(name)得到记录中name列的字段信息。


record.get(name)和p.data.name可以得到字段的值。


record.set(name,value)可以设置记录中某指定字段的值。


record.dirty可以判断当前记录是否有字段的值被更新过。


新建MyRecord的一个实例insRec,每个字段赋值空;关闭表格的编辑状态;将insRec插入到store的第一行;激活第1行第1列的编辑状态。


------------------------------

删除一行数据。


将选择的record从store移除掉。store.remove(record);


-----------------------------

保存修改结果。


var m = store.modified.slice(0);返回从0行开始的所有编辑过的记录组成的数组。


var jsonArray = [];

Ext.each(m,function(item){jsonArray.push(item.data);});

将每条记录的数据存放在jsonArray数组中。


store的参数pruneModifiedRecords设置为true时,每次进行remove或load操作时store会自动清除modified标记。


-----------------------------

验证EditorGrid中的数据。


if(!editor.validatue(value)){...}


----------------------------

限制输入数据。


new Ext.grid.GridEditor(new Ext.form.NumberField({

allowBlank:false,

allowNegative:false,

maxValue:10

}))


----------------------------

EditorGrid里的ComboBox总是无法正常显示数据的情况。因为少了renderer方法。


renderer: function(value){

return comboData[value][1];

}


日期控件。


renderer: function(value){

return value.format("Y-m-d");

}


复选框,是/否。


renderer: function(value){

return value ? "是" : "否"

}



嘿嘿,留着,有用的~~

你可能感兴趣的:(ext)