EXTJS常用布局详解

ExtJS的容器组件都可以通过设置layout参数来选择布局改变显示风格，

它的有效值有：

absolute：控制位置，accordion：手风琴布局，anchor：控制大小，border：边界式布局，card：卡片布局，column：列布局，fit：填充式布局，form：表单布局，table：表格式布局

一共9种,在这里简单总结一下

absolute：Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用

accordion：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面板都支持展开和折叠。注意：只有Ext.Panels和所有Ext.panel.Panel子项，才可以使用accordion布局。

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var viewport = new Ext.Viewport({
  3. layout:‘border‘,
  4. items:[{
  5. region: ‘west‘,
  6. width: 200,
  7. layout: ‘accordion‘,
  8. layoutConfig: {
  9. titleCollapse: true,
  10. animate: true, //是否使用动画效果
  11. activeOnTop: false
  12. },
  13. items: [{
  14. title: ‘我的好友‘, //必须加上title参数，accordion布局中没有提供默认标题，不加一定会出错
  15. html: ‘我的好友‘
  16. },{
  17. title: ‘陌生人‘,
  18. html: ‘陌生人‘
  19. },{
  20. title: ‘黑名单‘,
  21. html: ‘黑名单‘
  22. }]
  23. },{
  24. region: ‘center‘,
  25. split: true,
  26. border: true
  27. }]
  28. });
  29. });
Ext.onReady(function(){
     var viewport = new Ext.Viewport({
        layout:‘border‘,
        items:[{
            region: ‘west‘,
            width: 200,
            layout: ‘accordion‘,
            layoutConfig: {
                titleCollapse: true,
                animate: true, //是否使用动画效果
                activeOnTop: false
            },
            items: [{
                title: ‘我的好友‘, //必须加上title参数，accordion布局中没有提供默认标题，不加一定会出错
                html: ‘我的好友‘
            },{
                title: ‘陌生人‘,
                html: ‘陌生人‘
            },{
                title: ‘黑名单‘,
                html: ‘黑名单‘
            }]
        },{
            region: ‘center‘,
            split: true,
            border: true
        }]
    });
});

anchor：
Anchor布局将使组件固定于父容器的某一位置，试用Anchor布局的子组件尺寸相对于容器的尺寸，即父容器的大小发生变化时，试用Anchor布局的组件会根据规定重新渲染位置和大小。

AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此组件在父容器中所处的位置。

anchor属性为一组字符串，可以使用百分比或者是数字来表示。配置字符串使用空格隔开。

[javascript]
view plain
copy
print
?

  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. var panel2 = new Ext.Panel({
  9. title: "panel2",
  10. height: 100,
  11. anchor: ‘50%‘,
  12. html: "高度等于100,宽度=容器宽度的50%"
  13. });
  14. var panel3 = new Ext.Panel({
  15. title: "panel3",
  16. anchor: ‘-10, -250‘,
  17. html: "宽度=容器宽度-10,高度=容器宽度-250"
  18. });
  19. var win = new Ext.Window({
  20. title: "Anchor Layout",
  21. height: 400,
  22. width: 400,
  23. plain: true,
  24. layout: ‘anchor‘,
  25. items: [panel1, panel2,panel3]
  26. });
  27. win.show();
  28. });
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：边框布局，他将整个区域分成了东、西、南、北、中五个部分，除了中间部分以外，其他部分都是可以省略的，

Border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在其items中指定试用region参数为其子元素指定具体位置。注意：north和south部分只能设置高度(height),west和east部分只能设置宽度(width)。north south west east区域变大，center区域就变小了。

参数 split：true 可以调整除了center四个区域的大小。

参数 collapsible：true 将激活折叠功能，title必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center区域不允许折叠。center区域会自动填充其他区域的剩余空间。尤其在ExtJS4.0中，当制定布局为border时，没有指定center区域时，会出现报错信息。

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var viewport = new Ext.Viewport({
  3. layout: ‘border‘,
  4. items: [
  5. {region:‘north‘,title:"north",height:100},
  6. {region:‘south‘,title:‘south‘,height:100},
  7. {region:‘east‘,title:‘east‘,width:100},
  8. {region:‘west‘,title:‘west‘,width:100},
  9. {region:‘center‘,title:‘center‘}
  10. ]
  11. });
  12. });
Ext.onReady(function(){
    var viewport = new Ext.Viewport({
        layout: ‘border‘,
        items: [
            {region:‘north‘,title:"north",height:100},
            {region:‘south‘,title:‘south‘,height:100},
            {region:‘east‘,title:‘east‘,width:100},
            {region:‘west‘,title:‘west‘,width:100},
            {region:‘center‘,title:‘center‘}
        ]
    });
});

card：卡片布局，类似于卡片一样一张张显示，可以用来实现“向导”效果，注意：由于此布局本身不提供分布导航功能，所以需要用自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以试用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var navHandler = function(direction){
  3. var wizard = Ext.getCmp(‘wizard‘).layout;
  4. var prev = Ext.getCmp(‘move-prev‘);
  5. var next = Ext.getCmp(‘move-next‘);
  6. //当前显示子面板是靠activeItem来控制的
  7. var activeId = wizard.activeItem.id;
  8. if (activeId == ‘card-0‘) { //显示索引为0的子面板
  9. if (direction == 1) {
  10. wizard.setActiveItem(1);
  11. prev.setDisabled(false);
  12. }
  13. } else if (activeId == ‘card-1‘) {
  14. if (direction == -1) {
  15. wizard.setActiveItem(0);
  16. prev.setDisabled(true);
  17. } else {
  18. wizard.setActiveItem(2);
  19. next.setDisabled(true);
  20. }
  21. } else if (activeId == ‘card-2‘) {
  22. if (direction == -1) {
  23. wizard.setActiveItem(1);
  24. next.setDisabled(false);
  25. }
  26. }
  27. };
  28. var viewport = new Ext.Viewport({
  29. layout:‘border‘,
  30. items:[{
  31. region: ‘west‘,
  32. id: ‘wizard‘,
  33. width: 200,
  34. title: ‘某某向导‘,
  35. layout:‘card‘,
  36. activeItem: 0,
  37. bodyStyle: ‘padding:15px‘,
  38. defaults: {
  39. border:false
  40. },
  41. bbar: [{
  42. id: ‘move-prev‘,
  43. text: ‘上一步‘,
  44. handler: navHandler.createDelegate(this, [-1]),
  45. disabled: true
  46. }, ‘->‘,{
  47. id: ‘move-next‘,
  48. text: ‘下一步‘,
  49. handler: navHandler.createDelegate(this, [1])
  50. }],
  51. items: [{
  52. id: ‘card-0‘,
  53. html: ‘<p>第一步，一共三步</p>‘
  54. },{
  55. id: ‘card-1‘,
  56. html: ‘<p>第二步，一共三步</p>‘
  57. },{
  58. id: ‘card-2‘,
  59. html: ‘<p>第三步，一共三步，最后一步了。</p>‘
  60. }]
  61. },{
  62. region: ‘center‘,
  63. split: true,
  64. border: true
  65. }]
  66. });
  67. });
Ext.onReady(function(){

    var navHandler = function(direction){

        var wizard = Ext.getCmp(‘wizard‘).layout;
        var prev = Ext.getCmp(‘move-prev‘);
        var next = Ext.getCmp(‘move-next‘);
		//当前显示子面板是靠activeItem来控制的
        var activeId = wizard.activeItem.id;

        if (activeId == ‘card-0‘) { //显示索引为0的子面板
            if (direction == 1) {
                wizard.setActiveItem(1);
                prev.setDisabled(false);
            }
        } else if (activeId == ‘card-1‘) {
            if (direction == -1) {
                wizard.setActiveItem(0);
                prev.setDisabled(true);
            } else {
                wizard.setActiveItem(2);
                next.setDisabled(true);
            }
        } else if (activeId == ‘card-2‘) {
            if (direction == -1) {
                wizard.setActiveItem(1);
                next.setDisabled(false);
            }
        }
    };

    var viewport = new Ext.Viewport({
        layout:‘border‘,
        items:[{
            region: ‘west‘,
            id: ‘wizard‘,
            width: 200,
            title: ‘某某向导‘,
            layout:‘card‘,
            activeItem: 0,
            bodyStyle: ‘padding:15px‘,
            defaults: {
                border:false
            },
            bbar: [{
                id: ‘move-prev‘,
                text: ‘上一步‘,
                handler: navHandler.createDelegate(this, [-1]),
                disabled: true
            }, ‘->‘,{
                id: ‘move-next‘,
                text: ‘下一步‘,
                handler: navHandler.createDelegate(this, [1])
            }],
            items: [{
                id: ‘card-0‘,
                html: ‘<p>第一步，一共三步</p>‘
            },{
                id: ‘card-1‘,
                html: ‘<p>第二步，一共三步</p>‘
            },{
                id: ‘card-2‘,
                html: ‘<p>第三步，一共三步，最后一步了。</p>‘
            }]
        },{
            region: ‘center‘,
            split: true,
            border: true
        }]
    });

});

column：列布局，
这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。c
olumn布局没有直接的配置选项（继承的除外），但column布局支持一个columnWidth属性，在布局过程中，试用columnWidth指定每个面板的宽度。

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var viewport = new Ext.Viewport({
  3. layout:‘column‘,
  4. items: [{
  5. title: ‘Column 1‘,
  6. columnWidth: .25 //注意items中每个子组件的columnWidth参数为0~1之间的一个小数，标识每个子组件在整体中所占的百分比，总和为1
  7. },{
  8. title: ‘Column 2‘,
  9. columnWidth: .4
  10. },{
  11. title: ‘Column 3‘,
  12. columnWidth: .35
  13. }]
  14. });
  15. });
Ext.onReady(function(){

    var viewport = new Ext.Viewport({
        layout:‘column‘,
        items: [{
            title: ‘Column 1‘,
            columnWidth: .25 //注意items中每个子组件的columnWidth参数为0~1之间的一个小数，标识每个子组件在整体中所占的百分比，总和为1
        },{
            title: ‘Column 2‘,
            columnWidth: .4
        },{
            title: ‘Column 3‘,
            columnWidth: .35
        }]
    });

});

fit：填充式布局，在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个grid组件，grid组件的大小会随着父容器的大小改变而改变。

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. new Ext.Panel({
  3. title:"父容器",
  4. width:300,
  5. height:300,
  6. layout: ‘fit‘,
  7. renderTo:Ext.getBody(),
  8. items: [{title:"子组件"}]//注意这里只需要一个对象
  9. });
  10. });
Ext.onReady(function(){
    new Ext.Panel({
        title:"父容器",
		width:300,
		height:300,
		layout: ‘fit‘,
		renderTo:Ext.getBody(),
        items: [{title:"子组件"}]//注意这里只需要一个对象
    });
});

form：表单布局，这个比较简单，可以认为是组件都是一行一个

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var viewport = new Ext.Panel({
  3. layout: ‘form‘,
  4. title: ‘信息‘,
  5. width:300,
  6. autoHeight:true,
  7. renderTo:Ext.getBody(),
  8. labelAlign: ‘right‘,
  9. labelWidth: 50,//设置子组件的fieldLabel的宽度
  10. items: [{
  11. xtype:"textfield",
  12. fieldLabel: ‘名称‘,
  13. name: ‘name‘,
  14. anchor: ‘90%‘
  15. }, {
  16. xtype:"datefield",
  17. fieldLabel: ‘生日‘,
  18. name: ‘birthday‘,
  19. xtype: ‘datefield‘,
  20. anchor: ‘90%‘
  21. },{
  22. fieldLabel: ‘备注‘,
  23. name: ‘desc‘,
  24. xtype: ‘textarea‘,
  25. anchor: ‘90%‘
  26. }]
  27. });
  28. });
Ext.onReady(function(){
    var viewport = new Ext.Panel({
            layout: ‘form‘,
            title: ‘信息‘,
			width:300,
			autoHeight:true,
			renderTo:Ext.getBody(),
            labelAlign: ‘right‘,
            labelWidth: 50,//设置子组件的fieldLabel的宽度
            items: [{
				xtype:"textfield",
                fieldLabel: ‘名称‘,
                name: ‘name‘,
                anchor: ‘90%‘
            }, {
				xtype:"datefield",
                fieldLabel: ‘生日‘,
                name: ‘birthday‘,
                xtype: ‘datefield‘,
                anchor: ‘90%‘
            },{
                fieldLabel: ‘备注‘,
                name: ‘desc‘,
                xtype: ‘textarea‘,
                anchor: ‘90%‘
            }]
      });
});

table：表格式布局

[javascript]
view plain
copy
print
?

  1. Ext.onReady(function(){
  2. var viewport = new Ext.Viewport({
  3. layout:‘fit‘,
  4. items:[{
  5. title: ‘Table Layout‘,
  6. layout:‘table‘,
  7. defaults: {
  8. bodyStyle:‘padding:20px‘
  9. },
  10. layoutConfig: {
  11. columns: 3 //设置列
  12. },
  13. items: [{
  14. html: ‘<p>Cell A content</p>‘,
  15. rowspan: 2 //单元格跨两行
  16. },{
  17. html: ‘<p>Cell B content</p>‘,
  18. colspan: 2
  19. },{
  20. html: ‘<p>Cell C content</p>‘
  21. },{
  22. html: ‘<p>Cell D content</p>‘
  23. },{
  24. html: ‘<p>Cell E content</p>‘
  25. },{
  26. html: ‘<p>Cell F content</p>‘
  27. },{
  28. html: ‘<p>Cell G content</p>‘
  29. }]
  30. }]
  31. });
  32. });

Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局

1，Ext.layout.ContainerLayout 容器布局

提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在

2，Ext.layout.FitLayout 自适应布局

使用layout:‘fit‘ 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示

3，Ext.layout.AccordionLayout 折叠布局 （很常有哦！！！）

扩展自适应布局，layout:‘accordion‘ 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能

4 ，Ext.layout.CardLayout 卡片式布局 （也很有用的哦！！）

扩展自适应布局，layout:‘card‘ 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板

5，Ext.layout.AnchorLayout 锚点布局

根据容器的大小为其所包含的子面板进行定位的布局 layout:‘anchor‘ 分为：百分比，偏移，参考边 三种方式的定位

6，Ext.layout.AbsoluteLayout 绝对位置布局

根据面板中配置 x/y 坐标进行定位，layout:‘absolute‘ 坐标值支持使用固定值和百分比两种形式

7，Ext.layout.FormLayout 表单布局

用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:‘form‘

8, Ext.layout.ColumnLayout 列布局

多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:‘column‘

9, Ext.layout.TableLayout 表格布局

可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:‘table‘

10, Ext.layout.BorderLayout 边框布局

该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:‘border‘ 通过region来配置面板

viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport

EXTJS常用布局详解

时间： 2024-10-12 15:47:58

EXTJS常用布局详解的相关文章

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 实现操作向导的布局--CardL

New UI-布局之TableLayout(表格布局)详解

New UI-布局之TableLayout(表格布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://b

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 创建Extjs Window 创建Extjs Window的代码如下: //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500

New UI-布局之RelativeLayout(相对布局)详解

http://download.csdn.net/detail/zpj779878443/8334001New UI-布局之RelativeLayout(相对布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流

Android 布局学习之——Layout(布局)详解二（常见布局和布局参数）

[Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之——LinearLayout的layout_weight属性   4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局参数): 在XML文件中,我们经常看到类似与lay

New UI-布局之FrameLayout(帧布局)详解

New UI-布局之FrameLayout(帧布局)详解  --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http://bl

Ext.form.ComboBox常用属性详解

Ext.form.ComboBox常用属性详解 标签: Extjs js combo js 代码 var combo = new Ext.form.ComboBox({ store : new Ext.data.SimpleStore({ fields : ['value', 'text'], data : [['1001', '小儿迪巧'], ['1002', '成人迪巧'], ['1003', '秀源']] }), hiddenName:'product_code',//提交到后台的inpu

logback logback.xml 常用配置详解

一:根节点 包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件是否有修改的时间间隔,如果没有给出时间单位,默认单位是毫秒.当scan为true时,此属性生效.默认的时间间隔为1分钟. debug: 当此属性设置为true时,将打印出logback内部日志信息,实时查看logback运行状态.默认值为false. 例如: <configuration scan="true" scan

C语言的代码内存布局详解

一个程序本质上都是由 BSS 段.data段.text段三个组成的.这样的概念在当前的计算机程序设计中是很重要的一个基本概念,而且在嵌入式系统的设计中也非常重要,牵涉到嵌入式系统运行时的内存大小分配,存储单元占用空间大小的问题. BSS段:在采用段式内存管理的架构中,BSS段(bss segment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文Block Started by Symbol的简称.BSS段属于静态内存分配. 数据段:在采用段式内存管理的架构中,数据段(da