как я могу показать другие данные под сеткой

Question

Я использую эту статью архитектуры http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/

Это мой файл сетки

Application.DashBoardGrid = Ext.extend(Ext.grid.GridPanel, {
     border:false
    ,fromdate:''
    ,todate : '' 
    ,initComponent:function() {
        var store =new Ext.data.JsonStore({
                // store configs
                autoDestroy: true,
                autoLoad :true,
                url: 'api/index.php?_command=getresellerscount&fromdate='+this.fromdate+'&todate='+this.todate,
                storeId: 'getresellerscount',
                // reader configs
                root: 'cityarray',
                idProperty: 'cityname',
                fields: [
                    {name: 'cityname'},
                    {name: 'totfollowup'},
                    {name: 'totcallback'},
                    {name: 'totnotintrested'},
                    {name: 'totdealsclosed'},
                    {name: 'totcallsreceived'},
                    {name: 'totcallsentered'},
                    {name: 'totresellerregistered'},
                    {name: 'countiro'},
                    {name: 'irotransferred'},
                    {name: 'irodeferred'}
                ]
            });
            console.log(store);
        var config = {
            store:store
            ,columns: [
                {
                    id       :'cityname',
                    header   : 'City Name', 
                    width    : 120, 
                    sortable : true, 
                    dataIndex: 'cityname'
                },
                {
                    id       :'countiro',
                    header   : ' Total Prospect', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'countiro'
                    ,renderer : this.linkiroRenderer
                },
                 {
                    id       :'irotransferred',
                    header   : 'Calls Transfered By IRO', 
                    height : 50,
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'irotransferred'
                    ,renderer : this.linkiroRenderer
                },
                {
                    id       :'irodeferred',
                    header   : ' Calls Deferred By IRO', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'irodeferred'
                    ,renderer : this.linkiroRenderer
                },
                {
                    id       :'totcallsentered',
                    header   : ' Total Calls Entered', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex : 'totcallsentered',
                    renderer : this.linkRenderer
                },
                {
                    id       :'totfollowup',
                    header   : ' Follow Up', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totfollowup',
                    renderer : this.linkRenderer
                },
                {
                    id       :'totcallback',
                    header   : ' Call Backs', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totcallback',
                    renderer : this.linkRenderer
                },
                {
                    id       :'totnotintrested',
                    header   : ' Not Interested', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totnotintrested',
                    renderer : this.linkRenderer
                },
                {
                    id       :'totdealsclosed',
                    header   : ' Deals Closed', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totdealsclosed',
                    renderer : this.linkRenderer
                },
                 {
                    id       :'totresellerregistered',
                    header   : ' Reseller Registered', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totresellerregistered',
                    renderer : this.linkRenderer
                }
            ]
          ,plugins :[]
          ,viewConfig :{forceFit:true}
          ,tbar :[]
          ,bbar :[]
          ,height : 350
          ,width : 1060
           ,title : 'Reseller Dashboard'

        }; // eo config object

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

        Application.DashBoardGrid.superclass.initComponent.apply(this, arguments);
    } // eo function initComponent
    /** 
    * It is the renderer of the links of cell 
    * @param data  value of cell 
    * @param record  object of data has all the data of store and record.id is unique 
    **/
    ,linkRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
        var tag={ 
            tag: 'a',
            href: '#', 
            html: data//, 
            // onclick: this.resellerWindow(record.data.cityname,cell.id) 
        };

         if  (data != null)  {
            return '<a href="javascript:void(0)" onclick="resellerwindow(\'' +record.data.cityname+'\',\''+cell.id+'\',\''+this.header+'\')">'+ data +'</a>';
        }
        return data;
    }
    /** 
    * It is the renderer of the links iro's column of cell 
    * @param data  value of cell 
    * @param record  object of data has all the data of store and record.id is unique 
    **/
    ,linkiroRenderer : function (data, cell, record, rowIndex, columnIndex, store) {
        // console.log(this.header);
         if  (data != null)  {
            return '<a href="javascript:void(0)" onclick="resellerirowindow(\'' +record.data.cityname+'\',\''+cell.id+'\',\''+this.header+'\')">'+ data +'</a>';
        }
        return data;
    }
   ,resellerwindow : function (cityname,columndataindex) {
        var win = new Ext.Window({
            items:{
                xtype : 'ResellerGrid',
                'cityname' : cityname,
                'columndataindex' : columndataindex
             }
        });
        win.show();
    }
    ,onRender:function() {
        // this.store.load();
        Application.DashBoardGrid.superclass.onRender.apply(this, arguments);
    } // eo function onRender
});

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

Это мой JSON вернулся

{
    "countothercities": "1",
    "directreseller": "24",
    "totalresellersregisteredfor8cities": 23,
    "cityarray": [{
        "cityname": "bangalore",
        "totfollowup": "2",
        "totcallback": "3",
        "totnotintrested": "1",
        "totdealsclosed": "0",
        "totcallsreceived": "0",
        "totcallsentered": "88",
        "totresellerregistered": "4",
        "countiro": "156",
        "irotransferred": "130",
        "irodeferred": "26"
    }
}

как я могу показать

"контртерзити": "1", "directreseller": "24", "Всего зарегистрированных продавцов для городов": 23,

ниже сетки?

Answer 1

Вы можете получить доступ к этим данным через

var countothercities = grid.getStore().reader.jsonData.countothercities;
var directreseller = grid.getStore().reader.jsonData.directreseller;
var totalresellersregisteredfor8cities = grid.getStore().reader.jsonData. totalresellersregisteredfor8cities;

Способ вывода этих данных во многом зависит от вашего пользовательского интерфейса.

Чтобы получить доступ к этим данным, когда хранилище загружено, вам, возможно, следует добавить прослушиватель событий в событие load в вашем хранилище, например, добавьте это к вашему initComponent() методу:

store.on('load', function(s) {
    var countothercities = s.reader.jsonData.countothercities;
    var directreseller = s.reader.jsonData.directreseller;
    var totalresellersregisteredfor8cities = s.reader.jsonData. totalresellersregisteredfor8cities;
}, this);

Теперь вы можете делать что угодно с тремя переменными.

EDIT

Чтобы добавить данные на нижнюю панель инструментов вашей сетки, измените строку ,bbar :[] на

,bbar: [{
    xtype: 'tbtext',
    ref: 'status',
    text: ''
}]

Это добавит пустой Ext.Toolbar.TextItem к нижней панели.

store.on('load', function(s) {
    var countothercities = s.reader.jsonData.countothercities;
    var directreseller = s.reader.jsonData.directreseller;
    var totalresellersregisteredfor8cities = s.reader.jsonData. totalresellersregisteredfor8cities;

    this.getBottomToolbar().status.setText(String.format('{0}, {1}, {2}', 
        countothercities, 
        directreseller,
        totalresellersregisteredfor8cities
    ));
}, this);