Ext应用三 -- 高级Tab

转贴：http://www.blogjava.net/wuxufeng8080/archive/2008/01/09/173903.html

留个记录，方便学习，感谢源作者

前面在使用了简单的tab之后，在后来的应用中，又用到了高级tab。

需要用户点击一个链接之后，在panel中新增tab。这里有很多地方有疑问。

1、在var viewport = new Ext.Viewport（）中定义tab是这样子的。

new Ext.TabPanel({
                id:tabs,
                region:'center',
                enableTabScroll:true,
                defaults: {autoScroll:true},
                deferredRender:false,
                activeTab:0,
                items:[{
                    contentEl:'center2',
                    title: 'Start',
                    autoScroll:true
                }]
            })

但是这样子导致这个TabPanel没有变量名，不能直接操作。
然后我试了通过viewport.add进行添加的方式，可能是方法使用错误，导致没有出来。
如果效果出来了。
后面还有问题，我怎么通过这个tab来显示一个页面呢。通过ajax tab来显示。在basic tab这个例子里有看到过，知识还没有研究。

下面是动态添加tab的方法

    function addTab(){
        tabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + Ext.example.bogusMarkup,
            closable:true
        }).show();
    }

就通过TabPanel这个对象的变量来直接add。在add时候再动态载入页面内容。

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
html: 'menu'
}, {
id: 'center_panel',
region: 'center',
layout: 'card',
items: [
{id: 'first_center', html: 'first center'}
]

}]
});


var center = Ext.getCmp('center_panel');
center.remove('first_center');
center.add({
id: 'second_center',
html: 'second center'
});
center.getLayout().setActiveItem('second_center');
center.doLayout();

通过指定TabPanel id，然后通过Ext.getCmp('center_panel')，就可以获得这个panel的句柄，就可以对这个组件进行操作。layout在add/remove之后需要调用center.doLayout()方法，才能使后来新建的tab的生效。

3、ajax tab
function addFormTab(strScreen_ID, strScreenName){
  var tabs = Ext.getCmp('tabs');
  tabs.add({
   id: strScreen_ID,
   title: strScreenName,
   //html: 'second center',
   autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID},
   closable:true
  });
  tabs.getLayout().setActiveItem(strScreen_ID);
  tabs.doLayout();
 }

 autoLoad: {url: './pages/web/business_frame.jsp', params: 'screen_ID=WEB.BU&screen_FK=' + strScreen_ID}

指定这个autoload，就可以从相应的指定页面载入。

以上已经测试成功。嘿嘿：）