Flexible Store/Grid - extjs6

Question

I have the follow problem: I need to consume a REST service (3rd party, not mine) and show the result data to the user using an Ext.grid.Panel.
The problem is I have no idea of the data structure and content ( it is a JSON from Geoserver's queryLayer ) so I can't have a store/grid/model field definition to respect the ExtJS MVC design.
So how can I be more flexible in this situation? I try to add a row to the grid by hand but after read https://www.sencha.com/forum/showthread.php?48625-how-can-i-insert-a-row-in-GRID I think it is a kind of crime to do

Answer 1

You can add a conversion layer for dynamic fields in the model class. The conversion will provide a string readable format for data you don't know the structure.
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(', ');
}
}]
});
Then you will show all unstructured data in a grid column simply adding 'dynamic' field as dataIndex.

Answer 2

My workaround:
First, receive the data using a function to concentrate all creation stuff:
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 );
}
Now, I need to take a data sample (first row) to get the column names from the JSON data to the grid and its store:
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;
}
Now I'll create the grid and the store. I will not use the Model simply because this worked without it. If someone have a strong advice to create the model I'll appreciate.
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;
}