PDA

View Full Version : Button custom style and mouse out



reweiner
12 Jul 2012, 6:54 AM
Hi,

I'm playing with ExtJS 4.1.1 and custom CSS for a button.

The button is on a container that has a black background color.

Here is the code:



text: 'Welcome!',
cls: 'btn-top',
overCls: 'btn-top',
pressedCls: 'btn-top',
menuActiveCls: 'btn-top',
menu: [{
text:'Logout',
id:'logout',
iconCls:'logout',
handler: function() {
window.location.href = '/logout';
}}
]

My CSS:



.btn-top .x-btn-inner {
color: white !important;
}

It displays OK. I can inspect the element on Chrome and see:



<div class="x-btn btn-top x-box-item ... </div>


Problem:

When I hover the mouse on the button, after the mouse is out, this new "extra" CSS (btn-top) disappears.

By inspecting the element, the CSS it's not there anymore and then I cannot see the button anymore..



<div class="x-btn x-box-item ... </div>


Anybody knows if this code is correct ? Or is there any issue with mouse out and custom CSS disappearing ?

tks

scottmartin
13 Jul 2012, 9:24 PM
The button color remains 'red' for the duration of hover/blur



.mybutton .x-btn-inner {
color: red;
}

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
cls: 'mybutton',
menu: [{
text: 'regular item'
},{
text: 'regular item'
}]
});


Do you see the same, or did I not understand your question?
Tested on 4.1.1 GA.

Scott.?