1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    11
    Vote Rating
    1
    nocturn is on a distinguished road

      1  

    Default Unanswered: Hiding grid columns change height of rows

    Unanswered: Hiding grid columns change height of rows


    Hi
    I have quite annoying problem with hiding grid columns dynamically. After I hide columns (with long text in cells), the height of grid rows dramatically increases.
    Before hide
    beforehide.jpg
    and after hide operation
    afterhide.jpg
    As You can see first row is definitely too high. Probably the reason of that behavior is the fact, that I use text wrap in grid cells.
    Code:
    .x-grid-cell-inner { white-space: normal; }
    Is there any efficient way to make grid rows, not to change their height after hiding columns (and using textwrap ) ?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    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


    This seems to work fine:

    Code:
    Ext.onReady(function(){
     
        Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'change'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "change":100  },
                { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20  },
                { 'name': 'Homer', "email":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum",  "change":23   },
                { 'name': 'Marge', "email":"marge@simpsons.com", "change":-11   }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
                { header: 'Name',  dataIndex: 'name', editor: { xtype: 'textfield' } },
                { header: 'Email', dataIndex: 'email', flex: 1, tdCls: 'wrapText' },
                { header: 'Change', dataIndex: 'change', editor: { xtype: 'textfield' } }
            ],
            height: 500,
            width: 400,
            renderTo: Ext.getBody(),
        });
        
        grid.columns[1].hide(); // quick hide
    });
    css
    Code:
    .wrapText .x-grid-cell-inner {
        white-space: normal;
    }​
    Scott.​
    Last edited by scottmartin; 11 Sep 2012 at 2:36 PM. Reason: added css

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    11
    Vote Rating
    1
    nocturn is on a distinguished road

      0  

    Default


    Hi, thanks for answer, however it't not working. Here are the screens
    before hide
    before.jpg
    and after hide
    after.jpg
    Checked on Chrome 21.0

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    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


    I see what you are talking about now from the screen .. missed that one ... you can use:

    Code:
        grid.columns[1].on('hide', function(column){
            column.tdCls = null;
        });
    Reverse for 'show'

    Scott.

Thread Participants: 1

Tags for this Thread