PDA

View Full Version : Filling Ext.grid.Pane on accordion beforeexpand event



Aubin Mahé
19 Oct 2013, 9:01 AM
Hi,

Application uses an accordion composed of seven tables loaded on the fly.
The view rendering is correct but the behavior not, even when store.load is called the views remains empty.

I need some advices to fill the grid views when accordion panels are expanded.

Here is the Accordion:


Ext.define( 'LFinanceCRM.view.ProspectsTitledPanes', {
extend : 'Ext.Panel',
alias : 'widget.prospects-accordion',
requires : [
'Ext.layout.container.Accordion',
'LFinanceCRM.view.ProspectsTable'
],
region : 'west',
margins : '5 0 5 5',
split : true,
width : 450,
maxHeight : 640,
layout : 'accordion',
constructor : function() {
this.callSuper( arguments );
console.log('new '+this.self.getName());
this.items.add( new LFinanceCRM.view.ProspectsTable( 'NonLues' , 'Non lues' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'Demandes', 'Demandes' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'AAppeler', 'A appeler' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'Dpc' , 'Demande de pièces' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'EnBanque', 'En banque' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'Editees' , 'Offres éditées' ));
this.items.add( new LFinanceCRM.view.ProspectsTable( 'Refusees', 'Refusées' ));
}
});

The view LFinanceCRM.view.ProspectsTable is as follow:


Ext.define( 'LFinanceCRM.view.ProspectsTable', {
extend : 'Ext.grid.Panel',
alias : 'widget.prospects-table',
requires : [
'LFinanceCRM.store.Prospects'
],
hideCollapseTool : true,
columnLines : true,
listeners : {
'beforeexpand': function( panel, animated ) {
console.log('beforeexpand ' + panel.store.storeId );
panel.store.loadData([
['ADIABU', 4, 'franck' , 'Xxxxx' , '2013-09-12 00:00:00', 92, 'secure.assurance-de-pret-online.com'],
['ADYLAX', 4, 'DJELLOUL' , 'Yyyyy', '2013-09-10 00:00:00', 95, 'www.creditmust.com'],
['AECKEH', 4, 'JEAN-MICHEL', 'Zzzzz' , '2013-10-01 00:00:00', 95, 'secure.assurance-de-pret-online.com']
]);
}
},
constructor : function( storeId, title ) {
this.callSuper( arguments );
console.log('new '+this.self.getName());
this.store = Ext.create( 'LFinanceCRM.store.Prospects', storeId );
this.title = title;
},
columns : [{
text : 'Prénom',
width : 70,
sortable : false,
dataIndex: 'prenom'
},{
text : 'Nom',
width : 70,
sortable : true,
dataIndex: 'nom'
},{
text : 'Date',
width : 42,
sortable : true,
renderer : Ext.util.Format.dateRenderer('d/m'),
dataIndex: 'date'
},{
text : 'Département',
width : 22,
sortable : true,
dataIndex: 'departement'
},{
text : 'Origine',
width : 200,
sortable : true,
dataIndex: 'origine'
}],
viewConfig : {
stripeRows : true
}
});

Here is the store :


Ext.define( 'LFinanceCRM.store.Prospects', {
extend : 'Ext.data.ArrayStore',
fields : [
{name: 'id'},
{name: 'etape', type: 'int'},
{name: 'prenom'},
{name: 'nom'},
{name: 'date', type: 'date', dateFormat: 'Y-m-d H:i:s'},
{name: 'departement', type: 'int' },
{name: 'origine'}
],
buffered : false,
autoLoad : true,
constructor : function( id ){
this.callParent(arguments);
console.log( 'new ' + this.self.getName() + '( ' + id + ' )' );//+ new Error().stack );
this.storeId = id;
}
});

slemmon
25 Oct 2013, 9:35 PM
Are you loading the store from a server?
Can you share an example of the data you're loading to the store?

Aubin Mahé
26 Oct 2013, 2:16 AM
The store content is set from constant object located in the code: see LFinanceCRM.view.ProspectsTable, event 'beforeexpand'.

slemmon
26 Oct 2013, 7:35 AM
Oh, I see. I missed that before.

I'd stay away from callSuper in most situations. For components I'd use the initComponent method and callParent(arguments) instead. Non-components like stores will still use the constructor.

In this case using callSuper skipped necessary class implementation in immediate parent's constructor.

Here is your example using callParent in the grid definition instead of callSuper:

17k

Aubin Mahé
26 Oct 2013, 12:30 PM
Thank you very much!
If you ask me "do you know callSuper?", I certainly answer no...
I've do a copy paste from a web site, perhaps Sencha, perhaps not.
What is the difference between callParent and callSuper ?
I'm a Java programmer, new to JavaScript...

slemmon
26 Oct 2013, 9:30 PM
The callParent() method will call the method of the parent class that you're overriding. The callSuper() method will skip calling the method of the parent class and instead call the method on the class the parent class inherits from. It will be rather uncommon that you would need to use callSuper(). Using callParent(), however, will be very, very common.

Welcome to ExtJS!