我做的是一个添加删除按钮的例子，先看一下效果。
代码：
代码操作数据库那部分没有写，在下面的代码有标明。
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 =
'../exthttp://www.bianceng.cn/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); width: 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>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ext
， 按钮
， grid
， 代码
， function
， store
， ext22
， gridpanel
， btn方法按钮调用aspx
， ext renderer
， ext renderer添加验证
s.gif
gridview 充满 panel、aspxgridview、aspxgridview绑定数据、aspxgridview 编辑、aspxgridview双击事件，以便于您获取更多的相关知识。
时间： 2024-10-31 11:56:56