PDA

View Full Version : EXTJS Nested Borer Layout



robinahuja2712
28 Nov 2013, 5:06 AM
Hi ,
I am trying to add a new border layout dynamically into a existing center region of a border layout.
It is not working . I am able to add another layout (except border layout) into the existing region of a border layout.

Please answer asap
Thanks in advance
email : robinahuja2712a@gmail.com

scottmartin
28 Nov 2013, 5:53 PM
What problems are you having? What have you tried so far, where there any errors?

Please use our fiddle to run this example:
https://fiddle.sencha.com/#home



Ext.application({
name : 'Fiddle',

launch : function() {

var main = Ext.create('Ext.panel.Panel', {
width: 800,
height: 800,
title: 'Main Border Layout',
layout: 'border',
items: [{
title: 'Main South',
region: 'south',
xtype: 'panel',
height: 100,
split: true,
margins: '0 5 5 5'
},{
title: 'Main West',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'Main Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
itemId: 'center-main',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});

var sub = Ext.create('Ext.panel.Panel', {
title: 'Sub Border Layout',
layout: 'border',
items: [{
title: 'Sub West',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
layout: 'fit'
},{
title: 'Sub Center',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
});

var subCenter = main.down('#center-main');
subCenter.add(sub);

}
});

robinahuja2712
2 Dec 2013, 12:15 AM
Hi ,

Thanks for such quick response .
All views inside nested border layout are getting instantiated.but inside view is blank screen.
There is no error as such.

Outer Border Layout :

var view = Ext.create('iConnect.view.ChannelView');
var viewPort = Ext.ComponentQuery.query('viewport')[0];
var cr = viewPort.down('panel[region=center]');
cr.removeAll();
cr.add(view);

Inner Border Layout :Ext.define('iConnect.view.ChannelView', {
extend : 'Ext.panel.Panel',
alias : 'widget.channelview',
layout : {
type : 'border'
},
initComponent : function() {
Ext.apply(this, {
items : [{
region : 'west',
border : false,
flex : 4,


height : '100%',
layout : {
type : 'border',
padding : '50%'


},


items : [{
region : 'south',
border : false,
width : '100%'
}, {
region : 'center',
border : true,
width : '100%',
height : '70%',
xtype : 'channelepg'
}]
}, {
region : 'center',
border : false,
flex : 6,
height : '60%',
html : 'Some HTML Content'
}, {
region : 'south',


border : false,
width : '100%',
height : '40%',


layout : {
type : 'border'


},
items : [{
region : 'west',
border : false,


flex : 4,
html : ''
}, {


region : 'center',
border : false,
flex : 6,


html : 'Some Dummy Content'


}]
}]
});
console.log("after item apply call");
this.callParent(arguments);
}
});

All Logs for different regions inside inner border layout are coming . But center view of outer border layout is coming as blank screen .
Please Help !!!