脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJs 表格的实现,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
PRint?<htML>
<head>
<meta http-equiv="Content-tyPE" content="text/html; charset=gb2312">
<tITle>Ext Buttons</title>
<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>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
VAR sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动显示行号
sm,//复选框
{hearder:'编号',dataindex:'id',sortable:true},//每一行对应表格的一列
{header:'姓名',dataIndex:'name'},
{header:'性别',dataIndex:'sex',renderer:rendererSex},
{header:'描述',dataIndex:'descn'},
{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意
]);
function rendererSex(value){
if(value == 'male'){
return "<span style = 'color:red;font-weight:bold'>男</span>";
}
else{
return "<span style = 'color:green;font-weight:bold'>女</span>";
}
}
var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
['2','卡卡','female','descn','1990-01-15T03:34:18'],
['3','c罗','male','descn','1990-01-15T03:34:18'],
['4','梅西','female','descn','1990-01-15T03:34:18'],
['5','比利亚','male','descn','1990-01-15T03:34:18']
];
//var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息
//header:首部显示文本
//dataIndex:列对应的记录集字段
//sortable:是否可排序
//renderer:渲染函数
//format列格式化信息
/*数据存储器Store*/
var store = new Ext.data.Store({
Proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'},
{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据,同时还需要在cm里进行配置
]),
sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式
}
);
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'grid',//指示表格渲染到什么地方去
store:store,//数据存储器
cm:cm,//列定义信息
sm:sm,//复选框
autoHeight:true,
});
}
);
</script>
</head>
<body>
<p id = "grid">
</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ext Buttons</title>
<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>
<script type="text/javascript" src="../examples.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动显示行号
sm,//复选框
{hearder:'编号',dataIndex:'id',sortable:true},//每一行对应表格的一列
{header:'姓名',dataIndex:'name'},
{header:'性别',dataIndex:'sex',renderer:rendererSex},
{header:'描述',dataIndex:'descn'},
{header:'生日',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}//日期类型需要特别注意
]);
function rendererSex(value){
if(value == 'male'){
return "<span style = 'color:red;font-weight:bold'>男</span>";
}
else{
return "<span style = 'color:green;font-weight:bold'>女</span>";
}
}
var data = [['1','小斯','male','descn','1990-01-15T03:34:18'],
['2','卡卡','female','descn','1990-01-15T03:34:18'],
['3','c罗','male','descn','1990-01-15T03:34:18'],
['4','梅西','female','descn','1990-01-15T03:34:18'],
['5','比利亚','male','descn','1990-01-15T03:34:18']
];
//var cm = new Ext.grid.ColumModel(...) 负责创建表格的列信息
//header:首部显示文本
//dataIndex:列对应的记录集字段
//sortable:是否可排序
//renderer:渲染函数
//format列格式化信息
/*数据存储器Store*/
var store = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'sex'},
{name:'descn'},
{name:'date',type:'date',dateformat:'Y-m-dTH:i:s'}//显示日期类型数据,同时还需要在cm里进行配置
]),
sortInfo:{field:"name",direction:"ASC"}//设置默认排序方式
}
);
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'grid',//指示表格渲染到什么地方去
store:store,//数据存储器
cm:cm,//列定义信息
sm:sm,//复选框
autoHeight:true,
});
}
);
</script>
</head>
<body>
<p id = "grid">
</p>
</body>
</html>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJs 表格的实现全部内容,希望文章能够帮你解决javascript代码实例教程-ExtJs 表格的实现所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。