extjs 之Ext.data.Store[Grid]操作(增删)

Ext.data.Store是extjs的数据结构。

主要用于extjs的grid和combobox等控件的数据加载和操作。实际上对grid的增删改可以通过对store的操作来控制.

例子：对grid的增删操作

A.增加一条记录

1. 首先需要定义每条record的结构，这点很重要，方便后面对记录的操作。也是很好的编程习惯

machine_record = Ext.data.Record.create([{
name : 'id',
type : 'int'
}, {
name : 'ip',
type : 'string'
}, {
name : 'env',
type : 'string'
}, {
name : 'owner',
type : 'string'
}, {
name : 'memer',
type : 'string'
}, {
name : 'cpu',
type : 'string'
}, {
name : 'disk',
type : 'string'
}, {
name : 'type',
type : 'string'
}]);
 

2. 定义data.store本身，说明使用的是machine_record结构，同时声明从服务器后台那个serverlet取得数据

//{"root":[{"start":0,"limit":0,"cpu":"23","memer":"2","disk":"dffe","ip":"10.250.194347","env":"0","id":1,"type":"2","owner":"elbert"},{"start":0,"limit":0,"cpu":"er","memer":"er","disk":"re","ip":"sdf","env":"er","id":12,"type":"虚拟机","owner":"re"},{"start":0,"limit":0,"cpu":"34","memer":"4","disk":"34","ip":"23","env":"34","id":18,"type":"虚拟机","owner":"34"},{"start":0,"limit":0,"cpu":"1g","memer":"2g","disk":"10g","ip":"10.250.194.47","env":"旺旺服务器端测试1","id":19,"type":"虚拟机","owner":"陈洪"}],"totalCount":10}

以上是例子取得的数据源

machine_list_grid_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : 'GetMachineList', //说明后台的serverlet
method : 'POST'
}),
reader : new Ext.data.JsonReader({
root : "root",
id : 'machine_list_grid_store',
totalProperty : 'totalCount'
}, machine_record) //说明数据结构
});

 

3.grid控件绑定该data.store

var machine_list_grid = new Ext.grid.GridPanel({
store : machine_list_grid_store, //关键代码
animate : true,
columnLines : true,
region : 'south',
height : Glb.outer_center.getHeight() * 0.6,
tbar : [p_buttons],
split : true,
columns : [{
id : 'id',
header : "id",
width : 60,
sortable : true,
dataIndex : 'id'
}, {
id : 'ip',
header : "机器ip",
width : 120,
sortable : true,
dataIndex : 'ip'
}, {
id : 'cpu',
header : "cpu",
width : 80,
sortable : true,
dataIndex : 'cpu'
}, {
id : 'memer',
header : "内存",
width : 80,
sortable : true,
dataIndex : 'memer',
hidden : true
}, {
id : 'disk',
header : "硬盘",
width : 80,
sortable : true,
dataIndex : 'disk'
}, {
id : 'env',
header : "环境",
width : 120,
sortable : true,
dataIndex : 'env'
}, {
id : 'owner',
header : "归属人",
width : 120,
sortable : true,
dataIndex : 'owner'
}, {
id : 'type',
header : "类型",
width : 80,
sortable : true,
dataIndex : 'type'
}],
region : 'south',
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : machine_list_grid_store,
displayInfo : true,
displayMsg : '显示 {0} - {1} /共 {2}条记录',
emptyMsg : "没有记录"
})
});
 

4.对data.store进行新增记录操作，由于定义了record的结构，所以很方便的进行new，并进行add record的操作，这时候grid也会自然添加一条记录

function insert_machine_grid_row(id, ip, env, owner, memer, cpu, disk, type) {
var record = new machine_record({
id : id,
ip : ip,
env : env,
owner : owner,
memer : memer,
cpu : cpu,
disk : disk,
type : type
});
machine_list_grid_store.add(record);
}
 

B.删除一条记录

1.首先要取得记录的index，可以通过grid的click事件取得，那么就要实现添加click事件

machine_list_grid.addListener('rowclick', machine_list_grid_rowclick);
function machine_list_grid_rowclick(grid, rowIndex, columnIndex, e) {
g_machine_rowIndex = rowIndex;
}
 

2. 取得选中的record,代码如下

3. 直接删除记录

machine_list_grid_store.remove(x);

4.第三步也可以通过后台先删除数据库数据，然后machine_list_grid_store.reload()的方式来变更grid的显示效果。

本文转自elbertchen 51CTO博客，原文链接：http://blog.51cto.com/linkyou/751881，如需转载请自行联系原作者