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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
关于Extjs的取值加载以及输入之后的ajax提交数据
先上代码: Ext.require([     'Ext.grid.*',     'Ext.data.*',     'Ext.util.*',     'Ext.state.*',     'Ext.form.*' ]); Ext.onReady(function() {     Ext.QuickTips.init();     Ext.form.Field.protot
EXT数据展示(Ext.grid.Panel)
在网上看到好多关于EXT的例子,但大多数都是用的EXT代理ajax请求的方式,我这里写的是把EXT与ajax拆开的。下面为EXT代码:var dataSource = ''; var myStore = ''; Ext.require([ 'Ext.grid.*', 'Ext.data.*' ]); Ext.onReady(function() { Ext.QuickTips.init();
extjs中的控件无法正常显示
在extjs开发中,不同页面的布局经常会使用复制、粘贴一些控件的代码,但是发现在调试时当同时打开2个以上页面,控件不能正常显示。(如下拉选项出现在左上角)   原因就是复制过来的控件id重复了,在extjs中控件名称可以重复,但id一定不能重复,即使在不同.js页面中。   解决方法:去掉id或者重命名。
Extjs实现多个Grid使用同一个Store,但显示不同的内容
在Extjs开发应用的过程中,遇到这样的要求:存在一个数据库表的内容(比较有字段A1,A2,A3,A4,B1,B2,B3,B4,C1,C2,C3,C4,D1,D2,D3,D4),在前端显示时,要在grid1中显示部分内容的数据(如A1,A2,A3,B1,B2,B3),在Grid2中显示另一部分内容的数据(C1,C2,C3,D1,D2,D3),在第三个Grid3中显示全部的数据的另外一些字段(如A1
按照深入浅出extjs中GridPanel显示不出的问题
第三章的示例无法显示,                     03.grid                                 Ext.onReady(function(){     var cm = new Ext.grid.ColumnModel([         {header:'编号',dataIndex:'id'},
Extjs 实现动态添加gridPanel的列和数据
最近几天在我们的.net项目中有一个单据要实现根据用户选择条件动态添加gridPanel的对应列和数据。 以前的页面及数据实现是在页面上直接显示gridPanel控件,并对应一个store。数据则在cs中赋值。这次则改在js中创建gridPanel对象,render到页面。store用jsonReader,所以数据格式应为json的。 大致步骤是:页面通过js请求到handler,获取数据(j
解决extjs grid 不随窗口大小自适应的问题
最近遇到的问题,在使用grid的时候窗口改变了但是grid却不能自适应的改变于是加了一条这行语句 问题就解决了,效果图   拖大后的效果 添加的语句: Ext.EventManager.onWindowResize(function(){ grid1.getView().refresh() }) 参看完整代码; grid
ExtJS两个grid用同一个store显示不同的数据
a) 在css文件中定义样式 .hide {display:none;} b) 在grid中添加属性             viewConfig: {                 getRowClass: function(record, rowIndex, rowParams, store){                     var value = record.
extjs 按条件查询出的数据在grid上不显示
在对extjs的按条件查询时,发现只要输入查询条件时,grid上查询的结果就不显示,但是如果不输入条件默认查询所有的 时候就能显示数据。输入条件时后台查出来的数据时时正确的返回到json格式的数据也是正确的一点问题也没有纠结了好 半天,就是不知道错在哪里。突然灵光一现怀疑到可能是store的问题,一看果然是自己的store中没有加入remoteFilter : true 的属性。而我的过滤条
extJs中一个viewport中, 使用一个请求, 同时显示两个gridPanel
在extjs中一个页面中可以用一个请求为两个grid加载数据, 并同时显示在两个中gridpanel