ExtJS layout的式样详解

ExtJS layout的样式详解

http://wjt276.iteye.com/blog/453207

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

上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001----

三、anchor 这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽， 
2.anchor值通常只能为负值(指非百分比值)，正值没有意义， 
3.anchor必须为字符串值

四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。

                    该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：

例一：

Ext.onReady(function(){                         new Ext.Viewport({                                            layout:"border",                                            items:[{                                                                region:"north",                                                                height:50,                                                                title:"顶部面板"                                            },                                            {region:"south",                                            height:50,                                            title:"底部面板"},                                            {region:"center",                                            title:"中央面板"},                                            {region:"west",                                            width:100,                                            title:"左边面板"},                                            {region:"east",                                            width:100,                                            title:"右边面板"}                                            ]                        });     });  

 ----002----

例二：

Ext.onReady(function(){            var b = new Ext.Button({        id:"show-btn",           //定义按钮的ID        text:"弹出按钮",        //定义按钮的标题                            renderTo:document.body//将弹出按钮渲染到窗体上    });    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,   //当前选项卡是第1个(从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);           });       });       });   

 ----003----

五、card 像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：

例一：

Ext.onReady(function(){         var panel=new Ext.Panel({            renderTo:"hello",            title:"容器组件",            width:300,            height:200,            layout:"card",            activeItem: 0,            layoutConfig: {                animate: true             },            items:[                {title:"子元素1",html:"这是子元素1中的内容"},                {title:"子元素2",html:"这是子元素2中的内容"},                {title:"子元素3",html:"这是子元素3中的内容"}            ],            buttons:[{text:"切换",handler:changeTab}]        });        var i=1;        function changeTab(){             panel.getLayout().setActiveItem(i++);             if(i>2)i=0;        }    });  

上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004

点击一下“切换”按钮，结果如下图所示：005

例二：columnWidth来定义子元素所占的列宽度(注意columnWidth的总和应该为1)

Ext.onReady(function(){       new Ext.Panel({          renderTo:"hello",          title:"容器组件",          layout:"column",          width:500,          height:100,          items:[{title:"列1",columnWidth:0.2},              {title:"列2",columnWidth:0.3},              {title:"列3",columnWidth:0.3},             {title:"列4",columnWidth:0.2}          ]      });  });  

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

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

例一：

 例二： 如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：

Ext.onReady(function(){  new Ext.Panel({          renderTo:"hello",          title:"容器组件",          layout:"fit",          width:500,          height:100,          items:[{title:"子元素1",html:"这是子元素1中的内容"},              {title:"子元素2",html:"这是子元素2中的内容"}          ]      });  });  

例三：如果不使用布局Fit，代码如下：

Ext.onReady(function(){      new Ext.Panel({          renderTo:"hello",          title:"容器组件",          width:500,          height:200,          items:[{title:"子元素1",html:"这是子元素1中的内容"},                  {title:"子元素2",html:"这是子元素2中的内容"}          ]      });  });  

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

例一：

Ext.onReady(function(){         var panel=new Ext.Panel( {            renderTo:'hello',            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:''}            ]         });     });