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

EXTJS表格有关问题

热度:324   发布时间:2012-02-15 12:09:44.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> 
  相关解决方案