Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Question Reading CSS values with Ext.util.CSS.getRule

    Reading CSS values with Ext.util.CSS.getRule


    Let say we have two CSS files, one after the other:
    First file with:
    Code:
    .ppp{
    	position:absolute;
    	left:8px;
    	top:80px;
    	width:310px;
    	height:372px;
    }
    and second file with:
    Code:
    .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
    Last edited by jsakalos; 3 Mar 2011 at 2:47 AM. Reason: added [code][/code] tags around css

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    .style property of the returned rule is CSSStyleDeclaration. So you need to :
    PHP Code:
    Ext.util.CSS.getRule('.ppp').style.getPropertyValue('width'); // returns "310px" 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Smile


    Thanks for your reply

    Philip

  4. #4
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    getPropertyValue('width') doesn't work if they are in separate files?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  6. #6
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Default


    Correct. It returns an empty string.

    Philip

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Default


    Thanks again.

    Philip

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

    Code:
    .aaa, .bbb {
        color: red;
    could not be found using

    Code:
    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.

  10. #10
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    philiparad is on a distinguished road

      0  

    Default


    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:
    Code:
     
    .aaa{
    	left:8px;
    	top:80px;
    	width:310px;
    	height:372px;
    }
    and
    Code:
    .aaa{
    	left:2px;
    	top:20px;
    }
    I would expect one entry:

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

Similar Threads

  1. Ext.util.CSS.getRule
    By msinn in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 1 Feb 2011, 7:33 AM
  2. Ext.util.CSS.getRule Cross Domain Security Issue
    By bobringer in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 28 Jul 2009, 11:26 PM
  3. [FIXED][3.0.0] Ext.util.CSS.getRule() fails in IE
    By ThorstenSuckow in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 17 Jul 2009, 9:32 PM
  4. Reading form values
    By hilmi in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 24 Jul 2008, 1:03 PM
  5. Reading Java Session Values
    By Janachi in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Jun 2008, 12:44 AM

Thread Participants: 2