Question

我有一个简单的模板：

tpl: '<table><tr><td>{LogicalCondition}</td></tr></table>',

而不是{LogicalCondition}我想放置extjs组件（动态）。

（http://jsfiddle.net/4t458yxo/2/）

    Ext.define('MyApp.view.ux.form.BoolDisplayField', {
        extend: 'Ext.Component',
        alias: 'widget.booldisplayfield',
        tpl: '<table><tr><td>{LogicalCondition}</td></tr></table>',       
        constructor: function (config) {
            this.initConfig(config);
            this.callParent(arguments);
        },
        applyValue: function (v) {
            if (v) {
                this.update({
                    //instead of combo i am getting [object object]
                    LogicalCondition: Ext.create('Ext.form.ComboBox', {
                        fieldLabel: 'Choose State',
                        store: ["a"],
                        queryMode: 'local',
                        displayField: 'name'

                    })
                });
            }
            return v;
        }
    });
    var c = Ext.create('MyApp.view.ux.form.BoolDisplayField', {
        renderTo: Ext.getBody(),
        value: false
    });

c.setValue(true);

Answer 1

Ext（X）Template不允许其数据中的组件，但假定是普通对象或数组。在处理模板的新数据（update调用）时，Ext会理解＆＃34; LogicalCondition＆＃34;作为文本 - 您将对象（组合实例）转换为文本（[对象对象]）。

最有可能的是，还有另一种方法可以达到你想要的效果，（X）模板/数据显然不是最好的。

Answer 2

你可以使用控制器吗？在需要时动态创建所需的组件，并将add（）用于具有表格布局的Container？

http://docs.sencha.com/extjs/4.2.2/?mobile=/api/Ext.container.AbstractContainer#method-add

将extjs组件渲染为html tpl

2 个答案: