我做的是一个添加删除按钮的例子,先看一下效果。

代码:
代码操作数据库那部分没有写,在下面的代码有标明。

Code
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>Example</title>
6
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
7
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
8
<script type="text/javascript" src="../ext/ext-all.js"></script>
9
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
10
11
<script language="javascript" type="text/javascript">
12
13
var store = new Ext.data.SimpleStore(
{
14
//调用后台代码,获取数据
15
fields: [
16
'ID',
17
'Name'
18
],
19
});
20
store.load();
21
22
//创建Grid
23
var grid = new Ext.grid.GridPanel(
{
24
el: 'exampleContainer',
25
autoHeight: true,
26
store: store,
27
disableSelection: false,
28
loadMask: true,
29
deferRowRender: false,
30
cm: new Ext.grid.ColumnModel([
31
{
32
header: 'Name',
33
dataIndex: 'Name',
34
sortable: true,
35
renderer: encodeHtml
36
},
{header: '',
37
dataIndex: 'ID',
38
renderer:AddButtonDel//调用函数,新建Delete Button 按钮
39
}
40
]),
41
viewConfig:
{
42
forceFit: true
43
}
44
});
45
46
//加上Delete按钮在Grid的每一行
47
//String.format('') , ''里可以加上你想要的任何模板列
48
//Eg: String.format('<b><a href="http://www.cnblogs.com" target="_blank">Delete</a></b>');
49
function AddButtonDel(id)
{
50
return String.format(
51
'<input id="btnDelete" style="background-image: url(../Img/delete.gif); 22px; height: 22px" type="button" title="Delete" onclick="return DeleteClick('+id+')" />'
52
);
53
}
54
55
//删除函数
56
function DeleteClick(id)
57
{
58
Ext.Msg.confirm('Warning', 'Are you sure delete this item?',
59
function(btn, text,s)
{
60
if (btn == 'yes')
{
61
var params = id;
62
63
wrappedSBar.StatusBar.showBusy('Deleting
');
64
//调用后台代码删除数据
65
}
66
});
67
}
68
69
Ext.onReady(function()
{
70
Ext.QuickTips.init();
71
grid.render();
72
});
73
</script>
74
</head>
75
<body>
76
<div id="exampleContainer"></div>
77
</body>
78
</html>
不知道我说的明白否,其实只有两个地方是主要的,一个是如何调用生成模板列函数,另一个是生成模板列函数如何写,
怎么返回模板列。

Code
1
//重点一
2
{header: '',
3
dataIndex: 'ID',
4
renderer:AddButtonDel//调用函数,新建Delete Button 按钮
5
}
6
//重点二
7
function AddButtonDel(id){
8
return String.format(
9
'<input id="btnDelete" style="background-image: url(../Img/delete.gif); 22px; height: 22px" type="button" title="Delete" onclick="return DeleteClick('+id+')" />'
10
);
11
}
有不对的对方,请大家指教。