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

[edykstra]

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!

[Zdeno]

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

[edykstra]

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.

$("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.

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