Cannot read from json file using ExtJS 7.8

I'm having much trouble reading from a json file. I have an Ext.window.window

Ext.panel.panel Ext.tree.TreePanel which loads Ext.data.Model from Ext.data.TreeStore which has an AJAX proxy with a JSON reader.

I have two sencha fiddles to compare: #1 works, and #2 does not. I need help fixing #2.

#1: https://fiddle.sencha.com/#view/editor&fiddle/3t9e

#2: https://fiddle.sencha.com/#view/editor&fiddle/3t8n

Thank you for taking a look!!

The main difference between the working (#1) and the not working (#2) version is that the working version creates itself the store before assigning it to the tree panel. If you'd like to rely on the framework to handle the store creation it is advised to use a ViewModel.

There are other issues: HelpStore should have a model that is extended from Ext.data.TreeModel and not Ext.data.Model, and also children part has to be removed from the store.

With the following modifications the #2 works as well.

Change HelpStore.js to this:

Ext.define('MDL.store.HelpStore', {
    extend: 'Ext.data.TreeStore',
    alias: 'store.HelpStore',
    model: 'Ext.data.TreeModel',
    root: {
        expanded: true,
        text: 'Should be replaced by Json',
    },
    proxy: {
        type: 'ajax',
        url: 'MDLHelp.json',
        reader: {
        }
    }
});

Please note two changes here: the model is set to Ext.data.TreeModel (or you can extend an own model from this) and the children part is removed (otherwise it will override the contents and ignore the store).

Then change HelpTreePanel.js to use a ViewModel which will create the store as needed:

Ext.define('MDL.view.help.HelpTreePanel', {
    extend: 'Ext.tree.Panel',
    title: 'Help Topics',
    xtype: 'HelpTreePanel',
    rootVisible: true,
    viewModel: {
        stores: {
            helpStore: {
                type: 'HelpStore'
            }
        }
    },
    bind: {
        store: '{helpStore}'
    },
    width: 250,
    minWidth: 250,
    maxWidth: 400,
    listeners: {
        itemclick: function (treeView, record, item, index, e, eOpts) {
            document.querySelector("#helpContent-innerCt > p").innerHTML = record.data.html;
        },
        beforeload: function (store, operation, eOpts) {
            console.log('Help Tree Panel BeforeLoad()');
        },
        load: function (dis, records, successful, operation, node, eOpts) {
            console.log('Help Tree Panel Load()');
        }
    }
});

(According to best practices the ViewModel should be defined in a separate file but this code works as well for demonstration.)