ExtJs常用布局--layout详解（含实例）

序言：

笔者用的ExtJs版本：ext-3.2.0

ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor

另外，不常见的布局有：tab、vbox、hbox

本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码

 

简介：

最常用的边框布局——BorderLayout

最简单的布局——FitLayout

制作伸缩菜单的布局——Accordion

实现操作向导的布局——CardLayout

控制位置和大小的布局——AbsoluteLayout

表单专用的布局——FormLayout

分列布局——ColumnLayout

表格状布局——TabelLayout

BoxLayout——HBox

BoxLayout——VBox

 

一、border 布局

简介：也称“边界布局”、“方位布局”。该布局把容器分为东、南、西、北、中五个区域,分别由east、south、west、north、center表示。我们需要在items中使用region参数来给它定位。

注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。center区域必须有，且它的大小是在其他4个部分设置好以后自动计算出来的，所以不能为它指定宽度值或高度值。

js代码：

 

[javascript] view plain copy
 
 print?
  1. var borderPanel = new Ext.Panel({  
  2.        renderTo: 'borderDiv',  
  3.        layout: 'border',  
  4.        tltle: 'Border Layout',  
  5.        width: 1000,  
  6.        height: 800,  
  7.        defaults: {  
  8.            collapsible: true, // 支持该区域的展开和折叠  
  9.            split: true, // 支持用户拖放改变该区域的大小  
  10.            bodyStyle: 'padding:15px'  
  11.        },  
  12.        items: [{  
  13.            title: 'Footer-s',  
  14.            region: 'south',  
  15.            height: 100,  
  16.            minSize: 75,  
  17.            maxSize: 250,  
  18.            html: '这是南边区域 south'  
  19.   
  20.        }, {  
  21.            titlr: 'Main Content-c',  
  22.            region: 'center',  
  23.            collapsible: false,  
  24.            html: '这是中间区域 center'  
  25.        }, {  
  26.            title: 'Navigation-w',  
  27.            region: 'west',  
  28.            width: 150,  
  29.            minSize: 100,  
  30.            maxSize: 250,  
  31.            html: '这是西边区域 west'  
  32.        }, {  
  33.            title: 'North',  
  34.            region: 'north',  
  35.            height: 100,  
  36.            html: '这是北边区域 north'  
  37.        }, {  
  38.            title: 'East',  
  39.            region: 'east',  
  40.            width: 150,  
  41.            html: '这是东边区域 east'  
  42.        }]  
  43.    });</span>  


运行结果：

 

 

 

二、form 布局

简介：也称“表单布局”。是一种专门用于管理表单中输入字段的布局,这种布局在程序中主要用于创建表单字段或表单元素使用。

注意：它可以是一种布局样式，也可以是一个组件。也就是说既可以 layout : ‘form’ 也可以 new Ext.FormPanel 来使用它。区别就是对于 Panel 我们配置了 layout 为 form ，而对于 FormPanel 它默认的布局就是form布局，所以对于习惯于用 Panel 而不习惯用 FormPanel 的朋友尽管用Panel,但是一定要考虑好提交的问题，如果使用 panel 的话，要做提交可是要一个个获得控件的值的，而 FromPanel 则不需要。

js代码：

 

[javascript] view plain copy
 
 print?
  1. var formPanel = new Ext.FormPanel({  
  2.        renderTo: 'formDiv',  
  3.        width: 500,  
  4.        height: 300,  
  5.        labelWidth: 80,  
  6.        defaultType: 'textfield',  
  7.        frame: true,  
  8.        items: [{  
  9.            fieldLabel: '用户名',  
  10.            name: 'username'  
  11.        }, {  
  12.            fieldLabel: '密码',  
  13.            name: 'password'  
  14.        }, {  
  15.            fieldLabel: '日期',  
  16.            name: 'date',  
  17.            xtype: 'datefield',  
  18.        }]  
  19.    });</span>  


运行结果：

 

 

三、absolute 布局

简介：也称“绝对定位布局”。该布局使用很简单粗暴，直接给出其x、y值来定位即可。

注意：x、y值是相对其父容器而言，从左上角（0,0）开始计算。

js代码：

 

[javascript] view plain copy
 
 print?
  1. var absolutePanel = new Ext.Panel({  
  2.        renderTo: 'absoluteDiv',  
  3.        layout: 'absolute',  
  4.        title: 'Absolute Layout',  
  5.        width: 500,  
  6.        height: 300,  
  7.        items: [{  
  8.            title: 'panel-1',  
  9.            x: 50,  
  10.            y: 50,  
  11.            html: 'x:50,y:50'  
  12.        }, {  
  13.            title: 'panel-2',  
  14.            x: 100,  
  15.            y: 100,  
  16.            html: 'x:100,y:100',  
  17.        }]  
  18.    });</span>  

运行结果：

 



 

四、column 布局

简介：也称“列布局”。该布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过子元素制定columnWidth和width来制定列的宽度,columnWidth是按百分比来制定列的宽度,width是按照绝对像素来制定列的宽度。在实际应用中可以两种混合使用。

注意：该布局的子面板的所有columnWidth值必须在0~1之间或者是百分比。columnWidth值的总和应该为1，即100%。另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。 

js代码：

[javascript] view plain copy
 
 print?
  1. var columnPanel = new Ext.Panel({  
  2.        renderTo: 'columnDiv',  
  3.        layout: 'column',  
  4.        width: 500,  
  5.        height: 300,  
  6.        items: [{  
  7.            title: 'Width = 25%',  
  8.            columWidth: .25,  
  9.            html: '111111111111'  
  10.        }, {  
  11.            title: 'Width = 75%',  
  12.            columnWidth: .75,  
  13.            html: '111111111111'  
  14.        }, {  
  15.            title: 'Width = 200px',  
  16.            width: 200,  
  17.            html: '111111111111'  
  18.        }]  
  19.    });</span>  

运行结果:

 

 

五、accordion 布局

简介：也称“可折叠布局”、“手风琴布局”。该布局的容器的子元素是可折叠的形式表现。

注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。

js代码：

 

[javascript] view plain copy
 
 print?
  1. var accordionPanel = new Ext.Panel({  
  2.        renderTo: 'accordionDiv',  
  3.        layout: 'accordion',  
  4.        title: 'Accordion Layout',  
  5.        width: 500,  
  6.        height: 300,  
  7.        layoutConfig: {animate: false},  
  8.        items: [{  
  9.            title: 'panel-1', html: 'hello accordion'  
  10.        }, {  
  11.            title: 'panel-2', html: '<p>段落</p>'  
  12.        }, {  
  13.            title: 'panel-3', html: '<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>'  
  14.        }, {  
  15.            title: 'panel-4', html: '<button>按钮</button>'  
  16.        }]  
  17.    });</span>  

运行结果：

 



六、table 布局

简介：也称“表格布局”。按照普通表格的方法布局子元素，用 layoutConfig:{columns:3} ,//将父容器分成3列。它的item可配置的参数有：rowspan 合并的行数；colspan 合并的列数。

注意：table布局本身并没有什么特殊功能，它所实现的效果其实完全可以用 border 布局和 column 布局等方式代替，而且这些布局方式更灵活。

js代码：

 

[javascript] view plain copy
 
 print?
  1. <pre name="code" class="javascript">var tablePanel = new Ext.Panel({  
  2.         renderTo: 'tableDiv',  
  3.         width: 500,  
  4.         height: 300,  
  5.         layout: 'table',  
  6.         layoutConfig: {columns: 3},//定义了一共要分3列  
  7.         items: [  
  8.             {title: 'panel-1', html: '1111111111',rowspan:2},//合并了2行  
  9.             {title: 'panel-2', html: '2222222222',colspan:2},//合并了2列  
  10.             {title: 'panel-3', html: '3333333333'},  
  11.             {title: 'panel-4', html: '4444444444'}  
  12.         ]  
  13.     });  


运行结果：




 


七、fit 布局


简介：也称“自适应布局”。子元素将自动填满整个父容器。。


注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。


js代码：


 






[javascript] view plain copy

 

 print?




    

  1. var fitPanel = new Ext.Panel({  
    2. 

  2.        renderTo: 'fitDiv',  
    3. 

  3.        layout: 'fit',  
    4. 

  4.        width: 500,  
    5. 

  5.        height: 300,  
    6. 

  6.        items: [{  
    7. 

  7.            title: 'Fit Panel',  
    8. 

  8.            html: '111111111111'  
    9. 

  9.        }]  
    10. 

  10.    });</span>  
    11. 



运行结果：


 




 


八、card 布局


简介：也称“卡牌布局”、“卡片式布局”。该布局最TMD麻烦了。这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分步提交。


注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。可以通过调用 setActiveItem( ) 函数来实现跳转。由于只有一个面板处于显示状态，那么在初始时，我们可以使用 activeItem： 属性来指定某一个面板的显示。对了，如果Ext-4 之后的版本就不是这样操作了。


js代码：


 






[javascript] view plain copy

 

 print?




    

  1. // card布局所需要的跳转方法-setActiveItem  
    2. 

  2.    var i=0;  
    3. 

  3.    var navHandler = function(direction){  
    4. 

  4.   
    5. 

  5.        if (direction == -1){  
    6. 

  6.            i--;  
    7. 

  7.            if (i < 0) { i = 0;}  
    8. 

  8.        }  
    9. 

  9.        if (direction == 1){  
    10. 

  10.            i++;  
    11. 

  11.            if (i > 2) { i = 2; return false;}  
    12. 

  12.        }  
    13. 

  13.        cardPanel.getLayout().setActiveItem(i);  
    14. 

  14.    };  
    15. 

  15.   
    16. 

  16.    var cardPanel = new Ext.Panel({  
    17. 

  17.        renderTo: 'cardDiv',  
    18. 

  18.        layout: 'card',  
    19. 

  19.        title:'注册向导',  
    20. 

  20.        width: 500,  
    21. 

  21.        height: 300,  
    22. 

  22.        activeItem: 0,  
    23. 

  23.        bodyStyle:'padding:15px',  
    24. 

  24.        defaults:{  
    25. 

  25.            border:false  
    26. 

  26.        },  
    27. 

  27.        bbar: [ {  
    28. 

  28.            id: 'move-prev',  
    29. 

  29.            text: '«Previous',  
    30. 

  30.            handler:navHandler.createDelegate(this,[-1])  
    31. 

  31.        },'->', {  
    32. 

  32.            id: 'move-next',  
    33. 

  33.            text: 'Next »',  
    34. 

  34.            handler:navHandler.createDelegate(this,[1])  
    35. 

  35.        }],  
    36. 

  36.        items: [{  
    37. 

  37.            id: 'card-0',  
    38. 

  38.            html: '<h1>欢迎来到注册向导！</h1><p>Step 1 of 3</p>'  
    39. 

  39.        }, {  
    40. 

  40.            id: 'card-1',  
    41. 

  41.            html: '<h1>请填写注册资料！</h1><p>Step 2 of 3</p>'  
    42. 

  42.        }, {  
    43. 

  43.            id: 'card-2',  
    44. 

  44.            html: '<h1>注册成功！</h1><p>Step 3 of 3 - Complete</p>'  
    45. 

  45.        }]  
    46. 

  46.    });</span>  
    47. 



运行结果：


 






 


九、anchor 布局


简介：也称“锚点布局”。感觉无卵用， anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。


注意：anchor属性为一组字符串，可以使用百分比或者是-数字（注意前面是有负号的，即数字为负数）来表示，字符串之间用空格隔开。


js代码：






[javascript] view plain copy

 


 print?





    

  1. var anchorPanel = new Ext.Panel({  
    2. 

  2.      renderTo: 'anchorDiv',  
    3. 

  3.      layout: 'anchor',  
    4. 

  4.      title: 'Anchor Layout',  
    5. 

  5.      width: 500,  
    6. 

  6.      height: 300,  
    7. 

  7.      items: [{  
    8. 

  8.          title: 'panel-1',  
    9. 

  9.          height: 100,  
    10. 

  10.          anchor: '-50',  
    11. 

  11.          html: '高度等于100，宽度 = 容器宽度 - 50'  
    12. 

  12.      }, {  
    13. 

  13.          title: 'panel-2',  
    14. 

  14.          height: 100,  
    15. 

  15.          anchor: '50%',  
    16. 

  16.          html: '高度等于100，宽度 = 容器宽度的50%'  
    17. 

  17.      },{  
    18. 

  18.          title:'panel-3',  
    19. 

  19.          anchor: '50% 50%',  
    20. 

  20.          html: '高度、宽度 = 容器的50%'  
    21. 

  21.      }]  
    22. 

  22.  });</span>  
    23. 





运行结果：




 


十、tab 布局


简介：也称“分页布局”、“标签布局”。


注意：码字好累，这个布局你懂得，不多说了。


js代码：


 






[javascript] view plain copy

 


 print?





    

  1. var tabPanel = new Ext.TabPanel({  
    2. 

  2.       renderTo: 'tabDiv',  
    3. 

  3.       width: 500,  
    4. 

  4.       height: 300,  
    5. 

  5.       activeTab: 0, // 默认显示第一个Tab的内容  
    6. 

  6.       defaults: {  
    7. 

  7.           autoScroll: true  
    8. 

  8.       },  
    9. 

  9.       items: [{  
    10. 

  10.           title: 'Tab-0',  
    11. 

  11.           html: "第一个Tab的内容"  
    12. 

  12.       }, {  
    13. 

  13.           title: 'Tab-1',  
    14. 

  14.           html: '我是另一个Tab',  
    15. 

  15.       }, {  
    16. 

  16.           title: 'Tab-2',  
    17. 

  17.           html: '这是一个可以关闭的Tab',  
    18. 

  18.           closable: true  
    19. 

  19.       }]  
    20. 

  20.   });</span>  
    21. 





运行结果：


 






 


十一、vbox 布局


简介：也称“竖直布局”。vertical box ，垂直方向的分行显示。它的 item 有一个 flex属性，其值越大，对应的组件就会占据越大的空间。


注意：无


js代码：


 






[javascript] view plain copy

 


 print?





    

  1. var vboxPanel = new Ext.Panel({  
    2. 

  2.        renderTo: 'vboxDiv',  
    3. 

  3.        layout: {  
    4. 

  4.            type: 'vbox',  
    5. 

  5.            align: 'stretch' //拉伸使其充满整个父容器  
    6. 

  6.        },  
    7. 

  7.        width: 500,  
    8. 

  8.        height: 300,  
    9. 

  9.        items: [{  
    10. 

  10.            title: 'panel-1', html: 'flex:1', flex: 1  
    11. 

  11.        }, {  
    12. 

  12.            title: 'panel-2', html: 'height:150', height: 150  
    13. 

  13.        }, {  
    14. 

  14.            title: 'panel-3', html: 'flex:2', flex: 2  
    15. 

  15.        }]  
    16. 

  16.    });</span>  
    17. 





运行结果：


 






十二、hbox 布局


简介：也称“水平布局”。horizontal box ，水平方向的分列显示。和 vbox 类似，有flex 属性。


注意：无


js代码：


 






[javascript] view plain copy

 


 print?





    

  1. var hbox = new Ext.Panel({  
    2. 

  2.        renderTo: 'hboxDiv',  
    3. 

  3.        layout: {  
    4. 

  4.            type: 'hbox',  
    5. 

  5.            align: 'stretch'  
    6. 

  6.        },  
    7. 

  7.        width: 500,  
    8. 

  8.        height: 300,  
    9. 

  9.        items: [{  
    10. 

  10.            title: 'panel-1', html: 'flex:1', flex: 1  
    11. 

  11.        }, {  
    12. 

  12.            title: 'panel-2', html: 'height:150', width: 150  
    13. 

  13.        }, {  
    14. 

  14.            title: 'panel-3', html: 'flex:2', flex: 2  
    15. 

  15.        }]  
    16. 

  16.    })</span>  
    17. 





运行结果：


 






 


总结：


简单总结起来border布局一般作为页面整体布局来使用；fit布局适用于那种需要将子类完全占满父类容器的情况；column布局用于多列；form是一种表单特有布局方式，实质是一行一控件的形式；table布局适用多行多列但是有时宽高不太容易控制。而且值得强调的一点就是给一个控件设置layout属性，其实指的是其内部控件的布局方式而不是它本身的布局，这点要搞清楚。


 


----------------------------------------------------- end -----------------------------------------------------






            

            
posted @ 
2024-07-12 19:43 
奔跑de陀螺 
阅读(77) 
评论(0) 
编辑 
收藏 
举报