使用slideenavigatoin动态地将xtype项目添加到面板 [英] Dynamically add xtype items to the panel with slidenavigatoin

问题描述

所以我试图将项目动态地放到具有 slidesenavigation 功能的面板：

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',

这是另一个视图中视图的初始化： / p>

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

比我试图在 this.config.items 部分使用这个变量，但是这不行，似乎Sencha编译一切都是第一个而不是初始化组件，我可能是错的，我真的很新的Sencha框架。

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.

所以这里是$ code>家庭变量：

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

所以 this.home 未定义...

So this.home is undefined...

一个可能的解决方案
从这个问题回答：如何在Sencha Touch中动态创建xtype模板

我决定将所有代码放在 this.config.items.add（{...我的项目...}） code> Ext.ux.slidenavigation.View 外观喜欢给我BUG！ :(作为初始化方法发生在 FlyoutNavigation 视图的项目的绑定方法之后。

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.

这是从的错误：未捕获TypeError：无法读取未定义的View.js的属性raw：310 这基本上是这行： if（Ext.isFunction （item.raw.handler））{

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)) {

所以我的问题是

1. 如何获取config.items部分中的实例变量？如果可能，所有的都可以


2. 或者你知道这个问题的工作

谢谢

推荐答案

我不认为你可以在定义类时使用 this.config ，而是可以像以前告诉过的那样使用initialize函数，所以你应该可以这样做：

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

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

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

这篇关于使用slideenavigatoin动态地将xtype项目添加到面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！