CODEWITHSUNDEEP
cssextjshidden
G. Goncharov
G. Goncharov

Reputation: 302

ExtJS: the magic of hidden columns

I wonder how ExtJS makes columns hidden without any visible CSS changes!hidden column ant not hidden

The problem that I had - I can't set the CSS rule to hide children icon in that hidden column. F.e. if the hidden td had class 'hidden', I can use something like that:

td.hidden img {display:none;}

But in this case I can do it only in renderer with manipulating grid.columns[col].isHidden().

renderer: function(value,td,record,row,col,store,view) {
    return grid.columns[col].isHidden() ? '' : someFunctionToRenderColumn();
},

It's ok, but then if I show hidden column it will not refresh grid and shows empty column. Of course I can add one more event for show/hide that column, but it is so difficult! Has it any simple way?

Upvotes: 0

Views: 1225

Answers (2)

rixo
rixo

Reputation: 25011

It gives them a width of 0px:

<colgroup>
    <col class="x-grid-cell-gridcolumn-1023" style="width: 0px;">
</colgroup>

... and that should hide your img too. Except if you've given them an absolute positionning or something. You should try to position your img using float, margin and padding. Or you will have to toggle the 'hidden' class yourself using the hide and show event of the column.

Upvotes: 1

Mr Lister
Mr Lister

Reputation: 46589

You can hide columns by targeting the corresponding col element. No need to put classes on each of the individual tds.

Here's a fiddle I made earlier: http://jsfiddle.net/MrLister/MupLH/
which has

<table>
  <col><col class="invisible"><col>
  ...

and the CSS:

.invisible {visibility:collapse}

But you don't even need a class; you can also use col:nth-child(2) if you know the column number.

Upvotes: 0

Related Questions