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>

　　

时间： 2024-10-27 09:18:10

ExtJs布局之tabPanel的相关文章

关于extjs布局，只显示一列

问题描述 关于extjs布局,只显示一列 代码如下,这个actionPanel有两列,第一列是6个Button正常显示(newTimeLine,addTimeLine,.....),第二列是6个Label显示不出来(finishLabel,...). 能不能帮忙看是哪里错了? var actionPanel=new Ext.form.FormPanel({ region:'center', border:false, labelAlign:'right', bodyStyle : 'paddin

extjs 布局中添加了collapseMode:&amp;#039;mini&amp;#039;,就能出现小箭头折叠west 请问小箭头的click事件是什么？

问题描述 extjs 布局中添加了collapseMode:'mini',就能出现小箭头折叠west 请问小箭头的click事件是什么?我想手动调用让他折叠! 问题补充:柴秉承 写道 解决方案 Ext.onReady(function() {var nodeData = [{text:'node',leaf:false,children:[{text:'childNode',leaf:false,children:[{text:'hello',leaf:true}]}]}]var panel =

ExtJS布局：制作后台管理布局

一个后台管理页面大概头部.左侧导航.右侧的在线用户(可有可无)和状态栏(不是必须) 头部一般放一些logo.登陆用户信息和提醒事项等 我上面给出的这个图片就是我用ExtJS实现的一个后台管理页面布局,源代码如下: Ext.onReady(function () { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-head

ExtJs布局之Card

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 <!DOCTYPE html> <html> <head>     <t

ExtJs布局之accordion,fit,auto

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>      

ExtJs布局之border

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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>   

ExtJs布局之Column

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 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>         <meta http-equiv="Content-Type"

ExtJs布局之BOX

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 45 46 47 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>         <meta http-equiv="Cont

ExtJs布局之table

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 45 46 47 48 49 50 51 52 53 <!DOCTYPE html> <html> <head>     <title>ExtJs</title>         <meta htt