PDA

View Full Version : Yet another panel's size problem



seek
27 Aug 2009, 5:14 AM
Hi all guys,
I'm very new about Ext-js fw, and I have a problem with Ext.tree.TreePanel size, I don't know why my tree does not fill all the contasine space.
Here the code of main page:


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var center_panel = new Ext.Panel({
region: 'center',
contentEl: 'pageContent',
layout: 'column',
autoScroll: false
});

var myForm = new Ext.Panel({
layout: 'border',
region: 'center',
bodyBorder: false,
height: 55,
items: [{
title: 'My Title',
region: 'north',
contentEl: 'north',
floatable: false,
split: false,
cmargins: '0 0 0 0',
collapsible: true
}, {
region: 'west',
id: 'west-panel',
title: 'Mený',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
cmargins: '0 0 0 0',
layout: 'fit',
items: [{
contentEl: 'region_position_02',
autoScroll: true,
border: false
}]
}, center_panel, new Ext.BoxComponent({
region: 'south',
el: 'south',
//layout: 'fit'
height: 'auto'
})]
});

center_panel.onBodyResize = function(p, w, h){
document.getElementById('app_iframe_id').height = h;
};

center_panel.on('bodyresize', center_panel.onBodyResize);

new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',

items: [{
layout: 'border',
id: 'layout-browser',
region: 'center',
border: false,
margins: '0 0 0 0',
width: 275,
minSize: 100,
maxSize: 500,
items: [myForm]
}],
renderTo: '#wwvFlowForm'
});
});
Here the code of tree


<div id="region_position_02"><style type="text/css">ul {margin:0 0 0 0;}</style>
<script type="text/javascript">
var treeR19254010415416176 = [
{id:"L6270307828090821","text":"System","href":"","leaf":false,"children":
[...here some others elements....]} ];

Ext.onReady(function(){
trepln = new Ext.tree.TreePanel({
renderTo: 'region_position_02',
useArrows: true,
lines: false,
id: 'my_nav_tree',
tbar: [{
text: 'tbar Left'
},'',{
text: 'tbar Right'
}],
loader: new Ext.tree.TreeLoader(),
rootVisible: false,
animate: true,
border: true,
// autoHeight: false,
// height: 'auto',
forceLayout: true,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
leaf: false,
loaded: false,
expanded: true,
text: '',
children: treeR19254010415416176
})

})
});

</script>What I've messed?

Animal
27 Aug 2009, 5:21 AM
You are approaching it in COMPLETELY the wrong way.

NEVER EVER EVER render.

Place child Components into Containers which are configured with a layout which lays the children out and sizes them as you want.

That's the beginning, middle and end of the story.

If you take note of this fundamental principal, then you will never have any problems ever again.

If you do not, you will spend months writing random code. I've seen it and it's ugly.

Condor
27 Aug 2009, 5:25 AM
Do not render a component inside a container!!! Instead add() it to the container and call doLayout().

Animal
27 Aug 2009, 5:36 AM
I imagine the OP has read the docs for renderTo in order to have used it?

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/renderto.jpg

But just ignored them?

Jack9
27 Aug 2009, 9:09 AM
I have cleaned up the code you provided, but there are a number of elements not defined well enough for me. I have made some good guesses. I assume you are using renderTo because of an existing limitation which you don't need to go into. The question is can you do it and if so or not, why?


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var center_panel = new Ext.Panel({
region: 'center',
contentEl: 'pageContent',// GUESSED, see html
layout: 'column',
autoScroll: false
});

var myForm = new Ext.Panel({
layout: 'border',
region: 'center',
bodyBorder: false,
//height: 55, // Ignored anyways
items: [
{ // default Prototype panel
title: 'My Title',
region: 'north',
contentEl: 'north',// GUESSED, see html
floatable: false,
split: false,
cmargins: '0 0 0 0',
collapsible: true
},
{ // default Prototype panel
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
cmargins: '0 0 0 0',
contentEl:'region_position_02'
// layout: 'fit', // Nothing to layout inside this
// items: [
// { // default Prototype panel
// contentEl: 'region_position_02',
// autoScroll: true,
// border: false
// }
]
},
center_panel,
new Ext.BoxComponent({
region: 'south',
el: 'south', // GUESSED, see html
height: 'auto'
})
]
});

center_panel.onBodyResize = function(p, w, h){
document.getElementById('app_iframe_id').height = h; // GUESSED, see html
};

center_panel.on('bodyresize', center_panel.onBodyResize);

// Comment out these as you need for testing.
var treeR19254010415416176 = [
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false}
];

var trepln = new Ext.tree.TreePanel({
renderTo: 'region_position_02',
useArrows: true,
lines: false,
id: 'my_nav_tree',
tbar: [
{// Default prototype Panel
text: 'tbar Left' //strange
},
'',
{// Default prototype Panel
text: 'tbar Right' //strange
}
],
loader: new Ext.tree.TreeLoader(),
rootVisible: false,
animate: true,
border: true,
forceLayout: true,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
leaf: false,
loaded: false,
expanded: true,
text: 'Tree',
children: treeR19254010415416176
})
});

var viewport = new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [
{ // default Prototype panel
layout: 'border',
id: 'layout-browser',
region: 'center',
border: false,
margins: '0 0 0 0',
width: 275,
minSize: 100,
maxSize: 500,
items: [
myForm
]
}
]
});
viewport.render('#wwvFlowForm');
});And the HTML which I had to guess at


<html>
<head>
<link rel="stylesheet" type="text/css" href="/ext3/resources/css/ext-all.css"/>
<!--<link rel="stylesheet" type="text/css" href="test.css"/>-->
<script type="text/javascript" src="/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext3/ext-all.js"></script>

<!-- this is where your javascript is inserted -->
<script type="text/javascript" src="/test/test2.js"></script>

<title>Test Document</title>
</head>
<body id="app_iframe_id">
<div id="#wwvFlowForm"></div>
<div id="region_position_02"></div>
<div id="pageContent">Page Content</div>
<div id="north">North</div>
<div id="south">South</div>
</body>
</html>
According to this simple test case, it expands the panel correctly. However I don't think you understand why. We attempt to renderTo a specific Div a number of times. This "renderTo" effectively puts your tree in a basic html div, not an Ext Container. Yes, Ext makes lots of Divs and maintains relationships to them, but you can see in the HTML that it is a named "dumb" div. We render the west panel into the region div then render the treePanel into it and expect the 2 components to "communicate". Remember, now both panels are now within a "dumb" div. It has no layout enforcement at all. In fact, it's fortunate that it even looks like the treePanel is IN the west panel. That's just coincidence! Other controls will not behave so intuitively, even if they are rendered to a div in what would seem to be the correct layered order. The real giveaway in how to fix this is the fact that the var trepln is never used anywhere. This is basically a control we're trying to embed, but never do. The fixed code is below:


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var center_panel = new Ext.Panel({
region: 'center',
contentEl: 'pageContent',// GUESSED, see html
layout: 'column',
autoScroll: false
});

var treeR19254010415416176 = [
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false},
{id:"L6270307828090821","text":"System","href":"","leaf":false}
];

var myForm = new Ext.Panel({
layout: 'border',
region: 'center',
bodyBorder: false,
items: [
{ // default Prototype panel
title: 'My Title',
region: 'north',
contentEl: 'north',// GUESSED, see html
floatable: false,
split: false,
cmargins: '0 0 0 0',
collapsible: true
},
{ // default Prototype panel
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
cmargins: '0 0 0 0',
layout: 'fit',
contentEl:'region_position_02',
items: [
new Ext.tree.TreePanel({
//renderTo: 'region_position_02',
useArrows: true,
lines: false,
id: 'my_nav_tree',
tbar: [
{// Default prototype Panel
text: 'tbar Left' //strange
},
'',
{// Default prototype Panel
text: 'tbar Right' //strange
}
],
loader: new Ext.tree.TreeLoader(),
rootVisible: false,
animate: true,
border: true,
autoScroll: true,
root: new Ext.tree.AsyncTreeNode({
leaf: false,
loaded: false,
expanded: true,
text: 'Tree',
children: treeR19254010415416176
})
})
]
},
center_panel,
new Ext.BoxComponent({
region: 'south',
el: 'south', // GUESSED, see html
height: 'auto'
})
]
});

center_panel.onBodyResize = function(p, w, h){
document.getElementById('app_iframe_id').height = h; // GUESSED, see html
};

center_panel.on('bodyresize', center_panel.onBodyResize);

var viewport = new Ext.Viewport({
layout: 'border',
title: 'Ext Layout Browser',
items: [
{ // default Prototype panel
layout: 'border',
id: 'layout-browser',
region: 'center',
border: false,
margins: '0 0 0 0',
width: 275,
minSize: 100,
maxSize: 500,
items: [
myForm
]
}
]
});
viewport.render('#wwvFlowForm');
});

Condor
27 Aug 2009, 10:17 AM
No, I meant:

{
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
cmargins: '0 0 0 0',
layout: 'fit'
//contentEl: 'region_position_02'
}

var trepln = new Ext.tree.TreePanel({
//renderTo: 'region_position_02',
useArrows: true,
...
});
var p = Ext.getCmp('west-panel');
p.add(trepln);
p.doLayout();

seek
27 Aug 2009, 10:50 PM
Thanks all for coucils and solution.
I've "inherited" this project from others developers...but first of all it's better for this OP to learn your framework! ;)
If is not enough I have to do also with APEX....

Thanks again
Seek