html代码:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Grid表格</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(myData),
reader:new Ext.data.ArrayReader({id:0},[
{name:'company'},
{name:'price',type:'float'},
{name:'change',type:'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var sm = new Ext.grid.CheckboxSelectionModel();
var colModel= new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:"company",width:120,sortable:true,dataIndex:"company"},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "Change(%) ", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange',renderer:renderTime}
]);
var grid = new Ext.grid.GridPanel({
//当grid初始显示在el:Ext.getBody()时,renderTo无效;当el设为某个控件时,renderTo正常;当el不设置时,renderTo显示出来的内容应用了myDiv的样式。
//el:Ext.getBody(),
el:'gridDiv',
//renderTo:指出grid构造出来之后要在哪里呈现,
//renderTo: "myDiv",
width:560,
height:180,
ds: ds,
cm: colModel,
sm:sm,
//间隔行
stripeRows: true,
title: 'Array Grid'
});
grid.render();
});
function renderTime(value){
if(value>=new Date('09/01/2010') && value<new Date('10/01/2010')){
return "<span style='color:red;font-weight:bold;'>"+value.toLocaleDateString()+"</span>";
}else{
return value.toLocaleDateString();
}
}
</script>
<style type="text/css">
<!--
.red{
color:#FF0000;
}
#gridDiv{
position:relative;
left:100px;
}
-->
</style>
</head>
<div id="gridDiv"> </div>
<body>
</body>
</html>
效果图:
在Tomcat上发布后,运行结果显示正常。(直接将ext文件夹复制到WebRoot下)
- 大小: 11.9 KB
分享到:
相关推荐
最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包最新ext3.0资源包
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档Ext 3.0 中文文档
ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API ext 3.0 中文API
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传EXT3.0实现文件上传
Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文Ext.3.0.中文
EXT 入门实例,以一个简单的登录为例子、、、EXT3.0 登录实例,EXT3.0 源码
Ext3.0使用示例
extjs3.0 ext3.0 ext文档 ext例子
EXT3.0中文API
Ext3.0开发包
Myecplise 设置ext3.0自动提示功能 包含Spket的插件包和ext3.0的提示文件ext.jsb文件 ,以及具体设置操作
最新 发布 ext 3.0 中文 API 文档
ext3.0中的99%的控件的用法。包括表格。表单。分页工具栏。图标等。非常的详细。可以直接运行!
Ext3.0教程,非常经典,可以帮助大家学习AjAx框架,
Ext3.0 api 帮助文档
Ext3.0发布RC1版本,API文档:http://extjs.com/deploy/ext-3.0-rc1/docs/
Ext3.0中文文档详细介绍了Ext各个功能点的内容,包括常用的Store、Data、render、Grid、Form、Tree等。