Javascript 如何让ExtJS表单上的submit按钮直接位于表单字段的右侧？

默认情况下，我的ExtJS表单希望将submit按钮放在表单字段元素下面自己的小div中，使事情看起来像这样：

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

又大又丑。我想要这样的东西：

---

显然，这在另一个上下文中很容易做到，但是有什么简单的方法可以让ExtJS做到这一点吗？

您可以使用多列布局来实现这一点

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

然后只需将您想要的任何单击事件分配给按钮，如下所示：

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

 });
});

---

您还可以使用复合字段，该字段允许表单字段显示在单行上

查看文档

---

太好了，非常感谢。我想我还没有完全弄懂布局；我没想到它们可以如此自由地嵌套。你太棒了，没问题；如果解决了您的问题，请接受答案：）