当前位置: 代码迷 >> 高性能WEB开发 >> EXTJS表格有关问题
  详细解决方案

EXTJS表格有关问题

热度:105   发布时间:2016-05-11 09:58:20.0
EXTJS表格问题!
本人Extjs新手,最近项目要用Extjs做前台交互,想做一个列表,各位高手帮帮忙,怎样用Extjs接受后台数据,具体用哪个组件!谢谢!!!

------解决方案--------------------
这是前台页面表格的写法,不包含分页
HTML code
<%@ page language="java" pageEncoding="UTF-8"%><%    String path = request.getContextPath();    String basePath = request.getScheme() + "://"            + request.getServerName() + ":" + request.getServerPort()            + path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>    <head>        <base href="<%=basePath%>">        <title>学员列表</title>        <meta http-equiv="pragma" content="no-cache">        <meta http-equiv="cache-control" content="no-cache">        <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">        <meta http-equiv="description" content="This is my page">        <link rel="stylesheet" type="text/css"            href="<%=path%>/ext-3.3.1/resources/css/ext-all.css">        <script type="text/javascript"            src="<%=path%>/ext-3.3.1/adapter/ext/ext-base.js"></script>        <script type="text/javascript" src="<%=path%>/ext-3.3.1/ext-all.js"></script>        <script type="text/javascript">        Ext.onReady(function(){                var record_start =0;                // 获取数据集方法            var store = new Ext.data.JsonStore({                url: 'common_myData.action',                root: 'results',                totalProperty: 'totalCount',                fields: ['stuno', 'name','sex','age'],                remoteSort: true            });                        store.load();//加载数据                        //表格每列对应数据集的fields            var cm = new Ext.grid.ColumnModel([                   new Ext.grid.RowNumberer({                    renderer:function(value,metadata,record,rowIndex){                      return record_start + 1 + rowIndex;                  }                }),{                    header: "学号",                    dataIndex: 'stuno',                    sortable: true,                    width: 150                },{                    header: "姓名",                    dataIndex: 'name',                    width:80                },{                    header: "性别",                    dataIndex: 'sex',                    width: 80                },{                    header: "年龄",                    dataIndex: 'age',                    sortable: true,                    align :'right',                    width:50                }            ]);                             //构建表格列表            var grid = new Ext.grid.GridPanel({                bodyStyle:'width:100%',                autoWidth:true,                height:518,                store: store,                cm: cm,                title:'学员列表',                loadMask: true,                renderTo:'studentsDiv',//对应body里的div的ID                tools:[{                    id:'close',                    handler:function(event, toolEl, panel){                        grid.destroy();                    }                }]            });        });    </script>    </head>    <body>        <div id="studentsDiv"></div>    </body></html>
本站暂不开放注册!
内测阶段只得通过邀请码进行注册!
 
  • 最近登录:Mon Jan 23 08:28:36 CST 2017
  • 最近登录:Mon Jan 23 08:28:36 CST 2017
  • 最近登录:Mon Jan 23 08:28:36 CST 2017
  • 最近登录:Mon Jan 23 08:28:36 CST 2017
  • 最近登录:Mon Jan 23 08:28:36 CST 2017