[Ext JS]可编辑列Grid的全场景开发| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]可编辑列Grid的全场景开发

## 可编辑列Grid的全场景开发
### 基本功能描述与实现
在Grid中，对一列或某几列批量编辑。编辑效果如下图：
![](/upload/picture/2022-10-09/upload_9016581ef48db69fac405e201d667632.png)
### 功能实现的思路如下：
可编辑的列使用 widgetcolumn 类型。调用Grid的reconfigure()方法，重新生成新列的Grid。
widgetcolumn列的widget属性用来配置编辑组件的类型，比如文本输入框、日期输入或是下拉单。
编辑组件中输入的值使用 bind方式与原Store绑定(bind)，也就是store的记录的值会显示在编辑组件中，编辑组件发生修改时会同步更新Store，这样的好处是获取修改的部分很简单，直接通过Store就可以获取（getModifiedRecords()）。
### 基本功能实现
可编辑列的配置示例如下：
```json
{      
	text:'City',  
	dataIndex:'city',  
	flex:1,       
	xtype:'widgetcolumn', 
	widget:{          
		xtype:'combobox',      
		bind:'{record.city}'
	}
}
```

下拉单选项不同的下拉单编辑
一般情况下，下拉单选型固定，直接配置编辑组件的store属性即可。这个store的值可以是在前端配置，也可以直接从后端读取。
但在有的场景下，每一行的值有可能不一样。在选项值从后端随Store一起传入的解法下，在Widget被Attach时，添加Store到Widget 。使用的配置选项是onWidgetAttach。
值的有效性检验
如果要求必须对选择值得有效性进行验证，比较简便得方式是在编辑组件使用： forceSelection:true。该配置会强制选择下拉框的值，非法值会自动清空。
综合以上，编辑列得完整配置：
```json
{        
	text:'City',   
	dataIndex:'city',
	flex:1,   
	minWidth:82,   
	sortable:false,   
	xtype:'widgetcolumn',   
	widget:{         
	xtype:'combobox',   
	bind:'{record.city}', 
	forceSelection:true},   
	onWidgetAttach:function(col, widget, rec){
	var citys = rec.get("citys");
	var cityArray = Ext.decode(citys);  
	widget.setStore(cityArray);
}}
```

### 异常问题
以上综合得场景是： 可编辑列 + 编辑组件是下拉单 + 对输入的值进行有效性验证。
在数据量不多的状况下，以上的解法基本完美。但是在笔者的实际应用中出现了一种状况：
单行删除之后，进入编辑页面的时候，部分行的值会丢失。
调试发现原因：
onWidgetAttach的方法执行了3次，在第一次的时候一切正常，第二次的时候Store中的值会丢失（比如上面的city）。（没有和后端交互）
所幸的是值丢失会被认为Store发生了修改，会有红色提示。
清空，看起来像是forceSelection:true的行为，　Mark掉这行，问题果然解决。但是onWidgetAttach还是被触发了３次。
此外，　不使用forceSelection则就没有对有效值进行验证。
解决方法：
onWidgetAttach被触发３次的原因久寻不得，想到了另外一个解决办法。
在保存的时候检查有效性。在点击保存按钮后，查找所有的下拉单组件，　获取其值和Store，判断值是否在Store中，如果不在，则标识无效。
```json
combobox.markInvalid("Invalid value,please check.");
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]可编辑列Grid的全场景开发

网站导航