求助:ExtJs将json数据写入表格,一个字符直接占了表格的一行

罗布胆小鬼 发布于 2016/08/16 18:56
阅读 292
收藏 0

我的json数据

{
"total":3096,
"rows":[{
    "id":199698,
    "title":"new2 - 阿尔卡特 (OT-927) 炭黑 联通3G手机 双卡双待",
    "sellPoint":"清仓!仅北京,武汉仓有货!",
    "price":29900000,
    "num":99999,
    "barcode":"",
    "image":"http://image.taotao.com/jd/4ef8861cf6854de9889f3db9b24dc371.jpg",
    "cid":560,"status":1,"created":1425821598000,"updated":1428755918000
    }]
}
这是我的页面:

    Ext.onReady(function(){
        var xmlHttpReq = new XMLHttpRequest();
        //----------------------------
        //获得后台给我们返回内容的时机,在Ajax发送请求时有5个状态(0-4)
        xmlHttpReq.onreadystatechange = function data(){
            //状态为4时请求和接收数据完成,这时我们可以获得后台的数据
            if(xmlHttpReq.readyState==4){
                //通过responseTest和responsexml接收后台返回的数据
                var text = xmlHttpReq.responseText;
        
                var cm = new Ext.grid.ColumnModel([
                    {header:"商品ID",dataIndex:"id"},
                    {header:"商品标题",dataIndex:"title"},
                    {header:"商品卖点",dataIndex:"sell_point"},
                    {header:"商品价格",dataIndex:"price"},
                    {header:"库存数量",dataIndex:"num"},
                    {header:"商品条形码",dataIndex:"barcode"},
                    {header:"商品图片",dataIndex:"image"},
                    {header:"所属类目",dataIndex:"cid"},
                    {header:"商品状态",dataIndex:"status"}
                ]);
               
                var store = new Ext.data.Store({
                    proxy:new Ext.data.MemoryProxy(text),
                    reader:new Ext.data.JsonReader({
                        fields:[
                        {name:"id",mapping:0},                                    
                        {name:"title",mapping:1},                                    
                        {name:"sell_point",mapping:2},                                    
                        {name:"price",mapping:3},                                    
                        {name:"num",mapping:4},                                    
                        {name:"barcode",mapping:5},                                    
                        {name:"image",mapping:6},                                    
                        {name:"cid",mapping:7},                                    
                        {name:"status",mapping:8}
                        ]
                    })
                });


                store.load();
               //将列和数据组合
                var grid = new Ext.grid.GridPanel({
                    renderTo:'grid',
                    height:540,
                    width:1000,
                    store:store,
                    cm:cm
                });
            }
        }
        //2设置访问方式&提交路径(附加参数->文本框中的内容)
        xmlHttpReq.open("GET", "http://localhost:8082/item/list?page=1&rows=10");
        //3发送
        xmlHttpReq.send();
    });

这是出来的效果

    

加载中
返回顶部
顶部