Гибкий магазин/сетка

Question

У меня есть следующая проблема: мне нужно использовать услугу REST (третье лицо, а не мое) и показывать данные результата пользователю с помощью Ext.grid.Panel.

Проблема заключается в том, что я понятия не имею о структуре и контенте данных (это JSON от Geoserver's queryLayer), поэтому я не могу определить определение поля store/grid/model для соответствия дизайну 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(', '); 
     } 
    }] 
}); 

Тогда вы покажете все неструктурированные данные в столбце сетки, просто добавив «динамический» поле 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; 
}