PDA

View Full Version : Mege two cells in grid - EXTJS4



ankit_shahin
14 Jun 2012, 2:05 AM
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
14 Jun 2012, 4:31 AM
Use template column -


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

scottmartin
14 Jun 2012, 9:49 AM
Have a look at convert:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert

Regards,
Scott.

ankit_shahin
15 Jun 2012, 3:21 AM
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
15 Jun 2012, 5:08 AM
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
19 Jun 2012, 1:54 AM
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
16 Aug 2012, 10:49 PM
if I want merge two rows into one row,what should I do?

ateodorescu
17 Aug 2012, 3:00 AM
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/blob/master/ux/grid/Ext.ux.grid.mzPivotGrid.js

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

Cheers,
Adrian