extjs - 使用 slidenavigatoin 将 xtype 项目动态添加到面板

Question

所以我试图将项目动态地放置到具有 slidenavigation 功能的面板上:

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

下面是另一个 View 中 View 的初始化:

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

比起我试图在 this.config.items 部分使用这个变量，但是这不起作用，似乎 Sencha 首先编译所有内容然后初始化组件，我可能错了，我真的是 Sencha Framework 的新手。

下面是使用 home 变量的 View :

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                    }                ],            },

所以 this.home 是未定义的...

一种可能的解决方案来自这个问题:How to dynamically create xtype templates in Sencha Touch

我决定将所有代码放在 this.config.items.add({ ... my items ... }) 但是 Ext.ux.slidenavigation.View 貌似给了我BUG! :( 因为初始化方法发生在 FlyoutNavigation View 项的绑定(bind)方法之后。

这是错误的消息:Uncaught TypeError: Cannot read property 'raw' of undefined View.js:310 这基本上是这一行:if (Ext.isFunction( item.raw.handler)) {

所以我的问题是

1. 如何获取config.items 部分中的实例变量？如果可以的话，那一切都OK
2. 或者您知道该问题的解决方法吗？

谢谢

Answer 1

我不认为您可以在定义类时使用 this.config，而是可以使用我之前告诉您的初始化函数。所以你应该能够做到这一点:

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
            }
        ],
    });
}

或者如果你在父类中定义了homeView，你可以这样做:

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