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();