View Full Version : Button text blank: Sench Touch/Phonegap Contact Example

20 Aug 2011, 5:59 PM
I worked my way through the excellent tutorial (http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap) on creating a contact list app with Sencha Touch and Phone Gap, and when I try to add a button to the ContactDetails.js page, it works great the first time the details page shows, but the button is blank any time the page is shown after that.

I tried the same thing with the code from GitHub (https://github.com/senchalearn/phonegapcontacts) with the same results.

Here's where I added my (very simple) code.

items: [
{xtype: 'button', text: "Test button"},
'<tpl for="phoneNumbers">',
'<div class="field"><span class="label">{type}: </span><a href="tel:{value}">{value}</a></div>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span><a href="mailto:{value}">{value}</a></div>',
'<div class="field"><span class="label">Google: </span><a href="http://www.google.com/m/search?q=%22{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',
'<div class="field"><span class="label">Bing: </span><a href="http://m.bing.com/search?q=%22{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',

Any ideas why the button is blank, or more importantly how to fix it? I'm stumped.

22 Aug 2011, 5:30 AM
it looks like you are using an array of templates for each tpl config. dont use the [ ]'s and commas, if you want to create a multiline tpl like that, use +'s to concatenate it all.

22 Aug 2011, 5:34 AM
That's helpful, thank you. I'll concatenate and see if that makes a difference.

If this is the solution, the tutorial should be updated to reflect this. I'll let everyone know if this helps.

Thanks jjerome.

22 Aug 2011, 1:11 PM
Unfortunately concatenating the tpl didn't make any difference in the button rendering. Though it does appear that the page renders marginally faster (this may be my imagination)

Jiawei Yong
28 Dec 2011, 4:23 AM
Hi Joe,

Have the same problem as you. Any workaround/solution for this issue?

28 Dec 2011, 8:45 AM
No, sorry. I couldn't figure it out, and nobody was able to help, so I moved on to a different framework. :((

Jiawei Yong
14 Jan 2012, 4:53 AM
Hi Joe,

This is probably too late for you, but just for reference, think I found the problem.

If you have strictly followed the example and have this in your code

updateWithRecord: function(record) { Ext.each(this.items.items, function(item) { item.update(record.data); }); var toolbar = this.getDockedItems()[0]; toolbar.setTitle(record.get('givenName') + ' ' + record.get('familyName')); toolbar.getComponent('edit').record = record;}
What's going to happen is that your button will be among the items updated. And logically a button does not fit in with your data model so text goes missing. Maybe you should try iterating through items.items, except for items.items[0]