文本字段附近的按钮不显示在选项卡面板内的表单中

Question

我正在 Ext-JS 5.0.1 中创建一个带有选项卡的表单。

在第一个选项卡中，我想在前两个文本字段附近放置一个按钮，但是当我尝试插入两个项目（一个文本字段和一个按钮）时，文本字段使用 100% 的宽度，不显示字段标签和按钮也不显示。我做错了什么？这是我的代码和结果的图片。

    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'
            }]
        });

提前致谢

Answer 1

您需要指定 layout 属性并为这两个项目制作一个包装 container，因为当前可以假设它是时间 texfield你已经为 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
        }]

演示：https://fiddle.sencha.com/#fiddle/j2l

文本字段附近的按钮不显示在选项卡面板内的表单中

Button near textfield dont show in form inside a tabpanel

javascript

forms

extjs

extjs5