【Ext小白】获取到的JSON数据在Grid里不显示

Question

这是JSON数据：{"records":[{"item_code":"106428","item_name":"Hp·康柏23寸特价台机送打印机","wmgroup":"0101","wlgroup":"01"}]} 
这是相关的代码
// 只能选一行
var singleSelect1 = new Ext.grid.RowSelectionModel( {
singleSelect : true
});
// 自动编号
var simpleItem_row = new Ext.grid.RowNumberer();
// 创建列模型
var simpleItem_cm = new Ext.grid.ColumnModel( [ simpleItem_row, sm, {
header : '商品编号',
dataIndex : 'item_code',
sortable : true
}, {
header : '商品名称',
dataIndex : 'item_name',
sortable : true
}, {
header : '大分类',
dataIndex : 'wlgroup',
sortable : true
}, {
header : '中分类',
dataIndex : 'wmgroup',
sortable : true
} ]);// 创建数据存储对象，负责把各式各样的数据转化为Grid可以使用的数据
var simpleItem_store = new Ext.data.JsonStore( {
url : '../../jsp/item/querySimpleItemRst.jsp',
baseParams : {
item_code : '',
item_name : ''
},
root : 'records',
fields : Ext.data.Record.create( [ {
name : 'item_code',
type : 'string'
}, {
name : 'item_name',
type : 'string'
},{
name:'wlgroup',
type:'string'
},{
name:'wmgroup',
type:'string'
}  ])
});
// 初始化数据
// simpleItem_store.load();// 查询-商品编号
var text_simpleItem_code = new Ext.form.TextField( {
id : 'item_code',
name : 'item_code',
allowBlank : false
});
// 查询-商品名称
var text_simpleItem_name = new Ext.form.TextField( {
id : 'item_name',
name : 'item_name',
allowBlank : false
});
// 查询-查询按钮
var btnSearch = new Ext.Button( {
text : '查询',
iconCls : 'icon-search',
handler : function() {
if (text_simpleItem_code.isValid() && text_simpleItem_name.isValid()) {
simpleItem_store.baseParams.item_code = text_simpleItem_code
.getValue();
simpleItem_store.baseParams.item_name = text_simpleItem_name
.getValue();
}
simpleItem_store.load();
}
});
// 创建GridPanel,渲染到HTML的grid元素上
var simpleItem_grid = new Ext.grid.GridPanel( {
enableColumnMove : true, // 拖放
enableColumnResize : true, // 改变列高
stripeRows : true, // 斑马线
loadMask : true, // 加载数据时的提示信息
store : simpleItem_store,
cm : simpleItem_cm,
height : 380,
autoExpandColumn : 'name',
viewConfig : {
forceFit : true
},
tbar : [ '商品编号:', text_simpleItem_code, '商品名称：', text_simpleItem_name, '-',btnSearch ]
})
// 点击快速查询弹出的窗口var queryWindow = new Ext.Window( {
title : "商品查询",
width : 700,
height : 450,
id : "queryWindow",
plain : true,
frame : true,
closeAction : "hide",
layout : 'fit',
items : [ simpleItem_grid ]
});Ext.getCmp('query').on('click', function(e) {
queryWindow.show();
});
但是页面就是不显示，请各位看看，问题出在哪里？谢谢 

Answer 1

你的JS不报错？
var simpleItem_cm = new Ext.grid.ColumnModel( [ simpleItem_row, sm, {
    header : '商品编号',
    dataIndex : 'item_code',
    sortable : true
}sm定义了么？

Answer 2

定义了、是复选框，这只是一部分代码，我感觉问题可能出在JSONStore以及Grid处，但是我不知道具体问题所在

Answer 3

一般来说定义了selectionModel，在grid定义的时候要配置一个sm参数的。
仔细依靠例子看看。

Answer 4

fields : Ext.data.Record.create( [ {
        name : 'item_code',
        mapping: 'item_code',
        type : 'string'
    }  ])
});
fileds里面的记录加个mapping试试

Answer 5

Java方法：/**
 * 根据商品编号和商品名称查询商品
 * 
 * @param item_code
 *            商品编号
 * @param item_name
 *            商品名称
 * @return
 * @throws Exception
 */
public JSONObject selectByCodeAndName(String code, String name)
throws Exception {
JConnection conn = null;
JPreparedStatement pStmt = null;
JResultSet rs = null;
try {
conn = DBConnManager.getConnection();
StringBuffer qry = new StringBuffer();
qry.append(" SELECT * FROM TWITEM WHERE ")
   .append(" ITEM_CODE like =")
   .append(code)
   .append(" And ITEM_NAME like '%")
   .append(name)
   .append("%'");
pStmt = conn.prepareStatement(qry.toString());

rs = pStmt.executeQuery();
JSONArray list=new JSONArray();
int i=0; if (rs.next()) {
JSONObject twitem=new JSONObject();
String item_code=rs.getString("item_code");
String item_name=rs.getString("item_name");
String wlgroup=rs.getString("wlgroup");
String wmgroup=rs.getString("wmgroup");
/*String internet_yn=rs.getString("internet_yn");
String play_url=rs.getString("play_url");
String brand_code=rs.getString("brand_code");
String brand_name=rs.getString("brand_name");
Long sale_price=rs.getLong("sale_price");
int save_amt=rs.getInt("save_amt");
String seo=rs.getString("seo");
String item_type=rs.getString("item_type");
String tag1_yn=rs.getString("tag1_yn");
String tag2_yn=rs.getString("tag2_yn");
String tag3_yn=rs.getString("tag3_yn");
String explain_001=rs.getString("explain_001");
String explain_002=rs.getString("explain_002");
String explain_003=rs.getString("explain_003");
String insert_id=rs.getString("insert_id");
Timestamp insert_date=rs.getTimestamp("insert_date");
String modify_id=rs.getString("modify_id");
Timestamp modify_date=rs.getTimestamp("modify_date");*/

twitem.put("item_code", item_code)
  .put("item_name", item_name)
  .put("wlgroup", wlgroup)
  .put("wmgroup", wmgroup);
list.put(i++,twitem);
} else {
throw new Exception("Data not found.");
}
JSONObject json = new JSONObject();
json.put("simpleItem", list);
return json;
} catch (DBException e) {
e.printStackTrace();
} finally {
if (pStmt != null)
try {
pStmt.close();
} catch (Exception ex) {
}
DBConnManager.close(conn);
}
return null;
}
JSP处理：<%@ page contentType="text/html; charset=GBK"%>
<%@ include file="/common/incMain.jsp"%>
<%@ page import="cn.hao24.admin.item.*"%>
<jsp:directive.page import="org.json.JSONObject" />
<%@ page errorPage="/common/errorPage.jsp"%>
<%
String command = request.getParameter("command");
if("query".equals(command)){
String item_code = request.getParameter("item_code");
String item_name = request.getParameter("item_name");
Log.dbg.println("商品编号："+item_code);
Log.dbg.println("商品名称："+item_name);
TwitemMgr tm = new TwitemMgr();
JSONObject simpleItem = tm.selectByCodeAndName(item_code, item_name);
Log.dbg.println("商品信息："+simpleItem);
}
%>这是涉及到的JS代码var simpleFields=Ext.data.Record.create( [ {
name : 'item_code',
//mapping:'item_code',
type : 'string'
}, {
name : 'item_name',
//mapping:'item_name',
type : 'string'
},{
name:'wmgroup',
//mapping:'wmgroup',
type:'string'
},{
name:'wlgroup',
//mapping:'wlgroup',
type:'string'
}  ])// 创建数据存储对象，负责把各式各样的数据转化为Grid可以使用的数据
var simpleItem_store = new Ext.data.JsonStore( {
url : '../../jsp/item/querySimpleItemRst.jsp',
baseParams : {item_code : '',item_name : '',command:'query'},
autoLoad : true,
root : 'simpleItem',
fields :simpleFields
});//初始化数据
//simpleItem_store.load();
var singleSelect1 = new Ext.grid.RowSelectionModel( {  
    singleSelect : true  
}); // 创建列模型
var simpleItem_cm = new Ext.grid.ColumnModel( [new Ext.grid.RowNumberer(),{
header : '商品编号',
dataIndex : 'item_code'
}, {
header : '商品名称',
dataIndex : 'item_name'
}, {
header : '大分类',
dataIndex : 'wlgroup'
}, {
header : '中分类',
dataIndex : 'wmgroup'
} ]);
simpleItem_cm.defaultSortable=true;
// 查询-商品编号
var text_simpleItem_code = new Ext.form.TextField( {
id : 'item_code',
name : 'item_code',
width:100,
allowBlank : false
});
// 查询-商品名称
var text_simpleItem_name = new Ext.form.TextField( {
id : 'item_name',
name : 'item_name',
width:300,
allowBlank : false
});
// 查询-查询按钮
var btnSearch = new Ext.Button( {
text : '查询',
iconCls : 'icon-search',
handler : function() {
if (text_simpleItem_code.isValid() && text_simpleItem_name.isValid()) {
simpleItem_store.baseParams.item_code = text_simpleItem_code.getValue();
simpleItem_store.baseParams.item_name = text_simpleItem_name.getValue();
}
simpleItem_store.load();
}
});
// 创建GridPanel,渲染到HTML的grid元素上
var simpleItem_grid = new Ext.grid.GridPanel( {
enableColumnMove : true, // 拖放
enableColumnResize : true, // 改变列高
stripeRows : true, // 斑马线
loadMask : true, // 加载数据时的提示信息
store : simpleItem_store,
cm : simpleItem_cm,
height : 380,
autoExpandColumn : 'name',
viewConfig : {
forceFit : true
},
tbar : [ '商品编号:', text_simpleItem_code, '商品名称：', text_simpleItem_name, '-',btnSearch ]
})
// 点击快速查询弹出的窗口
var queryWindow = new Ext.Window( {
title : "商品查询",
width : 700,
height : 450,
id : "queryWindow",
//plain : true,
frame : true,
closeAction : "hide",
layout : 'fit',
items : [ simpleItem_grid ]
});Ext.getCmp('query').on('click', function(e) {
queryWindow.show();
});
这是JSON数据：{"records":[{"item_code":"106428","item_name":"Hp·康柏23寸特价台机送打印机","wmgroup":"0101","wlgroup":"01"}]}
后台数据已经获取，但是Grid就是不显示，特来求助各位高手！帮帮忙

Answer 6

Ext.getCmp('query').on('click', function(e) {
    queryWindow.show();
    simpleItem_grid.getView().reflash();
});

Answer 7

或者试试：
simpleItem_store.on({
        'load': {
            fn: function() {
                simpleItem_grid.getView().refresh();
            }
        }
    }