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

效果如下:
Ext2.2用数组为数据源显示Grid的例子

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

你可能感兴趣的:(JavaScript,数据结构,json,css,ext)