extjs - サードパーティのコンポーネントを Ext.Tabpanel に追加するには?

Question

CompFooExt.Tabpanel に追加するサードパーティ コンポーネントがあります。

HTML:

<div id="div1">
</div>
<div id="div2">
</div>

CompFoo を div2 に、タブパネルを div1 にレンダリングします。

var Foo = new MacroHard.bar.box({
 ...
 renderTo: 'div2'
});

var tabs = Ext.createWidget('tabpanel',{
renderTo: 'input-div',
layout: 'fit',
height: '80%',
activeTab: 0,
items:[
       {
           title: 'User',
           items: [
            {
                id: 'userid-txtfld',
                xtype: 'textfield',
                fieldLabel: 'User ID',
                name: 'userid',
            },
           ]
       },
  ]....

私がやりたいのは、CompFoo をタブの 1 つに配置することです。

2 つの方法: 1) 指定された ID の div をタブに作成するか、2) CompFoo を TabPanel の「アイテム」に配置します。

どちらの方法でもコードを書く方法がわかりません。