Ext.js Grid无法显示
0
悬赏园豆：10
[已关闭问题]
关闭于 2012-04-12 14:26
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/script/resources/css/ext-all.css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/script/Ext.Base.js"> </script> <script type="text/javascript" src="<%=request.getContextPath()%>/script/ext-all.js"> </script> <title>用户列表</title> </head> <script type="text/javascript"> // 数据表结构 // 列名 数据类型 描述 // ------------------------------------------------- // id int 用户ID // UserName varchar 用户姓名 // UserSex varchar 性别 // UserBorn date 出生日期 // UserEmail varchar 电子地址 // UserTel varchar 电话号码 // isDel int 删除标记 Ext.onReady(function() { //定义数据类型 Ext.define('UserData',{ extend: 'Ext.data.Model', fields: [ //第一个字段需要指定mapping，其他字段，可以省略掉。 {name:'userName',mapping:'userName'}, 'userSex', 'userBorn', 'userEmail', 'userTel' ] }); //定义Grid列模型 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//自动行号 {header:'用户姓名',dataIndex:'userName'}, {header:'性别',dataIndex:'userSex'}, {header:'出生日期',dataIndex:'userBorn',xtype:'datecolumn'}, {header:'电子地址',dataIndex:'userEmail'}, {header:'电话号码',dataIndex:'userTel'} ]); cm.defaultSortable = true; //设置为默认所有列均可排序 //建立数据存储 var ds = new Ext.data.Store({ model:'UserData', proxy : new Ext.data.HttpProxy({ url : 'UserInfoData', root:'UserData' }) }); ds.load(); //建立Grid控件 var grid = Ext.create('Ext.grid.GridPanel',{ renderTo: 'gridContainer', store: ds, cm: cm }); grid.render(); }); </script>
<body>
<div id='gridContainer'></div>
</body>
</html>
url : 'UserInfoData', 这里映射到一个返回JSONObject的控制器，经过测试，控制器可以正常返回数据，但是Grid在页面上显示不出来（页面为空白）
