PDA

View Full Version : template in a list view



hominis
2 Dec 2010, 2:29 AM
Hi,

I'm using a listview in a part of my project and I want to have a template on a CELL, it's all right with a simple store but i've an issue with datastore.

In fact, when i load the page, datastore is not yet loaded and my template is empty.
So, my column is always empty.

How can I do to reload my template after the store loading...

This is a part of my code :


[...]
win.Entreprise.tplLibContact=function()
{
tpl = "";
for (i=0;i< win.Entreprise.tabDefStore['Contact']['objStore'].getCount(); i++)
{
tpl += "<tpl if=\"id_ContactEntreprise=='" +win.Entreprise.tabDefStore['Contact']['objStore'].getAt( i ).data.id_ContactEntreprise + "'\">" + win.Entreprise.tabDefStore['Contact']['objStore'].getAt( i ).data.nom_Prenom + "</tpl>";
}
//alert(tpl);
return tpl;
}
[...]

{
id: 'win.Entreprise.Entreprises_appel',
title: 'Appels',
forceLayout:true,
titleInit: 'Appels', // Première partie du titre de la grille (sera complété du nb de lignes dans l'événement dataChanged)
autoScroll:true,
layout:'fit',
items:
{
layout:'border',
bodyBorder: false,
defaults:
{
collapsible: false,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true
},
items:
[
{
width: 300,
region: 'east',
layout: 'fit',
items:
[
{
xtype: 'listview',
store: win.Entreprise.tabDefStore['AppelAffaire']['objStore'],
multiSelect: false,
columnResize: false,

columns: [
{
xtype: 'lvcolumn',
dataIndex: 'id_Antenne',
header: 'id_Antenne',
width: 0
},

{
xtype: 'lvcolumn',
dataIndex: 'code_Antenne',
header:'Affaire',
width: 0.80
},

{
xtype: 'lvbooleancolumn',
tpl : '<tpl if=\"concerne">X</tpl>',
dataIndex: 'concerne',
header:'Concerne',
width: 0.20
}
]
}

]
},
{
region: 'center',
layout: 'fit',
bbar:
[
{
text: 'Ajouter',
tooltip: 'Cliquer ici pour ajouter un nouvel élément',
id: 'win.Entreprise.btnAddEntrepriseAppels',
handler: function(){win.Entreprise.addRecordEntrepriseAppels()}, //what happens when user clicks on it
iconCls:'icon-add'
}, '-',
{
text: 'Supprimer',
tooltip: 'Supprimer les lignes sélectionnées',
id: 'win.Entreprise.btnDeleteEntrepriseAppels',
//function to call when user clicks on button
handler: function(){win.Entreprise.handleDeleteEntrepriseAppels()},
iconCls:'icon-remove'
}, '-',
{
text: 'Rafraîchir',
tooltip: 'Rafraîchir la liste',
handler: function(){win.Entreprise.refreshGridEntrepriseAppels()},
iconCls:'icon-refresh'
}
],
items:
[
{
xtype: 'listview',
id : 'win.Entreprise.lstAppels',
store: win.Entreprise.tabDefStore['Appel']['objStore'],
multiSelect: true,
columnResize: true,
listeners :
{
beforeclick : function(comp,index,node,e)
{
try{
if ( (index!=comp.getSelectedIndexes()[0]) && (win.Entreprise.tabDefStore['Appel']['objStore'].data.items[comp.getSelectedIndexes()[0]].data.nbAntennes!="0"))
{
Ext.fly(comp.getNodes()[comp.getSelectedIndexes()[0]]).removeClass("x-list-selected")
Ext.fly(comp.getNodes()[comp.getSelectedIndexes()[0]]).addClass("cellEntrepriseSurbrillance")
}
else
Ext.fly(selection[0]).removeClass("x-list-selected");
}catch (ex) {};
},
selectionchange : function(comp,selection)
{

Ext.fly(selection[0]).removeClass("cellEntrepriseSurbrillance")
Ext.fly(selection[0]).addClass("x-list-selected")

try{record=win.Entreprise.tabDefStore['Appel']['objStore'].data.items[selection[0].viewIndex]} catch (ex) {};

win.Entreprise.tabDefStore['AppelAffaire']['objStore'].removeAll();
win.Entreprise.tabDefStore['AppelAffaire']['objStore'].load({params:{id_AppelEntreprise:record.data.id_AppelEntreprise}});

win.Entreprise.id_SelectedEntreprisePoste = record.data.id_PosteEntreprise; // J'en profite pour le mémoriser (c'est une variable globale)
//win.Entreprise.selectedRowEntreprisePostes = rowIndex;//MODIF
},
dblclick : function (comp, index, node, e)
{
var record=win.Entreprise.tabDefStore['Appel']['objStore'].data.items[index];
win.Entreprise.winEntrepriseAppels.show(this); // Et affichage de la fenêtre
// ATTENTION : Même si winSuivi est MODALE, le code se poursuit après le show()
win.Entreprise.frmEntrepriseAppels.getForm().setValues(record.data); // Affectation des champs du record en cours dans les variables écran
}


},

tpl : new Ext.XTemplate('<tpl for="rows">',
'<dl class="x-grid3-row {[values.nbAntennes==0 ? "" : "cellEntrepriseSurbrillance"]}">',
'<tpl for="parent.columns">',
'<dt style="width:{[values.width*100]}%;text-align:{align};">',
'<em unselectable="on"<tpl if="cls"> class="{cls}"</tpl>>{[values.tpl.apply(parent)]}',
'</em></dt></tpl><div class="x-clear"></div></dl></tpl>'
),


reserveScrollOffset : true,

columns: [

{
xtype: 'lvcolumn',
dataIndex: 'id_AppelEntreprise',
header: "ID",
sortable: true,
width: 0,
},{
xtype: 'lvcolumn',
dataIndex: 'date_Appel',
header: "Date d'appel",
tpl : '{date_Appel:date(\"d/m/Y H:i\")}',
//renderer: renderDateTime,
sortable: false,
width: 0.15
},{
xtype: 'lvcolumn',
dataIndex: 'id_ContactEntreprise',
header: "Contact",
tpl : new Ext.XTemplate(win.Entreprise.tplLibContact()),
sortable: true,
width: 0.30
},{
xtype: 'lvcolumn',
dataIndex: 'resultat_Appel',
header: "Résultat appel",
tpl : '<tpl '+win.Entreprise.tplResultat_Appel()+'</tpl>',
sortable: true,
width: 0.20
},{
xtype: 'lvcolumn',
dataIndex: 'rappel_Date',
header: "Date de rappel",
tpl : '{rappel_Date:date(\"d/m/Y H:i\")}',
sortable: true,
width: 0.10
},{
xtype: 'lvcolumn',
dataIndex: 'commentaires',
header: "Commentaires",
sortable: true,
width: 0.25
}






]
}
//win.Entreprise.gridEntrepriseAppels
]
}


]


}


},
[...]
Thx,

hominis
3 Dec 2010, 2:51 AM
I tried to return the template into a variable and give the variable in the tpl property of the column "id_ContactEntreprise" but without any result...

Condor
3 Dec 2010, 3:19 AM
You need to make sure the Contact store is loaded before Appel store is loaded.

Use:

contactStore.load({
callback: function(){
appelStore.load();
}
});
(or even return data for both stores in one request)

hominis
3 Dec 2010, 4:15 AM
That's already the case...

{
[...]
win.Entreprise.tabDefStore['Contact']['objStore'].removeAll();
win.Entreprise.tabDefStore['Contact']['objStore'].load({params : {id_Entreprise:win.Entreprise.gridEntreprise.idSelected},callback:function()
{
win.Entreprise.refreshTitleTabEntrepriseContacts();
win.Entreprise.tabDefStore['Appel']['objStore'].removeAll();
win.Entreprise.tabDefStore['AppelAffaire']['objStore'].removeAll();
win.Entreprise.tabDefStore['Appel']['objStore'].load({params : {id_Entreprise:win.Entreprise.gridEntreprise.idSelected,lstAntenne:win.Entreprise.strIdAffaire},callback:function()
{
[...]

Condor
3 Dec 2010, 4:24 AM
The way tplLibContact is written, it also needs to be called after the Contact store is loaded.

I would recommend rewriting the tpl to something like:

win.Entreprise.tplLibContact = '<tpl for="win.Entreprise.tabDefStore[\'Contact\'][\'objStore\'].getRange()">' +
'<tpl if="parent.id_ContactEntreprise == values.data.id_ContactEntreprise">' +
'{values.data.nom_Prenom}' +
'</tpl>' +
'</tpl>';
so this requirement is no longer needed.

Disclaimer: Completely untested code!

hominis
3 Dec 2010, 4:34 AM
Well done ;) It's all right now !

Thx a lot