Centrer les boutons horizontalement de forme

Question

Quelqu'un peut-il m'aider à centrer les boutons horizontalement d'un formulaire? Je ne sais pas comment je peux donner une mise en page vbox avec aligner le centre sur les éléments du bouton.

Le code suivant provient de 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() 
}); 

Je vous remercie beaucoup pour votre soutien!

Cordialement, Shub

Answer 1

J'ai trouvé la bonne solution. Vous devez définir uniquement la configuration "buttonAlign" pour centrer.

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

vous pouvez utiliser "bbar" pour cela. vérifiez 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); 
          } 
         }); 
        } 
       }}] 
     } 
    }