extjs4 - 将自定义组件添加到容器

extjs4 - Adding custom components to container

本文关键字：添加 组件 自定义 extjs4      更新时间：2023-09-26

我正在尝试将自定义组件添加到 ExtJS4 容器中。但是，当尝试在 onRender 方法中将项添加到容器时，我收到错误：

"无法从 AbstractContainer 中的 doLayout 中读取属性 'layoutBusy' of undefined"。未定义组件布局属性。

Ext.define('App.view.dashboard.RightContainer', {   
    extend: 'Ext.container.Container',
    uses: [
        'App.view.Component1',
        'App.view.Component2'
    ],
    alias: 'widget.dashboardright',
    layout: 'fit',
    border: 0,
    onRender: function() {
        var self = this;
        self.callParent(arguments);
        var component1 = Ext.create('App.view.Component1', {
            height: '300px',
            flex: 1,
            incidents: self.dashboard.get('incidents')
        });
        var component2 = Ext.create('App.view.Component2', {
            flex: 1,
            contact: self.dashboard.get('contacts')
        });
        self.add(component1);
        self.add(component2);
    }
});

我尝试使用容器的项目配置属性添加组件，它可以工作。但是，我不确定如何将自定义参数传递给组件（需要将模型实例传递给组件）。

感谢您的任何帮助。

看看这个例子： http://jsfiddle.net/ChE59/

我正在向容器添加 3 个面板并传入一些自定义属性。

Ext.define('App.view.dashboard.RightContainer', {   
    extend: 'Ext.container.Container',
    alias: 'widget.dashboardright',

    border: 0,
    constructor: function(config){
        Ext.apply(this, {
            items: [
                { 
                    title: 'panel 1'
                },
                { 
                    title: 'panel 2'
                },
                {
                    title: config.customParameter
                }
            ]     
        });
       this.callParent(arguments);        
    }
});

Ext.widget('dashboardright', {
    renderTo: Ext.getBody(),
    customParameter: 'custom parameter'
});

（如果您有更多的一个组件，适合布局不是一个好的选择）

相关文章：