PDA

View Full Version : Template for nestedlist items



TDeBailleul
27 Feb 2012, 10:21 AM
I have a nested list in my application :



this.nestedList = new Ext.NestedList({
store: app.stores.Document,
cls:'list-espace',
displayField : 'text',
toolbar: {
ui:'dark',
cls:'document-list-toolbar',
}
title:'/',
scope : this,
getItemTextTpl: function(node){
return '<table height="40px" border="0"><tr><td style="vertical-align:middle;padding-left:5px;padding-right:5px;"><div class="nestedDefault {iconCls}"></div></td><td class="file-name" style="vertical-align:middle">{text}</td></tr></table>';
}
});


1 - I would like to know if using the getItemTextTpl is the good way of setting the template of the nested list items (I've tried with tpl: but it doesn't work)
2 - I also need to change that template when I click a button, does someone could tell me how to do that ?
Thanks you

mitchellsimoens
28 Feb 2012, 9:13 AM
getItemTextTpl is the proper way to configure the template that each child list uses. To change the template after a list is created you have to change the tpl and refresh the list causing it to redraw itself.

TDeBailleul
29 Feb 2012, 6:19 AM
Ok, I get it. But how can I get the active list of the nestedList to refresh it ?

mitchellsimoens
29 Feb 2012, 6:24 AM
All NestedList is is a Container using card layout so the active list is the active item.

TDeBailleul
29 Feb 2012, 6:39 AM
I think what I did is right but it still doesn't work, could you take a quick look at it

I have a button that do this :



handler : function(){
var tb = this.nestedList.getDockedComponent('documentToolsToolbar');
if(tb.isHidden()){
app.documentTpl = 1;
this.nestedList.getItemTextTpl();
this.nestedList.getActiveItem().refresh();
tb.show();
}
else{
app.documentTpl = 0;
this.nestedList.getItemTextTpl();
this.nestedList.getActiveItem().refresh();
tb.hide();
}

this.nestedList.doLayout();
this.nestedList.doComponentLayout();
}


And then I have this in my nestedList :



getItemTextTpl: function(node){
var tpl = '<table height="40px" border="0">'+
'<tr>'+
'<td style="vertical-align:middle;padding-left:5px;padding-right:5px;">'+
'<div class="nestedDefault {iconCls}"></div>'+
'</td>'+
'<td class="file-name" style="vertical-align:middle">';

if(app.documentTpl == 1){
tpl += 'TPL1 : {text}';
}else{
tpl += 'TPL0 {text}';
}

tpl += '</td></tr></table>';
console.log("nestedlist : "+this.id);
return tpl;
}


What's wrong with this code ?

mitchellsimoens
29 Feb 2012, 6:44 AM
You're not doing anything when you execute getItemTextTpl.

TDeBailleul
29 Feb 2012, 6:48 AM
So how should I change the tpl of the nestedlist items then ?