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

}); 

其中容器是带有hbox布局的容器的引用。