PDA

View Full Version : Panel Table Layout Problem



Kopernikus
25 Sep 2008, 1:24 AM
Hello,

my problem can u see on the picture. would be nice if there a ext-solution to get the right panel starting at the same position as the left one.

furthermore a question: it is possible that the panels always have the same height?

Cu

Condor
25 Sep 2008, 1:25 AM
Yes to both questions.

Can you post your code so we can point out any errors?

Kopernikus
25 Sep 2008, 3:22 AM
the code until now is very standard and based on the example:


Ext.onReady(function(){
var panel = new Ext.Panel({
id: 'main-panel',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
layout: 'table',
layoutConfig: {
columns: 2
},
// applied to child components
defaults: {
frame: true
},
items: [{
title: 'item1',
colspan: 2,
contentEl: 'thema',
widtht: 810,
html: ''
}, {
title: 'item2',
width: 400,
height: 200,
contentEl: 'allgemein'
}, {
title: 'item3',
width: 400,
contentEl: 'wann'
}]
});
});

Condor
25 Sep 2008, 3:55 AM
This is rather difficult to fix in table layout.

Let's try a nested column layout instead:

var panel = new Ext.Panel({
id: 'main-panel',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
width: 802,
items: [{
title: 'item1',
html: '',
frame: true
}, {
layout: 'column',
defaults: {
frame: true
},
items: [{
title: 'item2',
width: 400,
height: 200
}, {
title: 'item3',
width: 400,
height: 200
}]
}]
});

Kopernikus
25 Sep 2008, 10:05 AM
i tried it out, thank you so far, but what about getting item2 and item3 so that they always the same height? i mean if you don't give them a fixed height and then the panels get filled with dynamically information, then i want that the smaller paner adapt to the bigger one.

a other problem i have now, that this don't work anymore: the individual text "Panel 2" should be in the panel, but as you can see it is not. With my table-layout and giving the items with contentEl = "exampleID" it worked...


<html>
<head>
<title>ext forum</title>
<link rel="stylesheet" type="text/css" href="./ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext-2.2/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="./ext-2.2/ext-all.js">
</script>
<script type="text/javascript" src="./panel.js">
</script>
</head>
<body>
<div id='panel2'>
Panel 2
</div>
</body>
</html>
var panel = new Ext.Panel({
id: 'main-panel',
baseCls: 'x-plain',
renderTo: Ext.getBody(),
width: 802,
items: [{
title: 'item1',
frame: true
}, {
layout: 'column',
defaults: {
frame: true
},
items: [{
title: 'item2',
width: 400,
height: 200,
id:'panel2'
}, {
title: 'item3',
width: 400,
height: 200
}]
}]
});

Condor
26 Sep 2008, 12:43 AM
So why not use contentEl:'panel2'?
Or you could use: html: Ext.getDom('panel2').innerHTML (makes a copy).

ps. You might want to add autoScroll:true in case the content from 'panel2' doesn't fit.

Animal
26 Sep 2008, 1:50 AM
Would my enhanced column layout which fits the height of each column within the Container help?

http://extjs.com/forum/showthread.php?t=45143

Kopernikus
26 Sep 2008, 2:15 AM
thank you!!! contentEl:'panel2' now works (again ;)), my fault i think, and thanks for forum link