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