1. #1
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default Can I update the CSS inside a Ext.ux.IFrame?

    Can I update the CSS inside a Ext.ux.IFrame?


    I have played with the Ext.util.CSS methods, but I think what I am trying to do is impossible.

    I am loading a web page into a Ext.ux.IFrame, (Same host - so there are no cross site issues) and I want to update the CSS that was loaded in that IFrame.

    The Ext.util.CSS methods work for CSS outside the IFrame, but can't 'see' inside the IFrame.

    I'd post some examples - but I need to get past this first.

    Ideas?

    THANKS!

  2. #2
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    433
    Vote Rating
    20
    Zdeno will become famous soon enough Zdeno will become famous soon enough

      0  

    Default


    I think you need override Ext.util.CSS to use it for IFrame. When you look inside or Ext.util.CSS, you will see Ext.util.CSS uses document so you cant modify CSS inside of IFrame.

    Check http://docs.sencha.com/ext-js/4-1/so...l#Ext-util-CSS

  3. #3
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
    edykstra is on a distinguished road

      0  

    Default


    I ended up taking a different approach.

    Instead of editing the CSS in the iFrame, I made sure the CSS was already there, but added the class name to the appropriate element.

    Inside the afterrender event of the window that has the Ext.ux.IFrame as an item, I added the following jQuery code.

    Code:
    $("iframe").load(function () {
        $("iframe").contents().find('body').attr({'class': 'high_light'});
    });
    Then, for any <DIV> I want to be 'highlightable', I add the class 'will_high_light' and include the following CSS.

    Code:
    .high_light .will_high_light {
        cursor:                  pointer;
        padding:                 1px 0px;
    }
    
    
    .high_light .will_high_light:hover{
        background-color:        yellow;
    }
    Now, when I view the page page 'normally' in a browser, the DIVs do not highlight. However, when viewed inside the iFrame inside the ExtJS webtop, they high light on hover with the cursor changing to a pointer.

    This is because the single class attribute 'high_light' is applied to the 'body' element and therefore the CSS selectors then match.

    Now I just need to figure out how to get events to bubble/relay to the 'host' from inside the iFrame. Ugh.

Thread Participants: 1

Tags for this Thread