Ext学习，使用Grid控件

 1.引入必要的Ext支持

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>

2.Ext.Grid表格

<script>
//设置表头 sortable设置是否可以排序 renderer的值是个function会把该列的值传进去，获得function的返回值显示该列
var cm = new Ext.grid.ColumnModel(
[
{header:'id',dataIndex:'id',sortable: true,width: 75},
{header:'性别',datIndex:'sex',sortable:true,width:75,renderer:renderSex},
{header:'name',dataIndex:'name',sortable: true,width: 75},
{header:'des',dataIndex:'des',sortable: true,width: 100,renderer:renderDes}
]
);
//添加数据
var data = [
['1','male','name1','des1'],
['2','female','name2','des2'],
['3','male','name3','des3'],
['4','female','name4','des4'],
['5','male','name5','des5']
];
//按如下列解析数据
var ds = new Ext.data.ArrayStore({
fields:
[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'des'}
]
});
ds.loadData(data);

//装配表头和数据为表格
var grid = new Ext.grid.GridPanel(
{
el:'grid', //要渲染的位置ID
ds:ds,
cm:cm,
stripeRows: true,
height: 300, //表格高度
width: 380, //表格宽度
title: 'Array Grid', //面板title
stateful: true
});
grid.render();

//判断是男就设置红色，是女就设置绿色
function renderSex(value)
{
if(value == 'male')
{
return "<span style='color:red;font-weight:bold;'> 红男</span><img src='user_gray.png' />";
}
else
{
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
}
}


/**
value是当前单元格的值
cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
columnIndex列号太简单了。
store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据
*/
//查看该行的详细信息
function renderDes(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;
}
</script>

3.定义渲染的div

<div id="grid">
</div>

4.给表第一列加为复选框

//设置多选sm既要放到cm里面也要放到grid里面
var sm = new Ext.grid.CheckboxSelectionModel();

 

//设置表头 sortable设置是否可以排序 renderer的值是个function会把该列的值传进去，获得function的返回值显示该列
var cm = new Ext.grid.ColumnModel(
[
//系统自动加上序号
new Ext.grid.RowNumberer(),
//添加checkbox
sm,
{header:'id',dataIndex:'id',sortable: true,width: 75},
{header:'性别',datIndex:'sex',sortable:true,width:75,renderer:renderSex},
{header:'name',dataIndex:'name',sortable: true,width: 75},
{header:'des',dataIndex:'des',sortable: true,width: 100,renderer:renderDes}
]
);

 

//装配表头和数据为表格
var grid = new Ext.grid.GridPanel(
{
el:'grid', //要渲染的位置ID
ds:ds,
cm:cm,
sm:sm, //添加checkbox
height: 300, //表格高度
width: 380, //表格宽度
title: 'Array Grid', //面板title
stateful: true
});
grid.render();