现在的位置: 首页 > 综合 > 正文

Layout 的9种样式风格总结【转】

2012年04月14日 ⁄ 综合 ⁄ 共 12068字 ⁄ 字号 小 中 大 ⁄ 评论关闭

原文：http://virgos.javaeye.com/blog/288924

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

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

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

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

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

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

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

    返回
    【上篇】
    【下篇】

    作者:

    抱歉!评论已关闭.

    返回首页

    Copyright © 2013-2018 学步园  保留所有权利.
    软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
    必威体育
    必威电竞