磨刀不误砍柴工:Ext4核心组件Grid的变化及学习(3):可编辑的grid
来源:互联网 发布:mac 翻墙 免费 编辑:程序博客网 时间:2024/05/21 08:03
我们依然拿旧版对比一下。Ext 3里面要编辑Grid单元格,就必须制定EditorGrid类。通过继承方式可能不太灵活,于是Ext 4就否决了继承的方式,而是采用“插件化”的方式。通过Ext JS4的Editing插件可以自由绑定到任意的Grid的实例,对于全体任何类型的Grid均可使用。于是乎,此举又为提高“灵活性(flexibility)”添泼了一抹浓彩。此外,对于Ext 3中很受大家所欢迎的一款扩展:RowEditor,在这次发布我们也将RowEditor正式加入的Ext 4包中去,成为标准类库的一员。(引自官方说明)
4系的编辑模式和3系完全不同,彻底抛弃EditorGrid类,改为使用插件支持编辑。今天,使用direct技术说明grid是如何与后台进行数据联系的。并举了几个实际中经常应用的例子:下拉框编辑、下拉框树形选择,并介绍了几种主从表编辑模式,说明各模式优缺点以供选择。
一、预备知识:grid的选择模式
grid有两种编辑模式:行编辑和单元格编辑,相应的有两种选择模式与其配合:行选择和单元格选择。默认是行选择,可以通过selType: 'cellmodel'改变。效果区别如下:
行选择
列选择
二、编辑模式的设置
两种编辑模式通过实例化Ext.grid.plugin.CellEditing或者
Ext.grid.plugin.RowEditing进行设定,注意要与相应的选择模式配合。每个列使用的编辑方法通过
field参数指定。field为Ext.form.field.Field的实例,使用xtype设定类别,可以为text、number、combobox等等,具体设置参考各类的api。不设定field则该列不能修改。
Ext.grid.plugin.CellEditing
通常只设置clicksToEdit一个属性,1为单击开启修改模式,2为双击。
Ext.grid.plugin.RowEditing多一个autoCancel设置,为true的话点击其他行就会自动取消上一个行的编辑并丢弃结果,默认为true,我经常设置为false让用户自己点,不会点错了丢数据。
1、单元格编辑
Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: new simpsonsStore(), columns: [ {header: 'Name', dataIndex: 'name', field: 'textfield'}, {header: 'Email', dataIndex: 'email', flex:1, field:{ xtype:'textfield', allowBlank:false } }, {header: 'Phone', dataIndex: 'phone'} ], selType: 'cellmodel', plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], height: 200, width: 400, renderTo: Ext.getBody()});
2、行编辑
Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: new simpsonsStore(), columns: [ {header: 'Name', dataIndex: 'name', field: 'textfield'}, {header: 'Email', dataIndex: 'email', flex:1, field:{ xtype:'textfield', allowBlank:false } }, {header: 'Phone', dataIndex: 'phone'} ], plugins: [ Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 }) ], height: 200, width: 400, renderTo: Ext.getBody()});
遇到一点问题,起床后再写下grid与后台的交互,写了有点慢,见谅。
- 磨刀不误砍柴工:Ext4核心组件Grid的变化及学习(3):可编辑的grid
- 磨刀不误砍柴工:Ext4核心组件Grid的变化及学习(2):数据列的基本操作
- 磨刀不误砍柴工:Ext4核心组件Grid的变化及学习(1)
- Ext4核心组件Grid的变化及学习(4):grid与服务端使用direct进行数据交互
- 可编辑的grid
- extjs学习笔记(五)可编辑的grid
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid)
- EXTJS4.x之可编辑的grid
- Extjs 可 编辑的grid行
- grid的编辑功能
- Ext 可编辑grid
- grid组件的详解
- EXTJS4.0 gridpanel 用法笔记~~可编辑的grid
- Ext4.1grid单元格合并的解决方案
- Ext4原生grid的导出控件
- Extjs4 可编辑grid实例
- 天气预报抓取的方法和源代码(包括从IP获取)
- C#的闪屏的制作
- 笔记:MessageBox函数
- Xmanager3.0注册码
- 禁电动车的连锁反应
- 磨刀不误砍柴工:Ext4核心组件Grid的变化及学习(3):可编辑的grid
- 准备开始博客了
- 分布式文件系统关键点
- 栈—迷宫求解(求解所有可通过路径)
- 每日设计模式——迭代器模式
- 电话面试流程
- Notification 使用详解(很全)
- Android 不要做错来使内存泄漏
- Android里的Boot Loader简单介绍