Question

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

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

大而丑。我想要这样的事情：http://gowalla.com/api/explorer

显然，在另一个环境中这样做很容易，但有一些简单的方法可以让ExtJS做到这一点吗？

Answer 1

您可以使用多列布局来实现此目的。

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

 });
});

Answer 2

您还可以使用复合字段，允许表单字段显示在一行中。

查看文档..

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

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

2 个答案: