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.