javascript - 分机JS : Why can not call array from another class' property/function?

Question

我正在尝试实现不同的items，具体取决于initComponent属性中的登录用户，但我无法调用和呈现aDashItems和 bDashItems 数组。我尝试以属性和函数的形式调用，但没有成功!

在下面您还可以找到 AllItems 类。我到底做错了什么？

Ext.define('MyApp.MainDash', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.maindash',

    requires: [
        'MyApp.AllItems'
    ],

    closable: true,
    layout: 'responsivecolumn',
    bodyPadding: 20,
    scrollable: true,

    initComponent: function () {
        var me = this;
        var username = localStorage.getItem("username");

        var aDashItems = MyApp.AllItems.aDashItems;
        var bDashItems = MyApp.AllItems.bDashItems;
        // var aDashItems = MyApp.AllItems.aDashItems();
        // var bDashItems = MyApp.AllItems.bDashItems();

        // Dashboard "A";
        if (username === "abc" || username.match(/regEx/)) {
            me.items = [aDashItems];
        }
            // Dashboard "B";
            else if (username === "cba") {
                me.items = [bDashItems];
            }

        me.callParent();
    }
});

调用类；

Ext.define('MyApp.AllItems', {
    requires: [...],

    aDashItems: [
        {
            xtype: 'widgetA' 
        },
        // some other items...
    ],
    // aDashItems: function () {
    //     var me = this;
    //
    //     me.items = [
    //         [
    //             {
    //                 xtype: 'widgetA' 
    //             },
    //             // some other items...
    //         ]
    //     ];
    //
    //     return me.items;
    // },

    bDashItems: [
        {
            xtype: 'widgetA'
        },
        // some other items...
    ]
    // bDashItems: function () {
    //     var me = this;
    //
    //     me.items = [
    //         {
    //               xtype: 'widgetB'
    //         },
    //         // some other items...  
    //     ];
    //
    //     return me.items;
    // }
});

Answer 1

ExtJS

您可以将 MyApp.AllItems 创建为 singleton 并且您可以使用该类名在整个应用程序中访问同一类。

When any class set to true, the class will be instantiated as singleton.

例如:

Ext.define('App.utils.Constants', {
    singleton: true,

    alternateClassName: 'constants',

    config: {
        text: 'Demo' //This will getter and setter
    },

    log: function(msg) {
        console.log(msg);
    },

    constructor: function(config) {
        this.initConfig(config);
    }
});

//Access value like this 
constants.log('Hello');//output "Hello"

constants.getText();//output "Demo"

在此FIDDLE ，我创建了一个演示。希望这将帮助/指导您实现您的要求。

<小时/>

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define("MyApp.AllItems", {
            singleton: true,
            alternateClassName: 'alltems',
            config: {
                aDashItems: [{
                    xtype: 'label',
                    text: 'Dashbord A'
                }],
                bDashItems: [{
                    xtype: 'label',
                    text: 'Dashbord B'
                }]
            },

            constructor: function (config) {
                this.initConfig(config);
            }
        });

        Ext.define('MyApp.MainDash', {

            extend: 'Ext.panel.Panel',

            title: 'Demo',

            alias: 'widget.maindash',

            closable: true,

            bodyPadding: 20,

            scrollable: true,

            initComponent: function () {
                var me = this,
                    username = 'cba';

                me.callParent();
                // Dashboard "A";
                if (username === "abc") {
                    me.add(alltems.getADashItems());
                }
                // Dashboard "B";
                else if (username === "cba") {
                    me.add(alltems.getBDashItems());
                }
            }
        });

        Ext.create({
            xtype: 'maindash',
            renderTo: Ext.getBody()
        })
    }
});