1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default Hide column doesn't work

    Hide column doesn't work


    Bonjour,

    How to hide columns dynamically ?

    this code doesn't work
    Code:
    var cols = grid.columns;
    cols.each(function(column){
         column.hide();
    }
    ==> Error : column.hide is not a function
    In API doc, the function hide() exists for column.


    this code has no error but the columns are still visible
    Code:
    var cols = grid.columns;
    cols.each(function(column){
              column.hidden = true;
    }

    EBS

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    EBS,

    Can you try:

    Code:
    var cols = grid.columns;
    cols.each(function(column){
              column.setVisible(false);
    }

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default


    Error : column.setVisible is not a function

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    EBS,

    Just noticed the issue:

    You need to use forEach, not each. See below:

    Code:
    var cols = grid.columns;
    cols.forEach(function(column){
              column.hide();
    }

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default


    each works too (Ext.Array.each);
    but not the function hide()

  6. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    41
    Vote Rating
    0
    karnak is on a distinguished road

      0  

    Default


    very strange... All works fine for me with the code I posted and all of my grid columns disappear.

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default


    perhaps because my grid is in a tabpanel...i'll try without tabpanel

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default


    I found the problem and I think it is a bug.

    if at least one column of the grid has the property "locked: true", I have an error "Error : column.hide is not a function"
    I feel that setting this property, the object is no longer considered a column because all methods cause an error (getindex (), hide (), show (), etc ...)

    Example:
    with the property "locked: true" for the column "Total", an error occurs (getIndex is not a function);
    without this property, the columns '01' and '02' aren't visible (OK)
    Code:
    var myData = [
        ['1', 'Player1', 10, 20, 15, 45],
        ['2', 'Player2', 20, 10, 10, 40],
        ['3', 'Player3', 30, 10, 30, 70],
        ['4', 'Player4', 10, 30, 25, 65]
    ];
    Ext.regModel('cm', {
            fields: [
            {name: 'idJoueur', mapping: 'idJoueur'},
            {name: 'joueur', mapping: 'joueur'},
            {name: 'J01', mapping: 'J01'},
            {name: 'J02', mapping: 'J02'},
            {name: 'J03', mapping: 'J03'},
            {name: 'total', mapping: 'total'}
            ]
    });
    var store = new Ext.data.Store({
        model: 'cm',
        data: myData
    });
    var grid = new Ext.grid.GridPanel({
        title : 'TEST',
        store: store,
        columnLines: true,
        columns: [
            { header: "Joueur", dataIndex: 'joueur',width: 150, menuDisabled:true, sortable:false,draggable:false,fixed:true},
            { header: "01", dataIndex: 'J01',width: 45, align: 'right', menuDisabled:true, sortable:false,draggable:false,fixed:true},
            { header: "02", dataIndex: 'J02',width: 45, align: 'right', menuDisabled:true, sortable:false,draggable:false,fixed:true},
            { header: "03", dataIndex: 'J03',width: 45, align: 'right', menuDisabled:true, sortable:false,draggable:false,fixed:true},
            { header: "Total", dataIndex: 'total',width: 60, align: 'right', locked:true,menuDisabled:true, sortable:false,draggable:false,fixed:true}
        ],
        id: 'result',
        border:true,
        height:548,
        renderTo: 'affichagePage',
        listeners:{
            afterrender: function(grid){
                var cols = grid.columns;
                cols.forEach(function(column){
                    var indexCol = column.getIndex();
                    if(indexCol == 1 || indexCol == 2){
                        column.hide();
                    }
                });        
            }
        }
    });

  9. #9
    Sencha User
    Join Date
    Nov 2010
    Location
    France
    Posts
    37
    Vote Rating
    2
    EBS is on a distinguished road

      0  

    Default


    This bug is still present on 4.0.2-rc3

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Posts
    63
    Vote Rating
    0
    joelchu is on a distinguished road

      0  

    Default


    same problem here but a little bit different error.

    I tried - column.hide() - then throw an exception "empty object has no method getWidth() (29620 in the ext-with-comment.js

    it just oneliner this.el.getWidth() ...

    Try setVisible - gone down two loop then hit the same problem.

    Have to add - my grid is a tree grid panel (with no lock configuration) anyone got a solution? Thanks.

    UPDATE

    To hide the column - I did
    PHP Code:
    column.hidden true
    and it works (disappear). Also able to set the header text

    PHP Code:
    column.setText(new text); 
    but everything to do with width are f**k ... can not do hide(), setVisible(), setWidth()

    The last one was problematic - after showing hidden column or hide them, I want to able to refit all the columns. But now I couldn't set the width - some column got push over of the view ...

    did you file this as bug report?

Similar Threads

  1. Replies: 5
    Last Post: 7 Jun 2012, 12:46 AM
  2. Replies: 1
    Last Post: 7 Apr 2011, 3:00 PM
  3. Replies: 1
    Last Post: 12 Nov 2010, 3:00 AM
  4. Problem with tab. Hide/unhide a tab doesn't work on IE
    By marxan in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 7 Sep 2010, 7:38 AM
  5. Replies: 3
    Last Post: 16 May 2009, 5:48 AM

Thread Participants: 4