javascript - 如何在 Sencha Touch 中动态创建 xtype 模板

Question

所以我有一个视图和一个链接到该视图的控制器，我想通过 store 动态地将值分配给视图中的 xtype 项。

因此，例如，我想动态设置layouts（请查看经过验证的代码）和urls

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

谁能指导我如何完成这项任务？

谢谢

Answer 1

您可以使用初始化函数根据某些条件渲染组件。这是一个例子：

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

您可以像这样创建此视图：

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

mylayout可以是您想要传递的任何配置对象。