1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    India
    Posts
    10
    Vote Rating
    1
    ankit_shahin is on a distinguished road

      1  

    Default Unanswered: Mege two cells in grid - EXTJS4

    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??

  2. #2
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    43
    Answers
    44
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default

    Use template column -
    PHP Code:
    text'Full Name'xtype'templatecolumn'tpl'{firstname} {lastname}' 

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,263
    Vote Rating
    486
    Answers
    696
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      0  

    Default

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

    Regards,
    Scott.

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    India
    Posts
    10
    Vote Rating
    1
    ankit_shahin is on a distinguished road

      0  

    Default

    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
    ---------------------------------

  5. #5
    Sencha User
    Join Date
    May 2011
    Location
    Ukraine, Rivne
    Posts
    250
    Vote Rating
    43
    Answers
    44
    redraid has a spectacular aura about redraid has a spectacular aura about redraid has a spectacular aura about

      0  

    Default

    If I understand correctly:
    PHP Code:
    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',
        
    storeExt.data.StoreManager.lookup('simpsonsStore'),
        
    columns: [
            { 
    itemId'col1'header'Name',  dataIndex'name' },
            { 
    header'Email'dataIndex'email'flex},
            { 
    header'Phone'dataIndex'phone' }
        ],
        
    height200,
        
    width400,
        
    renderToExt.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({colspan2});            
                
    // remove next td
                
    Ext.get(tds[1]).destroy();
            }
        }]
    }); 

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    India
    Posts
    10
    Vote Rating
    1
    ankit_shahin is on a distinguished road

      0  

    Default

    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*..

  7. #7
    Sencha User notverycool's Avatar
    Join Date
    Aug 2012
    Posts
    4
    Vote Rating
    0
    notverycool is on a distinguished road

      0  

    Default

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

  8. #8
    Sencha - Ext JS Dev Team
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    103
    Vote Rating
    18
    Answers
    4
    ateodorescu will become famous soon enough ateodorescu will become famous soon enough

      0  

    Default

    Quote Originally Posted by ankit_shahin View Post
    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
    https://github.com/ateodorescu/mzExt
    http://www.mzsolutions.eu/

    Mz.pivot.Grid
    Ext.ux.form.plugin.HtmlEditor
    Ext.ux.form.field.CodeMirror
    Ext.ux.form.field.ImageFileField
    Ext.ux.form.field.UploadFileField