PDA

View Full Version : [FIXED-463][3.0.2] Minor HtmlEditor layout bugs



Stefan B
20 Jan 2010, 2:24 AM
There are two issues with the HTML editor layout:

1) Initial iframe height
The iframe body has a height of 98% initially, causing an unnecessary vertical scrollbar to appear if the overall component height is low enough.
There is no reason to apply an approximative value when the exact height of the component is already known at the time the iframe body is created.

2) Initial toolbar height
When the component is initially rendered, the toolbar height has to be taken in account to compute the text area and iframe heights. Because of the deferred call to layout the toolbar, it only contains the font selector at the time onResize is called in the initial rendering cycle.
The selector is smaller than the buttons added later. This causes the overall component to render too high initially and to jump back to the correct height when switching to source edit mode.

Suggested overrides:


Ext.override(Ext.form.HtmlEditor, {
getDocMarkup: function() {
var h = Ext.fly(this.iframe).getHeight() - this.iframePad * 2;
return String.format('<html><head><style type="text/css">body{border: 0; margin: 0; padding: {0}px; height: {1}px; cursor: text}</style></head><body></body></html>', this.iframePad, h);
},
createToolbar: Ext.form.HtmlEditor.prototype.createToolbar.createSequence(function() {
this.tb.doLayout();
})
});

Thanks,
Stefan

Jamie Avins
20 Jan 2010, 10:29 AM
Do you have a test case for this issue? The specific configuration here can play a role.

Stefan B
21 Jan 2010, 1:01 AM
The simplest possible one:


Ext.onReady(function() {

new Ext.form.FormPanel({
width: 500,
autoHeight: true,
frame: true,
items: [{
xtype: "htmleditor",
height: 120,
anchor: "0",
hideLabel: true
}],
renderTo: Ext.getBody()
});

});

The field's value is empty but it shows a scrollbar nonetheless. This is gone when you add the getDocMarkup override.

Also, the height of the field is 124px when it should be 120px only. It renders with the correct height when you add the createToolbar override.

This test case does not show the size change when switching to source edit mode. I'll see if I can come up with something when I can spare some time today.

Thanks,
Stefan

Jamie Avins
11 Feb 2010, 5:10 PM
Fixed in svn 6051.