CODEWITHSUNDEEP
javascriptextjsextjs4
Brian DiCasa
Brian DiCasa

Reputation: 9487

extjs4 - Adding custom components to container

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.

Upvotes: 1

Views: 1764

Answers (1)

CD..
CD..

Reputation: 74166

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)

Upvotes: 1

Related Questions