Results 1 to 8 of 8

Thread: Mege two cells in grid - EXTJS4

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Location
    India
    Posts
    10
    Vote Rating
    2
      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
    Answers
    44
    Vote Rating
    44
      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,388
    Answers
    716
    Vote Rating
    499
      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
    2
      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
    Answers
    44
    Vote Rating
    44
      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
    2
      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
      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
    117
    Answers
    6
    Vote Rating
    22
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •