代码Example如下:
定义Model
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{name: 'id',
type: 'int',
useNull: true
}, 'email', 'first', 'last'],
validations: [{ type: 'length',
field: 'email',
min: 1
}, {type: 'length',
field: 'first',
min: 1
}, {type: 'length',
field: 'last',
min: 1
}]
});
构造store、创建panel
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
type: 'ajax',
api: {
read: 'url/read',//查询
create: 'url/create',//创建
update: 'url/update',//更新
destroy: 'url/destroy'//删除
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
}, {
header: 'First',
width: 80,
sortable: true,
dataIndex: 'first',
field: {
xtype: 'textfield'
}
}, {
text: 'Last',
width: 80,
sortable: true,
dataIndex: 'last',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Person());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
很简单,使用api的方式,包括有增删查改,在前台的操作都会被extjs记录下来,再执行sync的时候就可以自动根据状态请求相应的url了。
下面是使用中遇到的一些小问题总结。
1、删除多行数据
例子里使用的是var selection = grid.getView().getSelectionModel().getSelection()[0];注意是加了个[0]的,所以要删除多行,直接取消这个[0],然后执行store即可,前提是你的表格没有限制只能选取一行,默认情况下,cellmodel的mode值为SINGLE,使用checkboxmodel就可以显示checkbox的同时实现多选了。
2、增删查改的同时进行传参
这个一开始同事懒得研究就直接在url里拼上去了,我觉得这样不妥,就查了下相关文章,最终得到两种实现方法
方法一:仅在查询时可用,设置store的autoload为false,手动载入store.load({//to do something});,这样使用查询是可以但是修改删除或者更新时就不好用了。于是有了方法二;
方法二:添加事件监听,在store里面设置linstener,监听beforeload时执行方法,设置Param,如:
listeners: {
beforeload: function(proxy, response, operation){
}
}
3、后台动态构造表头不能设置renderer
由于业务特殊性,我们在后台构造json对象包装extjs grid所需的fields、columns,也正因此,不能在后台设置renderer等调用js函数的属性,我的解决方式是,后台添加固定标识,数据到前台后遍历添加所需renderer函数或者特殊编辑器等
后台交互
与后台的交互在一开始还是纠结了半天,没看清楚extjs的实现,原来使用这种方式的请求除了扩展参数以外,表格数据都是通过流交互的。这个在后台是不能直接使用request.getParamter(“xxx”);获取的,因为是使用流,所以需要通过get请求的流来读取数据,又因为是文本数据,所以直接request.getReader().readerLine();获取到的就是json格式的字符串了,接下来就需要自己根据需要进行转换了,个人还是使用json.simple,当然了,具体情况具体对待,如果你的数据有其他的比如文件上传之类的,就需要先获取inputstream再解析了。
就总结这么多了,有任何问题,欢迎留言交流