居中按鈕水平的形式

Question

有人可以幫助我將按鈕的水平中心的形式嗎？我不知道如何使用對齊中心到按鈕項目的vbox佈局。

以下代碼來自Sencha Docs。

Ext.create('Ext.form.Panel', { 
title: 'Simple Form', 
bodyPadding: 5, 
width: 350, 

// The form will submit an AJAX request to this URL when submitted 
url: 'save-form.php', 

// Fields will be arranged vertically, stretched to full width 
layout: 'anchor', 
defaults: { 
    anchor: '100%' 
}, 

// The fields 
defaultType: 'textfield', 
items: [{ 
    fieldLabel: 'First Name', 
    name: 'first', 
    allowBlank: false 
},{ 
    fieldLabel: 'Last Name', 
    name: 'last', 
    allowBlank: false 
}], 

// Reset and Submit buttons 
buttons: [{ 
    text: 'Reset', 
    handler: function() { 
     this.up('form').getForm().reset(); 
    } 
}, { 
    text: 'Submit', 
    formBind: true, //only enabled once the form is valid 
    disabled: true, 
    handler: function() { 
     var form = this.up('form').getForm(); 
     if (form.isValid()) { 
      form.submit({ 
       success: function(form, action) { 
        Ext.Msg.alert('Success', action.result.msg); 
       }, 
       failure: function(form, action) { 
        Ext.Msg.alert('Failed', action.result.msg); 
       } 
      }); 
     } 
    } 
}], 
renderTo: Ext.getBody() 
}); 

我非常感謝各位的支持！

親切的問候，shub

Answer 1

我找到了正確的解決方案。您只需將「buttonAlign」配置設置爲居中。

Ext.create('Ext.form.Panel', { 
    title: 'Simple Form', 
    bodyPadding: 5, 
    width: 350, 

    // The form will submit an AJAX request to this URL when submitted 
    url: 'save-form.php', 

    // Fields will be arranged vertically, stretched to full width 
    layout: 'anchor', 
    defaults: { 
     anchor: '100%' 
    }, 

    // The fields 
    defaultType: 'textfield', 
    items: [{ 
     fieldLabel: 'First Name', 
     name: 'first', 
     allowBlank: false 
    },{ 
     fieldLabel: 'Last Name', 
     name: 'last', 
     allowBlank: false 
    }], 
    buttonAlign: 'center', 

    // Reset and Submit buttons 
    buttons: [{ 
     text: 'Reset', 
     handler: function() { 
      this.up('form').getForm().reset(); 
     } 
    }, { 
     text: 'Submit', 
     formBind: true, //only enabled once the form is valid 
     disabled: true, 
     handler: function() { 
      var form = this.up('form').getForm(); 
      if (form.isValid()) { 
       form.submit({ 
        success: function(form, action) { 
         Ext.Msg.alert('Success', action.result.msg); 
        }, 
        failure: function(form, action) { 
         Ext.Msg.alert('Failed', action.result.msg); 
        } 
       }); 
      } 
     } 
    }], 
    renderTo: Ext.getBody() 
}); 

Answer 2

你可以使用「bbar」。檢查this。

bbar: { 
     layout: 'auto', 
     items: { 
      xtype: 'container', 
      autoEl: 'center', 
      defaultType: 'button', 
      items: [{ 
       text: 'Reset', 
       handler: function() { 
        this.up('form').getForm().reset(); 
       }}, 
      { 
       text: 'Submit', 
       formBind: true, 
       //only enabled once the form is valid 
       disabled: true, 
       handler: function() { 
        var form = this.up('form').getForm(); 
        if (form.isValid()) { 
         form.submit({ 
          success: function(form, action) { 
           Ext.Msg.alert('Success', action.result.msg); 
          }, 
          failure: function(form, action) { 
           Ext.Msg.alert('Failed', action.result.msg); 
          } 
         }); 
        } 
       }}] 
     } 
    }