Dynamically add xtype items to the panel with slidenavigatoin

Question

So I'm trying to put items dynamically to the panel that has slidenavigation feature:

// FlyoutNavigation.js 
Ext.define("APN.view.FlyoutNavigation", {
    id: "flyoutNavigationPanel",
    extend: 'Ext.ux.slidenavigation.View',

Here is the initialisation of the view in another view:

        // MainViewContainer.js 
        this.home = "Some var"
        this.flyout = Ext.create('APN.view.FlyoutNavigation', {
            id: 'flyoutNavigationPanel',
            home: this.home
        });

Than I'm trying to use this variable in the this.config.items section, however that doesn't work, it seems that Sencha compiles everything first and than initialiases the components, I might be wrong, I'm really new to Sencha Framework.

So here is the view where the home variable is used:

Ext.define("APN.view.FlyoutNavigation", {
    id: "flyoutNavigationPanel",
    extend: 'Ext.ux.slidenavigation.View',
    xtype: 'flyoutnavigation',
    requires: [
... heaps of things omitted ...
    ],
    initialize: function () {
        this.callParent();  
        this.setupDynamicItems();
    },
    config: {
        items: [
            {
                itemId: 'nav_home',
                id: 'homeView',
                items: [{
                        xtype: 'articlelist',
                        id: 'latestNews',
                        feedUrlName: this.home, // - that's the place where UNDEFINED occurs
                        flex: 1
                    }
                ],
            },

So this.home is undefined...

One possible solution Comming from this question: How to dynamically create xtype templates in Sencha Touch

I decided to put all the code in this.config.items.add({ ... my items ... }) however Ext.ux.slidenavigation.View looks like gave me the BUG! :( as the initialise method occurs after the binding methods on items of FlyoutNavigation view.

Here is the message from of the bug: Uncaught TypeError: Cannot read property 'raw' of undefined View.js:310 which is basically this line: if (Ext.isFunction(item.raw.handler)) {

So my questions would be

How to get the instance variable in the config.items section? If that's possible, than all is OK
Or do you know the work around of this issue?

Thanks

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-05-20T09:03:09

I don't think you can use this.config when defining the class, instead you can use initialize function as I told you earlier. So you should be able to do this:

initialize : function() {
    var me = this;
    var home = me.config.home;
    me.add({
        itemId: 'nav_home',
        id: 'homeView',
        items: [{
                xtype: 'articlelist',
                id: 'latestNews',
                feedUrlName: home,
                flex: 1
            }
        ],
    });
}

OR if you have defined homeView in parent class, you can do this:

initialize : function() {
    var me = this;
    var home = me.config.home;
    me.down('#homeView').add({
        xtype: 'articlelist',
        id: 'latestNews',
        feedUrlName: home,
        flex: 1
    });
}

Dynamically add xtype items to the panel with slidenavigatoin

1 Answers