-
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
-
EBS,
Can you try:
Code:
var cols = grid.columns;
cols.each(function(column){
column.setVisible(false);
}
-
Error : column.setVisible is not a function
:s
-
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();
}
-
each works too (Ext.Array.each);
but not the function hide()
-
very strange... All works fine for me with the code I posted and all of my grid columns disappear.
-
perhaps because my grid is in a tabpanel...i'll try without tabpanel
-
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();
}
});
}
}
});
-
This bug is still present on 4.0.2-rc3 :(
-
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?