ExtJs布局之tabPanel

简介:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<! DOCTYPE html>
< html >
< head >
     < title >ExtJs</ title >
         < meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     < link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
         < script type="text/javascript" src="ExtJs/ext-all.js"></ script >
         < script type="text/javascript" src="ExtJs/bootstrap.js"></ script >
         < script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></ script >
 
     < script type="text/javascript">
             Ext.onReady(function(){
         var tabPanel = Ext.create('Ext.tab.Panel', {
           title: 'Ext.tab.Panel',
           frame: true,
           height: 150,
           width: 900,
           activeTab: 0,
           renderTo: Ext.getBody(),
           items: [{
             title: 'tab标签页1',
             html: 'tab标签页1的内容'
           }],
           buttons: [{
             text: '增加标签页',
             handler: addTabPage
           }]
         });
         function addTabPage() {
           var index = tabPanel.items.length + 1;
           var tabPage = tabPanel.add({
             title: 'tab标签页' + index,
             html: 'tab标签页' + index + '内容',
             closable: 'true'
           })
           tabPanel.setActiveTab(tabPage);
         }
       });
     </ script >
</ head >
< body >
 
</ body >
</ html >

  

目录
相关文章
|
6月前
17EasyUI 布局- 动态添加标签页(Tabs)
17EasyUI 布局- 动态添加标签页(Tabs)
21 0
|
前端开发 JavaScript
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
ab栏可以滑动,切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时,它会有一个默认的高度,你必须动态的获取数据列表的高度覆盖原来的默认高度。
|
前端开发 JavaScript
|
JavaScript 前端开发
|
JavaScript 前端开发 HTML5
ExtJS中的accordion布局如何展开特定的item
因为项目需要,使用了extJS作为后台管理系统的前端框架。 众所周知,后台管理系统一般是根据权限来展示菜单的。 菜单使用了panel的accordion布局,然后内部使用panel包裹了一棵树(treepanel)。
1047 1