CODEWITHSUNDEEP
extjs
Nabarun
Nabarun

Reputation: 791

ExtJS border layout does not render its children

I have the following component which is added to a Panel. The children are not rendered when I set the layout to border. However, if I change the layout to other (e.g. hbox, vbox, auto), it works.

Can you please suggest what I am doing wrong. I am using ExtJS 4.1.3

Ext.define('WebAdmin.view.reference.CountryMain', {
    extend        : 'Ext.container.Container',
    alias         : 'widget.country.main',
    requires      : ['Ext.layout.container.Border',
                 'Ext.resizer.BorderSplitter'],
    layout        : {
        type        :'border'   // does not work
    },
    initComponent : function() {
        var me = this;
        me.items = [{
            region      : 'center',
            layout      : 'fit',
            html        : 'Center'
        },{
            region      : 'east',
            html        : 'East',
            width       : 300,
            split       : true,
            collapsible : true
        }];
        me.callParent();
    }
});

I have followed Why will my ExtJS tab will not show items with a border layout but could not solve my problem.

Upvotes: 2

Views: 3629

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92334

The problem is likely that you're not giving your container a width/height. That can be done either explicitly in the configuration, or by making sure the parent container uses a layout (not just the default layout, which doesn't size anytyhing).

In this example, I add your component to the body, giving it a hardcoded width/height http://jsfiddle.net/StK2Y/ This works

Ext.create('WebAdmin.view.reference.CountryMain', {
    title: 'Border Layout',
    renderTo: Ext.getBody(),
    width: 500,
    height: 500    
});

However, if the parent container doesn't have a set width/height, the border layout will not work http://jsfiddle.net/StK2Y/1/

Ext.create('WebAdmin.view.reference.CountryMain', {
    title: 'Border Layout',
    renderTo: Ext.getBody()
});

Upvotes: 1

Related Questions