PDA

View Full Version : Reading CSS values with Ext.util.CSS.getRule



philiparad
3 Mar 2011, 12:06 AM
Let say we have two CSS files, one after the other:
First file with:


.ppp{
position:absolute;
left:8px;
top:80px;
width:310px;
height:372px;
}

and second file with:


.ppp{
position:absolute;
left:8px;
top:80px;
}

then Ext.util.CSS.getRule('.ppp').style.width return no value (NaN).
The function fails to go up to the first CSS to read the value.
(I do not want to repeat the values in the second file)

Regards
Philip Arad - Web Architect at Solaredge

jsakalos
3 Mar 2011, 2:56 AM
.style property of the returned rule is CSSStyleDeclaration (https://developer.mozilla.org/en/DOM/CSSStyleDeclaration). So you need to :


Ext.util.CSS.getRule('.ppp').style.getPropertyValue('width'); // returns "310px"

philiparad
3 Mar 2011, 3:41 AM
Thanks for your reply

Philip

philiparad
3 Mar 2011, 4:17 AM
Well... Actually it is working if they are in the same CSS file, one after the other, but not working if they are on separate files like:


<link rel="stylesheet" type="text/css" href="custom1.css"/>
<link rel="stylesheet" type="text/css" href="custom2.css"/>

Philip

jsakalos
3 Mar 2011, 4:21 AM
getPropertyValue('width') doesn't work if they are in separate files?

philiparad
3 Mar 2011, 4:28 AM
Correct. It returns an empty string.

Philip

jsakalos
3 Mar 2011, 5:15 AM
It's strange and unexpected behavior but you're right. I have no idea how to easily resolve it besides repeating the styles in the second file (or putting them only in the second file). I suspect that this is how browsers work, not an Ext issu, nevertheless, if you want you can report it as a bug.

philiparad
3 Mar 2011, 5:21 AM
Thanks again.

Philip

Animal
7 Mar 2011, 12:56 AM
This is due to how Ext indexes the style objects associated with the rules.

They are keyed by the selector string, and so when Ext iterates through the stylesheets, it finds a selector ".ppp", and creates an entry in the rules object for it referencing that style object.

If it finds another rule for that selector, the new style object is stored keyed by the same string.

So only the latest one is stored.

I have recently fixed another slight problem in the CSS utility where rules like



.aaa, .bbb {
color: red;


could not be found using



Ext.util.CSS.getRule('.aaa')


because the key associated with that style object is ".aaa, .bbb". We needed to split on "," and create two entries in the rules object.

It looks like we need to enable each entry to be either a style object or an array of style objects. But then getRule might then return an array, and you would have to interrogate each one in turn to see which one had a non-null style for "width"...

Maybe the problem would be more easily solved by creating a hidden div with class ".ppp", and then asking it what its width is.

philiparad
7 Mar 2011, 6:34 AM
Thank for your reply

First, I have found out that
Ext.util.CSS.getRule('.'+css).style.getPropertyValue('width')
is not working with IE8, so I have to use:
Ext.util.CSS.getRule('.'+css,true).style.width
(I suppose it is true also for other attributes)

As for the CSS problem:

If we have:


.aaa{
left:8px;
top:80px;
width:310px;
height:372px;
}

and


.aaa{
left:2px;
top:20px;
}


I would expect one entry:



.aaa{
left:2px;
top:20px;
width:310px;
height:372px;
}


Philip

jsakalos
7 Mar 2011, 9:25 AM
Yes, me too. The whole thing starts to look like a bug in Ext. Should I move this thread to Bugs?

philiparad
7 Mar 2011, 6:37 PM
You can move it to bugs.

Philip