因为最近项目需要,一直在用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中树的一些心得。
分享到:
相关推荐
首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的DataStore,存储各自的数据。DataStore通常与XML或者JSON数据源连接,可以动态加载和更新数据。在Grid中,我们可以通过配置ColumnModel来定义显示的列。 ...
首先,我们需要了解Ext中的两个关键组件:`Ext.grid.Panel`(表格面板)和`Ext.data.Store`(数据存储)。`Ext.grid.Panel`是用于展示表格数据的视图组件,而`Ext.data.Store`则负责管理这些数据,包括加载、保存和...
要控制Grid Panel的滚动条滚动量,我们需要关注两个主要的配置项:`scrollDelta`和`scrollIncrement`。`scrollDelta`用于设置鼠标滚轮滚动时的像素增量,而`scrollIncrement`则是在垂直或水平方向上每次滚动时移动的...
本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架,用于构建交互式的前端应用。其表格组件(`Ext.grid.GridPanel`)是其最...
在这个“一个简单的Ext样例”中,我们看到它被用来实现了一个具有表格功能的应用。这个表格不仅展示了数据,还具备了动态操作的能力,如自动排序和增删列,这使得用户交互更加直观和高效。 首先,我们要理解ExtJS中...
EXT按钮则是jQuery的一个扩展插件,用于创建功能丰富的、具有自定义样式的按钮。这篇博客"用JQuery实用的EXT按钮"可能详细介绍了如何利用EXT按钮插件来增强网页的用户界面。 首先,EXT按钮的核心概念在于提供了一种...
它提供了一套完整的组件模型,其中包括一个强大的表格组件——Ext Grid。本文将深入探讨如何在Ext Grid中实现增删改查(CRUD)操作,这些操作是任何数据管理应用的基础。 首先,我们需要了解`Ext.grid.Panel`,它是...
Ext.grid.GridPanel是一个功能强大的表格控件,它可以显示大量数据,并且提供了许多自定义的选项,例如分页、排序、过滤等。 在ExtJS中,表格控件对性能的要求较高,特别是在显示大量数据时。如果不使用分页机制,...
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。...通过理解并熟练运用这两个组件,开发者能够构建出交互性强、用户体验良好的数据录入和展示系统。
Ext Panel是Ext JS框架中的一个核心组件,常用于构建复杂的用户界面,特别是在数据展示和交互方面。本资源“Ext Panel拼揍表格模板.rar”显然包含了关于如何使用Ext Panel创建自定义表格模板的示例和代码。 Ext JS...
在树和表格之间进行拖拽,我们需要配置这两个组件以支持拖放操作,并定义数据传输方式。 1. **配置DragSource**: 对于树形视图,我们需要将每个节点实例化为DragSource。这可以通过在树节点配置中指定`draggable:...
5. 配置BufferView的相关参数,如bufferSize和scrollDelta,以控制数据加载的时机和数量。 通过以上介绍,我们可以看到"Ext表格列锁定+多表头插件"是如何在Ext3.4中提升表格组件的功能性和用户体验的。结合...
**jQuery仿Ext表格Flexigrid详解** Flexigrid是一款基于jQuery的开源表格插件,它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性,深受Web开发者喜爱,尤其适用于需要展示大量...
EXT JS Grid组件是一个高度可配置的表格视图,用于显示大量数据。它支持分页、排序、过滤、编辑等功能,并且可以通过增减列、添加插件等方式进行自定义。 2. **双层表头(Nested Headers)**: 双层表头是EXT JS ...
8. `menu`:可以为按钮添加下拉菜单,例如`menu: Ext.create('Ext.menu.Menu', {...})`,菜单内容需要在花括号内定义。 9. `glyph`:使用Unicode字符作为图标,例如`glyph: 0xf055`,这将使用字体图标库中的相应...
在EXT JS这个强大的JavaScript框架中,开发者经常需要处理各种数据展示和操作,而表格(Grid)是其中常用的一种组件。EXT Grid控件提供了一个灵活且功能丰富的界面来展示和操作数据,而“Ext扩展控件”则进一步增强...
在EXT JS这个强大的JavaScript框架中,RowEditor是一个非常实用的功能,尤其对于数据处理密集型的应用,如企业级的后台管理系统。RowEditor允许用户直接在表格的行内进行编辑,提供了直观且高效的用户体验。本教程将...
4. **自定义Renderer**:EXT允许我们为Grid的每个单元格定义自定义渲染函数,通过这个函数,我们可以控制单元格的显示样式,实现合并效果。 5. **CSS样式调整**:在某些情况下,可能还需要通过CSS来调整单元格的...
通过这个“Ext编辑表格视频教程”,学习者将能够熟练掌握如何创建交互式、可编辑的表格,以及如何与服务器进行数据交换,提升Web应用的功能和用户体验。记得下载提供的`ext.exe`和`extdwrgrid.zip`文件,跟随教程...
在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...