如何显示分组网格中的数据

时间:2011-03-21 08:39:21

标签: extjs grid grouping

我正在使用这篇架构文章http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

这是我的Application.ResellerGrid.js

Application.ResellerGrid = Ext.extend(Ext.grid.GridPanel, {
    border:false
    ,cityname : ''
    ,columndataindex : ''
    ,fromdate:''
    ,todate : '' 
    ,initComponent:function() {
        var config = {
            store:new Ext.data.GroupingStore({
                // store configs
                autoDestroy: true,
                autoLoad :false,
                url: 'api/index.php?_command=getresellers&city='+this.cityname+'&columndataindex='+this.columndataindex
                +'&fromdate='+this.fromdate+'&todate='+this.todate
                ,
                storeId: 'getresellerscount',
                // reader configs
                root: 'reseller',
                idProperty: 'mobile',
                fields: [
                   {name: 'parentname'},
                   {name: 'firstname'},
                   {name: 'lastname'},
                   {name: 'mobile'},
                   {name: 'email'},
                   {name: 'tmecode'},
                   {name: 'tmename'},
                   {name: 'updatedon'},
                   {name: 'apptype'},
                   {name: 'alloctype'},
                   {name: 'empparent'},
                   {name: 'irodeferred'}
                ]
                ,sortInfo:{field: 'parentname', direction: "ASC"}
                ,groupField:'parentname'
            })
            ,columns: [
                {
                    id       :'parentname',
                    header   : 'Parent Name', 
                    width    : 120, 
                    sortable : true, 
                    dataIndex: 'parentname'
                },
                {
                    id       :'firstname',
                    header   : 'First Name', 
                    width    : 120, 
                    sortable : true, 
                    dataIndex: 'firstname'
                },
                {
                    id       :'lastname',
                    header   : ' Last Name', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'lastname'
                },
                 {
                    id       :'mobile',
                    header   : 'Mobile', 
                    height : 50,
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'mobile'
                },
                {
                    id       :'email',
                    header   : 'E-Mail', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'email'
                },
                {
                    id       :'tmecode',
                    header   : ' TME Code', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex : 'tmecode'
                },
                {
                    id       :'updatedon',
                    header   : ' updatedon', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'updatedon'
                },
                {
                    id       :'empparent',
                    header   : ' empparent', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'empparent'
                },
                {
                    id       :'alloctype',
                    header   : ' alloctype', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'alloctype'
                },
                {
                    id       :'apptype',
                    header   : ' apptype', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'apptype'
                }
            ]
            ,view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            })
            ,plugins :[]
            ,viewConfig :{forceFit:true}
            ,tbar :[]
            ,bbar :[]
            ,height : 250
            ,width : 860
            ,title : 'Reseller Grid'
        }; // eo config object

        // apply config
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        Application.ResellerGrid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    ,onRender:function() {
        this.store.load();

        Application.ResellerGrid.superclass.onRender.apply(this, arguments);
    } // eo function onRender
});

Ext.reg('ResellerGrid', Application.ResellerGrid);

这是我的json回复

    {
    "reseller": [{
        "firstname": "anusha",
        "lastname": "",
        "mobile": "9739949891",
        "email": "",
        "tmecode": "010739",
        "tmename": "Deepa S",
        "updatedon": "2011-03-18 13:17:22",
        "apptype": "1",
        "alloctype": "2",
        "empparent": "Bangalore",
        "parentname": "HEMARLI"
    }, {
        "firstname": "IBRAZ",
        "lastname": "",
        "mobile": "9740834768",
        "email": "",
        "tmecode": "010739",
        "tmename": "Deepa S",
        "updatedon": "2011-03-18 17:52:04",
        "apptype": "1",
        "alloctype": "2",
        "empparent": "Bangalore",
        "parentname": "HEMARLI"
    }, {
        "firstname": "manjunath",
        "lastname": "",
        "mobile": "7829407211",
        "email": "umesthrekha29@yahoo.com",
        "tmecode": "012574",
        "tmename": "Geetha S",
        "updatedon": "2011-03-19 17:12:17",
        "apptype": "1",
        "alloctype": "2",
        "empparent": "Bangalore",
        "parentname": "HEMARLI"
    }]
}

我网格中的数据没有显示原因?

1 个答案:

答案 0 :(得分:0)

通过添加jsonreader完成,如果没有jsonreader,分组存储将无效。