column in table layout shifting/spanning panels incorrectly EXTJS

Question

I am having trouble with a simple table layout in ExtJs 4.0. I have 4 panels, which I would like to arrange in a 2X2 panel format. Normally this would be 2 columns and 2 rows, and I can do that in ExtJs successfully; however, for my purposes I would like to have 4 columns and 2 rows. I want the layout to be like so:

|1|222|
|33|44|

Panel 1: spans one column, one row

Panel 2: spans 3 columns, one row

Panel 3: spans 2 columns, one row

Panel 4: spans 2 columns, one row

This seems simple enough to do, but I can't seem to get it working correctly! The following is the entirety of my code, which I copied and modified from the ExtJs example at : http://docs.sencha.com/ext-js/4-0/#!/example/layout/table.html (for some reason the example doesn't have a link to its Javascript code, but I was able to find it in my ExtJs examples folder under ext-4.0.1/examples/layout/table.js)

Ext.onReady(function() {
var panel = Ext.create('Ext.Panel', {
    id:'main-panel',
    baseCls:'x-plain',
    renderTo: Ext.getBody(),
    layout: {
        type: 'table',
        columns: 4
    },
    // applied to child components
    defaults: {frame:true, width:200, height: 200},
    items:[{
        title:'Item 1',
        colspan:1,
        width:200
    },{
        title:'Item 2', 
        colspan:3,
        width:600
    },{
        title:'Item 3', 
        colspan:2,
        width:400
    },{
        title:'Item 4',
        colspan:2,
        width:400

    }]
});

});

Now, this code, as far as I know, SHOULD work. But the result I'm getting is this:

Anyone got any hints as to why Panel 2 is being shifted one column to the right? The example from Sencha Docs has plenty of panels spanning more than one column, but I must be overlooking something and I can't figure out what!

Thanks for all of your help!

Answer 1

Add on your panel

layout: {
    type: 'table',
    // The total column count must be specified here
    columns: 3
},

and apply this code to child items

tdAttrs: {
    colspan: 2
}

After research and trying to create it in plain HTML, I found out that you can't achieve what you're looking for in one table.

Answer 2

I have the same problem with you, and I debug this with write a Table in HTML page, and I found that you must let the table knew how many max td it have. so I add max count invisible td(item) into ExtJS Panel, and the bug fixed.

This's the whole code:

        var list = response.responseText.evalJSON();

        var columnArray = new Array();
        if(list != null) {

            for(var i = 0; i < list.length; i++) {
                var cell = {
                    id: list[i].id,
                    title: list[i].cellTitle,
                    autoScroll: true,
                    width: Calculator.getWidth(CELL_WIDTH, PADDING, list[i].colNum),
                    height: Calculator.getWidth(CELL_HEIGHT, PADDING, list[i].rowNum),
                    colspan: list[i].colNum,
                    rowspan: list[i].rowNum,
                    collapsible: true,
                    tools: tools,
                    html: HtmlCreator.create(list[i].id, list[i].href)
                };
                columnArray.push(cell);
            }

            **// For IE6+ add placeholder cell to calculate the total count of column**
            for(var i = 0; i < COLUMN_COUNT; i++) {
                var placeholder_cell = {
                    baseCls: 'hidden-cls',
                    bodyStyle: 'visibility: hidden;display: none;',
                    width: Calculator.getWidth(CELL_WIDTH, PADDING, 1),
                    height: Calculator.getWidth(CELL_HEIGHT, PADDING, 1)
                };
                columnArray.push(placeholder_cell); 
            }

            var panel = new Ext.Panel({
                id: 'main-panel',
                baseCls: 'x-plain',
                renderTo: 'portal-el',
                layout: {
                    type: 'table',
                    columns: COLUMN_COUNT
                },
                defaults: {frame: true, width: CELL_WIDTH, height: CELL_HEIGHT},
                items: columnArray
            });