1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    8
    Vote Rating
    1
    ankit_shahin is on a distinguished road

      1  

    Default Unanswered: Mege two cells in grid - EXTJS4

    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
    42
    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,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Regards,
    Scott.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    8
    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
    42
    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 User
    Join Date
    Nov 2011
    Location
    India
    Posts
    8
    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 Premium Member
    Join Date
    Dec 2009
    Location
    Iasi, Romania
    Posts
    90
    Vote Rating
    15
    Answers
    2
    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