现在的位置: 首页 > 综合 > 正文

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

2013年07月02日 ⁄ 综合 ⁄ 共 2549字 ⁄ 字号 小 中 大 ⁄ 评论关闭
效果如下：

源代码如下：

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" c>
  4. <title>Array Grid Example</title>
  5. <link rel="stylesheet" type="text/css"
  6.   href="js/resources/css/ext-all.css" />
  7. <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
  9. <script type="text/javascript" src="js/ext-all.js"></script>
  11. <script type="text/javascript">
  12.   Ext.onReady( function() {
  14.     // 数据，使用JSON格式的标准格式。
  15.     // 数组用[]
  16.     // 数据用逗号分开
  17.     var myData = [ 
  18.         [ 1, '张三', 3800, 1.73, '1970-01-01' ],
  19.         [ 2, '李四', 2800, 1.81, '1980-01-01' ], 
  20.         [ 12, '王武', 2000, 1.43, '1988-03-13' ] 
  21.     ];
  22.     
  24.     // 自定义的一个数据格式化方法
  25.     // 根据数字进行不同颜色的显示
  26.       function highter(val) {
  27.         if (val > 1.50) {
  28.           return '<span style="color:green;">' + val + '</span>';
  29.         } else{
  30.           return '<span style="color:red;">' + val + '</span>';
  31.         }
  32.         return val;
  33.       }
  35.       // 创建数据集的结构
  36.       var store = new Ext.data.SimpleStore( {
  37.         fields : [ {
  38.           name :"id"
  39.         }, {
  40.           name :'name'
  41.         }, {
  42.           name :'price',
  43.           type :'int'
  44.         }, {
  45.           name :'high',
  46.           type :'float'
  47.         }, {
  48.           name :'birthday',
  49.           type :'date',
  50.           dateFormat :'Y-m-d' // 日期的格式
  51.         } ]
  52.       });
  53.       // 从数组里面装载数据
  54.       store.loadData(myData);
  56.       // 创建表格
  57.       var grid = new Ext.grid.GridPanel( {
  58.         store :store,
  59.         columns : [ {
  60.           id : "id", // 内部的标识
  61.           header : "编号", // 显示的标题
  62.           width : 60, // 宽度
  63.           sortable : true, // 是否可以排序
  64.           dataIndex : "id" // 对应数据集的字段
  65.         },{
  66.           id :'name',
  67.           header :"姓名",
  68.           width :160,
  69.           sortable :true,
  70.           dataIndex :'name'
  71.         }, {
  72.           header :"收入",
  73.           width :75,
  74.           sortable :true,
  75.           renderer :'usMoney', // 使用系统自带的格式化方法
  76.           dataIndex :'price'
  77.         }, {
  78.           header :"身高(米)",
  79.           width :75,
  80.           sortable :true,
  81.           dataIndex :'high',
  82.           renderer: highter // 自定义的数据格式化方法
  83.         }, {
  84.           header :"出生日期",
  85.           width :100,
  86.           sortable :true,
  87.           renderer :Ext.util.Format.dateRenderer('Y年m月d日'), // 自定义的日期显示
  88.           dataIndex :'birthday'
  89.         } ],
  90.         autoExpandColumn :'name', // 这个列将默认占用所有的可用的列宽
  91.         height :350, // 高度
  92.         width :600, // 宽度
  93.         title :'人员信息表格' // 表格的标题
  94.       });
  96.       grid.render('grid-example'); // 生成到这个id标签里面
  97.     });
  98. </script>
  99. </head>
  100. <body>
  102. <h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1>
  103. <div id="grid-example"></div>
  104. </body>
  105. </html>

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

http://www.java2000.net/p8756

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞