PDA

View Full Version : Extjs 4 ext.grid.panel hide column only hides Header



nobruds
28 Oct 2014, 11:28 AM
Hello,

I have a problem with my grid panel, When I choose to hide a column, only hides the column header and footer but the body values for that column still shows, to hide them I have to "refresh" the grid, one way of doing is Sorting It,

The Show Column event works fine, its just the Hide that has that problem.
Someone knows about that issue?

thanks a lot
Bruno

scottmartin
28 Oct 2014, 12:29 PM
See if this will help:

laste code in fiddle:
https://fiddle.sencha.com/#home



Ext.onReady(function() {

var store = 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": "homer@simpsons.com",
"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: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Change',
dataIndex: 'change'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

var colOne = grid.getColumnManager().getFirst();
colOne.setVisible(false); // hide();

});

nobruds
28 Oct 2014, 12:43 PM
Hello scottmartin (http://www.sencha.com/forum/member.php?165873-scottmartin)

Yes, your code works fine, as sencha demos, but on my page does not. I am using with asp.net


Ext.onReady(function () {

var store = new Ext.data.JsonStore({
autoLoad: false,
proxy: new Ext.data.HttpProxy({
url: '/Compromissadas/CarregarOperacoesCompromissadas',
method: 'POST',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'compromissadas'
}
}),
sorters: { property: 'NomeCliente', direction: 'ASC' },
pageSize: 10,
totalProperty: 'total',
fields: [
{ name: 'NomeCliente', type: 'string' },
{ name: 'GrupoEconomico', type: 'string' },
{ name: 'DataRetorno', type: 'date', dateFormat: 'MS' },
{ name: 'Papel', type: 'string' }
]
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Operações Compromissadas',
store: store, width: '100%', height: 300,
loadMask: true, border: true, stripeRows: true,
id: 'gdCompromissadas',
xtype: 'grid',
layout: 'fit',
region: 'center',
minSize: 100, maxSize: 150, margins: '5 5 0 5',


features: [
Ext.create('Ext.ux.grid.feature.MultiGroupingSummary', {
id: 'group',
hideGroupedHeader: false,
enableGroupingMenu: true,
startCollapsed: false,
summaryRowPosition: 'outside'
}),
{
ftype: 'summary',
dock: 'bottom'
}
],


viewConfig: {
emptyText: 'Nenhum item encontrado.',
deferEmptyText: false
},


columns: [
{
id: 'NomeCliente', header: 'Nome Cliente', dataIndex: 'NomeCliente', width: 250,
summaryType: 'count',
summaryRenderer: function (value, summaryData, dataIndex) {
if (value > 0)
return ((value > 1) ? '(' + value + ' Operações)' : '(1 Operação)');
else
return '';
}
},
{ id: 'GrupoEconomico', dataIndex: 'GrupoEconomico', header: 'Grupo Econômico', width: 150 },
{
id: 'DataRetorno',
dataIndex: 'DataRetorno',
header: 'Data Retorno',
width: 80,
renderer: Ext.util.Format.dateRenderer('d/m/Y')
},
{ dataIndex: 'Papel', header: 'Debênture', width: 165 }
]


});

var myPanel = Ext.create('Ext.TabPanel', {
width: '100%',
height: 650,
renderTo: 'divGridCompromissadas',
id: 'panelCompromissadas',
title: 'Compromissadas',
activeTab: 0,

//Criação das tabs do painel
items: [{
title: 'Consulta de Operações',
bodyStyle: 'padding:5px;',
layout: 'border',


//Criação do form de pesquisa
items: [{
title: 'Critérios de seleção - Filtro',
xtype: 'form',
anchor: '100%',
id: 'formOperacoes',
region: 'north',
minSize: 100, maxSize: 160,
margins: '5 5 0 5', bodyStyle: 'padding:5px;',
collapsible: true,


//Criação dos campos de Filtro
items: [
{
xtype: 'container',
layout: 'hbox',
pack: 'start',
align: 'stretch',
items: [
{
xtype: 'datefield',
fieldLabel: 'Data Posição',
id: 'dataPosicao',
name: 'dataPosicao',
format: 'd/m/Y',
width: 180,
labelWidth: 80,
margins: '0 5 0 5',
value: new Date(),
msgTarget: 'under',
invalidText: 'Data inválida'
}]
}],


buttons: [
{
id: 'btnPesquisar',
text: 'Pesquisar',
scope: this,
handler: function () {
var data = Ext.getCmp('dataPosicao').getSubmitValue();
myPanel.setActiveTab(1);


var form = Ext.getCmp('formOperacoes').getForm();
//if (form.isValid()) {
var formFieldsJson = Ext.encode(form.getValues());


store.load(
{
params:
{
page: 1,
limit: 10,
pDataPosicao: data,
pCodGrupoPapel: 0,
pCodPapel: 0,
pFormFields: formFieldsJson
}
});
}
}]
},
grid


]
}]
});

Ext.EventManager.onWindowResize(function () {
myPanel.updateLayout();
});

});

scottmartin
28 Oct 2014, 2:03 PM
Where is your code to hide your column?

nobruds
29 Oct 2014, 4:23 AM
I don't have any. by default all my columns should show.

But I have tried that, I hid one column and was ok, them I showed that column, again no problem, but when I tried to hid again, only the Header was hidden.

I thinks its because my grid is inside a Tabpanel, then panel ? or because I am using the mult-grouping plugin.

scottmartin
29 Oct 2014, 5:47 AM
So you are just facing the problem when hiding from grid header and not in code?

see if this is close to what you have.



Ext.onReady(function() {

var store = 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": "homer@simpsons.com",
"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: store,

region: 'center',

columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Change',
dataIndex: 'change'
}]

});

var form = Ext.create('Ext.form.Panel', {
title: 'Form',

height: 100,
region: 'north',

html: 'This is a form'
});

var container = Ext.create('Ext.container.Container', {
title: 'Grid',
layout: 'border',
items: [grid, form]
});

Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 600,

items: [container, { title: 'ATab' }]
});

});


Also, I am wondering if your issues may be related to grid feature.

nobruds
30 Oct 2014, 4:56 AM
Hi,


Yes, its like that.

See on my image. When I go to hide the "Papel" column, only header is hid, see that the "Papel" values continue under "Carteira" column, But if I Order by "Carteira", then the values disapears.


50859

I am gonna remove those features to see if its the issue, the problem is that I need them haha.

Thanks

scottmartin
30 Oct 2014, 7:55 AM
I am gonna remove those features to see if its the issue, the problem is that I need them haha.

That is fine, just trying to identify the problem since I cannot reproduce this.

If you could update my example to show the problem, that would be helpful since I cannot run your code.

nobruds
30 Oct 2014, 10:13 AM
Well, I found that the problem is with the Ext.ux.grid.feature.MultiGroupingSummary,

I removed that and worked. I really need that plugin, it the only one that I found that has multi-grouping.

Well, I will try to workaround that..

Big Thanks for the help