ext Grid（三）

想让用户体验更高就应该让用户可以在自己刚刚查询出来的数据表格上进行数据编辑，可以进行增删改查。可编辑的表格就在在想要能编辑的列里注册一个TextField组件，这个组件需要使用Ext.grid.GridEditor类来封装。

第一个可编辑表格

[javascript] view plaincopy

cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'产品编号',dataIndex:'product_id'},
{header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
]);

使用了可编辑的对象就需要建立一个Ext.grid.EditorGridPanel来代替Ext.grid.GridPanel。

[javascript] view plaincopy

gridPanel = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
});

这时默认的是双击编辑，如果想设置成单击编辑的话就需要做如下改动。

[javascript] view plaincopy

gridPanel = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
//值为1的时候就是单击，2就是双击。
clicksToEdit:1,
cm: cm,
sm:mm
});

向表格中添加新行和删除一行

添加新的一行是使用Store类的insert方法插入一个新的Ext.data.Record对象，删除用的是remove方法,为了使插入的新行所有列都能编辑，我们要把所有列都设为可编辑。

[javascript] view plaincopy

cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
mm,
{header:'产品编号',dataIndex:'product_id',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:'产品名称',dataIndex:'product_name',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
{header:'产品价格',dataIndex:'product_price',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
]);

将所想要编辑的列添加Ext.grid.GridEditor对象就能是该列可编辑,接着我们要在表格组件的上方添加两个按键，分别是增加和删除。代码如下：

[javascript] view plaincopy

var gridPanel = new Ext.grid.EditorGridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm,
tbar: new Ext.Toolbar(['-', {
text: '添加一行',
handler: function(){
var record = new Ext.data.Record({
product_id:'',
product_name:'',
product_price:''
});
gridPanel.stopEditing();
store.insert(store.getCount(),record);
gridPanel.startEditing(store.getCount()-1,0);
}
}, '-', {
text: '删除一行',
handler: function(){
Ext.Msg.confirm('信息', '是否删除当前记录？', function(btn){
if (btn == 'yes') {
var sm = gridPanel.getSelectionModel();
var cell = sm.getSelectedCell();
var record = store.getAt(cell[0]);
store.remove(record);
}
});
}
}, '-'])
});

保存数据

无论是添加或是修改了表格中的数据后，一般我们都要将结果提交到服务器，在ExtJS中Slice类就是干这个用的。

[javascript] view plaincopy

{
text: '保存',
handler: function(){
var m = store.modified.slice(0);
var data = [];
Ext.each(m, function(item) {
data.push(item.data);
});
alert(Ext.encode(data));
Ext.lib.Ajax.request(
'POST',
'SaveData',
{success: function(response){
Ext.Msg.alert('信息', response.responseText, function(){
store.reload();
});
}},
'row=' + encodeURIComponent(Ext.encode(data))
);
}
}

对记录进行分组

此外ExtJS Grid还可以对数据进行分组，要建立一个按列分组的表格就要使用Ext.data.GroupingStore这个类。

[javascript] view plaincopy

var store = new Ext.data.GroupingStore({
reader: reader,
data: data,
groupField: 'sex',
sortInfo: {field: 'name', direction: "ASC"}
});
var grid = new Ext.grid.GridPanel({
autoHeight: true,
store: store,
columns: columns,
view: new Ext.grid.GroupingView(),
renderTo: 'grid'
});

ExtJS各种各样的组件和控件有很多，做的都很漂亮，还可以自己定制样式，使用继承来拓展ExtJS的功能，ExtJS的介绍就到这了，更多的功能我今后还会继续研究的。

ext Grid（三）相关推荐

Ext.grid.GridPanel + asp.net 数据分页
Ext.grid.GridPanel + asp.net 数据分页 [转]http://www.cnblogs.com/tujiang/archive/2009/07/03/1516488.html ...
ext+dwr DynamicGridPanel 封装态创建ext grid
封装一个动态grid 继承Ext.grid.GridPanel 1.一般只需定义gridcolumns属性即可动态生成grid ,支持各列renderer自定义, 支持store自定义. 其中默认的s ...
Ext.grid.ColumnModel
http://szz0429-126-com.iteye.com/blog/978195 http://www.studyofnet.com/news/136.html (非原创) 2.如何在表格中添 ...
Ext.grid.ColumnModel基本设置（转自网易博客itworkto）
Ext.grid.ColumnModel 该类用于定义表格的列模型,其配置项是一个由"列定义"组成的数组,还可以是JSON组成的对象.其中也定义很多操作列的属性.方法比 ...
[转]Ext Grid控件的配置与方法
http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: sto ...
ExtJs之Ext.grid.GridPanel（部分未完）
今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. ? 1 2 3 4 5 6 ...
Ext.grid.Panel表格分页
Ext.grid.Panel表格分页示例代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...
使用Dynamic LINQ实现Ext Grid的远程排序
要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dy ...
完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

ext Grid（三）

ext Grid（三）相关推荐

最新文章

热门文章