ExtJS学习笔记 layout的9种样式风格总结

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。
[list] absolute 顾名思义，在容器内部，根据指定的坐标定位显示
accordion 这个是最容易记的，手风琴效果

Java代码

1. Ext.OnReady(function(){   
2. var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局   
3.       {   
4.        renderTo:'paneldiv',   
5.        title:'容器组件',   
6.        layout:'accordion',          
7.        width:500,   
8.        height:200,   
9.        layoutConfig:{animate:false},   
10.        items:[   
11.         {title:'元素1',html:''},   
12.         {title:'元素2',html:''},   
13.         {title:'元素3',html:''},   
14.         {title:'元素4',html:''}   
15.        ]   
16.       }   
17.      );   
18. });  

Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'accordion',       
       width:500,
       height:200,
       layoutConfig:{animate:false},
       items:[
        {title:'元素1',html:''},
        {title:'元素2',html:''},
        {title:'元素3',html:''},
        {title:'元素4',html:''}
       ]
      }
     );
});

anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

Java代码

1. Ext.onReady(function() {   
2.         var panel1 = new Ext.Panel({   
3.             title: "panel1",   
4.             height: 100,   
5.             anchor: '-50',   
6.             html: "高度等于100，宽度=容器宽度-50"  
7.         });   
8.   
9.         var panel2 = new Ext.Panel({   
10.             title: "panel2",   
11.             height: 100,   
12.             anchor: '50%',   
13.             html: "高度等于100,宽度=容器宽度的50%"  
14.   
15.         });   
16.   
17.         var panel3 = new Ext.Panel({   
18.             title: "panel3",   
19.             anchor: '-10, -250',   
20.             html: "宽度=容器宽度-10,高度=容器宽度-250"  
21.   
22.         });   
23.   
24.         var win = new Ext.Window({   
25.             title: "Anchor Layout",   
26.             height: 400,   
27.             width: 400,   
28.             plain: true,                       
29.             layout: 'anchor',   
30.             items: [panel1, panel2,panel3]               
31.         });   
32.         win.show();   
33.     });  

Ext.onReady(function() {
        var panel1 = new Ext.Panel({
            title: "panel1",
            height: 100,
            anchor: '-50',
            html: "高度等于100，宽度=容器宽度-50"
        });

        var panel2 = new Ext.Panel({
            title: "panel2",
            height: 100,
            anchor: '50%',
            html: "高度等于100,宽度=容器宽度的50%"

        });

        var panel3 = new Ext.Panel({
            title: "panel3",
            anchor: '-10, -250',
            html: "宽度=容器宽度-10,高度=容器宽度-250"

        });

        var win = new Ext.Window({
            title: "Anchor Layout",
            height: 400,
            width: 400,
            plain: true,                    
            layout: 'anchor',
            items: [panel1, panel2,panel3]            
        });
        win.show();
    });

border 将容器分为五个区域:east,south,west,north,center

Java代码

1.  Ext.onReady(function() {        
2.   
3.         var button = Ext.get('show-btn');   
4.         var win;   
5.            
6.         button.on('click', function() {   
7.   
8.             //创建TabPanel   
9.             var tabs = new Ext.TabPanel({   
10.                 region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间   
11.                 margins: '3 3 3 0',   
12.                 activeTab: 0,   
13.                 defaults: {   
14.                     autoScroll: true  
15.                 },   
16.                 items: [{   
17.                     title: 'Bogus Tab',   
18.                     html: "第一个Tab的内容."  
19.                 }, {   
20.                     title: 'Another Tab',   
21.                     html: "我是另一个Tab"  
22.                 }, {   
23.                     title: 'Closable Tab',   
24.                     html: "这是一个可以关闭的Tab",   
25.                     closable: true  
26. }]   
27.                 });   
28.   
29.                 //定义一个Panel   
30.                 var nav = new Ext.Panel({   
31.                     title: 'Navigation',   
32.                     region: 'west', //放在西边，即左侧   
33.                     split: true,   
34.                     width: 200,   
35.                     collapsible: true, //允许伸缩   
36.                     margins: '3 0 3 3',   
37.                     cmargins: '3 3 3 3'  
38.                 });   
39.   
40.                 //如果窗口第一次被打开时才创建   
41.                 if (!win) {   
42.                     win = new Ext.Window({   
43.                         title: 'Layout Window',   
44.                         closable: true,   
45.                         width: 600,   
46.                         height: 350,   
47.                         border : false,   
48.                         plain: true,   
49.                         layout: 'border',   
50.                         closeAction:'hide',   
51.                         items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局   
52.                     });   
53.                 }   
54.                 win.show(button);   
55.             });   
56.         });  

 Ext.onReady(function() {     

        var button = Ext.get('show-btn');
        var win;
        
        button.on('click', function() {

            //创建TabPanel
            var tabs = new Ext.TabPanel({
                region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
                margins: '3 3 3 0',
                activeTab: 0,
                defaults: {
                    autoScroll: true
                },
                items: [{
                    title: 'Bogus Tab',
                    html: "第一个Tab的内容."
                }, {
                    title: 'Another Tab',
                    html: "我是另一个Tab"
                }, {
                    title: 'Closable Tab',
                    html: "这是一个可以关闭的Tab",
                    closable: true
}]
                });

                //定义一个Panel
                var nav = new Ext.Panel({
                    title: 'Navigation',
                    region: 'west', //放在西边，即左侧
                    split: true,
                    width: 200,
                    collapsible: true, //允许伸缩
                    margins: '3 0 3 3',
                    cmargins: '3 3 3 3'
                });

                //如果窗口第一次被打开时才创建
                if (!win) {
                    win = new Ext.Window({
                        title: 'Layout Window',
                        closable: true,
                        width: 600,
                        height: 350,
                        border : false,
                        plain: true,
                        layout: 'border',
                        closeAction:'hide',
                        items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
                    });
                }
                win.show(button);
            });
        });

card 像安装向导一样，一张一张显示

Java代码

1. Ext.onReady(function() {   
2.   
3.         var i = 0;   
4.   
5.         var navHandler = function(direction) {   
6.             if (direction == -1) {   
7.                 i--;   
8.                 if (i < 0) { i = 0; }   
9.             }   
10.   
11.             if (direction == 1) {   
12.                 i++;   
13.                 if (i > 2) { i = 2; return false; }   
14.             }   
15.   
16.   
17.             var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];   
18.             var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];   
19.   
20.             if (i == 0) {   
21.                 btnBack.disabled = true;   
22.             }   
23.             else {   
24.                 btnBack.disabled = false;   
25.             }   
26.   
27.             if (i == 2) {   
28.                 btnNext.value = "完成";   
29.                 btnNext.disabled = true;   
30.             }   
31.             else {   
32.                 btnNext.value = "下一步";   
33.                 btnNext.disabled = false;   
34.             }   
35.   
36.             card.getLayout().setActiveItem(i);   
37.   
38.         };   
39.   
40.   
41.         var card = new Ext.Panel({   
42.             width: 200,   
43.             height: 200,   
44.             title: '注册向导',   
45.             layout: 'card',   
46.             activeItem: 0, // make sure the active item is set on the container config!   
47.             bodyStyle: 'padding:15px',   
48.             defaults: {   
49.                 border: false  
50.             },   
51.             bbar: [   
52.                 {   
53.                     id: 'move-prev',   
54.                     text: '上一步',   
55.                     handler: navHandler.createDelegate(this, [-1])                       
56.                 },   
57.                 '->',   
58.                 {   
59.                     id: 'move-next',   
60.                     text: '下一步',   
61.                     handler: navHandler.createDelegate(this, [1])   
62.                 }   
63.             ],   
64.   
65.             items: [{   
66.                 id: 'card-0',   
67.                 html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'  
68.             }, {   
69.                 id: 'card-1',   
70.                 html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'  
71.             }, {   
72.                 id: 'card-2',   
73.                 html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'  
74. }],   
75.   
76.                 renderTo: "container"  
77.             });   
78.   
79.   
80.   
81.         });  

Ext.onReady(function() {

        var i = 0;

        var navHandler = function(direction) {
            if (direction == -1) {
                i--;
                if (i < 0) { i = 0; }
            }

            if (direction == 1) {
                i++;
                if (i > 2) { i = 2; return false; }
            }


            var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
            var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];

            if (i == 0) {
                btnBack.disabled = true;
            }
            else {
                btnBack.disabled = false;
            }

            if (i == 2) {
                btnNext.value = "完成";
                btnNext.disabled = true;
            }
            else {
                btnNext.value = "下一步";
                btnNext.disabled = false;
            }

            card.getLayout().setActiveItem(i);

        };


        var card = new Ext.Panel({
            width: 200,
            height: 200,
            title: '注册向导',
            layout: 'card',
            activeItem: 0, // make sure the active item is set on the container config!
            bodyStyle: 'padding:15px',
            defaults: {
                border: false
            },
            bbar: [
                {
                    id: 'move-prev',
                    text: '上一步',
                    handler: navHandler.createDelegate(this, [-1])                    
                },
                '->',
                {
                    id: 'move-next',
                    text: '下一步',
                    handler: navHandler.createDelegate(this, [1])
                }
            ],

            items: [{
                id: 'card-0',
                html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
            }, {
                id: 'card-1',
                html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
            }, {
                id: 'card-2',
                html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
}],

                renderTo: "container"
            });



        });

column 把整个容器看成一列,然后向容器放入子元素时

Java代码

1. Ext.onReady(function() {   
2.         var win = new Ext.Window({   
3.             title: "Column Layout",   
4.             height: 300,   
5.             width: 400,   
6.             plain: true,   
7.             layout: 'column',   
8.             items: [{   
9.                 title:"width=50%",   
10.                 columnWidth:0.5,   
11.                 html:"width=(容器宽度-容器内其它组件固定宽度)*50%",   
12.                 height:200  
13.             },   
14.             {   
15.                 title:"width=250px",   
16.                 width: 200,   
17.                 height:100,   
18.                 html:"固定宽度为250px"  
19.             }               
20.             ]   
21.         });   
22.         win.show();   
23.     });  

Ext.onReady(function() {
        var win = new Ext.Window({
            title: "Column Layout",
            height: 300,
            width: 400,
            plain: true,
            layout: 'column',
            items: [{
                title:"width=50%",
                columnWidth:0.5,
                html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
                height:200
            },
            {
                title:"width=250px",
                width: 200,
                height:100,
                html:"固定宽度为250px"
            }            
            ]
        });
        win.show();
    });

fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

Java代码

1. Ext.OnReady(function(){   
2. var panel=new Ext.Panel(   
3.       {   
4.        renderTo:'paneldiv',   
5.        title:'容器组件',   
6.        layout:'fit',   
7.        width:500,   
8.        height:100,   
9.        items:[   
10.         {title:'子元素1'},   
11.         {title:'子元素2'},   
12.         {title:'子元素3'},   
13.         {title:'子元素4'},   
14.         {title:'子元素5'}   
15.        ]   
16.       }   
17.      );   
18. });  

Ext.OnReady(function(){
var panel=new Ext.Panel(
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'fit',
       width:500,
       height:100,
       items:[
        {title:'子元素1'},
        {title:'子元素2'},
        {title:'子元素3'},
        {title:'子元素4'},
        {title:'子元素5'}
       ]
      }
     );
});

form 是一种专门用于管理表单中输入字段的布局

Java代码

1. Ext.onReady(function() {   
2.         var win = new Ext.Window({   
3.             title: "form Layout",   
4.             height: 150,   
5.             width: 230,   
6.             plain: true,   
7.             bodyStyle: 'padding:15px',   
8.             items:    
9.             {   
10.                 xtype: "form",   
11.                 labelWidth: 30,   
12.                 defaultType: "textfield",   
13.                 frame:true,   
14.                 items:    
15.                 [   
16.                     {   
17.                         fieldLabel:"姓名",   
18.                         name:"username",   
19.                         allowBlank:false  
20.                     },   
21.                     {   
22.                         fieldLabel:"呢称",   
23.                         name:"nickname"  
24.                     },   
25.                     {   
26.                         fieldLabel: "生日",   
27.                         xtype:'datefield',   
28.                         name: "birthday",   
29.                         width:127  
30.                     }   
31.                 ]   
32.             }   
33.         });   
34.         win.show();   
35.     });  

Ext.onReady(function() {
        var win = new Ext.Window({
            title: "form Layout",
            height: 150,
            width: 230,
            plain: true,
            bodyStyle: 'padding:15px',
            items: 
            {
                xtype: "form",
                labelWidth: 30,
                defaultType: "textfield",
                frame:true,
                items: 
                [
                    {
                        fieldLabel:"姓名",
                        name:"username",
                        allowBlank:false
                    },
                    {
                        fieldLabel:"呢称",
                        name:"nickname"
                    },
                    {
                        fieldLabel: "生日",
                        xtype:'datefield',
                        name: "birthday",
                        width:127
                    }
                ]
            }
        });
        win.show();
    });

table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

Java代码

1. Ext.onReady(function(){   
2. var panel=new Ext.Panel(   
3.       {   
4.        renderTo:'paneldiv',   
5.        title:'容器组件',   
6.        layout:'table',          
7.        width:500,   
8.        height:200,   
9.        layoutConfig:{columns:3},//将父容器分成3列   
10.        items:[   
11.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},   
12.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},   
13.         {title:'元素3',html:'sdfsdfsdf'},   
14.         {title:'元素4',html:''}   
15.        ]   
16.       }   
17.      );   
18. });  

转载于:https://www.cnblogs.com/dxs376263348/archive/2009/09/24/1573327.html