PDA

View Full Version : How can I use css pseudo-classes in ext js



abdul.hafiz2010
16 Sep 2010, 12:43 AM
By Using CSS, i want to change the presentation of a user interface component when it receives focus. Internet Explorer 6.0 and earlier versions for Windows do not support dynamic pseudo-classes for any elements except hyperlinks. Internet Explorer 7 does not support :focus styles for elements other than hyperlinks. Include the :active CSS pseudo class to achieve the same effect as :focus in Internet Explorer for (X)HTML links (a element).

abdul.hafiz2010
16 Sep 2010, 3:30 AM
I find a solution for this through jQuery but now problem is how can i use this solution with EXT JS. I want to use Ext js text Field instead of 'input' tag.

$(document).ready(function(){
if (jQuery.browser.msie === true) {
jQuery('input').bind('focus', function() {
$(this).addClass('ieFocusHack');
}).bind('blur', function() {
$(this).removeClass('ieFocusHack');
});
}
});

Can somebody help me out on this please??????????????????

Animal
16 Sep 2010, 5:10 AM
Text fields already get the class "x-form-focus" added when focussed, didn't you see how it changes appearance when you focus?

abdul.hafiz2010
16 Sep 2010, 5:21 AM
Actually i want to change background color when focus on text fields, list box, text area ext. I am using below style sheet for this behavior
<style>
input:focus, input.ieFocusHack
{
background-color: #7FFF00;
border-width: 2px;
border-color: Blue;
border-style: solid;
}

Animal
16 Sep 2010, 5:28 AM
So write you own rule which uses x-form-focus

abdul.hafiz2010
17 Sep 2010, 12:08 AM
I am very new for EXt JS. I would be very gladful to you if you could explain this in detail?

StuartAshworth
17 Sep 2010, 12:22 AM
Add



.x-form-focus
{
background-color: #7FFF00;
border-width: 2px;
border-color: Blue;
border-style: solid;
}


to your custom css file. This will be applied to all forms so you may want to qualify it with an ID.