`
literary_fly
  • 浏览: 93296 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

Extjs EditorGrid 可编辑表格控件

EXT 
阅读更多
定义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 ? "是" : "否"

}



嘿嘿,留着,有用的~~

分享到:
评论

相关推荐

    深入浅出ExtJS第2版

    3.11 可编辑表格控件--EditorGrid 55 3.11.1 制作一个简单的EditorGrid 55 3.11.2 添加一行数据 56 3.11.3 保存修改结果 58 3.11.4 验证EditGrid中的数据 59 3.11.5 限制输入数据的类型 60 3.12 属性表格控件...

    精通JS脚本之ExtJS框架.part2.rar

    9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性表格控件 9.4.1 Property...

    精通JS脚本之ExtJS框架.part1.rar

    9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性表格控件 9.4.1 Property...

    ExtJs xtype一览

    - **`editorgrid` (Ext.grid.EditorGridPanel)**: 可编辑的表格组件,允许用户直接在表格内进行数据编辑。 - **`propertygrid` (Ext.grid.PropertyGrid)**: 属性表格组件,专门用于展示对象的属性。 - **`editor` ...

    Extjs 初体验

    - `EditorGrid`:这是一个可编辑的网格,允许用户直接在单元格内编辑数据,常用于数据输入和管理。 - `Grid`:基础的数据显示网格,可以配置列、排序、分页等功能,用于展示和操作表格数据。 - `JsonView`:与...

    extjs 项目整理

    - **EditorGrid**: 可编辑的表格。 - **PropertyGrid**: 属性表格。 - **Editor**: 编辑器。 - **DataView**: 数据显示视图。 - **ListView**: 列表视图。 - **工具栏组件**: - **Paging**: 分页工具条。 - *...

    Extjs xtype集合

    - **描述**: 可编辑的表格组件,允许用户直接在表格中编辑数据。 12. **`propertygrid`:** - **`xtype`**: `propertygrid` - **`Class`**: `Ext.grid.PropertyGrid` - **描述**: 用于展示属性的表格,适用于...

    Ext组件描述,各个组件含义

    - **主要用途**:用于编辑现有数据,例如在表格单元格内进行编辑。 **2.5 Editor Grid Panel (Ext.grid.EditorGridPanel)** - **xtype**: `editorgrid` - **功能描述**:Editor Grid Panel 是一个支持行级编辑的...

Global site tag (gtag.js) - Google Analytics