EXTJS动态地将一个组件与其他组件放在一个容器中

我希望实现以下行为：

如果表单面板中的字段（组合、文本、日期…）的自定义属性设置为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'
                                }                                
                            ]
}

我想知道我怎样才能做到这一点。这可能吗？

是的

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布局的容器的引用。

但我需要首先用容器替换texfield，并将texfield放入容器中。使用示例更新。