|
这是一个简单的tab事例,具体可以参考extjs的官方文档,源来自官方文档 ---------------------------------------------------- 图片如下:    -------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="../../shared/examples.css" /> <link rel="stylesheet" type="text/css" href="tab-scroller-menu.css" /> <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../../ext-all.js"></script> <script type="text/javascript" src="../../shared/examples.js"></script> <script type="text/javascript" src="../localXHR.js"></script> <script type="text/javascript" src="../../ux/TabScrollerMenu.js"></script> <script type="text/javascript"> Ext.onReady(function(){ //注意,这里要添加localXHR.js //1.根据内容大小,自动改变tab的高度 //2.tab的应用(下面是此事例的内容) // tab1:正常的tab,在加载tab时,里面的内容已经加载完毕 // tab2:ajax加载 // tab3:ajax加载,并且传递参数 // tab4:设置监听函数 // tab5:无效tab var bd=Ext.getBody(); //============= 1 自动改变高度 ===================== bd.createChild({tag:'h2',html:'1. 根据内容大小,自动改变tab的高度'}); var tab1=new Ext.TabPanel({ activeTab:0, width:400, defaults:{autoHeight:true}, items:[ {contentEl:'shortText',title:'Short Text'}, {contentEl:'longText',title:'Long Text'} ] }); tab1.render(document.body); //============= 2 tab的应用 ===================== //tab1:正常的tab,在加载tab时,里面的内容已经加载完毕 //tab2:ajax加载 //tab3:ajax加载,并且传递参数 //tab4:设置监听函数 //tab5:无效tab bd.createChild({tag:'h2',html:'2. tab的应用'}); var tab2=new Ext.TabPanel({ activeTab:0, width:500, height:200, 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:'name=luoxiaoli&sex=1'} }, { title:'Event Tab', html:'添加监听事件', listeners:{ activate:function(tab){ Ext.Msg.alert('提示',tab.title+'被激活'); } } }, { title:'Disabled Tab', disabled:true, html: "Can't see me cause I'm disabled" } ] }); tab2.render(document.body); //==================3 带有菜单选项的滚动tab================= bd.createChild({tag:'h2',html:'3 带有菜单选项的滚动tab'}); //TabScrollerMenu是定义在../../ux/TabScrollerMenu.js里的 var scrollerMenu=new Ext.ux.TabScrollerMenu({ maxText:15, pageSize:5 }); var tab3=new Ext.TabPanel({ activeTab :0, width :400, height :200, title :'带有菜单选项的滚动tab', enableTabScroll : true, minTabWidth : 75, plugins : [ scrollerMenu ], items :[ { title:'My First tab page' } ] }); var num=25; for(var i=1;i<num;i++){ var title='这是#tab'+i; tab3.add({ title:title, html:title, tabTip:title, closable:true }); } tab3.render(document.body); }); </script> </head> <body> <div id="shortText" class="x-hide-display"><p>shortTextshortTextshortTextshortTextshortTextshortTextshort<br />TextshortTextshortTextshortTextshortTextshortTextshortTextshort<br />TextshortTextshortTextshortTextshortTextshortTextshortText</p> </div> <div id="longText" class="x-hide-display"><p>longTextlongTextlongTextlongTextlongTextlongTextlong<br />TextlongTextlongTextlongTextlongTextlongTextlongText<br />longTextlongTextlongTextlongTextlongTextlongTextlong<br />TextlongTextlongTextlongTextlongTextlongTextlongText<br />longTextlongTextlongTextlongTextlongTextlongTextlong<br />TextlongTextlongTextlongTextlongTextlongTextlongText<br />longTextlongTextlongTextlongTextlongTextlongTextlong<br />TextlongTextlongText</p> </div> </body> </html> -------------------------------------------------------------
|
|
|
