Button near textfield dont show in form inside a tabpanel

Question

Im creating a Form with tabs in Ext-JS 5.0.1.

In the first tab i want to put a button near the two first textfields but when i try to insert two items (one textfield and one button) the textfield use 100% of width, not show the fieldlabel and the button dont show too. What im doing wrong? this is my code and a pic of the result.

Form result

    var form_datosdoc = new Ext.form.Panel ({
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                items: [{
                    layout: "form",
                    items: {
                        fieldLabel: "Representante",
                        xtype: "textfield",
                        name: 'representante'
                    }
                },{
                    items: {
                        xtype: 'button',
                        text: 'Click me'
                    }
                }]
            }, 
            {
                fieldLabel: 'Aprobador',
                name: 'aprobador'
            },
            {
                xtype: 'datefield',
                fieldLabel: 'Fecha',
                name: 'fecha_doc',
                value: new Date(), //Fecha de hoy
                maxValue: new Date() //Máxima fecha la de hoy
            }
        ]
    })

    var paneltab = new Ext.tab.Panel ({
           width:  window.innerWidth * 0.95,
           height:  window.innerHeight * 0.88,
           xtype: 'tabpanel',
           title: '<bean:message key="label.AGR.analisisgr.documento" />',
           tabPosition:'left',
           textAlign:'right',
           tabRotation: 0,
           renderTo: 'contenedor',
            items: [{
                title: 'Datos del documento',
                tooltip: 'Datos del documento',
                layout: 'fit',
                items: [form_datosdoc]
            },{
                title: 'Listado de activos',
                tooltip: 'Listado de activos + Valoracion CID',
                html: 'Ejemplo2'
            },{
                title: 'Tipos de activo',
                tooltip: 'Activos por tipo de activo',
                html: 'Ejemplo3'
            },{
                title: 'Amenazas',
                tooltip: 'Listado de amenazas',
                html: 'Ejemplo4'
            },{
                title: 'Salvaguardas',
                tooltip: 'Listado de salvaguardas',
                html: 'Ejemplo5'
            },{
                title: 'Amenazas por riesgo',
                tooltip: 'Listado de amenazas por riesgo y salvaguardas asociadas',
                html: 'Ejemplo6'
            },{
                title: 'Activos por riesgo',
                tooltip: 'Listado de activos por riesgo, amenazas asociadas y salvaguardas asociadas a las amenazas',
                html: 'Ejemplo7'
            }]
        });

Thank you in advance

Rob Schmuecker Rob Schmuecker · Accepted Answer · 2015-03-03T13:45:53

You need to specify the layout property and also make a wrapping container for both of those items as currently is ould assume it is of time texfield as you have that set for the defaultType

        items: [{
            xtype: 'container',
            layout: "hbox",
            items: [{
                items: {
                    fieldLabel: "Representante",
                    xtype: "textfield",
                    name: 'representante'
                }
            }, {
                items: {
                    xtype: 'button',
                    text: 'Click me'
                }
            }]
        }, {
            fieldLabel: 'Aprobador',
            name: 'aprobador'
        }, {
            xtype: 'datefield',
            fieldLabel: 'Fecha',
            name: 'fecha_doc',
            value: new Date(), //Fecha de hoy
            maxValue: new Date() //Máxima fecha la de hoy
        }]

Demo: https://fiddle.sencha.com/#fiddle/j2l

Button near textfield dont show in form inside a tabpanel

1 Answers