Ext中一个按钮控制两个表格数据添加

最新推荐文章于 2020-03-29 18:55:56 发布

最新推荐文章于 2020-03-29 18:55:56 发布 · 181 阅读

文章标签：

#EXT #单元测试 #UI

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用ExtJS框架动态控制两个表格控件数据添加的方法。通过一个增加按钮和一个复选框来切换对父表或子表的操作，并在增加行前设置默认值。

因为最近项目需要，一直在用Ext写东西，感觉Ext的封装还是不错的，解决了开发过程中的一些UI问题。好了，废话不多说了，在此先分享一些自己的编码过程中的心得。

需求是这样的：利用一个“增加”按钮，一个复选框去控制两个表格控件的数据添加。核心代码如下：

//添加表格数据的方式
	function addOperateData() {
		grid = unitGrid;//默认添加父表数据，也可在方法中带参传入
		//根据复选框判断是否操作子表
		if (isUnitGrid.getValue()) {
			grid = memberGrid;
		}
		//获取被操作表格的列定义
		var cm = grid.getColumnModel();
		//获取表格的列数
		var columnCount = cm.getColumnCount();
		//声明行定义的数组变量
		var rowDefineArray = new Array();
		//循环每列获取列名，数据类型，设置默认值
		for (var i = 0; i < columnCount; i++) {
			//创建每列数据定义的对象obj
			var obj = {
				name : cm.getDataIndex(i),
				type : 'string',
				defaultValue : ''
			};
			//将obj对象加入行定义的数据变量中
			rowDefineArray.push(obj);
		}
		//定义一个记录行，参数为行定义的数组变量
		var ItemDataDefine = Ext.data.Record.create(rowDefineArray);
		var record = new Object();
		
		//在增加行前添加默认值''
		for (var i = 0; i < rowDefineArray.length; i++) {
			var attr = rowDefineArray[i].name;
			record[attr] = '';//添加默认值，可以自己修改
		}
		
		//创建记录行
		var i = new ItemDataDefine(record);
		grid.stopEditing();
		var store = grid.getStore();//获取表格数据存储
		//增加数据行
		store.insert(0, i);
		//默认编辑第一个单元格
		grid.startEditing(0, 0);
	}

有兴趣的可以下载下附件，里面有具体的代码实现，已经把Ext需要的相关文件也放到了一起，直接点击就能测试。接下来有时间的话分享下Ext中树的一些心得。