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

Question

I'm trying to add custom components to an ExtJS4 container. However, when trying to add items to the container in the onRender method, I am receiving the error:

'Cannot read property 'layoutBusy' of undefined' from the doLayout in AbstractContainer. The componentLayout property is not defined.

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

I've tried adding the components using the container's item configuration property and it works. However, I'm not sure how to pass custom parameters over to the component (need to pass model instances to the component).

Thanks for any help.

Answer 1

Have a look at this example: http://jsfiddle.net/ChE59/

I'm adding 3 panels to the container and passing in some custom property.

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

(fit layout is not a good choice if you've got more the one component)