Comment puis-je obtenir le bouton de soumission sur un formulaire ExtJS directement à droite des champs du formulaire?

Question

Par défaut mes formes ExtJS veulent mettre le bouton d'envoi dans son propre petit div en dessous des éléments de champ de formulaire, ce qui rend les choses ressemblent à ceci:

______________ 
|blah blah  | 
-------------- 
|  /submit/| 
______________ 

Big et laid. Je veux quelque chose comme ça: http://gowalla.com/api/explorer

Évidemment, ce serait un jeu d'enfant à faire dans un autre contexte, mais y a-t-il un moyen facile d'obtenir ExtJS pour faire cela?

Answer 1

Vous pouvez utiliser une disposition à plusieurs colonnes pour cela.

var frm = new Ext.FormPanel({ 
    ,url: yoururl 
    ,frame:true 
    ,title: 'Your Title' 
    ,bodyStyle: 'padding:5px;' 
    ,items: [{ 
     layout:'column' 
     ,items:[{ 
      columnWidth:.8 
      ,layout:'form' 
      ,items[{ 
       xtype:'textfield' 
      }] 
     },{ 
      columnWidth:.2 
      ,layout:'form' 
      ,items:[{ 
       xtype:'button' 
       ,text: 'Click Me!' 
       ,id: 'my-button' 
      }] 
     }] 
    }] 
}); 

Ensuite, il suffit assignez un événement quelconque clic vous voulez le bouton comme ceci:

var saveBtn = Ext.getCmp('my-button'); 
saveBtn.setTooltip('Save button'); 
saveBtn.purgeListeners(); 

saveBtn.on('click', function(){ 
frm.getForm().submit({ 
    method:'POST' 
    ,url: youraltUrl 
    ,waitTitle:'Connecting' 
    ,waitMsg:'Sending data...' 

    //--- Success ---// 
    ,success : function(){ 
    Ext.Msg.alert('Status', 'Information Updated Successfully', function(btn, text){}); 

    } 

    //--- Failure ---// 
    ,failure : function(form, action){ 
    if(action.failureType == 'server'){ 
     obj = Ext.util.JSON.decode(action.response.responseText); 
      Ext.Msg.alert('Update Failed!', obj.errors.reason); 
    }else{ 
      Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
    } 
} 

}); 
}); 

Answer 2

Vous pouvez également utiliser un champ composite qui permet aux champs de formulaire à afficher sur une seule ligne.

Vérifiez les docs ..

http://www.sencha.com/deploy/dev/docs/?class=Ext.form.CompositeField