我做的是一个添加删除按钮的例子,先看一下效果。
代码:
代码操作数据库那部分没有写,在下面的代码有标明。
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>
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: '',
3dataIndex: 'ID',
4renderer:AddButtonDel//调用函数,新建Delete Button 按钮
5}
6//重点二
7function 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}
1//重点一
2{header: '',
3dataIndex: 'ID',
4renderer:AddButtonDel//调用函数,新建Delete Button 按钮
5}
6//重点二
7function 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}
有不对的对方,请大家指教。