javascript - Sencha ExtJS 中的引用和存储问题

Question

我是 Stackoverflow 和 Sencha ExtJS 开发的新人。我是来自德国的学生，目前正在努力获得媒体计算机科学学位。作为我期末作业的一部分，我目前正在为一家本地公司开发网络应用程序的 UI。当我尝试 Sencha ExtJS 框架的功能时，我遇到了一些问题，这就是为什么我现在向社区寻求帮助；)我遇到的第一个问题是当我尝试使用 xtypes 实例化类的语法以及 ViewModel 内 Stores 的关联时:

为了更容易阅读和减少困惑的代码，我想为我的商店提供自己的 xtype，这样我就可以不用在 ViewModel 的商店配置中声明所有商店及其配置，而是希望将每个商店都放在自己的文件中然后稍后在 ViewModel 中创建它们的实例。我为此编写的代码如下所示: View 模型:

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

但显然这不起作用......我的商店加载监听器似乎没有触发我的 Controller 内的方法，甚至似乎不知道与 ViewModel 关联的 View 。我做错了什么或者这只是不应该这样做？我的第二个问题是当我使用一些 UI 组件时。我的场景是这样的:我想要一个可以滑入的菜单，您可以在其中进行一些输入，然后加载 View 的内容。我找到了这个滑动菜单的示例( 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() 轻松获取菜单(输入字段)内组件的引用，就好像它们只是 View 的一部分。事实上，为了找到解决方法，我必须使用调试器追溯到组件。例如，如果我的 Controller 内的另一个方法想要使用此菜单内的字段，而不是简单地执行 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. */
}

});

希望对你有帮助