如何将第三方组件添加到Ext.Tabpanel中?

时间:2013-07-22 01:39:35

标签: extjs tabs extjs4

我将第三方组件CompFoo添加到Ext.Tabpanel中,

HTML:

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

我将CompFoo渲染为div2,tabpanel渲染为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)在选项卡中创建具有给定ID的div,或者2)将CompFoo放入TabPanel的“项目”中。

我不知道如何以任何一种方式编写代码。

1 个答案:

答案 0 :(得分:0)

加入items:{}

new Ext.Panel({id: 'someID',title:'someTitle',hmtl:'<your html>',...})

没有测试但应该工作

我更喜欢的另一种方式是在面板中使用loader:{url:<url to the site you want to show>,renderer:'frame',...}而不是html