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

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

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