How can I get the submit button on an ExtJS form to sit directly to the right of the form fields?

Question

By default my ExtJS forms want to put the submit button in its own little div below the form field elements, making things look like this:

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

Big and ugly. I want something like this: http://gowalla.com/api/explorer

Obviously this would be a snap to do in another context, but is there some easy way to get ExtJS to do this?

Answer 1

You can use a multiple column layout to achieve this.

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

Then just assign whatever click event you want to the button like so:

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

You could also use a Composite Field which allows form fields to be displayed on a single line.

Check out the docs..

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