PDA

View Full Version : How to have height of html element automatically size



wulfgarpro
20 May 2012, 7:19 PM
I have the following code with an html textarea for replacement by the CKEditor:


Ext.application({
launch: function(){
Ext.create('Ext.container.Viewport',{
layout: 'border',
items: [{
region: 'center',
xtype: 'form',
items: [
{
xtype: 'panel',
title: 'Form Panel',
layout: {
type:'fit',
align:'stretch'
},
frame: true,
autoScroll: true,
autoHeight: true,
items: [
{
html: '<textarea id="editor1" name="editor1">This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.</textarea>'
}]
},
{
xtype: 'button',
text: 'Go',
handler: function(){
alert(editor.getData());
}
}]
}]
});

var editor = CKEDITOR.replace( 'editor1', {
removePlugins: 'resize'
});
}
});

The height of the CKEditor is skewed? How can I have it dynamically resize based on the window size? I thought by using the 'fit' layout the height would be automatically determined?

It actually looks like it's working when I resize the page, but is skewed to the top if I refresh the page.

friend
21 May 2012, 4:48 AM
ExtJs components have an inheritance hierarchy, where this allows them to react in a standardized way to a series of published events (e.g., resizing).

Long story short, you can't just shove a non-managed, raw HTML element into the midst of ExtJs components and expect it to work like the rest of the framework. You'll need to write some glue code in the resize event of the Form panel to manually resize your textarea.

Also note, autoHeight: true is not support in ExtJs 4.x.