开发者

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

By default my ExtJS forms want to put the submi开发者_高级运维t 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?


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

 });
});


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜