PDA

View Full Version : not quite what I expected: container layout issue



geewhizbang
14 Aug 2009, 1:55 PM
The following code doesn't do what I expect. The button layout doesn't take up any vertical space but writes itself on top of the html Panel.



function NewPost(b,e)
{
b.disable();

var ButtonLayout = new Ext.Container
(
{
layout: 'column',
height: 100,
items:
[
{
autoEl:
{
tag: 'div', children:
[
{tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
{tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
]
},
width: 610
},{
text: 'Save Post',
xtype: 'button',
style: 'margin:12px 5px 0px 0px',
handler: SavePost,
width: 75
},{
text: 'Cancel',
xtype: 'button',
style: 'margin:12px 0px',
handler: CancelPost,
width: 75
}
]
}
);
if (typeof(KnowledgeBase.Forums.Forum.Thread.PostEdit) == "undefined")
{
Ext.ns('KnowledgeBase.Forums.Forum.Thread.PostEdit');
Ext.QuickTips.init(); // enable tooltips
KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window
(
{
title: 'Write New Post',
x:100,
y:100,
height:500,
frame: true,
width:920,
layout: 'border',
items:
[
ButtonLayout,
{
xtype: 'htmleditor',
region: 'center',
enableColors: true,
enableAlignments: true,
id: 'htmlPostEditor',
height:350
}
]
}
);
}
KnowledgeBase.Forums.BreadCrumb.add
(
"Write Post", "WritePost", function (bShow)
{
ShowHide(KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor, bShow);
EnableDisable(Ext.getCmp('buttonNewPost'), !bShow);
}, true
);
KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor.show();
}

geewhizbang
15 Aug 2009, 7:08 AM
I have probably tried dozens of variations of this above. The HTML editor wants to dominate the window its in. No matter how I've nested these, my title text box and buttons either don't appear at all or they are written on top of the HTML panel.

Animal
15 Aug 2009, 7:24 AM
Make the Window layout: 'border'.

Put the button container and editor directly in as child items.

The center region cannot accept a height. It is documented that it occupies any space not used by the border regions.

Give the Button container a height. Do NOT overnest it with that extra, embedded Panel! And make it layout: 'table' for simplicity

geewhizbang
15 Aug 2009, 12:51 PM
I have done what you suggested. The table layout does help with the layout of the panel buttons, but is still renders on top of the htmlEditor window.



KnowledgeBase.Forums.Forum.Thread.PostEdit.Editor = new Ext.Window
(
{
title: 'Write New Post',
layout: 'border',
x:100,
y:100,
frame: true,
width:900,
height:500,
items:
[
{
region: 'north',
layout: 'table',
border:false,
height:60,
autoWidth:true,
cls: 'SD_Trans',
items:
[
{
autoEl:
[
{tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
{tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
],
width: 610
},{
text: 'Save Post',
xtype: 'button',
style: 'margin:12px 5px 0px 0px',
handler: SavePost,
width: 75
},{
text: 'Cancel',
xtype: 'button',
style: 'margin:12px 5px 0px 0px',
handler: CancelPost,
width: 75
}
]
},

{
xtype: 'htmleditor',
region: 'center',
enableColors: true,
enableAlignments: true,
id: 'htmlPostEditor'
}
]
}
);

Animal
15 Aug 2009, 1:50 PM
Why not this?



new Ext.Window({
title: 'Write New Post',
layout: 'border',
x: 100,
y: 100,
frame: true,
width: 900,
height: 500,
items: [{
xtype: 'container',
style: {
padding: '4px 0 0 4px'
},
region: 'north',
layout: 'table',
layoutConfig: {
columns: 3
},
border: false,
height: 30,
autoWidth: true,
cls: 'SD_Trans',
items: [{
xtype: 'container',
layout: 'form',
items: {
xtype: 'textfield',
fieldLabel: 'Post Title',
id: 'tbPostTitle',
width: 600
}
},
{
text: 'Save Post',
xtype: 'button',
width: 75,
style: 'margin:0 0 4px 5px'
},
{
text: 'Cancel',
xtype: 'button',
width: 75,
style: 'margin:0 0 4px 5px'
}]
}, {
xtype: 'htmleditor',
region: 'center',
enableColors: true,
enableAlignments: true,
id: 'htmlPostEditor'
}]
}).show();

geewhizbang
15 Aug 2009, 3:29 PM
I working on doing it that way anyway using built-in ExtJS elements for the textbox (mine wasn't quite right yet, thank you) but when I assign the buttons and textbox to the 'north' region using your exact example it still overwrites the htmlEditor.

If i put it south, where it doesn't quite make sense in my functionalilty, at least the layout works.

Animal
15 Aug 2009, 11:27 PM
You might be hitting some of these layout issues that have been worked on over the past few days. Because that code worked perfectly here (in FF 3.5) or I wouldn't have posted it.

I don't see why you use a layout with one child as a Panel containing buttons, and the other child as an editor.

I'd use a layout: 'fit' Panel with a tbar. It's fitted child would be the editor.