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

Question

所以我有一个 View 和一个链接到该 View 的 Controller ，我想通过存储动态地将值分配给 View 中的 xtype 项。

例如，我想动态设置布局(请查看经过验证的代码)和url

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

您可以像这样创建此 View :

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

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