6.8.10　使用Ext.grid.column.Action操作表格数据

2013-02-28 12:31 李刚电子工业出版社字号： T | T

综合评级：

《疯狂Ajax讲义（第3版）--jQuery/Ext JS/Prototype/DWR企业应用前端开发实战》本书详细介绍了jQuery 1.8、Ext JS 4.1、Prototype 1.7.1、DWR这4个最常用的Ajax框架的用法，并针对每个框架提供了一个实用案例，让读者理论联系实际。这部分内容是"疯狂软件教育中心"的标准讲义，它既包含了实际Ajax开发的重点和难点，也融入了大量学习者的学习经验和感悟。本节为大家介绍使用Ext.grid.column.Action操作表格数据。

AD：51CTO学院：IT精品课程在线看！

6.8.10　使用Ext.grid.column.Action操作表格数据

前面已经提到，通过使用Ext.grid.column.Action列类型，可以为表格增加"按钮"列，但用户单击不同按钮时将会激发不同的事件处理函数，比如用户单击"编辑"按钮时，系统弹出浮动窗口修改当前记录；当用户单击"删除"按钮时，系统删除指定记录。

如下示例示范了使用Ext.grid.column.Action按钮列来操作表格数据的方法。

程序清单：codes\06\6.8\Ext.grid\Ext.grid.Panel_Action.html

<body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.define('Book', {
extend: 'Ext.data.Model',
fields: [
{name: 'id' , type: 'int'},
{name: 'name', type: 'string'},
{name: 'author', type: 'string'},
{name: 'price', type: 'float'},
]
});
// 创建一个Ext.data.Store对象
var bookStore = Ext.create('Ext.data.Store',
{
// 指定使用Book Model管理记录
model: 'Book',
// 使用proxy指定加载远程数据
proxy:
{
type: 'ajax',
url: 'getAllBooks',// 向该URL发送Ajax请求
reader: { // 使用Ext.data.reader.Json读取服务器数据
type: 'json',
root: 'data' // 直接读取服务器响应的data数据
},
},
autoLoad:true// 自动加载服务器数据
});
var editWin;
// 定义单击“编辑”按钮的事件处理函数
var editFn = function(grid, rowIndex, colIndex)
{
var rec = grid.getStore().getAt(rowIndex);
if(editWin)
{
editWin.setTitle('编辑《' + rec.get('name') + '》');
var formFields = editWin.items.get(0).items;
formFields.get(0).setValue(rec.get('id'));
formFields.get(1).setValue(rec.get('name'));
formFields.get(2).setValue(rec.get('author'));
formFields.get(3).setValue(rec.get('price'));
}
else
{
editWin = Ext.create("Ext.window.Window",
{
title : '编辑《' + rec.get('name') + '》',
items: [
{
url: 'updateBook',
xtype: 'form',
width: '100%',
bodyPadding: 10,
items: [
{
xtype: 'textfield',
name: 'id',
readOnly: true,
value: rec.get('id'), // 指定该表单控件的值
fieldLabel: 'ID', // 指定该表单控件的标签
},
{
xtype: 'textfield',
name: 'name',
value: rec.get('name'), // 指定该表单控件的值
fieldLabel: '书名', // 指定该表单控件的标签
},
{
xtype: 'textfield',
name: 'author',
value: rec.get('author'), // 指定该表单控件的值
fieldLabel: '作者', // 指定该表单控件的标签
},
{
xtype: 'textfield',
name: 'price',
value: rec.get('price'), // 指定该表单控件的值
fieldLabel: '价格', // 指定该表单控件的标签
}
]
}
],
listeners: {
beforedestroy : function(cmp)
{
this.hide();
return false;
}
},
bbar: [
{xtype: 'tbfill' ,},
{text:'确定' , handler: function()
{
// 获取表单，实际返回的是Ext.form.Basic对象
var form = editWin.items.get(0).getForm();
// 如果表单输入校验通过
if (form.isValid())
{
// 以Ajax方式提交表单
form.submit(
{
// 修改成功的回调函数
success: function(form, action)
{
bookStore.reload();
editWin.hide();
alert(action.result.tip);
}
});
}
}
},
{text:'取消' , handler:function()
{
editWin.hide();
}},
{xtype: 'tbfill' ,}
]
});
}
editWin.setVisible(true);
};
// 定义单击“删除”按钮的事件处理函数
var deleteFn = function(grid, rowIndex, colIndex)
{
if(confirm("确认删除" , "您是否真想删除该记录"))
{
var rec = grid.getStore().getAt(rowIndex);
Ext.Ajax.request({
url: 'deleteBook', // 向此处发送Ajax请求
method: 'POST',
params: { // 指定请求参数
id: rec.get('id')
}, // 指定服务器响应完成的回调函数
success: function(response){
bookStore.reload();
alert(Ext.JSON.decode(response.responseText).tip);
}
});
}
};
var grid = Ext.create('Ext.grid.Panel', {
title: '查看服务器端图书',
width: 550, // 指定表单宽度
renderTo: Ext.getBody(),
// 定义该表格包含的所有数据列
columns: [
{ text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列
// 第2个数据列
{ text: '书名', dataIndex: 'name' , flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},
// 第3个数据列
{ text: '作者', dataIndex: 'author', flex: 1,
editor: {xtype: 'textfield', allowPattern: false}},
// 第4个数据列
{ text: '价格', dataIndex: 'price' , flex: 1,
editor: {xtype: 'numberfield', allowPattern: false}},
{
text: '操作',
xtype:'actioncolumn',
width: 50,
items: [
{
icon: 'edit.gif', // 指定图标
tooltip: '编辑',
handler: editFn // 指定单击“编辑”按钮的事件处理函数
},
{
icon: 'delete.gif', // 指定图标
tooltip: '删除',
handler: deleteFn // 指定单击“删除”按钮的事件处理函数
}
]
}
],
store: bookStore
});
});
</script>
</body>

上面页面代码中的最后一段粗体字代码指定了在该列增加两个按钮，当用户单击该列的 "编辑"按钮时，系统会激发editFn函数，该函数将会根据需要创建一个Ext.window.Window窗口来编辑当前记录；当用户单击该列的"删除"按钮时，系统将会激发"deleteFn"函数，该函数将会弹出一个确认框，让用户确认是否需要删除当前记录。

在浏览器中浏览该页面，单击"编辑"按钮，将可以看到如图6.82所示界面。