ExtJS4.2之Grid表格

最新推荐文章于 2021-08-06 14:47:06 发布

原创最新推荐文章于 2021-08-06 14:47:06 发布 · 512 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用Ext JS库创建表格组件，包括定义列、数据和转换原始数据为可显示的数据。通过实例展示了如何在HTML页面中实现并渲染表格。

<%--
  Created by IntelliJ IDEA.
  User: zhanglongxiang
  Date: 15/10/17
  Time: 下午2:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
  <script type="text/javascript" src="extjs/ext-all.js"></script>
  <script type="text/javascript">
    //表格数据最起码有列、数据、转换原始数据这3项
    Ext.onReady(function(){
      //定义列
      var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
      ];
      //定义数据
      var data = [
              ['1','张三','描述01'],
              ['2','李四','描述02'],
              ['3','王五','描述03'],
              ['4','张龙翔','临沂大学'],
              ['5','高悄','描述05']
      ];
      //转换原始数据为EXT可以显示的数据
      var store = new Ext.data.ArrayStore({
        data:data,
        fields:[
          {name:'id'},
          {name:'name'},
          {name:'descn'}
        ]
      });
      //加载数据
      store.load();
      //创建表格
      var grid = new Ext.grid.GridPanel({
        renderTo:'grid',//渲染位置
        store:store,//转换后的数据
        columns:columns,//显示列
        stripeRows:true,//斑马线效果
        loadMask:true,//显示遮罩和提示功能
        forceFit:true//自动填满表格
      });
    });
    </script>
</head>
<body>
<div id = "grid"></div>
</body>
</html>