ExtJs4.0 grid表格不显示数据
时间:2011-12-21
来源:互联网
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.form.*',
'Ext.toolbar.Paging'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define('User', {
extend : 'Ext.data.Model',
fields: [
{name: 'userID',type:'int',mapping:'userID'},
{name: 'deptNo',type:'int'},
{name: 'userCode',type: 'string'},
{name: 'userName',type: 'string'},
{name: 'deptName',type: 'string'},
{name: 'parentDeptName', type:'string'},
{name: 'userPsw', type:'string'},
{name: 'userSex',type:'string'},
{name: 'userTel',type:'string'},
{name:'userEmail',type:'string'}
]});
var gridStore = Ext.create('Ext.data.Store', {
storeId:'userGridStore',
model : 'User',
proxy : {
type : 'ajax',
//url:'user/user.json'
url : 'getUserGridJson.action'
},
reader:{
type:'json',
root:'items'
},
autoLoad : true
});
var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
columnLines: true,
height: 460,
width: 900,
title: '用户管理',
frame : true,
selType : 'rowmodel',
viewConfig: {
loadMask : {msg : '正在加载数据,请稍等...' },
stripeRows: true
},
renderTo: 'user_grid',
columns: [{
header : '登录名',
//locked : true,
width : 100,
sortable : false,
dataIndex: 'userCode',
menuDisabled:true
},{
header : '用户名称',
//locked : true,
width : 100,
sortable : false,
dataIndex: 'userName'
},{
header : '部门名称',
width : 125,
sortable : true,
dataIndex: 'deptName'
},{
header : '上级部门',
width : 125,
sortable : true,
dataIndex: 'parentDeptName'
},{
header : '性别',
width : 60,
sortable : true,
dataIndex: 'userSex'
},{
header : '联系电话',
width : 100,
sortable : true,
dataIndex: 'userTel'
},{
header : '电子信箱',
width : 100,
sortable : true,
dataIndex: 'userEmail'
}]
});
});
后台返回数据成功,格式如下:
{items:[{
userID:1,
deptNo:1,
userCode:'101001',
userName:'张三',
deptName:'1部',
parentDeptName:'',
userPsw:'1',
userSex:'1',
userTel:'',
userEmail:'[email protected]'
},{
userID:2,
deptNo:1,
userCode:'101002',
userName:'张三1',
deptName:'2部',
parentDeptName:'',
userPsw:'1',
userSex:'1',
userTel:'',
userEmail:'[email protected]'
} ]}
界面显示了一条空白行,没有任何内容。
'Ext.data.*',
'Ext.grid.*',
'Ext.form.*',
'Ext.toolbar.Paging'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.define('User', {
extend : 'Ext.data.Model',
fields: [
{name: 'userID',type:'int',mapping:'userID'},
{name: 'deptNo',type:'int'},
{name: 'userCode',type: 'string'},
{name: 'userName',type: 'string'},
{name: 'deptName',type: 'string'},
{name: 'parentDeptName', type:'string'},
{name: 'userPsw', type:'string'},
{name: 'userSex',type:'string'},
{name: 'userTel',type:'string'},
{name:'userEmail',type:'string'}
]});
var gridStore = Ext.create('Ext.data.Store', {
storeId:'userGridStore',
model : 'User',
proxy : {
type : 'ajax',
//url:'user/user.json'
url : 'getUserGridJson.action'
},
reader:{
type:'json',
root:'items'
},
autoLoad : true
});
var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
columnLines: true,
height: 460,
width: 900,
title: '用户管理',
frame : true,
selType : 'rowmodel',
viewConfig: {
loadMask : {msg : '正在加载数据,请稍等...' },
stripeRows: true
},
renderTo: 'user_grid',
columns: [{
header : '登录名',
//locked : true,
width : 100,
sortable : false,
dataIndex: 'userCode',
menuDisabled:true
},{
header : '用户名称',
//locked : true,
width : 100,
sortable : false,
dataIndex: 'userName'
},{
header : '部门名称',
width : 125,
sortable : true,
dataIndex: 'deptName'
},{
header : '上级部门',
width : 125,
sortable : true,
dataIndex: 'parentDeptName'
},{
header : '性别',
width : 60,
sortable : true,
dataIndex: 'userSex'
},{
header : '联系电话',
width : 100,
sortable : true,
dataIndex: 'userTel'
},{
header : '电子信箱',
width : 100,
sortable : true,
dataIndex: 'userEmail'
}]
});
});
后台返回数据成功,格式如下:
{items:[{
userID:1,
deptNo:1,
userCode:'101001',
userName:'张三',
deptName:'1部',
parentDeptName:'',
userPsw:'1',
userSex:'1',
userTel:'',
userEmail:'[email protected]'
},{
userID:2,
deptNo:1,
userCode:'101002',
userName:'张三1',
deptName:'2部',
parentDeptName:'',
userPsw:'1',
userSex:'1',
userTel:'',
userEmail:'[email protected]'
} ]}
界面显示了一条空白行,没有任何内容。
作者: zearbo 发布时间: 2011-12-21
有没有朋友遇到类似的问题?
作者: zearbo 发布时间: 2011-12-24
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28