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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi