extjs 之Ext.data.Store变更单行记录值【修改】

简介:

1.record声明如下

machineuse_record = Ext.data.Record.create([{
name : 'id',
type : 'int'
}, {
name : 'projectname',
type : 'string'
}, {
name : 'projectid',
type : 'int'
}, {
name : 'ip',
type : 'string'
}, {
name : 'server',
type : 'string'
}]);
 

 

2.datastor声明如下

machineuse_list_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetMachineUseList',
method : 'POST'
}),
reader : new Ext.data.JsonReader({
root : "root",
id : 'machineuse_list_grid_store',
totalProperty : 'totalCount'
}, machineuse_record)
});
 

 

3. grid声明如下

machineuse_list_grid = new Ext.grid.GridPanel({
store : machineuse_list_grid_store,
animate : true,
columnLines : true,
region : 'south',
height :Glb.outer_center.getHeight() * 0.63,
tbar : [p_buttons],
split : true,
autoScroll:true,
columns : [{
id : 'id',
header : "id",
width : 60,
sortable : true,
dataIndex : 'id'
}, {
id : 'ip',
header : "机器ip",
width : 120,
sortable : true,
dataIndex : 'ip'
}, {
id : 'server',
header : "部署服务",
width : 80,
sortable : true,
dataIndex : 'server'
}, {
id : 'projectname',
header : "项目",
width : 120,
sortable : true,
dataIndex : 'projectname'
},
{
id : 'projectid',
header : "项目id",
width : 120,
sortable : true,
dataIndex : 'projectid',
hidden: true
}],
region : 'south',
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : machineuse_list_grid_store,
displayInfo : true,
displayMsg : '显示 {0} - {1} /共 {2}条记录',
emptyMsg : "没有记录"
})
});
 

4. 通过修改datastore记录来修改grid某行的值

var rec = machineuse_list_grid_store.getAt(g_machine_rowIndex);
rec.set('ip', ip);
rec.set('server', env);
rec.set('projectid', owner);
rec.set('projectname', owner);
rec.commit();


本文转自elbertchen 51CTO博客,原文链接:http://blog.51cto.com/linkyou/751883,如需转载请自行联系原作者
相关文章
|
3月前
|
前端开发
Antd中Table列表行默认包含修改及删除功能的封装
Antd中Table列表行默认包含修改及删除功能的封装
48 0
|
5月前
|
JavaScript
Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
# 1、需求 使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。 # 2、实现 ## 1)列表页 index.vue ```html <el-table> <!-- 其他列 --> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button icon="el-icon-copy-document" title="复制" @click="toCopyNew(scope
74 0
|
移动开发 小程序 JavaScript
微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题
微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题
326 0
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
最近在用 vue3 和 ts 捣鼓一些小工具,发现平常开发中一个很常见的需求就是,数据列表的渲染。现在重新学习,发现我在学 vue2 时的很多设计规范和逻辑都考虑的不是特别妥当。 因此,写下这篇文章,记录组件设计中数据列表渲染和全局头部的设计。
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
|
JSON JavaScript 数据格式
VUE element-ui之jspreadsheet-ce在线表格数据json序列化(excel数据同步为相应key:value,并过滤掉为空的数据,未输入的行)
VUE element-ui之jspreadsheet-ce在线表格数据json序列化(excel数据同步为相应key:value,并过滤掉为空的数据,未输入的行)
478 0
VUE element-ui之jspreadsheet-ce在线表格数据json序列化(excel数据同步为相应key:value,并过滤掉为空的数据,未输入的行)
|
JavaScript
vue再读8-实例选项data
vue再读8-实例选项data
61 0
vue再读8-实例选项data
|
前端开发
Ember Data 之记录操作:创建、更新和删除
前面在《Ember.js 项目开发之 Ember Data》介绍了Ember Data 和 《Ember Data 之模型定义》、《Ember Data 之记录查询》,本文将继续介绍记录操作:创建、更新和删除。
109 0
|
存储 JSON 前端开发
Ember Data 之记录查询
前面在《Ember.js 项目开发之 Ember Data》介绍了Ember Data 和 《Ember Data 之模型定义》,本文将继续介绍记录操作。
103 0
|
JavaScript
el-table分页数据+回显+勾选状态+记录数据(map实战)
el-table分页数据+回显+勾选状态+记录数据(map实战)
813 0