PDA

View Full Version : How can I make container resize child containers (doLayout not working).



xjscrafter
19 Mar 2014, 6:10 PM
I have the following portlet. When user clicks the gear icon, the settingsContainer appears as expected, but the chartComp does not resize. doLayout() called on myfancyportlet does not work.

I had expected that because both child containers have flex: 1 that when the settings container appears, the chartComp would resize to occupy one half of their parent, and when the gear icon is clicked again, the settingsContainer would again be hidden, and chartComp would again occupy the entire parent container space.


Ext.define('MyPortlet', {
extend: 'Ext.app.Portlet',
alias: 'widget.myportlet',
itemId: 'myfancyportlet',
width: Ext.app.PortalPanel.MEDIUM_WIDTH,
height: Ext.app.PortalPanel.MEDIUM_HEIGHT,
state: 'chart',


layout: {
type: 'hbox',
align: 'stretch'
},


chartSeries: [
'seriesOne',
'seriesTwo',
'seriesThree'
],


items: [{
xtype: 'mycomponent',
itemId: 'chartComp',
flex: 1
}, {
xtype: 'container',
itemId: 'settingsContainer',
flex: 1,
hidden: true
}],


tools: [{
xtype: 'tool',
type: 'gear',
handler: function(e, target, panelHeader, tool){
var portlet = panelHeader.ownerCt;
var settings = portlet.down('[itemId=settingsContainer]');
if(settings && portlet && portlet.chartSeries && portlet.state == 'chart') {
settings.removeAll();
for(var x=0;x< portlet.chartSeries.length; x++) {
var label = Ext.create('Ext.form.Label', {
text: portlet.chartSeries[x]
});
settings.add(label);
}
portlet.state = 'settings';
settings.setVisible(true);
portlet.doLayout();
} else if(settings && portlet && portlet.state == 'settings') {
portlet.state = 'chart';
settings.setVisible(false);
portlet.doLayout();
}
}
}]
});

xjscrafter
19 Mar 2014, 6:17 PM
If I remove flex: 1 from settingsContainer still no luck.