Ext.layout.container.Table - rowspan/colspan bug

[johnrembo]

Raw html code and Ext code comparison:


an "ok" example:

  <table width=300 height=200 border=1>
    <tr>
        <td colspan=2 rowspan=3>A1:B3</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>C2</td>
    </tr>
    <tr>
        <td>C3</td>
    </tr>
  </table>

and a buggy Ext code:

if (typeof(P)=='object') Ext.destroy(P);

var P= Ext.create('Ext.panel.Panel', {
        title: 'Table Layout',
        width: 300,
        height: 200,
        layout: {
            type: 'table',
            columns: 3
        },
        defaults: {
            bodyStyle:'padding:20px'
        },
        items: [{
            html: 'A1:B3',
            colspan:2,
            rowspan:3
        },{
            html: 'C1'
        },{
            html: 'C2'
        },{
            html: 'C3'
        }],
        renderTo: Ext.getBody()
    }); 

and a temporary nasty fix (add an empty cell before "C3")

var P= Ext.create('Ext.panel.Panel', {
        title: 'Table Layout',
        width: 300,
        height: 200,
        layout: {
            type: 'table',
            columns: 3
        },
        defaults: {
            bodyStyle:'padding:20px'
        },
        items: [{
            html: 'A1:B3',
            colspan:2,
            rowspan:3
        },{
            html: 'C1'
        },{
            html: 'C2'
        },{border:false},{
            html: 'C3'
        }],
        renderTo: Ext.getBody()
    }); 

tested with Extjs 4.0.2a

[tsoukw]

    function calTableLayout(items,columnCount) {
        var rows = [];                          //return tr list
        var rows_cells_minus = [];              //must minus cell count in row
        
        //init the first row
        var currentRowIndex = 0;                //current row index
        var currentRowCellsTotal = columnCount; //current row remain cells count
        rows[0] = [];
        
        var len = items.length;
        for(var i=0;i<len;i++){
            var item = items[i];
            var colspan = item.colspan || 1;
            //keep right colspan
            if(colspan > currentRowCellsTotal){
                colspan = currentRowCellsTotal;
            }
            var rowspan = item.rowspan || 1;
            if(rowspan>1){
                for(var j=1;j<rowspan;j++){     //add minus cells for the next rows
                    if(!rows_cells_minus[currentRowIndex+j]){
                        rows_cells_minus[currentRowIndex+j] = 0;
                    }
                    rows_cells_minus[currentRowIndex+j] += colspan;     //not 1,extjs bug here
                }
            }
            rows[currentRowIndex].push({rowspan:rowspan,colspan:colspan,item:item});
            currentRowCellsTotal -= colspan;
            if(currentRowCellsTotal == 0){
                currentRowIndex++;
                rows[currentRowIndex] = [];
                currentRowCellsTotal = columnCount - (rows_cells_minus[currentRowIndex] || 0);
            }
        }
        return rows;
    }