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="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() {

                Ext.create('Ext.panel.Panel',{

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

                    frame: true,

                    height: 600,

                    width: 800,

                    renderTo: Ext.getBody(),

                    layout: {

            type: 'hbox',

            align: 'stetch'

          },

 

                    items: [{

                        title: '子面板一',

                        flex: 1,

            html: '1/4宽(flex=1)'

                    },{

                        title: '子面板二',

            flex: 1,

            html: '1/4宽(flex=1)'

                    },{

                        title: '子面板三',

                        flex: 2,

            html: '2/4宽(flex=2)'

                    }]

                });

            });

    </script>

</head>

<body>

    <div id='form'></div>

        <div id='form1'></div>

 

 

</body>

</html>

　　

时间： 2024-09-01 15:44:02

ExtJs布局之BOX的相关文章

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