How to dynamically create xtype templates in Sencha Touch

Question

So I have a view, and a controller linked to that view, and I would like to dynamically assign values to a xtype item in the view via store.

So for example, I would like dynamically setup layouts (please have a look at the proveded code) and urls

    items: [
        {
            itemId: 'nav_home',
            id: 'homeView',
            layout: "{layout}",
            items: [{
              xtype: 'articlelist',
              id: 'latestNews',
              url: {url},
            }
        ],
    },

Could anyone lead me how to approach this task?

Thanks

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-05-18T12:31:08

You can use initialize function to render components based on some condition. Here is an example :

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Container',
    alias : 'widget.myview',
    config: {
        items   : [],
        mylayout: null
    },
    initialize : function(){
        var me = this;
        if(me.config.mylayout == 'horizontal'){
            me.add({
                xtype   : 'panel',
                layout  : 'hbox',
                items   : [{
                    xtype   : 'panel',
                    html    : 'first content'
                },
                {
                    xtype   : 'panel',
                    html    : 'second content'
                }]
            });
        } else if(me.config.mylayout == 'vertical'){
            me.add({
                xtype   : 'panel',
                layout  : 'vbox',
                items   : [{
                    xtype   : 'panel',
                    html    : 'first content'
                },
                {
                    xtype   : 'panel',
                    html    : 'second content'
                },
                {
                    xtype   : 'panel',
                    html    : 'third content'
                }]
            });
        }
        me.callParent();
    }
});

You can create this view like this:

var myView = Ext.create("MyApp.view.MyView", {
    mylayout : 'vertical'
});

mylayout could be any configuration object you want to pass.

How to dynamically create xtype templates in Sencha Touch

1 Answers