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