`

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

    博客分类:
  • Ajax
阅读更多

因为最近项目需要,一直在用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中树的一些心得。

1
0
分享到:
评论
1 楼 MyChina 2009-08-21  
不错怎么删除没反应?

相关推荐

    基于EXT2.0.2表格间数据拖拽

    首先,我们需要创建两个EXT Grid实例,每个Grid都有自己的DataStore,存储各自的数据。DataStore通常与XML或者JSON数据源连接,可以动态加载和更新数据。在Grid中,我们可以通过配置ColumnModel来定义显示的列。 ...

    js实现Ext方式的将左表格中的数据移动至右表格

    首先,我们需要了解Ext中的两个关键组件:`Ext.grid.Panel`(表格面板)和`Ext.data.Store`(数据存储)。`Ext.grid.Panel`是用于展示表格数据的视图组件,而`Ext.data.Store`则负责管理这些数据,包括加载、保存和...

    Ext中的Grid控制纵向滚动条单次滚动量

    要控制Grid Panel的滚动条滚动量,我们需要关注两个主要的配置项:`scrollDelta`和`scrollIncrement`。`scrollDelta`用于设置鼠标滚轮滚动时的像素增量,而`scrollIncrement`则是在垂直或水平方向上每次滚动时移动的...

    ext表格布局小例子

    本文档旨在解析一个具体的 ExtJS 表格布局小例子,重点介绍其中涉及的数据存储、数据删除与添加的方法。ExtJS 是一款强大的 JavaScript 框架,用于构建交互式的前端应用。其表格组件(`Ext.grid.GridPanel`)是其最...

    一个简单的Ext样例,实现了一个表格功能

    在这个“一个简单的Ext样例”中,我们看到它被用来实现了一个具有表格功能的应用。这个表格不仅展示了数据,还具备了动态操作的能力,如自动排序和增删列,这使得用户交互更加直观和高效。 首先,我们要理解ExtJS中...

    用JQuery实用的EXT按钮

    EXT按钮则是jQuery的一个扩展插件,用于创建功能丰富的、具有自定义样式的按钮。这篇博客"用JQuery实用的EXT按钮"可能详细介绍了如何利用EXT按钮插件来增强网页的用户界面。 首先,EXT按钮的核心概念在于提供了一种...

    Ext表格中增删改查实例

    它提供了一套完整的组件模型,其中包括一个强大的表格组件——Ext Grid。本文将深入探讨如何在Ext Grid中实现增删改查(CRUD)操作,这些操作是任何数据管理应用的基础。 首先,我们需要了解`Ext.grid.Panel`,它是...

    Ext表格获取后台数据

    Ext.grid.GridPanel是一个功能强大的表格控件,它可以显示大量数据,并且提供了许多自定义的选项,例如分页、排序、过滤等。 在ExtJS中,表格控件对性能的要求较高,特别是在显示大量数据时。如果不使用分页机制,...

    Ext教程表单表格的使用

    【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。...通过理解并熟练运用这两个组件,开发者能够构建出交互性强、用户体验良好的数据录入和展示系统。

    Ext Panel拼揍表格模板.rar

    Ext Panel是Ext JS框架中的一个核心组件,常用于构建复杂的用户界面,特别是在数据展示和交互方面。本资源“Ext Panel拼揍表格模板.rar”显然包含了关于如何使用Ext Panel创建自定义表格模板的示例和代码。 Ext JS...

    Ext实现的拖拽树和表格之间的拖拽

    在树和表格之间进行拖拽,我们需要配置这两个组件以支持拖放操作,并定义数据传输方式。 1. **配置DragSource**: 对于树形视图,我们需要将每个节点实例化为DragSource。这可以通过在树节点配置中指定`draggable:...

    Ext表格列锁定+多表头插件

    5. 配置BufferView的相关参数,如bufferSize和scrollDelta,以控制数据加载的时机和数量。 通过以上介绍,我们可以看到"Ext表格列锁定+多表头插件"是如何在Ext3.4中提升表格组件的功能性和用户体验的。结合...

    Jquery仿Ext表格flexigrid

    **jQuery仿Ext表格Flexigrid详解** Flexigrid是一款基于jQuery的开源表格插件,它在功能和用户体验上模仿了Ext JS的Grid组件。这款插件以其轻量级、高效和丰富的特性,深受Web开发者喜爱,尤其适用于需要展示大量...

    ext 双层表格 grid(附带图片)

    EXT JS Grid组件是一个高度可配置的表格视图,用于显示大量数据。它支持分页、排序、过滤、编辑等功能,并且可以通过增减列、添加插件等方式进行自定义。 2. **双层表头(Nested Headers)**: 双层表头是EXT JS ...

    EXT 按钮属性对应图片

    8. `menu`:可以为按钮添加下拉菜单,例如`menu: Ext.create('Ext.menu.Menu', {...})`,菜单内容需要在花括号内定义。 9. `glyph`:使用Unicode字符作为图标,例如`glyph: 0xf055`,这将使用字体图标库中的相应...

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    在EXT JS这个强大的JavaScript框架中,开发者经常需要处理各种数据展示和操作,而表格(Grid)是其中常用的一种组件。EXT Grid控件提供了一个灵活且功能丰富的界面来展示和操作数据,而“Ext扩展控件”则进一步增强...

    ext的表格行编辑(roweditor)实现(c#)

    在EXT JS这个强大的JavaScript框架中,RowEditor是一个非常实用的功能,尤其对于数据处理密集型的应用,如企业级的后台管理系统。RowEditor允许用户直接在表格的行内进行编辑,提供了直观且高效的用户体验。本教程将...

    一个EXT+js实现的Grid表格合并的例子源码

    4. **自定义Renderer**:EXT允许我们为Grid的每个单元格定义自定义渲染函数,通过这个函数,我们可以控制单元格的显示样式,实现合并效果。 5. **CSS样式调整**:在某些情况下,可能还需要通过CSS来调整单元格的...

    Ext 编辑表格视频教程

    通过这个“Ext编辑表格视频教程”,学习者将能够熟练掌握如何创建交互式、可编辑的表格,以及如何与服务器进行数据交换,提升Web应用的功能和用户体验。记得下载提供的`ext.exe`和`extdwrgrid.zip`文件,跟随教程...

    Ext下拉树、下拉表格

    在本项目中,"Ext下拉树、下拉表格"指的是使用Ext库实现的两种交互式组件:下拉树(ComboBox with Tree)和下拉表格(ComboBox with Grid)。这两种组件都是在输入框中展示可选择的列表,但呈现形式不同,下拉树以...

Global site tag (gtag.js) - Google Analytics