使用slidenavigatoin动态地将xtype项添加到面板

时间:2013-05-20 07:48:47

标签: extjs sencha-touch

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

// FlyoutNavigation.js 
Ext.define("APN.view.FlyoutNavigation", {
    id: "flyoutNavigationPanel",
    extend: 'Ext.ux.slidenavigation.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框架新手。

所以这里是使用home变量的视图:

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视图的项目上的绑定方法之后。

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

所以我的问题将是

  1. 如何在config.items部分获取实例变量?如果可能的话,那就好了
  2. 或者你知道这个问题的解决方法吗?
  3. 由于

1 个答案:

答案 0 :(得分:3)

我认为在定义类时不能使用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
    });
}