PDA

View Full Version : Colspan for grid header column in ext js 4.0



pratapk
4 Oct 2012, 5:42 AM
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
4 Oct 2012, 5:45 AM
you could combine the 2 columns to make one, or try using a Ext.grid.column.Type

scottmartin
4 Oct 2012, 9:24 AM
Have you seen the grouping example:
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/group-header-grid.html

There will be a parent header for sub columns.

pratapk
5 Oct 2012, 1:53 AM
Thanks for input , i have gone through the group header , which is not case for my requirment. I need colspan.

WendyLG
5 Oct 2012, 1:54 AM
if you did a group but didn't give the columns headers wouldn't that be the same effect?

pratapk
5 Oct 2012, 2:17 AM
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
5 Oct 2012, 2:21 AM
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
5 Oct 2012, 5:27 AM
Hi Redraid,

Thanks for the solution which will solve my issue.

pratapk
5 Oct 2012, 5:47 AM
Hi Redraid ,
But there is additional column with empty header , is there any to remove it.

redraid
5 Oct 2012, 6:14 AM
Please edit my jsfiddle example with yours changes to show me your problem

redraid
5 Oct 2012, 6:17 AM
I know only one problem with this hack - column resize

pratapk
5 Oct 2012, 6:33 AM
39178

scottmartin
5 Oct 2012, 6:56 AM
In this case, you could use forceFit: true on the grid .. and set flex: 1 on the name column.

This is the one instance where I would actually recommend using forceFit ;)
Grouping does not support flex in grouped columns.

Scott