风人园

弱水三千,只取一瓢,便能解渴;佛法无边,奉行一法,便能得益。
随笔 - 99, 文章 - 181, 评论 - 56, 引用 - 0
数据加载中……

Ext应用三 -- Tab(2)

前面在使用了简单的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,就可以从相应的指定页面载入。

以上已经测试成功。嘿嘿:)

posted on 2008-01-09 10:15 风人园 阅读(4836) 评论(5)  编辑  收藏 所属分类: Ext

评论

# re: Ext应用三 -- 高级Tab  回复  更多评论   

受益匪浅 感谢兄弟发表这些文章
努力学习中......
2008-07-06 02:37 | whoua

# re: Ext应用三 -- 高级Tab  回复  更多评论   

你那id:'tabs'忘记加引号了
2008-07-06 02:51 | whoua

# re: Ext应用三 -- 高级Tab  回复  更多评论   

能用tab autoload一個viewport的頁面?
2008-10-24 09:40 | jmty

# re: Ext应用三 -- 高级Tab  回复  更多评论   

我就奇怪了,一个简单的东西,标题还非得写成“高级tab”
2009-04-14 12:28 | bishi

# re: Ext应用三 -- Tab(2)  回复  更多评论   

高级tab 是相对 base tab 来说
2010-01-29 21:46 | 试试

只有注册用户登录后才能发表评论。


网站导航: