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,910
    Answers
    655
    Vote Rating
    443
    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,910
    Answers
    655
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."