Flexible Store/Grid

Question

我遇到以下問題：我需要使用REST服務（第三方，不是我的），並使用Ext.grid.Panel將結果數據顯示給用戶。

的問題是我沒有的數據結構和內容（這是從利用Geoserver的queryLayer一個JSON），所以我不能有一個商店/格/模型字段定義尊重ExtJS的MVC設計理念。

那麼在這種情況下我該如何更靈活？我嘗試添加一行到網格by hand但在讀取https://www.sencha.com/forum/showthread.php?48625-how-can-i-insert-a-row-in-GRID後，我認爲這是一種犯罪行爲

Answer 1

您可以爲模型類中的動態字段添加轉換層。轉換將爲您不知道結構的數據提供字符串可讀的格式。

Ext.define('AppName.DynamicRow', { 
    extend: 'Ext.data.Model', 

    fields: [{ 
     name: 'fixed1', 
     type: 'string' 
    }, { 
     name: 'fixed2', 
     type: 'string' 
    }, { 
     name: 'dynamic', 
     type: 'string', 
     calculate: function (data) { 
      Ext.Object.getAllKeys(data) 
       .map(function(key) { 
        return key + ': ' + data[key]; 
       }) 
       .join(', '); 
     } 
    }] 
}); 

然後，您將在網格列中顯示所有非結構化數據，只需將'dynamic'字段添加爲dataIndex即可。

Answer 2

我的解決方法：

首先，用一個功能集中的所有創作的東西接收數據：

function addGrid (title, data) { 
    var storeColumns = getStoreColumnsFromJson(data[0]); 
    var gridColumns = getGridColumnsFromJson(data[0]); 

    var store = createStore(data, storeColumns); 
    var grid = createGrid(title, store, gridColumns); 

    myContainerWindowPanel.add(grid); 

} 

現在，我需要一個數據樣本（第一行）來獲得列名從JSON數據到網格及其商店：

function getStoreColumnsFromJson (obj) { 
    var keys = []; 
    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      keys.push({name : key}); 
     } 
    } 
    return keys;  
} 

function getGridColumnsFromJson (obj) { 
    var keys = []; 
    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      keys.push({text: key, dataIndex: key}); 
     } 
    } 
    return keys;  
} 

現在我將創建網格和商店。我不會僅僅因爲沒有它就使用模型。如果有人有強烈的建議來創建模型，我會感激。

function createGrid (title, store, columnNames) { 
    var dummyGrid = Ext.create('Ext.grid.Panel', { 
     border: false, 
     title : title, 
     store : store, 
     frame: false, 
     margin: "10 0 0 0", 
     flex:1, 
     loadMask: true, 
     columns:columnNames, 
     autoHeight:true 
    }); 
    return dummyGrid; 
} 

function createStore (storeData, columns) { 
    var arrData = []; 
    var theData = storeData; 
    if (!$.isArray(storeData)) { 
     arrData.push(storeData); 
     theData = arrData; 
    } 

    var store = Ext.create('Ext.data.Store',{ 
     fields: columns, 
     autoLoad: true, 
     data: theData 
    });  
    return store; 
}