PDA

View Full Version : Table Layout not respecting number of columns for cells



diovani
8 Jan 2013, 8:56 AM
I'm trying to use a TableLayout to place elements divided into a three column layout, but ExtJs creates only two columns and render the cells in incorrect position.



Ext.create('Ext.Panel', {
title: 'Teste Table Layout',
renderTo: Ext.getBody(),
width: 300,
layout: {
type: 'table',
columns: 3,
},
style: {overflow: 'visible'}, //overflow just to see the last cell
bodyStyle: {overflow: 'visible'},
defaults: {
bodyStyle: {border: '1px solid green'},
height: 50
},
items: [{
colspan: 3,
width: 300
},{
colspan: 2,
width: 200
}, {
colspan: 1,
width: 100
}, {
colspan: 1,
width: 100
}, {
colspan: 2,
width: 200
}]
})
});


The expected result is like this:


+------------------+
| |
+-----------+------+
| | |
+-----+-----+------+
| | |
+-----+------------+


But I get something like this:


+------------------+
| |
+-----------+------+
| | |
+-----+-----+------+-----+
| | | |
+-----+ +------+-----+


To check if that is not an HTML problem I've simulated the layout with a simple Table, as follows:


<style type="text/css" media="screen">
#t1 {
width: 300px;
}
#t1 td {
height: 50px;
border: 1px solid blue;
}
</style>
<table id="t1">
<tr>
<td colspan="3">&nbsp; </td>
</tr>
<tr>
<td colspan="2" style="width: 200px;">&nbsp; </td>
<td colspan="1" style="width: 100px;">&nbsp; </td>
</tr>
<tr>
<td colspan="1" style="width: 100px;">&nbsp; </td>
<td colspan="2" style="width: 200px;">&nbsp; </td>
</tr>
</table>

diovani
8 Jan 2013, 9:46 AM
Bug 807 (http://www.sencha.com/forum/showthread.php?95785-OPEN-807-Table-layout-bug) seens to report the same problem, in Ext 3. Never fixed.

friend
8 Jan 2013, 10:23 AM
Yeah, I get the same behavior and tried several other permutations, all with the same broken result.

As a work around, I guess you could stack several panels with hbox layouts into in a container with a vbox layout.

diovani
8 Jan 2013, 11:20 AM
Noticed a moment ago that Firefox doesn't show the expected result even with the common HTML table. Neither IE9 using Quirks Mode.

The only workaround I could find is to always have a line with the max number of cells (all with colspan = 1). This makes the layout work fine.