如何動態檢索列和數據

Question

我正在開發一個ExtJS應用程序，並且有一些GridPanel需要顯示一些數據。 是否可以動態檢索列和數據，因此我不必爲每個表手動指定它們？

謝謝。

Answer 1

我創建一個dynamicgridpanel組分：

Ext.define('Ext.ux.grid.DynamicGridpanel', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.dynamicgridpanel', 
    /* author: Alexander Berg, Hungary */ 

    storeUrl: '', //some url here 
    columnDefinitionUrl: '', //some url here 
    columnDefinitionParams: {}, //params here 
    columns: [], 
    capitalize: true, 
    storeAutoLoad: false, 

    /* Make a call to the server for the columns definiton, create a store, reconfigure the grid with it */ 
    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 
     me.addEvents({'afterColumndefinitionsLoad' : true},{'beforeColumndefinitionsLoad' : true}); 
     me.fireEvent('beforeColumndefinitionsLoad', me); 
     // make an ajax request to get the grids column definiton from server 
     Ext.Ajax.request({ 
      url: me.columnDefinitionUrl, 
      params: me.columnDefinitionParams, 
      success: function (response) { 
       var object = Ext.decode(response.responseText, false); 
       //if the response has sent back a List of strings i.e. "columns" : ["dataindex1","dataindex2","dataindex3"] 
       if (object.columnsNames) { 
        var columnsFromServer = []; 
        if(Ext.isArray(object.columnsNames)) { 
         for (var x in object.columnsNames) { 
          var columnText = object.columnsNames[x]; 
          if (me.capitalize) { 
           columnText = Ext.String.capitalize(columnText); 
          } 
          columnsFromServer.push({ dataIndex: object.columnsNames[x], text: columnText}); 
         } 
        } else { 
         var columnText = object.columnsNames; 
         if (me.capitalize) { 
          columnText = Ext.String.capitalize(columnText); 
         } 
         columnsFromServer.push({ dataIndex: object.columnsNames, text: columnText}); 
        } 
       //if the response has sent back a List of column objects i.e. "columns" : [{"dataindex1"},"dataindex2","dataindex3"] 
       } else if (object.columns) { 
        var columnsFromServer = object.columns 
       } else { 
        Ext.Msg.show({ 
         title:'Error', 
         msg: 'No columnsNames and no columns!', 
         buttons: Ext.Msg.OK, 
         icon: Ext.Msg.ERROR 
        }); 
       } 
       var fields = []; 
       Ext.each(columnsFromServer, function (column) { 
        fields.push(column.dataIndex); 
       }); 
       // create the store 
       var storeConfig = { 
        storeId: 'store_' + me.id, 
        fields: fields, 
        autoLoad: me.storeAutoLoad, 
        proxy: { 
         type: 'ajax', 
         url: me.storeUrl, 
         reader: { 
          type: 'json', 
          root: me.storeRoot, 
          successProperty: 'success' 
         } 
        } 
       }; 
       if (me.storeParams) { 
        storeConfig.proxy.extraParams = me.storeParams; 
       } 
       var store = Ext.create('Ext.data.Store', storeConfig); 
       me.reconfigure(store, columnsFromServer); // reconfigure the store, and the columns 
       me.fireEvent('afterColumndefinitionsLoad', me); 
      } 
     }); 
    } 
});

用法：

{ 
    xtype : 'dynamicgridpanel', 
    storeUrl : '/something/data/testData.json', 
    storeParams : { 
     param1 : 'param1', 
     param2 : 'param2' 
    }, 
    storeRoot : 'storeData', 
    storeAutoLoad : true, 
    columnDefinitionUrl : '/something/data/testCol.json', 
    columnDefinitionParams : { 
     param1 : 'param1', 
     param2 : 'param2' 
    } 
}

例如用於/something/data/testCol.json：

{ 
    msg : "Success", 
    success : true, 
    columnsNames : ["column1", "column2", "column3", "column4"] 
}

例如用於/something/data/testData.json：

{ 
    msg : "Success", 
    success : true, 
    storeData : [ 
     {column1: "row1 col1", column2: "row1 col2", column3: "row1 col3", column4: "row1 col4"}, 
     {column1: "row2 col1", column2: "row2 col2", column3: "row2 col3", column4: "row2 col4"}, 
     {column1: "row3 col1", column2: "row3 col2", column3: "row3 col3", column4: "row3 col4"} 
    ] 
}