PDA

View Full Version : Ext.Button text color with 3 state



radamanth
26 Nov 2010, 9:01 AM
Hi all.

I found a lot of things in the forum but not what i'm trying to do.

I have a Button Group with some Ext.Button inside.

I want to have the text color changed when I am hover and when a button is pressed.

But I can't find a way to do it right.

Here's an excerpt from my code.


var menuBarPanel = new Ext.ButtonGroup( {
id : 'menuBarPanel',
region :'north',
bodyBorder :false,
border :false,
height: 50,
layout: {
type: 'hbox',
align: 'middle'
},
buttonAlign: 'center',
unstyled: true,
flex: 1,
boxMinWidth: 680,
boxMaxWidth :800,
defautlts: {
height:24,
bodyBorder :false,
border :false

},

items: [{ id: 'btn1', cls: 'buttonbar', flex: 1, text:'txt1', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar', pressed: true},
{ id: 'btn2',cls: 'buttonbar', flex: 1,text:'txt2', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'},
{ id: 'btn3',cls: 'buttonbar', flex: 1,text:'txt3', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'},
{ id: 'btn4',cls: 'buttonbar', flex: 1,text:'txt4', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'},
{ id: 'btn5',cls: 'buttonbar', flex: 1,text:'txt5', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'},
{ id: 'btn6',cls: 'buttonbar', flex: 1,text:'txt6', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'},
{ id: 'btn7',cls: 'buttonbar', flex: 1,text:'txt7', allowDepress : false , enableToggle: true, toggleGroup:'publicationMenuBar'}]

});



I've just foudn a way to change the default color :

#menuBarPanel .x-btn button {
color: #red;
font-weight: bold;
}




If any of you have an hint I'd be gratefull

Condor
27 Nov 2010, 7:22 AM
Use the "x-btn-over" and "x-btn-pressed" classes that are assigned to the button on mouseover and mousedown.

radamanth
29 Nov 2010, 12:29 AM
hi Condor.
And thanks again for your quick answer.

Finally it dit work with these :


#menuBarPanel .x-btn-over .x-btn-text {
color: red;
font: normal normal normal 11px/normal arial, tahoma, verdana, helvetica;
font-weight: bold;
}


#menuBarPanel .x-btn-pressed .x-btn-text{

color: white;
font: normal normal normal 11px/normal arial, tahoma, verdana, helvetica;
font-weight: bold;
}



I'm still looking for the pressed & over combinaison ... :)

Condor
29 Nov 2010, 12:33 AM
You could do:

#menuBarPanel .x-btn-over.x-btn-pressed .x-btn-text
but that won't work on IE6 and 7.

radamanth
29 Nov 2010, 12:39 AM
Yes that did the tricks !
But enlighten me please ...

I did try .


#menuBarPanel .x-btn-over .x-btn-pressed .x-btn-text

wich didn't work at all.
In your example thers is no space betwenn .x-btn-over and .x-btn-pressed and it work on Chrome, FF (not IE 8 )

What does that mean ?

Condor
29 Nov 2010, 1:13 AM
".x-btn-over .x-btn-pressed" matches

<div class="x-btn-over"><div class="x-btn-pressed"></div></div>
but it does not match

<div class="x-btn-over x-btn-pressed"></div>

radamanth
29 Nov 2010, 1:39 AM
Oki doki
Thanks a lot for you help !