灵活的商店/网格答案

【问题标题】：Flexible Store/Grid灵活的商店/网格
【发布时间】：2017-01-19 20:16:10
【问题描述】：

我有以下问题：我需要使用 REST 服务（第三方，不是我的）并使用 Ext.grid.Panel 向用户显示结果数据。

问题是我不知道数据结构和内容（它是来自 Geoserver 的 queryLayer 的 JSON），所以我不能有一个 store/grid/model 字段定义来尊重 ExtJS MVC 设计。

那么在这种情况下我怎样才能更灵活呢？我尝试在网格中添加一行 by hand 但在阅读 https://www.sencha.com/forum/showthread.php?48625-how-can-i-insert-a-row-in-GRID 之后我认为这是一种犯罪行为

【问题讨论】：

标签： extjs6

【解决方案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。

【讨论】：

我认为这不是一个好主意...我需要一个网格来将数据显示为网格！不想把我所有的数据都放在一个列中。

【解决方案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;
}

【讨论】：