extjs的grid在页面上无法显示

0 0

extjs的grid在页面上无法显示5

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

Ext.onReady(function(){
//页面整体布局
	var viewport = new Ext.Viewport({
    layout:'border',
		    items:[{
			        region:'north',
			        html:'<div style="font-weight:bold;font-size:200%;">学生信息管理</div>'
		    },grid,{   //这里放网格
			        region:'east',
			         html:'表单'
		    },{
			        region:'south',
			        html:'<div style="text-align:right;">页脚</div>'
		    }]
	});
	var sexRenderer = function(value){
		if(value){
			return '<span>男</span>';
		}
		else{
			return '<span>女</span>';
		}
	};
	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!'
         	  })
     });
	
});

2014年11月08日 22:30

即将成为码农并且十分苦逼要还贷款的小王
7
0 0 4

2个答案按时间排序按投票排序

0 0

不清楚你用的是哪个版本，我用的是4.1，把你的code Copy到本地调试了一下,你试这把grid的申明放到viewport前面，这样应该是没有问题的.下面是我本地代码：

Ext.onReady(function() {
		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 grid = new Ext.grid.GridPanel({
	         viewConfig : {
	             forceFit : true
	         },
	         region:'center',
	         store :store,
	         columns: [
		        {header:'姓名',dataIndex:'name'},
		        {header:'性别',dataIndex:'gender'}, //为真返回男，否则女
		        {header:'电话',dataIndex:'tel'},
		        {header:'政治面貌',dataIndex:'political'},
		        {header:'专业',dataIndex:'professional'}
		    ]
	     });

		//页面整体布局
		var viewport = new Ext.Viewport({
	    layout:'border',
	    items:[{
		        region:'north',
		        html:'<div style="font-weight:bold;font-size:200%;">学生信息管理</div>'
	    },grid,{   //这里放网格
		        region:'east',
		         html:'表单'
	    },{
		        region:'south',
		        html:'<div style="text-align:right;">页脚</div>'
	    }]
		});
		
		
	});

2014年11月10日 13:27