风人园

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

Ext应用三 -- Tab


简单tab的应用,参考例子
    var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:
450,
        activeTab: 
0,
        frame:
true,
        defaults:
{autoHeight: true},
        items:[
            
{contentEl:'script', title: 'Short Text'},
            
{contentEl:'markup', title: 'Long Text'}
        ]
    }
);

tab的激活事件
在item的配置中增加
    listeners: {activate: handleActivate}
handleActivate是一个方法,也就是当激活某一个tab的时候,就会调用这个方法。

    // second tabs built from JS
    var tabs2 = new Ext.TabPanel({
        renderTo: document.body,
        activeTab: 
0,
        width:
600,
        height:
250,
        plain:
true,
        defaults:
{autoScroll: true},
        items:[
{
                title: 'Normal Tab',
                html: 
"My content was added during construction."
            }
,{
                title: 'Ajax Tab 
1',
                autoLoad:'ajax1.htm'
            }
,{
                title: 'Ajax Tab 
2',
                autoLoad: 
{url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
            }
,{
                title: 'Event Tab',
                listeners: 
{activate: handleActivate},
                html: 
"I am tab 4's content. I also have an event listener attached."
            }
,{
                title: 'Disabled Tab',
                disabled:
true,
                html: 
"Can't see me cause I'm disabled"
            }

        ]

    }
);
autoLoad:异步载入的页面。

posted on 2007-12-28 14:53 风人园 阅读(1076) 评论(0)  编辑  收藏 所属分类: Ext


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


网站导航: