Question

我对Extjs很新，我无法弄明白：我有一个需要面板的Container。有没有办法动态初始化组件？这是我的视图：

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事件，然后根据控制器中的条件add使用组件。类似的东西：

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

}）;

Extjs initComponent的条件配置

1 个答案: