2 wy18780215467 wy18780215467 于 2014.11.08 22:36 提问

extjs的grid在页面上无法显示

js代码如下,效果就是页眉,页脚,和右边的表单可以显示出来,中间网格空白,F12可以看到请求成功,并且返回了数据,求帮助!

Ext.onReady(function(){
//页面整体布局
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'north',
html:'

学生信息管理
'
},grid,{ //这里放网格
region:'east',
html:'表单'
},{
region:'south',
html:'
页脚
'
}]
});
var sexRenderer = function(value){
if(value){
return '男';
}
else{
return '女';
}
};
var store = new Ext.data.JsonStore({
    proxy : new Ext.data.HttpProxy({
                url : 'test'// 相对路径
            }),
    reader : new Ext.data.JsonReader({
        totalProperty : 'totalCount',//总条目数
        root : 'students' //数据
    }),
    fields : [{
                name : 'name'
            }, {
                name : 'gender'
            }, {
                name : 'tel'
            }, {
                name : 'political'
            }, {
                name : 'professional'
            }],
     pageSize:2
});
store.load({params:{start:0,limit:2}});

//构造列

var columns = new Ext.grid.ColumnModel([
    {header:'姓名',dataIndex:'name'},
    {header:'性别',dataIndex:'gender',renderer:sexRenderer}, //为真返回男,否则女
    {header:'电话',dataIndex:'tel'},
    {header:'政治面貌',dataIndex:'political'},
    {header:'专业',dataIndex:'professional'}
]);

columns.defaultSortable = true;
//构造网格

var grid = new Ext.grid.GridPanel({
     viewConfig : {
         forceFit : true
     },
     region:'center',
     store :store,
     cm : columns,
     bbar:new Ext.PagingToolbar({
            pageSize:2,
            store:store,
            displayInfo:true,
            displayMsg:'show{0}th to {1}th record, sum{2}',
            emptyMsg:'No Record!'
          })
 });

});

1个回答

showbo
showbo   Ds   Rxr 2014.11.20 11:56

reader是proxy的配置

    proxy :new Ext.data.HttpProxy({
    url: 'test', // 相对路径
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalCount', //总条目数
        root: 'students' //数据
    })
})
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!