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

Question

I'm trying to achieve different items depends on logged user within initComponent property but I'm not able to call and render aDashItems and bDashItems arrays. I've tried to call as property and as function but couldn't be success!

Below you'll find the AllItems class as well. What exactly i am doing wrong here?

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

Called 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

You could create MyApp.AllItems as a singleton and you can access same class throughout the application using that class name.

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

For example:

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"

In this FIDDLE, I have created a demo. Hope this will help/guide you to achieve your requirement.

---

CODE SNIPPET

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