按钮文本对齐中的iconCls - EXTJS

var btnLogin = new Ext.Button({
             text: 'Login',
             scale   : 'large',
             width : 100,
             iconCls: 'checkicon',
             iconAlign: "right",

             handler: function(){
               if(Ext.getCmp('username').getValue() !== '' && Ext.getCmp('password').getValue() !== ''){
                 loginForm.getForm().submit({
                   url: 'authenticate.php',
                   method: 'POST',
                   params: {
                     response: hex_md5(Ext.getCmp('challenge').getValue()+hex_md5(Ext.getCmp('password').getValue()))
                   },
                   success: function(){
                     window.location = 'tabs-adv.html';
                   },
                   failure: function(form, action){
                     Ext.MessageBox.show({
                       title: 'Error',
                       msg: action.result.message,
                       buttons: Ext.Msg.OK,
                       icon: Ext.MessageBox.ERROR
                     });
                   }
                 });
               }else{
                 Ext.MessageBox.show({
                   title: 'Error',
                   msg: 'Please enter user name and password',
                   buttons: Ext.Msg.OK,
                   icon: Ext.MessageBox.ERROR
                 });
               }
             }
           })

Question

The Login and the check icon gap are too much, how to let the check icon and the Login text stick together,or let the iconCls align to left abit.

登录和检查图标的间隙太大，如何让检查图标和登录文本粘在一起，或者让iconCls与左侧对齐。

UPDATE

.checkicon {
    margin-right: 25px;
    background-image:url(../images/CheckIcon.png) !important;
}

3 个解决方案

#1

Try not setting your scale to large and remove the width. It should automatically take the right amount of space.

尽量不要将比例设置为大并删除宽度。它应该自动占用适当的空间。

#2

You could add the margin-right property to the checkicon CSS class, with a value you choose, 15px for example. This way, your button width will keep the same, and only the space between the text and the icon will be reduced.

您可以将margin-right属性添加到checkicon CSS类，使用您选择的值，例如15px。这样，您的按钮宽度将保持不变，只有文本和图标之间的空间将减少。

#3

This is a bit tricky because the button icons are absolutely positioned within the button. You can try something like this in your .checkicon class:

这有点棘手，因为按钮图标绝对位于按钮内。您可以在.checkicon类中尝试这样的操作：

.checkicon {
    right: -25px !important
    background-image:url(../images/CheckIcon.png) !important;
}

This should achieve the same effect that you are looking for with margin-right.

这应该达到与您正在寻找的与margin-right相同的效果。