Question

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

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

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

提前谢谢

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

文本字段附近的按钮不显示在tabpanel内的表单中

1 个答案: