Ext4核心组件Grid的变化及学习（3）：可编辑的grid

我们依然拿旧版对比一下。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与后台的交互，写了有点慢，见谅。

转载于:https://www.cnblogs.com/luyingxue/archive/2011/06/01/2065316.html

Ext4核心组件Grid的变化及学习（3）：可编辑的grid相关推荐

CUDA学习----sp, sm, thread, block, grid, warp概念
CUDA学习----sp, sm, thread, block, grid, warp概念 2017-01-11 17:14:28| 分类: HPC&CUDA优化 | 标签:cuda g ...
ExtJS4.2学习(11)——高级组件之Grid
大纲: 1.首先,搭建起来一个最基础的Grid组件: 2.其次,利用前边MVC架构将代码重构: 3.再者,介绍下Grid的一些特性. 一.搭建基础的Grid组件在文章的开始,我们首先简单的搭建一个G ...
【直播预告】从A76到 A78——在变化中学习ARM微架构
伴随智能手机高速发展,处理器架构设计开发ARM公司几乎每年都更新CPU的核心架构.从2018年至2020年,ARM公司基于ARMv8架构推出了三代Cortex-A76.Cortex-A77.Corte ...
python mysql数据库操作grid控件_Python学习笔记_02:使用Tkinter连接MySQL数据库实现登陆注册功能...
1 环境搭建 1.1 Python安装本文具体实现部分Python环境:Python2.7.14,64位版本附:配置PythonIDE,推荐PyCharm(具体IDE界面见下图),下载点击运行即可 ...
机器人学习--栅格地图（occupancy grid map）构建（部分代码解析）
转自: 占据栅格地图构建(Occupancy Grid Map) - 知乎占据栅格地图构建(Occupancy Grid Map)_「小白学移动机器人」一个专注分享移动机器人相关知识的公众号!-CS ...
oracle数据变化记录,学习笔记:Oracle伪列函数ora_rowscn 记录表中行数据的修改时间...
天萃荷净 Oracle数据库开发时使用伪列函数ora_rowscn查询出数据库表中行数据的修改时间一.默认情况下 –创建t_orascn测试表 SQL> create table t_oras ...
grid 栅格/网格布局学习笔记
1.前言栅格布局或者说网格布局是很好用的东西,像一些商城类的排版就很适合用栅格布局,但是存在一定的兼容性问题,兼容性暂时还没有研究,这边学习总结是针对grid也就是栅格布局的使用的学习总结,下面将介 ...
从A76到A78——在变化中学习ARM微架构
一.引言伴随智能手机的高速发展,移动处理器架构设计厂商ARM公司几乎每年都更新CPU的核心架构.从2018至2020年,ARM公司基于ARMv8架构推出了三代Cortex-A76.Cortex-A7 ...
class h5 点击后样式变化_H5学习笔记
目录什么是HTML: 头部标签 H5视频 H5音频 H5拖放 H5Web存储 H5应用缓存 H5画布SVG H5画布canvas 全局属性: 事件属性: 颜色.样式和阴影线条样式矩形路径转换 ...

Ext4核心组件Grid的变化及学习（3）：可编辑的grid

一、预备知识：grid的选择模式

Ext4核心组件Grid的变化及学习（3）：可编辑的grid相关推荐

最新文章

热门文章