Ext 2.0 如何给GridPanel 加上ASPX --- GridView 一样的模板列
这个问题已经放了好久，经过同事的指点，今天很顺利的就做出来了；跟大家共享一下。
我做的是一个添加删除按钮的例子，先看一下效果。
代码：
代码操作数据库那部分没有写，在下面的代码有标明。
Code1
<!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
//创建Grid23
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: encodeHtml36
}, {header: '',37
dataIndex: 'ID',38
renderer:AddButtonDel//调用函数，新建Delete Button 按钮39
} 40
]),41
viewConfig: {42
forceFit: true43
} 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>
不知道我说的明白否，其实只有两个地方是主要的，一个是如何调用生成模板列函数，另一个是生成模板列函数如何写，
怎么返回模板列。
Code1
//重点一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
}
有不对的对方，请大家指教。
浙公网安备 33010602011771号