EXTJS动态地将组件放入具有其他组件的容器中

Question

我想实现这种行为：

如果表单面板中的字段（组合，文本，日期...）具有自定义属性设置为true

 {
    xtype: 'textfield',
    fieldLabel: 'Name',
    name: 'Name',
    customProp: true 
},

然后在实际组件后面添加一个按钮或其他组件。写在json中它看起来像这样：

   {        
                            xtype: 'container',
                            margin: '0 0 8 0',
                            layout: 'hbox',
                            items: [
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'Name',
                                    name: 'Name',
                                },
                                {
                                    xtype: 'button',
                                    text: 'xxx',
                                    tooltip: 'I\'m a custom tooltip'
                                }                                
                            ]
}

我想知道如何实现这一目标。这甚至可能吗？

Answer 1

是。

Ext.require('*');

Ext.onReady(function() {

    var form = new Ext.form.Panel({
        renderTo: document.body,
        width: 400,
        height: 100,
        items: {
            xtype: 'textfield',
            fieldLabel: 'Foo'
        }
    });

    setTimeout(function() {
        var field = form.down('textfield');

        // We have a reference to the field, let's go!
        var owner = field.ownerCt;

        owner.remove(field, false);
        owner.add({
            xtype: 'container',
            layout: 'hbox',
            items: [field, {
                xtype: 'button',
                text: 'Foo'
            }]
        });
    }, 1000);

});

其中container是对具有hbox布局的容器的引用。