首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > 高性能WEB开发 >

EXTJS表格有关问题

2012-02-15 
EXTJS表格问题!本人Extjs新手,最近项目要用Extjs做前台交互,想做一个列表,各位高手帮帮忙,怎样用Extjs接受

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> 

热点排行