代码:
- HTML code
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../ext/ext-all.js"> </script>
<script type="text/javascript" src="../examples.js"> </script>
<script>
function renderSex(value){
if(value == 'male'){
return " <span style='color:red;font-weight:bold;'>男 </>"
}
else{
if(value == 'female'){
return " <span style='color:blue'>女 </>"
}
return " <span style='color:green;font-weight:lighter'>人妖 </>"
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = " <input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是:" + value + "\\n" +
"这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
"\")'>";
return str;
}
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name',sortable:true},
{header:'性别',dataIndex:'sex',renderer:renderSex,sortable:true},
{header:'描述',dataIndex:'descn',renderer:renderDescn,sortable:true}
]);
var data = [
['1','name1','male','descn1'],
['2','name2','male','descn2'],
['3','name3','female','descn3'],
['4','name4','descn4'],
['5','name5','female','descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'grid.jsp?start=0&linit=10'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'sex'},
{name: 'descn'}
])
});
ds.load();