我做的是一个添加删除按钮的例子,先看一下效果。
![](https://www.cnblogs.com/images/cnblogs_com/qannie/Example-AddDeleteButton.JPG)
代码:
代码操作数据库那部分没有写,在下面的代码有标明。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
10![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script language="javascript" type="text/javascript">![](https://www.cnblogs.com/Images/dot.gif)
12![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
var store = new Ext.data.SimpleStore(
{
14
//调用后台代码,获取数据
15
fields: [
16
'ID',
17
'Name'
18
],
19
});
20
store.load();
21![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
//创建Grid
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
32
header: 'Name',
33
dataIndex: 'Name',
34
sortable: true,
35
renderer: encodeHtml
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{header: '',
37
dataIndex: 'ID',
38
renderer:AddButtonDel//调用函数,新建Delete Button 按钮
39
}
40
]),
41![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
viewConfig:
{
42
forceFit: true
43
}
44
});
45![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
//加上Delete按钮在Grid的每一行
47
//String.format('') , ''里可以加上你想要的任何模板列
48
//Eg: String.format('<b><a href="http://www.cnblogs.com" target="_blank">Delete</a></b>');
49![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function AddButtonDel(id)
{
50
return String.format(
51
'<input id="btnDelete" style="background-image: url(../Img/delete.gif); width: 22px; height: 22px" type="button" title="Delete" onclick="return DeleteClick('+id+')" />'
52
);
53
}
54![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
//删除函数
56
function DeleteClick(id)
57![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
58
Ext.Msg.confirm('Warning', 'Are you sure delete this item?',
59![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
function(btn, text,s)
{
60![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if (btn == 'yes')
{
61
var params = id;
62![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
wrappedSBar.StatusBar.showBusy('Deleting
');
64
//调用后台代码删除数据
65
}
66
});
67
}
68
69![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
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>
不知道我说的明白否,其实只有两个地方是主要的,一个是如何调用生成模板列函数,另一个是生成模板列函数如何写,
怎么返回模板列。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
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); width: 22px; height: 22px" type="button" title="Delete" onclick="return DeleteClick('+id+')" />'
10
);
11
}
有不对的对方,请大家指教。