Load dynamic data in tree view in ExtJs

I write codes like below and It works:

Ext.define('Gis.view.MapLayer.MapLayerTreePanelPublic', {
    extend: 'Ext.tree.Panel',
    xtype: 'public_gis_tree_panel',
    controller: 'public_gis_map_layer',

    renderConfig: {
        gisMap : null
    },

    title: 'Geospatial Layers',
    baseToolbar: false,
    displayField: 'Title',
    rootVisible: false,
    checkPropagation: 'both',
    reference: 'publicGisTreeMap',

    tools: [
        {
            type: 'expand',
            tooltip: 'Open All',
            callback: 'onExpandLayerTree'
        },
        {
            type: 'collapse',
            tooltip: 'Close All',
            callback: 'onCollapseLayerTree'
        },

    ],

    initComponent: function () {
        let me = this;

        me.loadData();
        me.callParent();
    },
    listeners: {
        checkchange: 'onTreeCheckChanged',
        itemclick: 'onTreeItemClick',
        itemcontextmenu: 'showContextMenu'
    },

    loadData: function () {
        let me = this;

        Ext.Ajax.request({
            url: BASE.GIS_MODULE_URL + 'map-layer-group/index',
            method: 'POST',
            jsonData: {
                typeCode: "public"
            },
            success: function (response) {
                let result = Ext.decode(response.responseText);
                if (result.success) {
                    const setNodeChecked = (nodes) => {
                        return nodes.map(node => {
                            if (node.leaf) {
                                node.checked = false; // Set initial checked state to false
                            } else if (node.children) {
                                node.children = setNodeChecked(node.children);
                            }
                            return node;
                        });
                    };

                    let processedData = setNodeChecked(result.data.items);
                    let store = Ext.create('Ext.data.TreeStore', {
                        root: {
                            expanded: true,
                            children: processedData
                        },
                        fields: [{
                            name: 'iconCls',
                            convert: function (v, rec) {
                                if (!rec.data.leaf) {
                                    return 'x-fa fa-map';
                                }
                                if (rec.get('StylePreview')) {
                                    let styleElement = document.createElement('style');
                                    styleElement.type = 'text/css';
                                    styleElement.innerHTML = `
                        .x-tree-icon${rec.get('Id')} {
                            background-image: url("data:image/png;base64, ${rec.get('StylePreview')}") !important;
                            background-position: center !important;
                            background-size: cover !important;
                        }`;
                                    document.head.appendChild(styleElement);
                                    return `x-tree-icon${rec.get('Id')}`; // Icon for leaf nodes with a preview
                                }
                            }
                        }],
                    });
                    // Set store after data is processed
                    me.setStore(store);
                }
            },
        });
    },

});


Ext.define('Gis.view.MapLayer.MapLayerTreePanelPublicController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.public_gis_map_layer',

    init: function (view) {
        let me = this;
    },

    onCollapseLayerTree: function (tree) {
        tree.collapseAll();
    },

    onExpandLayerTree: function (tree) {
        tree.expandAll();
    },

    onTreeItemClick: function (tree, record) {
        let me = this;
        const layer = record.getData()
        if (layer.checked === true) {
            me.gisMap.setSelectedLayer(layer);
        } else {
            me.gisMap.setSelectedLayer(null);
        }
    },

    onTreeCheckChanged: function (node, checked, e, eOpts) {
        let me = this;
        let view = me.getView();

        if (node.data.leaf === false) {
            return;
        }

        let gisMap = view.gisMap;
        let tree = node.getOwnerTree();
        let checkedLayer = me.getCheckedLayer(tree);

        if (node.data.checked) {
            gisMap.addWmsLayer(node.data);
        } else {
            gisMap.removeWmsLayer(node.data);
        }

        gisMap.getController().getWmsLegend(checkedLayer.map(layer => layer.LayerName));
        console.log(`Node "${node.get('Title')}" checked: ${checked}`);

    },

    getCheckedLayer: function (tree) {
        let store = tree.getStore();
        let checkedRecords = store.queryBy(function (record) {
            return record.get('checked') === true && record.get('leaf') === true;
        });
        let checkedLayer = checkedRecords.items.map(layer => layer.data);

        return checkedLayer;
    },

});