javascript - 更改 formPanel 中的按钮位置

Question

我有一个带有 3 个按钮的 formPanel(Filtrar、Limpiar 和 Nuevo Borrador)。我试图在一行中显示两个按钮( Filtrar 和 Limpiar )并在此按钮下显示 Nuevo Borrador按钮。

是这样的:

这是 formPanel 的代码。

    formPanel = new Ext.form.FormPanel({
        id:'formulario',
        title: '<bean:message key="label.gi.puestosTipo.criteriosBusqueda" />'
        ,region: 'west'
        ,width: 300
        ,height: 500
        ,collapsible : true
        ,labelWidth: 77
        ,bodyStyle:'padding:5px 0px 0px 3px;'
        ,autoHeight: true
        ,method: 'POST'
        ,params: {"method": "buscarInformes"} // Buscar informe. TODO
        ,frame:true
        ,style: 'text-align: left;'
        ,defaultType: 'textfield'
        ,buttonAlign: 'center'
        ,items: [{
            xtype: 'fieldset',
            title: '<b>Datos del documento</b>',
            columnWidth: 0.5,
            collapsible: false,
            defaultType: 'textfield',
            defaults: {
                anchor: '100%'
            },
            layout: 'anchor',
            items: [{
                xtype: 'combo',
                fieldLabel: 'Tipo documento ',
                emptyText: 'Tipo',
                hiddenName: 'tipo',
                    store: new Ext.data.SimpleStore({
                        data: [
                            [0, 'Borrador'],
                            [1, 'Final'],
                        ],
                        id: 0,
                        fields: ['value', 'text']
                    }),
                valueField: 'value',
                displayField: 'text',
                triggerAction: 'all',
                editable: false
            },{
                fieldLabel: '<bean:message key="label.analisisGestionRiesgo.salvaguardas.codigo" />',
                name: 'codigo',
            },{
                fieldLabel: '<bean:message key="label.agr.denominacion" />',
                name: 'denominacion',
            }       
            ]},{
            xtype: 'fieldset',
            title: '<b>Rango de fecha<b>',
            columnWidth: 0.5,
            collapsible: true,
            defaultType: 'textfield',
            defaults: {
                anchor: '100%'
            },
            layout: 'anchor',
            items: [
                {
                    xtype: 'datefield',
                    fieldLabel: 'Desde',
                    name: 'fechaDesde',
                },{
                    xtype: 'datefield',
                    fieldLabel: 'Hasta',
                    name: 'fechaHasta',
                }]
            },{
                xtype: 'button',
                text: '<b>Limpiar<b>',
                style: 'margin: 0 1 0 1 ;'
            },{
                xtype: 'button',
                text: '<b>Enviar<b>',
                style: 'margin: 0 1 0 1 ;'
            },{
                xtype: 'button',
                text: '<b>Nuevo borrador<b>',
                style: 'margin: 0 1 0 1 ;'
            }                   
        ]
     }

我也尝试使用 alignTarget: 'center' 将按钮居中(在 xtype: 'button' 元素中)和 buttonAlign: 'center'正如我在 ext 文档中看到的，但不起作用。我需要用什么方法在中心显示我的按钮？提前谢谢你。

Answer 1

将您的按钮放在一个单独的容器 中，然后您可以根据需要在其上设置任何布局。例如:

Ext.create('Ext.form.FormPanel', {
    items: [
        { xtype: 'fieldset', title: 'Datos del documento', items: [] },
        { xtype: 'fieldset', title: 'Rango de fecha', items: [] },
        {
            xtype: 'container',
            defaultType: 'button',
            items: [
                { text: 'Limpiar' },
                { text: 'Enviar' },
                { text: 'Nuevo borrador' }
            ],
            // Use any layout here.
            layout: {
                type: 'vbox',
                pack: 'center'
            }
        }
    ] 
});

您甚至可以使用 absolute 布局来获得完美的定位。