1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Vote Rating
    2
    Answers
    1
    tmcdonald is on a distinguished road

      0  

    Default Unanswered: Problems with XTemplate

    Unanswered: Problems with XTemplate


    I've been trying to implement a XTemplate similar to what is in the geocongress example. I thought I was following the example, however, I just can't seem to get the data and/template to populate the page.

    In my controller I do the following:
    Code:
    var data = {
        firstname: 'Tim',
        lastname: 'McDonald',
        photo: 'headshot.jpg'
    };
    
    var homepanel = Ext.getCmp('homepanel');
    homepanel.setData(data);
    
    splashScreen = Ext.getCmp('splashScreen');
    splashScreen.setActiveItem(Ext.getCmp('homepanel'));
    My homepanel view I have the following items::

    Code:
    items: [
       {
          xclass: 'MyApp.view.UserData'
       },
       {
          xtype: 'button',
          text:  'Directory'
       },
       {
          xtype: 'button',
          text:  'Goals'
       }
    ]
    The view that contains the XTemplate follows:

    Code:
    Ext.define('MyApp.view.UserData', {
        extend: 'Ext.Container',
        
        id: 'userData',
        
        config: {      
           tpl: Ext.create('Ext.XTemplate',
                '<span class="user-pic" style="background-image: url(resource/images/{photo})"></span>;',
                '<div class="user-name">',
                    '{firstname} {lastname}',
                '</div>'
           )           
        }
    });
    When I inspect the page it is showing the userData div, but all it contains is the following div:
    Code:
    <div class="x-inner" id="ext-element-39"></div>
    I did add a controller to test if the data is actually getting to the homepanel, with Ext.getCmp('homepanel').getData();, and it is.

    Thanks for any help.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,650
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You shouldn't use Ext.create in the config object like that. You should define the tpl as a string or an array of strings. That will be created into an xtemplate.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Vote Rating
    2
    Answers
    1
    tmcdonald is on a distinguished road

      0  

    Default


    I just realized my problem with this. I was populating the wrong page with the data. I should have used:

    Code:
    var userdatapage = Ext.getCmp('userData');
    userdatapage.setData(data);

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    Renfrew
    Posts
    74
    Vote Rating
    2
    Answers
    1
    tmcdonald is on a distinguished road

      0  

    Default


    I created it that way because I was using the geocongress example. Can you point me to an example that follows your suggestion?

Thread Participants: 1

Tags for this Thread