因为最近项目需要,一直在用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中树的一些心得。
分享到:
相关推荐
Grid组件是Ext JS中一个强大的数据展示工具,能够以表格形式展示大量数据,而分页则是处理大数据集时不可或缺的功能,它可以提高用户体验并优化系统性能。 首先,让我们理解什么是Ext JS Grid。Grid是一种用户界面...
通过学习这两个组件的使用,初学者可以掌握如何创建具有交互性的用户界面元素。 #### 第十章:数据与ComboBox 数据处理是Web应用的核心,ExtJS提供了DataProxy、DataReader、Store等类用于数据的加载和管理。结合...
1. Ext.MessageBox.alert():此方法用于显示一个带有警告信息的简单消息框,它接受至少两个参数,第一个是标题(title),第二个是要显示的信息(msg),第三个参数是一个可选的回调函数(function),当用户关闭消息框时...
- **Ext.apply() 和 Ext.applyIf()**:这两个方法用于合并对象,掌握它们的使用方法对于构建复杂的组件非常有用。 #### 三、消息框 - **基本消息框**:包括提示框、输入框和确认框等,这些都是与用户交互的基本方式...
它接受两个参数,分别代表标题和消息内容。此外,还有`Ext.Msg.alert`的简写形式。例如: ```javascript Ext.MessageBox.alert('标题', '弹出内容'); // 或者 Ext.Msg.alert('', '弹出内容'); ``` 这将显示一个带...