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

      0  

    Default Unanswered: Aling button center

    Unanswered: Aling button center


    Hi guys, i have a question.
    Im using layout hbox to make a textfield and a button in the same line, and looks like this:

    s6kmz5.png

    I want to make something like this:

    pic2.png

    How I can do that?
    This is my code:

    Button:

    Code:
    var btnBuscarMat = [{    xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
            xtype: 'button',
            text: 'Buscar',
            flex: 1,
            ui: 'action'
            }
        ]
    }]
    Line:

    Code:
    var caja1 = new Ext.Container ({    layout: 'hbox',
        items: [
        {
            xtype: 'textfield',
            flex: 2,
            labelAlign: 'left',
            labelWidth: '32%',
            useClearIcon: true,
            label: 'Cliente'
        },
            btnBuscarMat
        ]
    });
    Panel:

    Code:
    var panel1= new Ext.Panel({    items: [caja1]
    });
    Principal Panel:

    Code:
    reclamoView = Ext.extend(Ext.Panel, {
        fullscreen: true,
        layout: 'card',
        
        initComponent: function() 
        {
            this.documentoPanel = new Ext.Panel(
            {
                layout: 'fit',
                fullscreen: true,
                dockedItems: dockedItems,
                items: [panel1]
            });        
            
            this.items = this.documentoPanel;
            reclamoView.superclass.initComponent.call(this);
        }
    });
    Another thing ... when I change the size of the explorer window, the fields doesn't refresh the position of my container's items, I dont know if you know what I mean.

    I hope you can help me.
    Thanks in advance.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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 lot of nesting and bad practices to be honest. You should not create an instance outside of initComponent and use it within, that one instance will be used for all instances of that new class you created.
    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.

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

      0  

    Default


    Thanks for the reply.


    I'm making a form with a lot of fields, this is my complete code.

    Code:
    var buttonVolver = [{
    	ui: 'back',
    	text: 'Volver',
    	handler: function()
    		{
    			window.open("menu.html","_self");
    		}
    	},
    	{
    		xtype: 'spacer'
    	},
    	{
    		xtype: 'button',
    		ui: 'confirm',
    		text: 'Grabar',
    		scope: this,
    		handler: function()
    		{
    			Ext.Msg.alert('', 'Reclamo Grabado', function(res)
    			{
    				window.open("menu.html","_self");
    			}, this);        			
    		}
    	}
    ]
    
    
    var dockedItems = [{
    	xtype: 'toolbar',
    	title: 'Reclamo',
    	dock: 'top',
    	ui: 'dark',
    	items: buttonVolver
    }]
    
    
    var bodyCliente = [{
    	xtype: 'fieldset',
    		defaults: 
    		{
    			labelAlign: 'left',
    			labelWidth: '30%'
    		},
    	items: [{
    		xtype: 'numberfield',
    		useClearIcon: true,
    		label: 'Material 1'	
    	},
    	{
    		xtype: 'numberfield',
    		useClearIcon: true,
    		label: 'Material 2'
    	},
    	{
    		xtype: 'numberfield',
    		useClearIcon: true,
    		label: 'Reclamo Referencia'
    	}]
    }]
    
    
    var bodyfac = [{
    	xtype: 'numberfield',
    	useClearIcon: true,
    	label: 'Factura / Boleta'	
    }]
    
    
    var body1 = [{
    	xtype: 'fieldset',
    		defaults: 
    		{
    			labelAlign: 'left',
    			labelWidth: '30%'
    		}
    }]
    
    
    var btnBuscarMat = [{
    	xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
    		xtype: 'button',
    		text: 'Buscar',
    		flex: 1,
    		ui: 'action'
    		}
    	]
    }]
    
    
    var btnBuscarAse = [{
    	xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
    		xtype: 'button',
    		text: 'Datos de Reclamo',
    		flex: 1,
    		ui: 'action'
    		}
    	]
    }]
    
    
    var btnStatus= [{
    	xtype: 'panel',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
    		xtype: 'button',
    		text: 'Cambiar Status',
    		flex: 1,
    		ui: 'action'
    		}
    	]
    }]
    
    
    var caja1 = new Ext.Container ({
        layout: 'hbox',
    	items: [
    	{
    		xtype: 'textfield',
    		flex: 2,
    		labelAlign: 'left',
    		labelWidth: '32%',
    		useClearIcon: true,
    		label: 'Cliente'
    	},
    		btnBuscarMat
    	]
    });
    
    
    var combo = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '34.6%',
    	label: 'Asesor',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo2 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Motivo de Reclamo',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo3 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Resultado',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo4 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Justificación de Resultado',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo5 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Organización de Ventas',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo6 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Canal',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo7 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Sector',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var combo8 = [{
    	xtype: 'selectfield',
    	flex: 2,
    	labelAlign: 'left',
    	labelWidth: '30%',
    	label: 'Oficina Ventas',
    	valueField : 'Codigo',
    	displayField : 'Descripcion',
    	store : statusStore,
    	activeItem: 0
    }]
    
    
    var caja2 = new Ext.Container ({
        layout: 'hbox',
    	items: [combo,btnBuscarAse]
    });
    
    
    var caja3 = new Ext.Container ({
        layout: 'hbox',
    	items: [
    	{
    		xtype: 'textfield',
    		flex: 2,
    		labelAlign: 'left',
    		labelWidth: '33.8%',
    		useClearIcon: true,
    		label: 'Status'
    	},btnStatus]
    });
    
    
    var panel1= new Ext.Panel({
    	items: [bodyCliente,body1,caja1,caja2,body1,combo2,caja3,combo3,combo4]
    });
    
    
    var panel2= new Ext.Panel({
    	items: [body1,combo5,combo6,combo7,combo8,bodyfac]
    });
    
    
    var carousel = [{
    	xtype: 'carousel',
    	fullscreen: true,
        direction: 'horizontal',
        items: [panel1,panel2]
    }]
    
    
    reclamoView = Ext.extend(Ext.Panel, 
    {
    	fullscreen: true,
        layout: 'card',
    	
    	initComponent: function() 
    	{
    		this.documentoPanel = new Ext.Panel(
            {
    			layout: 'fit',
    			fullscreen: true,
    			dockedItems: dockedItems,
    			items: [carousel]
    		});		
            
            this.items = this.documentoPanel;
            reclamoView.superclass.initComponent.call(this);
    	}
    });
    
    
    Ext.reg('reclamoView', reclamoView);

    So, what do you suggest? Declare all my fields inside the initComponent?
    What's the difference? It's looks more ordered for me.

    Thank you so much for all.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    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


    The arrays of config objects are bad, not how I would do it. The issue is when you do new Ext.Container and then use that within initComponent, this is bad practice. The Container should be created within the initComponent.
    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.

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

      0  

    Default


    Ok mitchellsimoens, I follow your advice.
    Thanks for everything.
    Now, I have this:

    Code:
    var buttonVolver = [{    ui: 'back',
        text: 'Volver',
        handler: function()
            {
                window.open("menu.html","_self");
            }
        },
        {
            xtype: 'spacer'
        },
        {
            xtype: 'button',
            ui: 'confirm',
            text: 'Grabar',
            scope: this,
            handler: function()
            {
                Ext.Msg.alert('', 'Reclamo Grabado', function(res)
                {
                    window.open("menu.html","_self");
                }, this);                    
            }
        }
    ]
    
    
    var dockedItems = [{
        xtype: 'toolbar',
        title: 'Reclamo',
        dock: 'top',
        ui: 'dark',
        items: buttonVolver
    }]
    
    
    var bodyCliente = [{
        xtype: 'fieldset',
            defaults: 
            {
                labelAlign: 'left',
                labelWidth: '30%'
            },
        items: [{
            xtype: 'numberfield',
            useClearIcon: true,
            label: 'Material 1'    
        },
        {
            xtype: 'numberfield',
            useClearIcon: true,
            label: 'Material 2'
        },
        {
            xtype: 'numberfield',
            useClearIcon: true,
            label: 'Reclamo Referencia'
        }]
    }]
    
    
    var bodyfac = [{
        xtype: 'numberfield',
        useClearIcon: true,
        label: 'Factura / Boleta'    
    }]
    
    
    var body1 = [{
        xtype: 'fieldset',
            defaults: 
            {
                labelAlign: 'left',
                labelWidth: '30%'
            }
    }]
    
    
    var combo2 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Motivo de Reclamo',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo3 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Resultado',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo4 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Justificación de Resultado',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo5 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Organización de Ventas',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo6 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Canal',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo7 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Sector',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    var combo8 = [{
        xtype: 'selectfield',
        flex: 2,
        labelAlign: 'left',
        labelWidth: '30%',
        label: 'Oficina Ventas',
        valueField : 'Codigo',
        displayField : 'Descripcion',
        store : statusStore,
        activeItem: 0
    }]
    
    
    reclamoView = Ext.extend(Ext.Panel, 
    {
        fullscreen: true,
        layout: 'card',
        
        initComponent: function() 
        {
            this.caja1 = new Ext.Container ({
                layout: 'hbox',
                items: [
                {
                    xtype: 'textfield',
                    flex: 2.5,
                    useClearIcon: true,
                    label: 'Cliente'
                },
                {
                    xtype: 'panel',
                    flex: 0.5,
                    layout: {
                        type: 'vbox',
                        align: 'center',
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Buscar',
                        width: 200,
                        ui: 'action-round'
                    }]
                }]
            });
    
    
            this.caja2 = new Ext.Container ({
                layout: 'hbox',
                items: [{
                    xtype: 'selectfield',
                    flex: 2.5,
                    label: 'Asesor',
                    valueField : 'Codigo',
                    displayField : 'Descripcion',
                    store : statusStore,
                    activeItem: 0
                },
                {
                    xtype: 'panel',
                    flex: 0.5,
                    layout: {
                        type: 'vbox',
                        align: 'center',
                        pack: 'center'
                    },
                    items: [
                        {
                        xtype: 'button',
                        text: 'Datos de Reclamo',
                        width: 200,
                        ui: 'action-round'
                        }
                    ]
                }]
            });
            
            this.caja3 = new Ext.Container ({
                layout: 'hbox',
                items: [
                {
                    xtype: 'textfield',
                    flex: 2.5,
                    useClearIcon: true,
                    label: 'Status'
                },
                {
                    xtype: 'panel',
                    flex: 0.5,
                    layout: {
                        type: 'vbox',
                        align: 'center',
                        pack: 'center'
                    },
                    items: [
                        {
                        xtype: 'button',
                        text: 'Cambiar Status',
                        width: 200,
                        ui: 'action-round'
                        }
                    ]
                }]
            });
            
            this.panel1= new Ext.Panel({
                items: [bodyCliente,body1,this.caja1,this.caja2,body1,combo2,this.caja3,combo3,combo4]
            });
            
            this.panel2= new Ext.Panel({
                items: [body1,combo5,combo6,combo7,combo8,bodyfac]
            });
            
            this.carousel = new Ext.Carousel({
                fullscreen: true,
                direction: 'horizontal',
                items: [this.panel1,this.panel2]
            });
            
            this.documentoPanel = new Ext.Panel(
            {
                layout: 'fit',
                fullscreen: true,
                dockedItems: dockedItems,
                items: [this.carousel]
            });        
            
            this.items = this.documentoPanel;
            reclamoView.superclass.initComponent.call(this);
        }
    });
    
    
    Ext.reg('reclamoView', reclamoView);
    And, it's look like this:

    1.jpg

    But still the container resizing doesn't work when explorer's window changes.
    What else I can do? If I put "fullscreen: true" inside de container, everything moves and doesn´t work.


    Thanks in advance.

Thread Participants: 1

Tags for this Thread