PDA

View Full Version : [OPEN-807] Table layout bug



steffenk
30 Mar 2010, 2:09 PM
Ext version tested:

Ext 3.0 - 3.2


Adapter used:

ext


css used:

only default ext-all.css




Description:
I set up a table layout with 4x3 cells and combined colspan and rowspan. But the result is not the expected one. This is how it should be:


+--------+--------|--------|--------+
| 1 | 2 | 3 |
|--------|--------|--------| |
| 4 | 5 | |
|--------| |--------|
| 6 | | 7 |
+--------+--------|--------|--------+

Here is the code


Ext.onReady(function() {

new Ext.Panel({
renderTo: 'table',
baseCls:'x-plain',
layout:'table',
layoutConfig: {
columns: 4
},
defaults: {
frame: false,
unstyled: true,
width: 150,
height: 150
},
items:[{
colspan: 2,
width: 300,
style: 'background: #00ee00',
id: 'hppanel-1',
html: 'hppanel-1'
},{
style: 'background: #ee0000',
id: 'hppanel-2',
html: 'hppanel-2'
},{
rowspan: 2,
height: 300,
style: 'background: #0000ee',
id: 'hppanel-3',
html: 'hppanel-3'
},{
style: 'background: #00aa00',
id: 'hppanel-4',
html: 'hppanel-4'
},{
colspan: 2,
rowspan: 2,
width: 300,
height: 300,
style: 'background: #aa0000',
id: 'hppanel-5',
html: 'hppanel-5'
},{
style: 'background: #0000aa',
id: 'hppanel-6',
html: 'hppanel-6'
},{
style: 'background: #234567',
id: 'hppanel-7',
html: 'hppanel-7'
}]

});

});


See this URL : http://dev.sk-typo3.de/ext/table.html


One thing that isn't related direct, but i think it's unneccesary: If i have a default width of 150 for each column, and i make colspan:2, i would expect that Ext automatically assign 300. This is not the case, i have to define width: 300.
So without defining specific width it should be easy to calculate defaultWidth * colspan

steffenk
31 Mar 2010, 1:10 PM
I must say i'm bit clueless. Debugging shows correct counting of cells/rows, DOM looks total correct to me. I can't understand why td with hppanel4 has a width of 300px. I tried to correct that with FB, but even if i remove nearly all dimensions it stays wrong.

steffenk
31 Mar 2010, 3:28 PM
you can laugh at me, but i built the table with dreamweaver now to see how it works. i saw that the result was only possible if the table gets the complete width. if i remove this, i get the same result as with above blanc table.

I implemented it in online demo, see link from first post.

Jamie Avins
1 Apr 2010, 7:41 AM
Doesn't surprise me, table layout is very passive and just puts things in a standard HTML table.

jay@moduscreate.com
5 Apr 2010, 9:27 AM
Confirmed.


This example is much lighter weight and demonstrates the problem:




new Ext.Window({
resizable : false,
layout:'table',
layoutConfig: {
columns: 3
},
defaults: {
border: true,
width: 75,
height: 75
},
items:[
{

html: 'hppanel-1 (cspan 2)',
colspan: 2,
width: 150,
style: 'background: #00ee00'
},
{
html: 'hppanel-2',
style: 'background: #ee0000'
},
{
html: 'hppanel-3',
style: 'background: #00aa00'

},
{
html: 'hppanel-4 (cspan 2)',
colspan: 2,
width: 150,
style: 'background: #aa0000'
}
]
}).show()

tobiu
5 Apr 2010, 9:39 AM
confirmed too after this debugging session without result ;)


kind regards,
tobiu

steffenk
22 Apr 2010, 3:46 AM
reminder

evant
22 Apr 2010, 4:24 AM
I'm not really sure this classifies as a bug. As you said, you're explicitly setting the width of the panel to 150. If you just remove the default and let them size themselves, it appears as you would expect.

Animal
22 Apr 2010, 6:28 AM
Certainly Jay's example is not a bug, it's user error. You are asking it to do the impossible.

Column count is 3, so with the colspan, that means the first two items on the top row.

Then how can that top-left cell then span two columns? There's the first cell on the lower row, but then there's the second one which ITSELF must span two columns from above! It can't be done.

jay@moduscreate.com
22 Apr 2010, 6:59 AM
Certainly Jay's example is not a bug, it's user error. You are asking it to do the impossible.

Column count is 3, so with the colspan, that means the first two items on the top row.

Then how can that top-left cell then span two columns? There's the first cell on the lower row, but then there's the second one which ITSELF must span two columns from above! It can't be done.

Nige,

have you seen the source to http://dev.sk-typo3.de/ext/table.html ? Look at the HTML table. You'll see that it can be.

steffenk
22 Apr 2010, 7:56 AM
I'm not really sure this classifies as a bug. As you said, you're explicitly setting the width of the panel to 150. If you just remove the default and let them size themselves, it appears as you would expect.

it doesn't. I tried all possible combination, it's always wrong.

And Nige, i can count :) See the picture on top, it makes sure that all colspans and rowspans are correct. And see Jay's simplified example, even with this it's rendered wrong.