PDA

View Full Version : using designer can not fit to parent on window resize



evejones
7 Sep 2010, 4:45 AM
Hi,
I`m new to EXT JS. My problem is I am uisng the designer and have two toolbars in a container. One is position to the left and is fixed size, the other is positioned to the right and is meant to resize if the users changes the window size. Howeve, it needs a manual refresh of the browser to actually achieve this. Can anyone help please ?

The code is:


MyContainer4Ui = Ext.extend(Ext.Container, {
itemId: 'main_toolbar_container',
layout: 'hbox',
autoWidth: true,
width: 42,
id: 'main_toolbar_container',
initComponent: function() {
this.layoutConfig = {
align: 'stretchmax'
};
this.items = [
{
xtype: 'toolbar',
itemId: 'icon_main_toolbar_left',
height: 46,
width: 580,
flex: 1,
id: 'icon_main_toolbar_left',
items: [
{
xtype: 'spacer',
width: 31
},
{
xtype: 'button',
itemId: 'dashboard_icon_toolbar_button',
height: 42,
icon: 'images/icons/dashboard.png',
width: 42,
tooltip: 'Dashboard',
iconCls: 'icons_toolbar',
id: 'dashboard_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 58
},
{
xtype: 'button',
itemId: 'configuration_icon_button_toolbar',
height: 42,
icon: 'images/icons/configuration.png',
width: 42,
tooltip: 'Configuration',
iconCls: 'icons_toolbar',
id: 'configuration_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 56
},
{
xtype: 'button',
itemId: 'policy_icon_button_toolbar',
height: 42,
icon: 'images/icons/policy.png',
width: 42,
tooltip: 'Policy',
iconCls: 'icons_toolbar',
id: 'policy_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 58
},
{
xtype: 'button',
itemId: 'users_icon_button_toolbar',
height: 42,
icon: 'images/icons/users.png',
width: 42,
tooltip: 'Users',
iconCls: 'icons_toolbar',
id: 'users_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 58
},
{
xtype: 'button',
itemId: 'reports_icon_button_toolbar',
height: 42,
icon: 'images/icons/reports.png',
width: 42,
tooltip: 'Reports',
iconCls: 'icons_toolbar',
id: 'reports_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 58
},
{
xtype: 'button',
itemId: 'alerts_icon_button_toolbar',
height: 42,
icon: 'images/icons/alerts.png',
width: 42,
tooltip: 'Alerts',
iconCls: 'icons_toolbar',
id: 'alerts_icon_button_toolbar'
}
]
},
{
xtype: 'toolbar',
itemId: 'icon_main_toolbar_right',
height: 46,
buttonAlign: 'right',
enableOverflow: true,
flex: 2,
id: 'icon_main_toolbar_right',
items: [
{
xtype: 'button',
text: 'Logout',
height: 42,
width: 100,
tooltip: 'Logout',
itemId: 'logout_icon_button_toolbar',
iconCls: 'icon_logout_toolbar',
icon: 'images/icons/logout.png',
id: 'logout_icon_button_toolbar'
},
{
xtype: 'spacer',
width: 58
}
]
}
];
MyContainer4Ui.superclass.initComponent.call(this);
}
})

jarrednicholls
7 Sep 2010, 8:20 AM
Hi evejones,

The layout manager will only do a layout one time when the component is rendered. After that, if you want the Container's layout to adjust itself, you must call doLayout() (http://dev.sencha.com/deploy/dev/docs/?class=Ext.Container&member=doLayout) on the Container. This will initiate a layout operation to occur explicitly and will readjust the width of your Toolbars. You can call this method when the window/browser viewport is resized (http://dev.sencha.com/deploy/dev/docs/?class=Ext.EventManager&member=onWindowResize).

Hope that helps!

evejones
8 Sep 2010, 12:28 AM
Thanks.