parse and transform a GetFeatureInfo request using ExtJS 6

gfi.js

Ext.define('FeatureProperty', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'prop',
        type: 'string'
    }, {
        name: 'value',
        type: 'string'
    }]
});

Ext.define('Feature', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'geometry_name',
        type: 'string'
    }, {
        name: 'geometry_type',
        mapping: 'geometry.type',
        type: 'string'
    }],
    hasMany: {
        name: 'featureproperty',
        model: 'FeatureProperty',
        associationKey: 'properties'
    }
});

Ext.define('FeatureGridModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.geo-mapgrid',
    requires: ["Feature", "FeatureProperty"],
    stores: {
        gfinfo: {
            autoLoad: true,
            model: 'Feature',
            proxy: {
                type: 'ajax',
                // url: 'http://localhost:8080/geoserver/geomaster/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetFeatureInfo&FORMAT=image%2Fpng&TRANSPARENT=true&QUERY_LAYERS=geomaster%3Aagueda,geomaster%3Abgri2011_0101&STYLES&LAYERS=geomaster%3Aagueda,geomaster%3Abgri2011_0101&info_format=application/json&FEATURE_COUNT=50&X=50&Y=50&SRS=EPSG%3A3763&WIDTH=101&HEIGHT=101&BBOX=-29957.80798244231%2C102114.7105175374%2C-29837.31583317896%2C102235.20266680076',
                url: 'getfeaturerequest_response.json',
                reader: {
                    type: 'json',
                    rootProperty: 'features',
                    transform: function(o) {
                        var outjson = this.traverse(o);
                        return outjson;
                    },
                    traverse: function(o) {
                        var outjson = {};
                        for (var i in o) {
                            outjson[i] = o[i];
                            if (o[i] !== null && typeof(o[i]) == "object") {
                                if (i == 'properties') {
                                    var prop = o[i];
                                    o[i] = Object.keys(prop).map(function(k) {
                                        return {
                                            'prop': k,
                                            'value': prop[k]
                                        }
                                    });
                                } else {
                                    this.traverse(o[i]);
                                }
                            }
                        }
                        return outjson;
                    }
                }
            }
        }
    },
    getStores: function() {
        return this.storeInfo || {};
    }
});

Ext.define("Popup", {
    extend: "Ext.panel.Panel",
    alias: 'widget.gfi-panel',
    requires: ["FeatureGridModel", "Feature", "FeatureProperty"],
    viewModel: {
        type: "geo-mapgrid"
    },
    cls: 'shadow-panel',
    items: [{
        xtype: 'grid',
        reference: 'featureGrid',
        title: 'Features',
        bind: {
            store: '{gfinfo}'
        },
        columns: [{
            text: 'Feature ID',
            dataIndex: 'id',
            width: 120
        }, {
            text: 'geometry_name',
            dataIndex: 'geometry_name',
            width: 140,
            hidden: true
        }, {
            text: 'Geometry type',
            dataIndex: 'geometry_type',
            flex: 1
            //width: 140
        }]
    }, {
        xtype: 'grid',
        title: 'Properties',
        bind: {
            title: 'Properties {featureGrid.selection.id}',
            store: '{featureGrid.selection.featureproperty}'
        },
        columns: [{
            text: 'Property',
            dataIndex: 'prop',
            width: 120
        }, {
            text: 'Value',
            dataIndex: 'value',
            // width: 140,
            flex: 1
        }]
    }]
});

Ext.application({
    name: 'Fiddle',
    launch: function() {
        Ext.create('Ext.Viewport', {
            items: [{
                xtype: 'gfi-panel'
            }]
        });
    }
});

This parses a JSON GetFeatureInfo request and creates a feature store.
This code is available in this fiddle.