EXT实现表格显示

来源:互联网 发布:图书cip数据在哪 编辑:程序博客网 时间:2024/05/17 01:12

以下是JS代码:

  1. Ext.onReady(function() {
  2.             // 定义表头
  3.             var cm = new Ext.grid.ColumnModel([{
  4.                         header : "id",
  5.                         dataIndex : "id"
  6.                     }, {
  7.                         header : "姓名",
  8.                         dataIndex : "name"
  9.                     }, {
  10.                         header : "性别",
  11.                         dataIndex : "sex"
  12.                     },{
  13.                         header : "email",
  14.                         dataIndex : "email"
  15.                     },  {
  16.                         header : "年龄",
  17.                         dataIndex : "age"
  18.                     }]);
  19.             // 相当于数据库字段的描述
  20.             // 数据库定义结构
  21.             var ff = ["id""name""email""sex""age"];
  22.             
  23.             
  24.             
  25.           //***********************************************         
  26.             var data = [["1""ACCP1""shenzhen_zsw@163.com""男""20"],
  27.                     ["2""ACCP2""shenzhen_zsw1@163.com""男""20"],
  28.                     ["3""ACCP3""shenzhen_zsw2@163.com""男""20"],
  29.                     ["4""ACCP4""shenzhen_zsw3@163.com""男""20"],
  30.                     ["5""ACCP5""shenzhen_zsw4@163.com""男""20"]];
  31.             var store = new Ext.data.SimpleStore({
  32.                         fields : ff,
  33.                         data : data
  34.                     });
  35.          //***********************************************
  36.                     
  37.                                       
  38.                     
  39.                     
  40.             //创建一个表格面板
  41.             var grid = new Ext.grid.GridPanel({
  42.                         title:'ACCP_ZSW'//表格标题
  43.                         cm : cm,          //表格的表头
  44.                         store : store,    //表格
  45.                         width:500,
  46.                         height:200
  47.                     });
  48.             grid.render('zsw'); //加载当页面中相应的标签
  49.         });

 

以下是html代码:

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  2. <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
  3. <script type="text/javascript" src="ext/ext-base.js"></script>
  4. <script type="text/javascript" src="ext/ext-all.js"></script>
  5. <script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
  6. <script type="text/javascript" src="js/table.js"></script>
  7.         SimpleStore:<br>
  8.         fields : ff 和 data : data,
  9.  <div id="zsw"></div>