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>

    <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 panel = Ext.create('Ext.panel.Panel', {

            title: 'Ext.layout.container.CardLayout',

            frame: true,

            width: 250,

            renderTo: Ext.getBody(),

            bodyPadding: 5,

            defaults: {

              bodyStyle: 'background-color: #FFFFFF'

            },

            //layout: 'auto',

            //layout: 'fit',

            //layout: 'accordion',

            layout: 'card',

            activeItem: 0,

 

            items: [{

              title: 'Panel One',

              html: 'Panel One',

              id: 'p1'

            },{

              title: 'Panel Two',

              html: 'Panel Two',

              id: 'p2'

            },{

              title: 'Panel Three',

              html: 'Panel Three',

              id: 'p3'

            }],

            buttons: [{

              text: 'previous',

              handler: changePage

            },{

              text: 'next',

              handler: changePage

            }]

          });

          function changePage(btn){

            var index = Number(panel.layout.activeItem.id.substring(1));

            if(btn.text == 'previous'){

              index -= 1;

              if(index < 1){

                index = 1;

              }

            }else{

              index += 1;

              if(index > 3){

                index = 3;

              }

            }

            panel.layout.setActiveItem('p'+index);

          }

        });

    </script>

</head>

<body>

   

</body>

</html>

　　

时间： 2024-08-25 06:04:05

ExtJs布局之Card的相关文章

关于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布局之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布局之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&

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