PDA

View Full Version : substr() on itemTpl of LIST



headkit
11 Nov 2011, 6:54 AM
hi there!

I wonder how I could shorten long names inside a list object in sencha touch when my template ist build like


itemTpl: '{firstName} {lastName}',


I need something like



itemTpl: ('{firstName} {lastName}').substr(0,16) + '...',

thnx!

mitchellsimoens
11 Nov 2011, 6:23 PM
Two ways... In an XTemplate you can specify methods to be called within the template string:


new Ext.XTemplate(
'<tpl for=".">',
'<div>{[this.shortenName(values)]}</div>',
'</tpl>',
{
shortenName: function(values) {
return values.firstName.substr(0, 5);
}
}
);

Or I'm sure you can do this but have never tried this myself:


new Ext.XTemplate(
'<tpl for=".">',
'<div>{[values.firstName.substr(0, 5)]}</div>',
'</tpl>'
);

headkit
14 Nov 2011, 2:03 AM
looks promissing, thanx!
but with


new Ext.XTemplate(
'<tpl for=".">',
'<div>{[this.shortenName(values)]}</div>',
'</tpl>',
{
shortenName: function(values) {
return values.firstName.substr(0, 5);
}
}
);

I get an undefined:


TypeError: 'undefined' is not a function (evaluating 'this.shortenName(values)')

mitchellsimoens
14 Nov 2011, 7:08 AM
Just tried this:


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>{[this.shortenName(values)]}</div>',
'</tpl>',
{
shortenName: function(values) {
return values.firstName.substr(0, 5);
}
}
);

console.log(tpl.apply({
firstName : 'Mitchell'
}));

and it consoled out:


<div>Mitch</div>

headkit
14 Nov 2011, 7:10 AM
ah, ok. I used


{
xtype: 'list',
...
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>{[this.shortenName(values)]}</div>',
'</tpl>',
{
shortenName: function(values) {
return values.firstName.substr(0, 5);
}
}
),
...}

headkit
14 Nov 2011, 7:54 AM
no, my problem is that I use


plugins: [new app.plugins.editableList()], // by WhiteFox AS

which seems to make the trouble...

headkit
14 Nov 2011, 8:39 AM
ok, that was a hard one, but I made it!