按钮文本对齐中的 iconCls - EXTJS答案

【问题标题】：iconCls in a button text alignment - EXTJS按钮文本对齐中的 iconCls - EXTJS
【发布时间】：2013-02-08 16:51:41
【问题描述】：

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

问题

Login和对勾图标间隙太大，如何让对勾图标和登录文字粘在一起，或者让iconCls左对齐。

更新

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

【问题讨论】：

下面的答案有用吗？

标签： javascript ajax extjs extjs4 alignment

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

.checkicon { margin-right: 25px; background-image:url(../images/CheckIcon.png) !important; } 无法工作。设置后没有任何反应
是的，我已尝试将!important 添加到margin-right，但仍然无法使用

【解决方案3】：

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

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

这应该可以达到您使用 margin-right 寻找的相同效果。

【讨论】：