Colspan for grid header column in ext js 4.0

[pratapk]

Hi,

Colspan for grid header column in ext js 4.0...below is my requirement , can some one throw light on it.

Column1		Column2
Test1	Test2	Test5
Test3	Test3	Test6

[WendyLG]

you could combine the 2 columns to make one, or try using a Ext.grid.column.Type

[scottmartin]

Have you seen the grouping example:
http://dev.sencha.com/deploy/ext-4.1...ader-grid.html

There will be a parent header for sub columns.

[pratapk]

Thanks for input , i have gone through the group header , which is not case for my requirment. I need colspan.

[WendyLG]

if you did a group but didn't give the columns headers wouldn't that be the same effect?

[pratapk]

I think both are not same , even if i give empty for sub headers , i will be getting seperator and more over look and feel will be different.

[redraid]

Try this:
css:

.hide-sub-headers .x-group-sub-header {
    display: none;
}
​

js:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name'},
        { header: 'Group', cls: 'hide-sub-headers',
columns: [
            { header: 'Email', dataIndex: 'email'},
            { header: 'Phone', dataIndex: 'phone'}
        ]}        
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});​

example: http://jsfiddle.net/afXb4/1/

[pratapk]

Hi Redraid,

Thanks for the solution which will solve my issue.

[pratapk]

Hi Redraid ,
But there is additional column with empty header , is there any to remove it.

[redraid]

Please edit my jsfiddle example with yours changes to show me your problem