PDA

View Full Version : Some problems with hidden panel that doesn't show again on show() call



sencha-dev2
26 Nov 2012, 8:11 AM
Hi, I have a screen like this :

40350

I use the toolbar on the left to navigate between several panels in the same container. But I have one which shows only on firs call, then doesn't show again. I use a show/hide system to navigate. Can you help me with this problem ? Here's my code :



afficheTableAbsences: function(btn) {
if(!btn.pressed) btn.toggle();
var obj = btn.up().up();
var idBeneficiaire = obj.id.substring(16);
var ctn = obj.down('container[name="ctnBeneficiaire"]');
Infologis.fonctions.Fonctions.masquerElements(ctn);
if(Ext.ComponentQuery.query('panel[id="absencesBeneficiaire'+idBeneficiaire+'"]')[0] == undefined) {
var widget = Ext.widget('absencesBeneficiaire');
widget.id = 'absencesBeneficiaire'+idBeneficiaire;
ctn.add(widget);
}
else
{
Ext.ComponentQuery.query('panel[id="absencesBeneficiaire'+idBeneficiaire+'"]')[0].setVisible(true);
console.log(ctn);
}
}


This is the function I call upon to show the defectuous screen.

Here's the screen definition :



Ext.define('Infologis.view.Beneficiaire.Absences', {
extend: 'Ext.panel.Panel',
alias: 'widget.absencesBeneficiaire',
closable: false,
layout: 'fit',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
items: [
{
xtype: 'gridpanel',
name: 'tableauAbsences'+me.id,
store: Ext.create('Infologis.store.Absence'),
listeners: {
afterrender: {
fn: function(grid) {
grid.store.load(
{
params: {
'idBeneficiaire': me.id.substring(20)
},
callback: function() {
grid.store.load(
{
params: {
'idBeneficiaire': me.id.substring(20)
}
}
);
}
}
);
}
}
},
columns: [
{
xtype: 'gridcolumn',
name: 'idAbsence',
dataIndex: 'idAbsence',
hidden: true,
flex: 1
},
{
xtype: 'gridcolumn',
name: 'idBeneficiaire',
dataIndex: 'idBeneficiaire',
hidden: true,
text: 'Identifiant du bénéficiaire',
flex: 1
},
{
xtype: 'gridcolumn',
name: 'libelleMotifAbsence',
dataIndex: 'libelleMotifAbsence',
text: 'Motif',
flex: 1,
menuDisabled: true,
sortable: false,
hideable: false
},
{
xtype: 'datecolumn',
name: 'dateDebutAbsence',
dataIndex: 'dateDebutAbsence',
text: 'Date de début',
flex: 1,
format: 'd/m/Y',
maxWidth: 150,
menuDisabled: true,
sortable: false,
hideable: false
},
{
xtype: 'datecolumn',
name: 'dateFinAbsence',
dataIndex: 'dateFinAbsence',
text: 'Date de fin',
maxWidth: 150,
format: 'd/m/Y',
flex: 1,
menuDisabled: true,
sortable: false,
hideable: false
}
]
}
]
}
]
});
me.callParent(arguments);
}
});


Then here's the one who shows each time it's called :



Ext.define('Infologis.view.Beneficiaire.EtatCivil.etatCivil', {
extend: 'Ext.form.Panel',
alias:'widget.etatCivilBeneficiaire',
autoScroll: true,
bodyPadding: 10,
overlapHeader: false,
preventHeader: true,
title: '',
layout: {
align: 'stretch',
type: 'vbox'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'fieldcontainer',
padding: 20,
items: [
{
xtype: 'formulaireECIndividu'
},
{
xtype: 'formulaireRIB'
}
]
},
{
xtype: 'fieldcontainer',
maxWidth: 50,
flex: 1
},
{
xtype: 'fieldcontainer',
layout: 'vbox',
padding: 20,
items: [
{
xtype: 'formulaireAdresse',
discrim: 'adresseECIndividu'
},
{
xtype: 'formulaireTel2',
discrim: 'tableauTelephoneECIndividu'
},
{
xtype: 'formulaireMail'
}
]
}

]
});


me.callParent(arguments);
}


});


And this is how I call upon it :



loadEtatCivilOnglet: function(btn)
{
if(!btn.pressed) btn.toggle();
var widget = btn.up().up();
var idBenef= widget.id.substr(16);
var ctnBeneficiaire = widget.down('container[name="ctnBeneficiaire"]');
Infologis.fonctions.Fonctions.masquerElements(ctnBeneficiaire);
var etatCivilBenef = Ext.widget('etatCivilBeneficiaire');
etatCivilBenef.id = 'etatCivilBenef'+idBenef;

var parent= Ext.getCmp('treePrincipal').getSelectionModel().getSelection()[0];
var donneesNomin = parent.parentNode.data.text.split(' ');
var nom = donneesNomin[0];
var pren = donneesNomin[1];


//Chargement des donn?es
Ext.Ajax.request({
url: 'beneficiaire/get-e-c',
timeout: 3000,
method: 'POST',
params:{
'idBenef': idBenef
},
success: function(xhr) {
var res=Ext.JSON.decode(xhr.responseText);
res = res[0];
res.NIRIndividu = Infologis.fonctions.Fonctions.formaterNIRpourAffichage(res.NIRIndividu);
etatCivilBenef.getForm().setValues(res);

var grid = Ext.ComponentQuery.query('fieldset[discrim="tableauTelephoneECIndividu"] gridpanel[name="coordTel"]')[0];
grid.store.discrim = "storeTelECIndividu"+res.tiers;
grid.store.load({params: res.tiers});
grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] form[name="coordPostales"] gridpanel[name="hiddengridATDate"]')[0];
grid.store.load({params: res.tiers});

var cbo = etatCivilBenef.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCivilite"]');
cbo.select(cbo.store.findRecord('idCivilite', res.idCivilite));
cbo = etatCivilBenef.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCommuneNaissance"]');
var rec = cbo.getStore().data.items[cbo.store.findExact('idCommune', res.idCommuneNaissance)];
cbo.select(rec);
//cbo.fireEvent('select', cbo, rec);

grid.store.discrim = 'storeHiddenATDate';

res = etatCivilBenef.getValues();
ctnBeneficiaire.add(etatCivilBenef);
console.log(ctnBeneficiaire);
}
});


I just can't find out, so please help...

mitchellsimoens
28 Nov 2012, 12:11 PM
You are trying to switch between tabs, is that what you are wanting to do?

sencha-dev2
30 Nov 2012, 6:19 AM
That's correct :). Imanaged to do it by calling the widgets again, though. It's not clean, but I think I can't do much more... Excepted if you have kind of an idea ?

mitchellsimoens
30 Nov 2012, 7:10 AM
You should be using setActiveTab on the tab panel

sencha-dev2
30 Nov 2012, 7:30 AM
I'm using a toolbar on the left, switching betweentabs is easy, thanks to the method you quoted, but I navigate thanks to buttons in the panel. This panel shows and hide containers inside itself. That's why I didn't use this.

sencha-dev2
19 Dec 2012, 7:26 AM
I finally found out. Must destroy the old instance to call a new one. Simple, but may be heavy...