PDA

View Full Version : [3.??] ListView, Panel and autoHeight



senacle
6 Aug 2009, 5:51 AM
I've a list view and a panel.
When i set the autoHeight option to true for these elements, they're displayed in a strange way.




var tableau=new Ext.ListView({
......
autoHeight: true,
......

var graphique=new Ext.Panel({
......
autoHeight: true,
......


var layout = new Ext.Panel({
layout: 'fit',
items: [tableau,
new Ext.Panel({
html: '<a href="#">coucou</a>',
autoHeight: true,
}),
graphique]

graphique isn't displayed and 'coucou' is inside the Listview.

With this code



var tableau=new Ext.ListView({
......
autoHeight: true,
......

var graphique=new Ext.Panel({
......
height: 500,
......
var layout = new Ext.Panel({
layout: 'fit',
items: [graphique,
new Ext.Panel({
html: '<a href="#">coucou</a>',
autoHeight: true,
}),
tableau]

All elements are well displayed.

I've tried other configuration and behaviour are different for each.

I would like to have the 3 elements displayed correctly.
Is it possible or is it a bug ?

Condor
6 Aug 2009, 6:05 AM
You can't have 3 items in a 'fit' layout! Choose a different layout.

senacle
6 Aug 2009, 6:52 AM
Same problem with only 2 items :



var layout = new Ext.Panel({
layout: 'fit',
items: [graphique, tableau]


Or



var layout = new Ext.Panel({
layout: 'fit',
items: [tableau, graphique]

mystix
6 Aug 2009, 6:57 AM
Same problem with only 2 items :



var layout = new Ext.Panel({
layout: 'fit',
items: [graphique, tableau]


Or



var layout = new Ext.Panel({
layout: 'fit',
items: [tableau, graphique]


you can't have more than 1 child item in a FitLayout.

think about it. you're asking some child to expand to fit all available space (in the parent Container).
where does that leave all the other children?

evant
6 Aug 2009, 6:35 PM
As previous posters suggested, fit layout can only contain a single child.

Moving this to help.

senacle
11 Aug 2009, 12:02 AM
I give you some samples with working and not working code.

Working code (but the "well displayind" is perhaps only an impression)



var layout = new Ext.Panel({
layout: 'fit',
items: [
new Ext.Panel({
id: 'lien',
html: 'Hello',
autoHeight: true
}),
graphique,
tableau
]
See attachment 1.jpg




var layout = new Ext.Panel({
layout: 'fit',
items: [
graphique,
new Ext.Panel({
id: 'lien',
html: 'Hello',
autoHeight: true
}),
tableau
]
See attachment 2.jpg


Not working code



var layout = new Ext.Panel({
layout: 'fit',
items: [
tableau,
graphique,
new Ext.Panel({
id: 'lien',
html: 'Hello',
autoHeight: true
})
]
See attachment 3.jpg



var layout = new Ext.Panel({
layout: 'fit',
items: [
graphique,
tableau,
new Ext.Panel({
id: 'lien',
html: 'Hello',
autoHeight: true
})
]
See attachment 4.jpg

Animal
11 Aug 2009, 12:11 AM
You keep using layout: 'fit' and multiple items.

You are confused between autoheight and layouts.

Layouts such as 'fit', 'card', 'border', 'anchor' (when accompanied by hints in the Components), and the box layouts impose sizing on child Components.

They take the CONFIGURED size of the Container (or the size IMPOSED by its parent Container), and use that to size the child Component(s)

autoHieght should only be used in layouts that are not managing height.

Condor
11 Aug 2009, 12:16 AM
Why are you persisting in using a fit layout for multiple items? It's simply not supported!

There are several other layouts you can try:
- anchor layout
- accordion layout
- border layout (with north+center+south region)
- row-fit layout (Ext 2.x user extension)
- vbox layout (Ext 3.x only)

senacle
12 Aug 2009, 12:50 AM
Sorry guys, but i've tried other layout config and i can't display what i want.

Can you help me ?

I've a Panel with inside 3 items.
Item 1 : panel with the html; must be autoheight (a php script returns a random height html content)
Item 2 : the listview; must be autoheight (a php script returns the values and the number of rows can change each time the php is called)
Item 3 : the chart inside a panel. The height is set to 500.

Condor
12 Aug 2009, 1:04 AM
I would recommend setting the outer panel to:

autoHeight: true,
layout: 'anchor',
defaults: {anchor: '0'}

senacle
12 Aug 2009, 1:36 AM
Like that ?



var tableau=new Ext.ListView({
......
autoHeight: true,
......

}) var graphique=new Ext.Panel({
......
height:500,
......
})

var layout = new Ext.Panel({
layout: 'anchor',
defaults: {anchor: '0'},
autoHeight: true,
items: [
new Ext.Panel({
id: 'lien',
html: 'Hello',
autoHeight: true
}),
tableau,
graphique
]
});
As you can see in the attached file, there is always a problem.

Animal
12 Aug 2009, 3:04 AM
No, I can't see.

Condor
12 Aug 2009, 3:35 AM
I assume you mean that graphique shows on the right side of tableau instead of below it?

Do you have any custom css that could cause this?

senacle
13 Aug 2009, 1:42 AM
I assume you mean that graphique shows on the right side of tableau instead of below it?

Yes. (sorry, i would have to specify it in my previous post).


Do you have any custom css that could cause this?

I've a short custom css.
I made a test without this custom css : always this problem.

Animal
13 Aug 2009, 3:41 AM
Yes. (sorry, i would have to specify it in my previous post).



I've a short custom css.
I made a test without this custom css : always this problem.

The only thing that would cause that is CSS interference.

Looks like they are floating.

You can examine the DOM yourself and fnid out what the problem is.

senacle
13 Aug 2009, 5:05 AM
I've disabled all the css.
And the chart is displayed where it must be : below the list.

After, i test with only the ext-all.css : the problem is back.

I give you part of the html code :



<div id="lien" class="x-panel" style="width: 1259px;">
......
</div>
<div id="tableau" style="height: auto; width: 1259px;">
<div class="x-list-header">
......
</div>
<div class="x-list-body">
......
</div>
</div>
<div id="graphique" class="x-panel" style="width: 1259px;">
<div id="ext-gen130" class="x-panel-bwrap">
<div id="ext-gen131" class="x-panel-body x-panel-body-noheader" style="height: 498px; width: 1257px;">
<object id="extflashcmp1001" height="100%" width="100%" type="application/x-shockwave-flash" data="http://yui.yahooapis.com/2.7.0/build/charts/assets/charts.swf" style="visibility: visible;">
</object>
</div>
</div>
</div>

As you can see, there's no class defined for the list, something like 'x-list".



I've tried an other thing : i put "height:500" instead of "autoHeight: true" for the listview.
The listview is well displayed with an height of 500 and the chart is just below.

All these tests under Firefox 3.0.13

When i test under IE8, the chart isn't displayed in every case.

Animal
13 Aug 2009, 6:10 AM
You need to actually check the style in Firebug.

The HTML tab has a right pane. In there you can see any style applied to any element, and, crucially, trace WHERE it was applied from.

Animal
13 Aug 2009, 6:11 AM
"disable all the css"? What does that mean?

No ext-all.css?

Then NOTHING would look like Ext.

senacle
13 Aug 2009, 6:26 AM
"disable all the css"? What does that mean?

No ext-all.css?

Then NOTHING would look like Ext.

Yes, i disabled ext-all.css, to see what happens.

senacle
13 Aug 2009, 11:18 PM
You need to actually check the style in Firebug.

The HTML tab has a right pane. In there you can see any style applied to any element, and, crucially, trace WHERE it was applied from.

I found this, coming from ext-all.css (ligne 5141)


.x-list-body {
float:left;
overflow-x:hidden;
overflow-y:auto;
width:100%;
}
When i disable "float:left;", all items are well displayed, one below the other.

You were right when you said in a previous post "Looks like they are floating."

So, can we say it's an ext-all.css bug ?

Animal
13 Aug 2009, 11:23 PM
Ahah! Good piece of detective work.

Yes, it looks like that is a bug. Make a report in the Bugs folder specifying that information, and the dev team should pick that up and fix it.

Chau
4 Mar 2010, 12:17 AM
I haven't checked if a bug report was made, but I think the problem still resides in ExtJs 3.1.1.

It is easy to work around using a custom css entry:


.x-list-body
{
float: none !important;
}Just to inform others looking for a solution to the problem - like me (:|

htoyryla
18 May 2010, 11:43 PM
Absolutely great piece of information! This helped me solve something that had bothered me for months: a form rendered partly on top of a listview. I had tried to solve it by custom handlers doing some resizing, which worked but was very difficult to do exactly right (without extra space or scrollbars).

Found this when trying to solve an unrelated problem.