iconCls in einem button-text-Ausrichtung - 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
});
}
}
})
Frage
Den Login
und das check-Symbol gap sind zu viel, wie wir das check-Symbol und den Login text zusammen halten,oder lassen Sie die iconCls ausrichten nach Links abit.
UPDATE
.checkicon {
margin-right: 25px;
background-image:url(../images/CheckIcon.png) !important;
}
- checkicon - code?
- Aktualisiert.
- war die Antwort unten hilfreich?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen keine Einstellung Ihre Waage zu großen und entfernen Sie die Breite. Es sollte automatisch die richtige Menge an Speicherplatz.
Könnte man hinzufügen, die
margin-right
- Eigenschaft, um die checkicon CSS-Klasse, mit einem Wert, den Sie wählen, 15px zum Beispiel. Auf diese Weise werden die button-Breite bleiben die gleichen, und nur der Raum zwischen dem text und dem Symbol reduziert werden..checkicon { margin-right: 25px; background-image:url(../images/CheckIcon.png) !important; }
nicht arbeiten kann.nichts passiert nach der Einstellung hier!important
zumargin-right
?!important
zumargin-right
,aber kann immer noch nicht arbeitenDies ist ein bisschen schwierig, weil die icons sind absolut positioniert innerhalb der Schaltfläche. Sie können versuchen, etwas ähnliches in Ihrem .checkicon Klasse:
Dies sollte den gleichen Effekt erzielen, dass Sie suchen mit margin-right.