Hybrid View

  1. #1
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default Answered: Mixing tpl and items

    Answered: Mixing tpl and items


    I have a list detail view which works fine - it has a tpl and no items. I would like to add other components so I added an items array but now the tpl no longer shows. I have tried keeping the tpl in the main config and also adding it as a component to no avail (how does the data know where the appropriate tpl is located btw?) - I guess ideally I would like to be able to inject my list data anywhere on the page - i..e above and below and in between items. How is this done?

    Code:
    Ext.define("App.view.ListDetail", {
        extend: "Ext.Container",
        record: undefined,
        config: {
            layout: 'vbox',
            style: "padding: 5px;",
            scrollable: true,
            //  tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""), // this works fine if I have no items array
    
    
            //adding this causes above tpl to no longer render
            items: [
            {
                xtype: 'component',
                tpl: ["<div>", "name<br />verified star<br />avatar pic", "</div>"].join(""),  //this does nothing
            },
            {
                xtype: 'panel',
                //more stuff here
                  
            },
            ] 
        }
    });

  2. Add an updateData method to your parent view, and then use that to update the child view.

    Code:
    updateData: function(newData, oldData) {
      this.down('component').setData(newData);
    }
    That method will get called anytime the data config is changed in your view.

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Why not create another component which is just for the 'tpl', and then include that component as an item, wherever you need it, in App.view.ListDetail?
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default


    I tried - if you look at my code the first item has the tpl in there - but it doesn't render - I can only get the tpl to render if there is no items array present - perhaps I need to specify a different component type or something?

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    For the the configuration to do anything, you will also need to pass a data config: data
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #5
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Answers
    6
    Vote Rating
    2
    cyberwombat is on a distinguished road

      0  

    Default


    I don't know how to access the parent data.

    Code:
     config: {
            layout: 'vbox',
             scrollable: true,
           /* this works fine 
            tpl: {name},
            */
           items: [
                {
                    xtype: 'component',
                    data: <- WHAT GOES HERE? taking it off makes for a blank page, this.data makes nothing
                    tpl: '{name}',
             }

  7. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You would need to implement a function in the parent view which, when called, would get the child view where you want to update the t/l, and call the setters for the data config.

    this.down('component').setData({name: 'Hello'});
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 2