extjs gridPanel不能显示数据

Question

最近在学习extjs，grid的样子和工具栏都显示出来了，firebug的json数据也有了，但是grid的数据始终显示不出来，麻烦哪位大师帮忙解决。
CheckRoleGridPanel.jsCheckRoleGridPanel=Ext.extend(Ext.grid.GridPanel,{

myId:"default",
constructor: function(_config){
//为构造参数默认值
if(_config==null){
_config={};
}
//将构造参数附加给当前对象
Ext.apply(this,_config);

/**
 * JsonStore
 */
this["store"]=new Ext.data.JsonStore({
url:"http://localhost:8080/WashCar_V1.1/page/checkRole.action",
totalProperty:'totalProperty',
root:'roleList',
field:["roleId","roleDesc","roleName","enable"]
});

/**
 * 拷贝父类构造
 */

  CheckRoleGridPanel.superclass.constructor.call(this,{
id:this.myId,
stripeRows:true,  //交替换行
viewConfig:{
forceFit:true
},
height:300,
width:500,
//列的定义
colModel:new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel({header:""}),  //dataIndex的是JSON数据格式的属性
{
header : '角色ID',
dataIndex : "roleId",
sortable:true,
// renderer : Ext.zy.utils.GridPanelUtils.cellStandardRenderer
},
{
header : "角色名字",
dataIndex:"roleName",
sortable:true
},
{
header : "角色描述",
dataIndex:"roleDesc",
sortable:true },
{
header : "状态",
dataIndex:"enable",
sortable:true
}    
]),
loadMask:{
msg:"正在加载数据，请稍后......"
},
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
tbar:new Ext.Toolbar({
style:"padding:5px;",
items:["角色描述",
       {xtype:"textfield"},
   "-",
   {text : "查询",
handler : "",//this.onSearch,
scope : this}
]
}),
bbar:new Ext.PagingToolbar({
store : this["store"], // 数据存储器
pageSize:10, //分页条数
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录",
items:["-",{
text:"提交(此按钮预留)",
    handler:"",
scope:this
},"-"]

})
});
this.getStore().load({
params:{
start:0,
limit:10
}
});
}
});
checkRoleGridPanel.jsp
<%@ page language="java" pageEncoding="UTF-8"%><%-- 动态生成div,用来存放要被渲染的自定义组件 --%>
<div id=${param.subMainId}p style="width: 100%; height: 100%"></div><script type="text/javascript">
             //获取ajax请求参数subMainId
             var subMainId ='${param.subMainId}';
             // 获取当前活动的tab页的body元素的宽度 (不含任何框架元素)
     var w = Ext.getCmp('MainTab').getActiveTab().getInnerWidth();
     // 获取当前活动的tab页的body元素的高度 (不含任何框架元素)
     var h = Ext.getCmp('MainTab').getActiveTab().getInnerHeight();
 //实例化角色查看面板
 var _checkRoleGridPanel=new CheckRoleGridPanel({myid:subMainId});
 //设置宽度
 _checkRoleGridPanel.width=w;
 //设置高度
 _checkRoleGridPanel.height=h;
 //渲染组件
 _checkRoleGridPanel.render(subMainId+'p');
// alert(subMainId+'p'); //tab_2012_mainp 
</script>
json数据：
[{"limit":10,"pageSize":0,"roleList":[{"enable":1,"roleDesc":"女","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"男","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"女","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"男","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"女","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"男","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"女","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"男","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"女","roleId":"3","roleName":"as"},{"enable":1,"roleDesc":"男","roleId":"3","roleName":"as"}],"start":10,"totalProperty":1000000}]

Answer 1

麻烦各位大侠帮忙解决，我用的是非iframe，动态生成的tab。发现浏览器窗口变化时里面的gridPanel是不会变化的

Answer 2

field:["roleId","roleDesc","roleName","enable"]  改为 fields:["roleId","roleDesc","roleName","enable"]就解决了浏览器窗口变化时里面的tab是不会变化的   ---这个问题我没解决

Answer 3

最近也在学习Extjs，发现多半问题是由于“,”引起的！
lz可以用IE的js工具调试下，看是否有这方面的问题