HBox into Container not resize it

[izak18]

Hi guys,


I have a problem with a panel, when I change the size of the window explorer, all the components changes too, but my container doesn't.


This is my code:

var body2 = [{
	xtype: 'fieldset',
	title: 'Área de Ventas',
		defaults: 
		{
			labelAlign: 'left',
			labelWidth: '30%'
		}
}]


documentoView = Ext.extend(Ext.Panel, 
{
	initComponent: function() 
	{	
		this.caja1 = new Ext.Container ({
			layout: 'hbox',
			items: [{
				xtype: 'textfield',
				dock: 'left',
				flex: 2,
				labelAlign: 'left',
				labelWidth: '32%',
				useClearIcon: true,
				label: 'Cliente',
				placeHolder: "Ingrese Cliente"
			},
			{
				xtype: 'panel',
				flex: 0.75,
				layout: {
					type: 'vbox',
					align: 'center',
					pack: 'center'
				},
				items: [{
					xtype: 'button',
					text: 'Buscar',
					width: 140,
					iconMask: true,
					iconCls: 'search',
					ui: 'action-round',
					handler: function()
					{
						window.open("buscaCliente.html","_self");
					}
				}]
			},
			{
				xtype: 'panel',
				flex: 0.75,
				items: [{
					xtype: 'button',
					text: 'Interlocutores',
					width: 200,
					ui: 'action-round',
					handler: function()
					{
						window.open("interlocutores.html","_self");
					}
				}]
			},
			{
				xtype: 'spacer',
				flex: 0.5
			}]
		});
	
		this.panel1 = new Ext.Panel({
			items: [body1,this.caja1,body2]
		});
		
		this.panel2 = new Ext.Panel({
			items: [body4,combo5]
		});
		
		this.carousel = new Ext.Carousel({
			fullscreen: true,
			direction: 'horizontal',
			items: [this.panel1,this.panel2]
		});
		
		this.tabPanel = new Ext.TabPanel({
			defaults: {
				layout: 'fit'
			},
			items: [{
				title: 'Datos de cabecera',
				items: this.carousel
				},
				{
				title: 'Datos de detalle',
				items: this.lDoc
				}]
		});
		
		this.documentoPanel = new Ext.Panel(
        {
			layout: 'fit',
			fullscreen: true,
			dockedItems: dockedItems,
			items: this.tabPanel
		});
        
		this.items = this.documentoPanel;
        documentoView.superclass.initComponent.call(this);
	}
});


Ext.reg('documentoView', documentoView);

Other thing, If I set "fullscreen: true" inside the container, the components are distorted.

I hope you can help me.
Thanks in advance.

[mitchellsimoens]

You have some overnesting. Also you may want to use layout : { type : 'hbox', align : 'stretch' }

[izak18]

Hi mitchellsimoens, where do you think is the overnesting?
About 'align: stretch', yeah, maybe could help, but the results are still the same for now.

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

Thanks for everything.

[mitchellsimoens]

You have a panel, with another panel that has a tab panel. Couldn't you just get away with the tab panel?

[izak18]

You're right, now I have this:

var body2 = [{	xtype: 'fieldset',
	title: 'Área de Ventas',
		defaults: 
		{
			labelAlign: 'left',
			labelWidth: '30%'
		}
}]


documentoView = Ext.extend(Ext.TabPanel, 
{
	initComponent: function() 
	{	
		this.caja1 = new Ext.Container ({
			layout: 'hbox',
			items: [{
				xtype: 'textfield',
				dock: 'left',
				flex: 2,
				labelAlign: 'left',
				labelWidth: '32%',
				useClearIcon: true,
				label: 'Cliente',
				placeHolder: "Ingrese Cliente"
			},
			{
				xtype: 'panel',
				flex: 0.75,
				layout: {
					type: 'vbox',
					align: 'center',
					pack: 'center'
				},
				items: [{
					xtype: 'button',
					text: 'Buscar',
					width: 140,
					iconMask: true,
					iconCls: 'search',
					ui: 'action-round',
					handler: function()
					{
						window.open("buscaCliente.html","_self");
					}
				}]
			},
			{
				xtype: 'panel',
				flex: 0.75,
				items: [{
					xtype: 'button',
					text: 'Interlocutores',
					width: 200,
					ui: 'action-round',
					handler: function()
					{
						window.open("interlocutores.html","_self");
					}
				}]
			},
			{
				xtype: 'spacer',
				flex: 0.5
			}]
		});
	
		this.panel1 = new Ext.Panel({
			items: [body1,this.caja1,body2]
		});
		
		this.panel2 = new Ext.Panel({
			items: [body4,combo5]
		});
		
		this.carousel = new Ext.Carousel({
			fullscreen: true,
			direction: 'horizontal',
			items: [this.panel1,this.panel2]
		});
		
		this.tabPanel = new Ext.TabPanel({
			fullscreen: true,
			dockedItems: dockedItems,
			ui: 'light',
			defaults: {
				layout: 'fit'
			},
			items: [{
				title: 'Datos de cabecera',
				items: this.carousel
				},
				{
				title: 'Datos de detalle',
				items: this.lDoc
				}]
		});
        
		this.items = this.tabPanel;
        documentoView.superclass.initComponent.call(this);
	}
});


Ext.reg('documentoView', documentoView);

What else I have to do?
Thank for your time.

[izak18]

Any ideas? I still can't get the container resize when the explorer's window changes.
What else I have to do?


Thank in advance.