Ext2.2用数组为数据源显示Grid的例子

java2000.net

浏览: 651135 次
性别:
来自: 天津

最近访客更多访客>>

kingkwj

Higher

sing9123

Mr_冰凉

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT JavaScript CSS json 数据结构

效果如下：

源代码如下：

<html>
<head>
<meta http-equiv="Content-Type" c>
<title>Array Grid Example</title>
<link rel="stylesheet" type="text/css"
  href="js/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
  Ext.onReady( function() {
    // 数据，使用JSON格式的标准格式。
    // 数组用[]
    // 数据用逗号分开
    var myData = [ 
        [ 1, '张三', 3800, 1.73, '1970-01-01' ],
        [ 2, '李四', 2800, 1.81, '1980-01-01' ], 
        [ 12, '王武', 2000, 1.43, '1988-03-13' ] 
    ];
    
    // 自定义的一个数据格式化方法
    // 根据数字进行不同颜色的显示
      function highter(val) {
        if (val > 1.50) {
          return '<span style="color:green;">' + val + '</span>';
        } else{
          return '<span style="color:red;">' + val + '</span>';
        }
        return val;
      }
      // 创建数据集的结构
      var store = new Ext.data.SimpleStore( {
        fields : [ {
          name :"id"
        }, {
          name :'name'
        }, {
          name :'price',
          type :'int'
        }, {
          name :'high',
          type :'float'
        }, {
          name :'birthday',
          type :'date',
          dateFormat :'Y-m-d' // 日期的格式
        } ]
      });
      // 从数组里面装载数据
      store.loadData(myData);
      // 创建表格
      var grid = new Ext.grid.GridPanel( {
        store :store,
        columns : [ {
          id : "id", // 内部的标识
          header : "编号", // 显示的标题
          width : 60, // 宽度
          sortable : true, // 是否可以排序
          dataIndex : "id" // 对应数据集的字段
        },{
          id :'name',
          header :"姓名",
          width :160,
          sortable :true,
          dataIndex :'name'
        }, {
          header :"收入",
          width :75,
          sortable :true,
          renderer :'usMoney', // 使用系统自带的格式化方法
          dataIndex :'price'
        }, {
          header :"身高(米)",
          width :75,
          sortable :true,
          dataIndex :'high',
          renderer: highter // 自定义的数据格式化方法
        }, {
          header :"出生日期",
          width :100,
          sortable :true,
          renderer :Ext.util.Format.dateRenderer('Y年m月d日'), // 自定义的日期显示
          dataIndex :'birthday'
        } ],
        autoExpandColumn :'name', // 这个列将默认占用所有的可用的列宽
        height :350, // 高度
        width :600, // 宽度
        title :'人员信息表格' // 表格的标题
      });
      grid.render('grid-example'); // 生成到这个id标签里面
    });
</script>
</head>
<body>
<h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1>
<div id="grid-example"></div>
</body>
</html>

后面，将使用java作为数据源，生成Grid，格式为json

http://www.java2000.net/p8756

<script type="text/javascript"> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

分享到：