Reputation: 791
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
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