我做的是一个添加删除按钮的例子,先看一下效果。
代码:
代码操作数据库那部分没有写,在下面的代码有标明。
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
//创建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); 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
//重点一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
}有不对的对方,请大家指教。