ext实现ajax调用接口加数据到grilpanel

ds = new Ext.data.SimpleStore({
     fields : [
      {
       name : 'city'
      }, {
       name : 'district'
      }, {
       name : 'deviceId'
      }, {
       name : 'alias'
      },{
       name : 'usercount'
      }, {
       name : 'down'
      }, {
       name : 'glys'
       }
      ]});
     cm = new Ext.grid.ColumnModel([{
    header : formGridField("地市"),
    width : MaxWidth/4,  
    sortable : true,
    dataIndex : 'city'
   },{
    header : formGridField("区县"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'district'
   },{
    header : formGridField("热点名称"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'deviceId'
   },{
    header : formGridField("关联失败率"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'alias'
   },{
    header : formGridField("关联用户数"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'usercount'
   },{
    header : formGridField("下行信号强度"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'down'
   },{
    header : formGridField("关联拥塞率"),
    width : MaxWidth/4,
    sortable : true,
    dataIndex : 'glys'
   }
   ]);

centerGridPanel= new Ext.grid.GridPanel({
  id : "ClientGrid",
  xtype : "grid",
  //autoHeight:"auto",
  bodyStyle : transparent,
  //enableColumnHide : true,
  stripeRows: true,
  border : false,
  autoscoll:true,
  loadMask:true,
  height:500,
   viewConfig: { forceFit:true,scrollOffset:0 },
  //     tbar: new Ext.Toolbar({
//       items: [
//        {
//                text:'趋势分析',
//       handler: function(){
//        
//       }
//           },      
//        {
//                text:'环比分析',
//       handler: function(){
//        
//       }
//           }
//          ]
//   }),
  cm:cm,
  ds:ds,
  loadMask : ({
   msg : "数据加载中..."
  })
  //bbar : pageBar
 });

centerGridPanel.on('render',function(centerGridPanel,rowIdx,e){
  getResouses(url);
 })

function getResouses(url){
  var result;
  //var city = encodeURIComponent('杭州');
  //alert(city);
  var mk = new Ext.LoadMask(Ext.getCmp('northGridPanel').getEl(), {
               msg : '数据加载中...',
               removeMask : true
          });
  mk.show();
  Ext.Ajax.request({
   disableCaching : true,
    url : url,
    success : function(date) {
    if (date.responseText != "") {
     var mk = new Ext.LoadMask(Ext.getCmp('northGridPanel').getEl(), {
              msg : '数据加载中...',
               removeMask : true
           });
          mk.show();
         result = Ext.util.JSON.decode(date.responseText);
      var dateArray = [];
      for(var i=0;i<result.length;i++){
       //alert(result[i].hotspot.city);
       dateArray.push([
                     result[i].hotspot.city,
         result[i].hotspot.district,
         result[i].hotspot.location,
         result[i].assoKpiData.assoFailureRatio,
         result[i].assoUserCount,
         result[i].downSignalStrength,
         result[i].assoKpiData.assoJamRatio
         ]);
      }
      Ext.getCmp('ClientGrid').getStore().loadData(dateArray);
         }
    mk.hide();
   },
    failure : function(date) {
     mk.hide();
    },
    headers : {'Accept':'application/json'},
    params : {},
    method : 'get'
   });
}

你可能感兴趣的:(Ajax,数据,接口)