Extjs initComponent的条件配置

Question

我对Extjs很陌生，我不能弄清楚:我有一个容器，需要一个面板。是否有一种方法可以动态初始化组件?这是我视图:

Ext.define('Hello.view.index.Resume', {
    extend: 'Ext.container.Container',
    requires: [
        'Hello.view.index.ValuesChart',
    ],
    initComponent: function() {
        this.leftZone = [{
            margin: '0 0 5 0',
            ui: 'hello-toggable',
            xtype: 'hello_index_characteristics'
        }];
        Ext.apply(this, {
            items: [{
                xtype: 'container',
                items: [{
                    xtype: 'hello_index_valueschart',
                }, { 
                    // ....
                }]
            }]
        });
        this.callParent();
    }
});

hello_index_valueschart面板有一个initComponent function，它定义了几个项目:

initComponent: function() {
    Ext.apply(this, {
        border:false,
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            items: [
                {
                    xtype: 'tbspacer',
                    width: 15
                },
                '->',
                {
                    xtype:'button',
                    customproperty: this.id,
                    text:'I am a text',
                    tooltip: 'Hi there'
                },
                {
                    xtype:'button',
                    customproperty: this.id,
                    text:'I am another text',
                    tooltip: 'Hi here'
                }
            ]
        }]
    })
}  

是否有一种方法可以动态地传递项目到这个面板?我的意思是，例如:如果在控制器中验证了一个条件，则通过阵列items1，否则通过阵列items2。

Answer 1

快速思考:

你可以在面板上使用afterrender事件，然后根据控制器中的条件添加组件。比如:

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    onPanelAfterRender: function(component, eOpts) {
         if(this.someCondition()) {
            component.add( { ... });
         }
    },
    someCondition: function() {
        return true;
    }
    init: function(application) {
        this.control({
            "#mypanel": {
                afterrender: this.onPanelAfterRender
            }
        });
    }

});