Ext3.0学习笔记grid

最新推荐文章于 2018-10-06 14:21:00 发布

gmgd

最新推荐文章于 2018-10-06 14:21:00 发布

阅读量360

点赞数

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">

</style>
</head>
<div id="gridDiv"> </div>
<body>
</body>
</html>