Results 1 to 7 of 7

Thread: Button text blank: Sench Touch/Phonegap Contact Example

  1. #1

    Question Button text blank: Sench Touch/Phonegap Contact Example

    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 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="{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',
    '<div class="field"><span class="label">Bing: </span><a href="{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',
    Any ideas why the button is blank, or more importantly how to fix it? I'm stumped.

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    New Jersey, USA


    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.

  3. #3


    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.

  4. #4


    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)

  5. #5

    Default Any solution?

    Hi Joe,

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

  6. #6
    Sencha User
    Join Date
    Mar 2007


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

  7. #7


    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(; }); 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]

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts