我怎麼可以顯示網格

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" 
    } 
} 

如何我可以顯示

「countothercities」：「1」， 「direc treseller「：」24「， 」totalresellersregisteredfor8cities「：23，

下面的網格？

Answer 1

你可以你怎麼會輸出這個數據在很大程度上取決於你的UI通過

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

訪問這些數據。

要在加載商店時獲取此數據，您可能應該爲商店中的load -event添加事件偵聽器，例如，添加到您的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); 

現在你可以做任何你想要與你的三個變量。

編輯

爲了將數據添加到您的網格的底部工具欄改線,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);