Extjs中布局layout的9种样式风格总结

来源：互联网发布：4g lte网络是什么意思编辑：程序博客网时间：2024/05/01 23:02

Extjs的容器组件都可以设置它的显示风格，它的有效值有：

absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。

简单总结一下，帮助记忆。

absolute 顾名思义，在容器内部，根据指定的坐标定位显示
accordion 这个是最容易记的，手风琴效果

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必须为字符串值

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

 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 像安装向导一样，一张一张显示

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 把整个容器看成一列,然后向容器放入子元素时

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 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

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 是一种专门用于管理表单中输入字段的布局

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列

Ext.onReady(function(){var panel=new Ext.Panel(      {       renderTo:'paneldiv',       title:'容器组件',       layout:'table',              width:500,       height:200,       layoutConfig:{columns:3},//将父容器分成3列       items:[        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},        {title:'元素3',html:'sdfsdfsdf'},        {title:'元素4',html:''}       ]      }     );});