Button text blank: Sench Touch/Phonegap Contact Example

[JoeKueser]

I worked my way through the excellent tutorial 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 with the same results.

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

    items: [
        {xtype: 'button', text: "Test button"},
        {tpl:[
'<h4>Phone</h4>',
'<tpl for="phoneNumbers">',
'<div class="field"><span class="label">{type}: </span><a href="tel:{value}">{value}</a></div>',
            '</tpl>'
        ]},
        {tpl:[
'<h4>Email</h4>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span><a href="mailto:{value}">{value}</a></div>',
            '</tpl>'
        ]},
        {tpl:[
'<h4>Search</h4>',
'<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.

[jjerome]

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.

[JoeKueser]

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.

[JoeKueser]

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]

Hi Joe,

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

[JoeK]

No, sorry. I couldn't figure it out, and nobody was able to help, so I moved on to a different framework.

[Jiawei Yong]

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]