Sencha ExtJS 中的引用和存储问题

Question

我是 Stackoverflow 和 Sencha ExtJS 开发的新手。我是一名来自德国的学生，目前正在努力获得媒体计算机科学学位。作为我最终任务的一部分，我目前正在为一家本地公司开发 web 应用程序的 UI。 当我尝试 Sencha ExtJS 框架的功能时，我遇到了一些问题，这就是我现在向社区寻求帮助的原因；） 我遇到的第一个问题是，当我使用 xtypes 和 ViewModel 中的 Store 关联来使用实例化类的语法时：

为了更易于阅读和减少混乱的代码，我想为我的商店提供自己的 xtype，这样我就可以代替在 ViewModel 的商店配置中声明所有商店及其配置，而是希望将每个商店都放在他们自己的文件中然后稍后在 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. */
    }
});

商店A：

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'
}
});

但显然这不起作用......我的商店负载侦听器似乎没有在我的控制器内部的方法上触发，甚至似乎不知道与 ViewModel 关联的视图。我做错了什么，或者这只是不应该那样做？ 我的第二个问题是当我在玩一些 UI 组件时。我的场景是这样的： 我想要一个可以滑入的菜单，您可以在其中进行一些输入，然后加载视图的内容。 我为滑动菜单找到了这个示例（https://examples.sencha.com/extjs/6.7.0/examples/kitchensink/?modern#menus）并构建了这个： 在我的 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
                        }
                        ]

                    },
    }]
}];

我现在遇到的问题是，我将不再能够使用this.lookupReference() 轻松获取菜单（输入字段）内组件的引用，就好像它们只是视图的一部分一样。事实上，为了找到一种解决方法，我不得不使用调试器来追溯组件。 例如，如果我的控制器中的另一个方法想要使用此菜单中的字段，而不是简单地执行this.lookupReference(‘sfExample’)，我现在必须执行以下操作：

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

我很确定我在这里错过了一些重要的事情，必须有一种方法可以更轻松地做到这一点。我真的很期待你的回答，提前谢谢你;）

Answer 1

仅对组件使用 xtype。如果您需要为 store 定义类型/别名，请改用 alias 配置属性并指定别名类别“store”。

使用别名定义商店

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'
}
});

按类型实例化您的商店

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. */
}

});

希望对你有帮助