PDA

View Full Version : HTMLeditor width issue



lorezyra
5 Aug 2010, 4:46 AM
Hey Guys,
I have a strange issue that is bugging me... I have a window with a form panel that contains an HTMLeditor. The editor does not display in the proper width. You may see my point at this link.

http://www.richiebartlett.com/downloads/HTMLeditor%20width%20issue.jpg

My issue is that only a small part of the HTMLeditor is used for typing data... Can some one point me in a direction to get this typing area to expand properly?

The code used: (reduced to only what I'm concerned about)


AdminBlogFormWinUi = Ext.extend(Ext.Window, {
title: 'New Blog Entry',
width: 970,
height: 740,
minWidth: 950,
minHeight: 740,
collapsible: true,
autoHeight: true,
boxMaxHeight: 740,
padding: 10,
resizable: false,
itemId: 'AdminBlogFormWin',
id: 'AdminBlogFormWin',
initComponent: function() {
this.items = [
{
xtype: 'form',
unstyled: true,
itemId: 'AdminBlogFormWinForm',
ref: 'AdminBlogFormWinForm',
id: 'AdminBlogFormWinForm',
items: [
{
xtype: 'fieldset',
title: 'Required Content',
height: 300,
autoHeight: true,
items: [
{
xtype: 'container',
layout: 'form',
id: 'blogUserForumBox',
items: [
{
xtype: 'container',
layout: 'hbox',
layoutConfig: {
align: 'middle'
},
items: [/**/]
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Subject'/**/
},
{
xtype: 'hidden'/**/
},
{
xtype: 'container',
height: 40,
layout: 'column',
id: 'blogIMGbox',
items: [
{
xtype: 'container',
layout: 'form',
columnWidth: 0.85,
items: [/**/]
},
{
xtype: 'container',
columnWidth: 0.15,
items: [
{
xtype: 'button',
text: 'Upload',
width: 90,
itemId: 'AdminBlogFormUpload',
ref: '../../../../AdminBlogFormUpload',
id: 'AdminBlogFormUpload'
}
]
}
]
},
{
xtype: 'htmleditor',
height: 350,
fieldLabel: 'Content',
width: 900,
itemId: 'blogTextContent',
name: 'blogTextContent',
hideLabel: true,
ref: '../../blogTextContent',
id: 'blogTextContent'
},
{
xtype: 'container',
html: 'Special Tags include: <b>&lt;trunkMore&gt; &lt;/trunkMore&gt;</b> and <B>[attach id=# align=</B>(left | center | right)<B>]</b>',
style: 'margin-left: 110px;'
}
]
},
{
xtype: 'fieldset',
title: 'Google Map Data',
checkboxToggle: true,
collapsed: true,
forceLayout: true,
items: [/*more form elements*/]
},
{
xtype: 'container',
layout: 'hbox',
height: 30,
id: 'blogTextAdmOptions',
items: [/* My admin form elements*/]
},
{
xtype: 'container',
height: 60,
layout: 'hbox',
autoWidth: true,
id: 'blogText_btnContainr',
layoutConfig: {
align: 'middle'
},
items: [/*my window buttons*/]
}
];
AdminBlogFormWinUi.superclass.initComponent.call(this);
}
});

Condor
5 Aug 2010, 5:17 AM
Your layout isn't fully configured.

1. Every container should have a defined layout (e.g. your window should be layout:'fit').
2. Items in a form layout are best configured with an 'anchor'.
3. Some overnesting (e.g. why do you need blogUserForumBox).
4. Don't specify both height and autoHeight:true.
5. I assume you want your htmleditor configured with anchor:'0' (or '-20') instead of with a width.

lorezyra
5 Aug 2010, 5:31 AM
Condor!!! You are awesome. Thanks.