1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default Answered: HBox into Container not resize it

    Answered: HBox into Container not resize it


    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:

    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.

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You have some overnesting. Also you may want to use layout : { type : 'hbox', align : 'stretch' }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    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.

    Code:
    layout: {
    				type: 'hbox',
    				align: 'stretch'
    			},
    Thanks for everything.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You have a panel, with another panel that has a tab panel. Couldn't you just get away with the tab panel?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    You're right, now I have this:

    Code:
    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.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread