I may not use Ext.Viewport for my application due to several reasons. I have read a few posts referring this and I think that I'm not the only one, that has to handle this requirement. I would like to summarize some information here and I want to describe my solution. Perhaps someone can confirm what I found out or please let me know if I am wrong.

Instead of a viewport my starting point is a HTML file containing a 2 or more column liquid layout with percentage widths and I need to be able to insert Ext JS widgets into DIV containers of that HTML file. (more details about the layout see here)

First step: how can I ensure that an Ext JS widget will always have the size of its parent div container? I found the plugin solution "fittoparent" by condor (see here )
Fittoparent uses windows onresize event to ensure widgets size. This works fine. So far so good.

Next step: I try to load dynamic content from the server (e.g. html content within a dynamic builded tab panel). But some of the widgets are cut, their border on the right side is not rendered or shown properly. border-not-properly.jpg The effect is visible in all browsers except internet explorer.
After some debugging and inspecting I found a possible reason: some loaded content made the appearance of a vertical scrollbar of the documents body neccessary: the apperance of the scrollbar shrinks the liquid layout. Means: a div container now is too small for it's widget.

Fittoparent only works on window resize. And I couldn't find a browser event to recognize that a scrollbar appeared. Then I was looking for a solution, to be able to fit the widgets' size also in this case, when a scrollbar appears. IE's JScript implements the "onResize"-Event for DIVs, but all others browser don't. So how can I monitor resizing of a DIV? I think this is generelly not possible!?

So here is my solution now:

I added a new event for the components using the fittoparent plugin and I removed the onWindowResize event handling:

init: function(c) {
	this.component = c;
	c.on('render', function(c) {
		this.parent = Ext.get(this.parent || c.getPositionEl().dom.parentNode);
	}, this, {single: true});
	c.on('recalcSize', function(c){
	}, this);

And then I wrote a simple loop function that fires the new added event "recalcSize" for all active components every 250 ms.
I really don't like using ongoing loops within an application, but I think this is a scenario, I can not do it without it.
Please let me know if you have any other information how to handle this situation.
Any help or information is appreciated.