PDA

View Full Version : Fit a panel inside an iframe to its enclosing region



The_Mundane
27 Feb 2014, 7:24 AM
I'm new to ExtJs.
I have a pretty complex issue.

I have an html file that creates an Ext.Viewport component. The Viewport holds several regions, each one of the regions holds an html attribute with an Iframe, as follows :



region: '...',
layout: 'fit',
html: '<iframe SRC="..." ID="..." frameborder="0" style="width:100%; height:100%" NAME="..."></iframe>'

The server retrieves responses (HTML files) into each region - these files do not contain Ext code.
The page that is loaded into west region is exceptional and does include an Ext component - Ext.tree.Panel, which is rendered to Ext.getBody().
The west region is also resizable by the user.
(In other words, the html file that is responsible for the Viewports with all the regions and the html file that responsible for the tree panel are not quite related to each other).

I want the tree panel to fit into the enclosing west region even when the region is resized.
The west region has the layout : 'fit' attribute and the tree panel inside the Iframe is rendered to Ext.getBody() - so it does fit - but once I resize the west region the tree panel doesn't cover the whole of it.

What can I do to make the tree panel fit into the resizable region?

Farish
27 Feb 2014, 7:38 AM
what if you call doLayout() on the treepanel and/or on the west region on resize event of the west panel. sometimes it helps:


westregion.on('resize', function() {
westregion.doLayout();
});

The_Mundane
24 Mar 2014, 6:12 AM
I don't have the west region saved as a variable (you have "westregion" variable here), I place it directly into the Viewport.
Can you please give the syntax for the resize listener for the west region in this scenario?

Farish
24 Mar 2014, 7:24 AM
you can add the listeners config in your west region panel (just like adding listeners for events to any other component):

listeners:
{
resize: function()
{
this.doLayout();
}
}