<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<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">
Ext.onReady(function(){
//创建表格列
var cm=new Ext.grid.ColumnModel([
{header:"编号",dataIndex:"id",sortable:true},//sortable为此列是否支持自动排序
{header:"姓名",dataIndex:"name",id:"name"},//此处声明id编号是为了让grid里面的autoExpandColumn:"name"得到渲染，否则会报错
{header:"电话",dataIndex:"tel"},
{header:"注册日期",dataIndex:"regtime",id:"regtime",type:Date,renderer: function(value) {
return value.substr(0,10);
}}
]);
//创建表格数据
var data=[
["1","小胡","13057509390","2010-03-24 10:25:48"],
["2","小胡","13057509391","2010-03-25 10:25:48"],
["3","小胡","13057509392","2010-03-26 10:25:48"]
];
//创建数据存储过象
var store=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:"id"},
{name:"name"},
{name:"tel"},
{name:"regtime"}
])
});
store.load();
//装配表格
var grid=new Ext.grid.GridPanel({
renderTo:"grid1",
height:100,
store:store,
cm:cm,
autoExpandColumn:"name",//自动列宽,name指定的是cm的id名称
autoExpandColumn:"regtime"//自动列宽,regtime指定的是cm的id名称
});
})
</script>
</head>
<body>
<div id="grid1"></div>
</body>
</html>
学习参考资料：http://blog.csdn.net/rocket5725/archive/2009/09/09/4535323.aspx
- 本文标题： ExtJS 表格GridPanel学习案例代码一
- 文章分类：【JQuery/JavaScript】
- 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.
- 上一篇：Rss订阅地址大全
- 下一篇： ExtJS Grid日期列格式化问题