Ext JS：为什么不能从另一个 class' property/function 调用数组？

Question

我正在尝试实现不同的 items 取决于 initComponent 属性中的登录用户，但我无法调用和呈现 aDashItems 和 bDashItems 数组。我试过调用 as 属性和 as function 但没有成功！

下面还有 AllItems class。我到底做错了什么？

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

被称为class；

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 并且您可以使用 class 在整个应用程序中访问相同的 class名字.

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中，我创建了一个演示。希望这会 help/guide 你达到你的要求。

代码片段

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

Ext JS：为什么不能从另一个 class' property/function 调用数组？

Ext JS: Why can not call array from another class' property/function?

javascript

arrays

extjs

class

panel

ExtJS