1.首先建立一个可编辑的grid
var cum = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : "编号",
dataIndex : "pno"
}, {
header : "参数名称",
dataIndex : "pname"
}, {
header : "参数值",
dataIndex : "defaultValue",
editor : new Ext.grid.GridEditor(
new Ext.form.TextField({
allowBlank : false
})
)
}, {
header : "备注",
dataIndex : "remark"
}]);
cum.defaultSortable = true;
var parambaseRecord = Ext.data.Record.create([{
name : 'pno',
type : 'integer'
}, {
name : 'pname',
type : 'string'
}, {
name : 'defaultValue',
type : 'string'
}, {
name : 'remark',
type : 'string'
}]);
// 设置从后台获取数据
var gridStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : context + '/paramprim/paramBaseList.action'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalCount',
root : 'list',
successProperty : '@success'
}, parambaseRecord),
remoteSort : true
});
// 设置默认的排序字段
gridStore.setDefaultSort('pno', 'asc');
gridStore.load();
// 创建表格,设置分页
var addParamWin_grid = new Ext.grid.EditorGridPanel({
region : 'center',
id : 'grid',
loadMask : true,// 执行时有遮盖效果
store : gridStore,
viewConfig : {
// 表格会自动延展每列的长度,使内容填满整个表格
forceFit : true,
columnsText : '显示的列',
scrollOffset : 30,
sortAscText : '升序',
sortDescText : '降序'
},
height : 400,
// autoHeight:true,
autowidth : true,
cm : cum,
sm : new Ext.grid.RowSelectionModel({
singleSelect : true
}),
bbar : new Ext.PagingToolbar({
pageSize : 20,
store : gridStore,
beforePageText : "当前第",
afterPageText : "页,共{0}页",
lastText : "尾页",
nextText : "下一页",
prevText : "上一页",
firstText : "首页",
refreshText : "刷新页面",
displayInfo : true,
displayMsg : "当前显示 {0} - {1}条, 共 {2}条",
emptyMsg : "没有记录"
})
});
2.把修改内容转换成json数据传递回action
var modified_TVM = gridStore_TVM.modified.slice(0); // 获取所有修改过的记录
var editorRecords = [];//保存进数组
Ext.each(modified_TVM, function(item) {
// alert(item.data.ADDRESS); //读取当前被修改的记录地址
editorRecords.push(item.data);// item.data中保存的是当前Record的所有字段
// 的值(JSON),不包含结构信息
});
updateParamWin_form.form.submit({
url : context + '/paramprim/updateParamprim.action',
method : 'post',
success : function(form, action) {
if (action.result.success) {
var win = Ext.getCmp("winUpdateParam");
win.close();
Ext.Msg.alert('提示', '修改成功');
store.load({
params : {
start : 0,
limit : 20,
ppno : null,
pname : ""
}
});
}
},
failure : function(form, action) {
if (action.result.success == false) {
Ext.Msg.alert('提示', action.result.msg);
}
},
//把数据转换成json传递
params : "data="
+ encodeURIComponent(Ext
.encode(editorRecords))
+ '&pnameValue=' + pnameValue
});
3.后台接收
接收到后是一个json类型的字符串,用JSONArray的tolist方法转换成相应的对象
分享到:
相关推荐
动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构。这在处理数据展示和操作时具有很大的灵活性,尤其在数据字段不确定或需要自定义的情况下非常实用。 标题“extjs 实现...
本话题主要关注如何在EXTJS3的Window组件中实现一个功能:当用户在窗口内修改了数据后,关闭窗口时提示用户是否保存更改。未进行修改的情况下,窗口可以直接关闭,不显示任何提示。 首先,我们需要创建一个基本的...
在EXTJS开发中,我们经常会遇到使用Grid组件展示数据的情况,特别是当数据包含中文字符时,可能会遇到排序问题。EXTJS Grid默认的排序机制对于英文字符处理得较好,但对于中文字符,由于编码和比较规则的不同,可能...
在"ExtJs3.3中文API.CHM"中,开发者可以找到关于ExtJS 3.3的所有API和类的详细描述,以及相关的示例代码。 ExtJS 3.3的核心特性包括: 1. **组件化**:ExtJS基于组件模型,提供了一系列预定义的UI组件,如按钮、...
extjs4动态添加表头字段、删除、增加记录!
1. **ExtJS实用开发指南**:此部分主要针对ExtJS的实际应用,包含如何快速上手、组件的使用、布局管理、数据绑定和Ajax交互等内容。开发者可以从中了解到如何创建基本的页面结构,使用GridPanel展示数据,以及通过...
### Extjs 中关于 Cookie 的操作 #### 一、引言 在 Web 开发中,Cookie 是一种常用的数据存储方式,用于保存用户的一些基本信息或者状态,从而实现网站的个性化设置或登录状态保持等功能。Extjs 作为一种强大的 ...
在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...
在《ExtJs 实例》中,你将找到各种实际应用场景的代码示例,这些实例涵盖了ExtJs的各种组件和功能。通过学习这些实例,你可以更好地理解如何在实际项目中应用ExtJs,例如如何创建网格(Grid)、表单(Form)、树形...
在EXTJS中,需要正确地定位CSS选择器来修改特定元素的样式。 3. **浏览器兼容性**:EXTJS 2.2.1的时代较早,那时的浏览器兼容性问题更为普遍。某些下拉菜单的显示问题可能只在特定浏览器版本中出现,这需要开发者...
在提供的实例源码中,我们看到的是如何在 EXTJS 中修改颜色的示例,具体涉及到 EXTJS 的 FormPanel 和 ComboBox 组件,以及自定义事件处理。 1. **FormPanel**: - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单...
使用extjs生成双层表头,父表头包括子表头
Extjs 中文API文档,有对Extjs相关API的中文说明
由于无法直接查看图像内容,我将基于标题、描述和标签的内容,为您提供关于ExtJs2.0中文手册的知识点概述。 ExtJs是一个强大的JavaScript框架,用于创建富互联网应用(RIA)。它提供了一套丰富的组件和工具来构建...
EXTJS4是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个中文文档是EXTJS4的官方文档...同时,文档还可能涵盖了EXTJS4的升级、调试、性能优化等相关内容,帮助开发者解决实际开发过程中遇到的问题。
Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
ExtJs 4 API 中文
手册中涵盖了ExtJS 3.3的所有类、方法、事件、属性和配置选项,对于开发者来说是不可或缺的工具。 1. **组件系统**:ExtJS的核心在于其组件模型,包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form)等...
EXTJS 是一个流行的JavaScript库,专门用于构建富客户端Web应用程序。EXTJS 3.3是该框架的一个版本,它在2009年发布,带来了许多改进和新特性。中文文档对于中国开发者来说是一个非常宝贵的资源,因为它消除了语言...