Блог

Я использую эту статью по архитектуре http://blo&.extjs.eu/know-how/writin&-a-bi&-application-in-ext /

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

 Application.DashBoardGrid = Ext.extend(Ext.&rid.GridPanel, {
     border:false
    ,fromdate:''
    ,todate : '' 
    ,initComponent:function() {
        var store =new Ext.data.JsonStore({
                // store confi&s
                autoDestroy: true,
                autoLoad :true,
                url: 'api/index.php?_command=&etresellerscountamp;fromdate=' this.fromdate 'amp;todate=' this.todate,
                storeId: '&etresellerscount',
                // reader confi&s
                root: 'cityarray',
                idProperty: 'cityname',
                fields: [
                    {name: 'cityname'},
                    {name: 'totfollowup'},
                    {name: 'totcallback'},
                    {name: 'totnotintrested'},
                    {name: 'totdealsclosed'},
                    {name: 'totcallsreceived'},
                    {name: 'totcallsentered'},
                    {name: 'totresellerre&istered'},
                    {name: 'countiro'},
                    {name: 'irotransferred'},
                    {name: 'irodeferred'}
                ]
            });
            console.lo&(store);
        var confi& = {
            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', 
                    hei&ht : 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       :'totresellerre&istered',
                    header   : ' Reseller Re&istered', 
                    width    : 100, 
                    sortable : true, 
                    dataIndex: 'totresellerre&istered',
                    renderer : this.linkRenderer
                }
            ]
          ,plu&ins :[]
          ,viewConfi& :{forceFit:true}
          ,tbar :[]
          ,bbar :[]
          ,hei&ht : 350
          ,width : 1060
           ,title : 'Reseller Dashboard'

        }; // eo confi& object

        // apply confi&
        Ext.apply(this, Ext.apply(this.initialConfi&, confi&));

        Application.DashBoardGrid.superclass.initComponent.apply(this, ar&uments);
    } // 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 ta&={ 
            ta&: '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 '')"&&t;'  data  '</a&&t;';
        }
        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.lo&(this.header);
         if  (data != null)  {
            return '<a href="javascript:void(0)" onclick="resellerirowindow(''  record.data.cityname '','' cell.id '','' this.header '')"&&t;'  data  '</a&&t;';
        }
        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, ar&uments);
    } // eo function onRender
});

Ext.re&('DashBoardGrid', Application.DashBoardGrid);
  

Это мой возвращенный json

 {
    "countothercities": "1",
    "directreseller": "24",
    "totalresellersre&isteredfor8cities": 23,
    "cityarray": [{
        "cityname": "ban&alore",
        "totfollowup": "2",
        "totcallback": "3",
        "totnotintrested": "1",
        "totdealsclosed": "0",
        "totcallsreceived": "0",
        "totcallsentered": "88",
        "totresellerre&istered": "4",
        "countiro": "156",
        "irotransferred": "130",
        "irodeferred": "26"
    }
}
  

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

«countothercities»: «1», «directreseller»: «24», «totalresellers re&isteredfor8cities»: 23,

ниже сетки?

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

 var countothercities = &rid.&etStore().reader.jsonData.countothercities;
var directreseller = &rid.&etStore().reader.jsonData.directreseller;
var totalresellersre&isteredfor8cities = &rid.&etStore().reader.jsonData. totalresellersre&isteredfor8cities;
  

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

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

 store.on('load', function(s) {
    var countothercities = s.reader.jsonData.countothercities;
    var directreseller = s.reader.jsonData.directreseller;
    var totalresellersre&isteredfor8cities = s.reader.jsonData. totalresellersre&isteredfor8cities;
}, 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 totalresellersre&isteredfor8cities = s.reader.jsonData. totalresellersre&isteredfor8cities;

    this.&etBottomToolbar().status.setText(Strin&.format('{0}, {1}, {2}', 
        countothercities, 
        directreseller,
        totalresellersre&isteredfor8cities
    ));
}, this);