Problems with references and stores in Sencha ExtJS

Question

I’m new here in at Stackoverflow and to Sencha ExtJS development. I’m a student from Germany and I’m current trying to get my degree in media computer sciences. As a part of my final assignment I’m currently developing the UI of a webapp for a local company. While I was trying out the capabilities of the Sencha ExtJS framework I came across some problems, which is why I’m now reaching out to the community for help ;) My first problem I had, was when I was playing around with the syntax for instancing classes using xtypes and the association of Stores inside the ViewModel:

For the purpose of easier to read and less cluttered code I wanted to give my stores their own xtype so I could instead of declaring all the stores and their configs inside the ViewModels’ stores config wanted to have every store inside their own file and then just create an instance of them later inside the ViewModel. The code I wrote for this looks like this: ViewModel:

Ext.define('Example.viewmodel.MyViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',

    requires: [
        'Example.store.MyStore',
    ],


    stores: {
        StoreA:        { xtype: 'store_a'        },
        StoreB:        { xtype: 'store_b'        },
        StoreC:        { xtype: 'store_c'        }
    },

    data: {
        /* This object holds the arbitrary data that populates the                      ViewModel and 
        is then available for binding. */
    }
});

StoreA:

Ext.define('Example.store.StoreA', {
    extend: 'Ext.data.Store',
    xtype: 'store_a',

    requires: [
    'Example.model.ModelA'
],

    storeId: 'StoreA',
    autoLoad: false,
    model: 'Example.model.ModelA',
    listeners: {
    load: 'onLoadofStoreA'
}
});

But apparently this isn’t working… My load listener of the store does not seem to fire at the method inside my controller and does not even seem to know about the view that is associated with the ViewModel. What am I doing wrong or is this just not meant to be done like that? My Second Problem was when I was playing around with some of the UI components. My scenario was like this: I wanted to have a menu that would slide in, where u could do some inputs that would then load the content for the view. I found this example for a sliding menu (https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/?modern#menus) and built this: Inside my ViewController:

getMenuCfg: function (side) {
    var cfg = {
        side: side,
        controller: example_controller',
        id: 'topMenu',
        items: [
            {
                xtype: 'container',
                layout: 'hbox',
                width: '100%',
                items: [
                    {
                        xtype: 'fieldset',
                        reference: 'fldSet',
                        id: 'fldSet',
                        layout: 'vbox',
                        width: '50%',
                        defaults: {
                            labelTextAlign: 'left'
                        },
                        items: [
                        {
                            autoSelect: false,
                            xtype: 'selectfield',
                            label: 'Selectfield',
                            reference: 'sfExample',
                            id: 'sfExample',
                            listeners: {
                                change: 'onSFChange'
                            }
                        },
                        {
                            xtype: 'container',
                            layout: {
                                type: 'hbox',
                                align: 'end',
                                pack: 'center'
                            },
                            items: [{
                                xtype: 'textfield',
                                reference: 'ressource',
                                id: 'ressource',
                                flex: 1,
                                textAlign: 'left',
                                margin: '0 10 0 0',
                                label: 'Ressource',
                                labelAlign: 'top',
                                labelTextAlign: 'left',
                                editable: false,
                                readOnly: true
                            },
                                {
                                    xtype: 'button',
                                    shadow: 'true',
                                    ui: 'action round',
                                    height: '50%',
                                    iconCls: 'x-fa fa-arrow-right',
                                    handler: 'openDialog'
                                }
                            ]
                        },

                        {
                            xtype: 'textfield',
                            reference: 'tfExample',
                            id: 'tfExample',
                            label: 'Textfield',
                            editable: false,
                            readOnly: true
                        }
                        ]

                    },
    }]
}];

The problem I come across now is, that I would no longer be able to easily get the references of components inside the menu (input fields) with this.lookupReference() as if they were just part of the view. In fact to find a workaround I had to trace a way back to the components using a debugger. For example if another method inside my controller wanted to use a field inside this menu, instead of simply just doing this.lookupReference(‘sfExample’) I now had to do something like this:

var me = this,
    vm = me.getViewModel(),
    menuItems = me.topMenu.getActiveItem().getItems(),
    fieldset = menuItems.getByKey('fldSet'),
    selectfieldRessArt = fieldsetLeft.getItems().getByKey('sfExample');

I’m pretty sure that I am missing out on something important here and there has to be a way to do this easier. I’m really looking forward to your answers, thank you in advance ;)

Answer 1

use xtype only for components. if you need to define an type/alias for store, use alias config property instead and especify the alias category "store.".

Defining a store with an alias

Ext.define('Example.store.StoreA', {
    extend: 'Ext.data.Store',
    //use store. to category as a store
    alias: 'store.store_a',

    requires: [
    'Example.model.ModelA'
],
    storeId: 'StoreA',
    autoLoad: false,
    model: 'Example.model.ModelA',
    listeners: {
    load: 'onLoadofStoreA'
}
});

Instantianting your store by type

Ext.define('Example.viewmodel.MyViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.myviewmodel',

requires: [
    'Example.store.MyStore',
],


stores: {
    StoreA:        { type: 'store_a'        },
    StoreB:        { type: 'store_b'        },
    StoreC:        { type: 'store_c'        }
},

data: {
    /* This object holds the arbitrary data that populates the                      ViewModel and 
    is then available for binding. */
}

});

I Hope it can help you