Ext常用6大布局方式

只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局

 

 

简单说明最常用到的6种布局方式：

一.最简单的布局：FitLayout

new Ext.Viewport({ layout:'fit', items:[oGrid] //oGrid是一个表格 });

 

 

 

 

 

注意：
1.使用Fit布局 items中只能有一个组件，如果你放置了多个组件，也只能是第一个用效。
2.使用Fit布局在组件中不能使用：autoHeight:true 否则会使FitLayout实效



二.最常用的布局：BorderLayout

new Ext.Viewport({ layout:'border', items:[ {region:'north',height:100}, {region:'south',height:100}, {region:'west',width:200}, {region:'east',width:200}, {region:'center'} ] });

 

 注意：
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight，autoWidth
5.添加split:true属性可以控制区域大小



三.表单布局：FormLayout

new Ext.form.FormPanel({ layout:'form', //默认是FormLayout布局（可写可不写） items:[{ xtype:'textfield' fieldLabel:'名称', name:'name', anchor:'90%' },{ xtype:'datefield', fieldLabel:'生日', name:'birthday', anchor:'90%' },{ xtype:'textfield', fieldLabel:'性别', name:'sex', anchor:'90%' }] });

 

 注意：
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类，因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式，因此可以不显示写出Layout:'form'
3.fieldLabel，boxLabel在FormLayout布局情况下才能显示出来



四.列布局：ColumnLayout

 

new Ext.Viewport({ layout:'column', itmes:[{ title:'第一列', columnWidth:.3 //30% },{ title:'第二列', columnWidht:.3 //30% },{ title:'第三列', columnWidth:.4 //40% }] });

 

 

 

 

 

 注意：
1.items的每个子组件中的columnWidth加起来的和必须为1


五.控制大小布局：AnchorLayout

new Ext.Viewport({ layout:'anchor', itmes:[{ title:'one', anchor:'50% 60%'//表示所占宽度，高度的百分比 },{ title:'two', anchor:'40%' //表示所占宽度，高度百分比都是40% },{ title:'three', anchor:'-20 -100' //表示距离右侧的20px,距离底部100px },{ title:'four', anchor:'-300' //表示距离右侧，底部都为300px }] });

 

六.伸缩折叠布局：Accordion

 

new Ext.Viewport({ layout:'border', items:[{ region:'west', width:200, layout:'accordion', //伸缩折叠布局 layoutConfig:{ titleCollapse:true, //单击标题可以折叠 animate:true, //展开折叠时的动画效果 activeOnTop:true,//展开的子面板的顺序总在最上面 }, items:[{ title:'第一栏', html:'one' },{ title:'第二栏', html:'two' },{ title:'第三栏', html:'three' },{ title:'第四栏', html:'four' }] },{ region:'center', split:true, border:true }] });

 

 

 

 注意：
1.使用Accordion布局一定要设置标题：title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ；

 

 

 

 

 2012.3.12增加  

ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。

　　Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

 

 

 

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下，帮助记忆。 

 

另外还有3种布局方式,最开始没提到

• absolute

顾名思义，在容器内部，根据指定的坐标定位显示 

 

 

• 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'}  
       ]  
      }  
     );  
});  

 

• 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();  
    });  

  

 

 

 

 

 

 

 

 

 

 

 

 

 

• 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"  
            });  
  
  
  
        });  

 

• 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:''}  
       ]  
      }  
     );  
});  

 

 

 

• 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);  
            });  
        });