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
精彩评论