<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Grid </title>
<link type="text/css" href="https://www.jb51.net/resources/css/ext-all.css" href="https://www.jb51.net/resources/css/ext-all.css" />
<script type="text/javascript" src="https://www.jb51.net/adapter/ext/ext-base.js" src="https://www.jb51.net/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="https://www.jb51.net/ext-all.js" src="https://www.jb51.net/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form runat="server">
<div>
</div>
</form>
</body>
</html>
图4 具有时间数据的Grid
3.5 自动显示行号和复选框
实际上，行号和复选框都是renderer的延伸。当然，复选框的功能要复杂得多。
1、自动显示行号：修改列模型cm,加入RowNumberer对象；
2、复选框：我们创建一个CheckboxSelectionModel()
3、详细代码如下，效果图如图5所示
复制代码 代码如下:
var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
图5 自动行号以及复选框效果图
1
您可能感兴趣的文章: