Container is not be filled 100 percent by a toolbar

[honggang.z.zhu]

I have a container object in view port, i set the layout 'fit', then i render a toolbar to this container, when this container is rendering, i put these codes in this event:

Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'cntMainMenu',
items: [
{
xtype: 'button',
text: 'Panel Show'
},
{
xtype: 'button',
text: 'Temp Show'
}
]
});

This toolbar's buttons can not be loaded successfully. When I set toolbar's width attribute a exact number, these buttons be loaded successfully, but this container is not be filled 100 percent, what can do ?

02.png

[aconran]

Perhaps you should show a picture of what you're trying to achieve...

You will need to set a width to the toolbar if you are using the renderTo configuration.

[honggang.z.zhu]

I need to put a combobox on a container, I have to use 'renderTo' atrribute, I want this combobox to be resized when the contianer is resized. what should i do?

[aconran]

Start an Ext Project
Drag out a Panel
Put the Combobox into the Panel
Set the layout of the Panel to 'anchor'
Set the Combobox anchor configuration to '100%'

Resize the Panel and you'll see the combo adapts to the panel...

[honggang.z.zhu]

Thanks for you help.
I did it as you said, but i need this panel/ container render to another container 'ControllerA'. When I am resizing
'ControllerA', the combobox is not resized.

Below is the code, I want to render this panel to another container.

Ext.define('app.view.Page.P4', {
extend: 'Ext.panel.Panel',
alias: 'widget.pagep4',


layout: {
type: 'anchor'
},
title: 'P4',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'combobox',
anchor: '98%',
fieldLabel: 'Label'
}
]
});


me.callParent(arguments);
}


});

[aconran]

How are you resizing it?

Have you put Page.P4 in as an item of this container?

[honggang.z.zhu]

yes, Page.P4 as a item renderTo a container.

[honggang.z.zhu]

I want to click 'Page P1 Show', show the panel 'P1', when click 'Page P2 show', show the panel 'P2'.

Panel 'P1'
Untitled.png

Panel 'P2'

02.png

I used the following code to create the panels 'pagep1' and 'pagep2' rendering to a container 'cntMainContent', but the components on the panels are not resized when the window resized, if I drag 'pagep1' under container 'cntMainContent' as a item, when i resized the window, the components on the panel 'pagep1' are resized automatically. I don't know why, what can i do ?

Ext.widget('pagep1', {
renderTo: 'cntMainContent'
});

Ext.widget('pagep2', {
renderTo: 'cntMainContent'
});

[aconran]

When using renderTo, you are instructing the framework to render to a particular dom element and then forget about managing the width/height/position of the component.

When you use items or add to a particular container, you are instructing the framework to manage the height/width/position of the component via layout management.

renderTo - unmanaged
add()/items - managed by layout.

Instantiate instances of your components and add them to an appropriate container. As that container is resized, so will your child components.

[honggang.z.zhu]

It works, I used 'add' method. Thanks for your great help.