Dynamically add xtype items to the panel with slidenavigatoin
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
});
}
Jackie Chan
Updated on June 26, 2022Comments
-
Jackie Chan almost 2 years
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 ... })
howeverExt.ux.slidenavigation.View
looks like gave me the BUG! :( as the initialise method occurs after the binding methods on items ofFlyoutNavigation
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