Mege two cells in grid - EXTJS4

[ankit_shahin]

Hi ,

I have a requirement where I need to merge two adjacent cells in Grid in EXTJS4.
Right now I am wrapping the text values, But if one column value is exceeding Column width than it should not be wrapped instead use the width of next column and display text in continuation.

Anyone??

[redraid]

Use template column -

{ text: 'Full Name', xtype: 'templatecolumn', tpl: '{firstname} {lastname}' } 

[scottmartin]

Have a look at convert:
http://docs.sencha.com/ext-js/4-1/#!...ld-cfg-convert

Regards,
Scott.

[ankit_shahin]

Hi redraid,

tempatecolumn will not work in this case, As columnWidth are fixed so I dont want to wrap the text in that column instead it should occupy the width of another column to display value in continuation.

i.e something like this

	column 1 column2
	--------------------------------- value1 value2 --------------------------------- long value Value3 --------------------------------- value4 Value5 ---------------------------------

[redraid]

If I understand correctly:

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 dasf df dsf dsf dsf dsf dsf sdf sdf sf ',  "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: [
        { itemId: 'col1', header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    tbar: [{
        text: 'apply colspan',
        handler: function (btn) {
            var grid = btn.up('grid'),
                tds = Ext.get(grid.view.getNode(1)).query('td');
            
            // set colspan
            Ext.get(tds[0]).set({colspan: 2});            
            // remove next td
            Ext.get(tds[1]).destroy();
        }
    }]
}); 

[ankit_shahin]

Hi Redraid,
Thanks. Its great but I also need the value of *Email*, Here in our case we are deleting that *td*
Is it possible to retain the value of email along with expanding *col1*..

[notverycool]

if I want merge two rows into one row,what should I do?

[ateodorescu]

Hi ,

I have a requirement where I need to merge two adjacent cells in Grid in EXTJS4.
Right now I am wrapping the text values, But if one column value is exceeding Column width than it should not be wrapped instead use the width of next column and display text in continuation.

Anyone??

Hi,

What you need is to colspan a td cell. The Ext.view.TableChunker component is handling the grid template. This component doesn't allow you to colspan or rowspan cells. You should create a new chunker component in which you have to modify the template to make rowspan/colspan possible.
You should take a look at the mzPivotGrid component I wrote for Extjs 4.1.x. I had a similar problem with rowspan.

Here is the source of my component on Git: https://github.com/ateodorescu/mzExt...mzPivotGrid.js

Apply my method and you'll be able to colspan your cell.

Cheers,
Adrian