发表时间：2009-03-13
最后修改：2009-03-16
Ext开发中为了把一个对象显示到页面,首选就是ColumnMode了，但如果一个对象的属性是日期类型的话就 要注意很多细节了。很多人喜欢在后台写一个日期转化成字符串的类，其实这是不太合理的，一个是因为不够灵活，而是因为这些Ext已经为我们做了封装没必要做那么多额外的工作；先总结如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试001.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="../scripts/ext/examples.js"></script>
<script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="stu.js"></script>
<style>
.color_red{
background:lightgreen;
}
</style>
<script type="text/javascript">
function formatDate(value){
alert("value调用了");
return Ext.util.Format.date(value,"Y-m-d");
}
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
var sm=new Ext.grid.CheckboxSelectionModel();
var ds=new Ext.data.Store ({
proxy:new Ext.data.HttpProxy({
url:'../getSomeStu.do',
method:'post'
}),
reader:new Ext.data.JsonReader({
root:'list',
totalProperty:'totalCount',
fields:[
{name:"stuId"},
{name:"name"},
{name:"sex"},
{name:"birthday"},
{name:"passport"},
]
})
});
var cm=new Ext.grid.ColumnModel ([sm,
{header:'编号',dataIndex:'stuId',width:100},
{header:'名字',dataIndex:'name',width:100},
{header:'性别',dataIndex:'sex',width:100},
{header:'出生年月',dataIndex:'birthday',width:170,
renderer:function(value,cellmeta,record,rowIndex,columnIndex,color_store){
if(value!=null){
return temp=new Date(value.time).format('Y-m-d');
}else{
return null;
}
}
},
{header:'身份证号',dataIndex:'passport',width:100},
{header:'操作',dataIndex:'stuId',width:300,
renderer:function(value,cellmeta,record,rowIndex,columnIndex,color_store){
var hrefHtml="<a href=javascript:createStuForm("+null+")><img src='../images/add.gif' title='新增学生'></a>";
hrefHtml+="<a href=javascript:createStuForm("+value+")><img src='../images/forum.gif' title='查看学生信息'></a>"
return hrefHtml;
}
}
]);
var totalStudent=new Ext.grid.GridPanel ({
el:'totalStudent',
renderTo:'totalStudent',
width:1000,
height:400,
ds:ds,
cm:cm,
sm:sm,
bbar:new Ext.PagingToolbar({
store:ds,
pageSize:2,
displayInfo:true,
emptyMsg:'找不到相关数据'
})
});
ds.load({params:{start:0,limit:2}});
totalStudent.render();
});
</script>
</head>
<body>
<div id="totalStudent"></div>
</body>
</html>
要特别注意Y-m-d的大小写形式，否则可能就不是你想要的日期格式了;具体格式可以参考http://hintcnuie.iteye.com/blog/254294
