Results 1 to 3 of 3

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

  1. #1
    Sencha User edykstra's Avatar
    Join Date
    Feb 2009
    Posts
    98
    Vote Rating
    2
      0  

    Default 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
    763
    Vote Rating
    75
      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
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •