Sizing of HtmlEditor inside

[JEBriggs]

I want to put an HtmlEditor inside a region of a layout and have it expand to fill the area of the region (width-100%, height=100%). What I end up with is the following: in IE, the editor takes up all the width but only a couple hundred pixels of height. In Firefox, I get the same height as IE and a width of a couple hundred pixels with a scroll bar.

Here's my code:

<code>
Test = function() {
var northPanel, southPanel, eastPanel, westPanel, centerPanel;
return {
init: function() {
var mainLayout = new Ext.BorderLayout(document.body, {
north: {
split: true, initialSize:50
},
south: {
split:true, initialSize:50
},
east: {
split:true, initialSize:50
},
west: {
split:true, initialSize:50
},
center: {
}
});

mainLayout.beginUpdate();
mainLayout.add("north", northPanel = new Ext.ContentPanel("north-div", {
fitToFrame: true, closable:false }));
mainLayout.add("south", southPanel = new Ext.ContentPanel("south-div", {
fitToFrame: true, closable:false }));
mainLayout.add("east", eastPanel = new Ext.ContentPanel("east-div", {
fitToFrame: true, closable:false }));
mainLayout.add("west", westPanel = new Ext.ContentPanel("west-div", {
fitToFrame: true, closable:false }));
mainLayout.add("center", centerPanel = new Ext.ContentPanel("center-div", {
fitToFrame: true, closable:false }));

var cfg = {
id:'myEditor',
fieldLabel:'MyLabel',
width:'400%',
height:'400%'
};

var editor = new Ext.form.HtmlEditor(cfg);
editor.setValue("hello");
editor.render("myEditor");

mainLayout.endUpdate();

}
};
}();
Ext.onReady(Test.init, Test, true);
</code>

[tryanDLS]

Please post your code in CODE tags. Setting height to 100% when using iframes doesn't work reliably in many cases (it's browser related, not Ext). You could try to listen to the resize event and manually set the container height.

[JEBriggs]

Can you point me in the right direction? My layout is attached to the document.body. Do I listen for resizes on that element? And then, which container do I resize? the HtmlEditor directly?