`

Ext常用6大布局方式

    博客分类:
  • ext
ext 
阅读更多

只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局

 

 

简单说明最常用到的6种布局方式:

一.最简单的布局:FitLayout

new Ext.Viewport({ layout:'fit', items:[oGrid] //oGrid是一个表格 });



 

 

 

 

 

注意:
1.使用Fit布局 items中只能有一个组件,如果你放置了多个组件,也只能是第一个用效。
2.使用Fit布局在组件中不能使用:autoHeight:true 否则会使FitLayout实效



二.最常用的布局:BorderLayout

new Ext.Viewport({ layout:'border', items:[ {region:'north',height:100}, {region:'south',height:100}, {region:'west',width:200}, {region:'east',width:200}, {region:'center'} ] });

 

 注意:
1.center属性值必须指定
2.north,south 不要指定width
3.west,east不要指定height
4.不要使用autoHeight,autoWidth
5.添加split:true属性可以控制区域大小



三.表单布局:FormLayout

new Ext.form.FormPanel({ layout:'form', //默认是FormLayout布局(可写可不写) items:[{ xtype:'textfield' fieldLabel:'名称', name:'name', anchor:'90%' },{ xtype:'datefield', fieldLabel:'生日', name:'birthday', anchor:'90%' },{ xtype:'textfield', fieldLabel:'性别', name:'sex', anchor:'90%' }] });

 

 注意:
1.从上面的继承图可以看出FormLayout是AnchorLayout的子类,因此可以在里面使用anchor属性设置大小比例
2.FormLayout是FormPanel默认的布局方式,因此可以不显示写出Layout:'form'
3.fieldLabel,boxLabel在FormLayout布局情况下才能显示出来



四.列布局:ColumnLayout

 

new Ext.Viewport({ layout:'column', itmes:[{ title:'第一列', columnWidth:.3 //30% },{ title:'第二列', columnWidht:.3 //30% },{ title:'第三列', columnWidth:.4 //40% }] });


 

 

 

 

 

 注意:
1.items的每个子组件中的columnWidth加起来的和必须为1



五.控制大小布局:AnchorLayout

new Ext.Viewport({ layout:'anchor', itmes:[{ title:'one', anchor:'50% 60%'//表示所占宽度,高度的百分比 },{ title:'two', anchor:'40%' //表示所占宽度,高度百分比都是40% },{ title:'three', anchor:'-20 -100' //表示距离右侧的20px,距离底部100px },{ title:'four', anchor:'-300' //表示距离右侧,底部都为300px }] });

 

六.伸缩折叠布局:Accordion

 

new Ext.Viewport({ layout:'border', items:[{ region:'west', width:200, layout:'accordion', //伸缩折叠布局 layoutConfig:{ titleCollapse:true, //单击标题可以折叠 animate:true, //展开折叠时的动画效果 activeOnTop:true,//展开的子面板的顺序总在最上面 }, items:[{ title:'第一栏', html:'one' },{ title:'第二栏', html:'two' },{ title:'第三栏', html:'three' },{ title:'第四栏', html:'four' }] },{ region:'center', split:true, border:true }] });

 

 

 

 注意:
1.使用Accordion布局一定要设置标题:title
2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面 ;

 

 

 

 

 2012.3.12增加  

ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置。

  Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。

 

 

 

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

 

另外还有3种布局方式,最开始没提到

  • absolute

顾名思义,在容器内部,根据指定的坐标定位显示 

 

 

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

 

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

  

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

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

 

 

 

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

 

分享到:
评论

相关推荐

    Ext常用布局

    本篇文章将深入探讨Ext中常用的两种布局:Fit布局和Border布局,为初学者提供详细的指导。 首先,我们来看Fit布局。Fit布局主要用于那些需要完全填充容器空间的场景。它只有一个子组件可以展示,并且该子组件会自动...

    Ext3.2常用的布局示例

    环境:Window XP Sp3、IE 7、FireFox、Tomcat 6.0、Eclipse 3.3 使用步骤: 1、下载解压缩之后,使用IDE导入工程...3、一一注释main.js中的演示方法,可以看到11种Ext常用的布局方式 阅读:本中心学习Ext框架开发的学员

    Ext常用属性总结

    本文将深入探讨"Ext常用属性总结"这一主题,帮助开发者更好地理解和利用ExtJS的特性。 首先,让我们了解几个基本的ExtJS概念。`Ext.Component`是所有UI组件的基础类,它拥有众多属性来控制组件的行为、外观和交互。...

    EXT 布局 Layout 资料

    ### 其他常用布局 除了 Border 和 Column 布局之外,Ext JS 还提供了多种其他布局选项,如: - **Fit 布局**:该布局使得容器中的单一子元素充满整个容器空间。 - **Form 布局**:适用于表单,它使子元素以标签/...

    Ext常用属性总结.doc

    ### Ext常用属性总结 在开发基于Ext JS框架的应用程序时,了解并熟练掌握其核心组件的属性是非常重要的。本文将详细介绍Ext JS中常用的属性及其应用场景,帮助开发者更好地编写高效、可维护的代码。 #### 一、Ext ...

    Ext介绍以及_ext页面布局

    4. **Border布局**:Border布局是最常用的布局之一,它将容器分为五个区域:东(east)、南(south)、西(west)、北(north)和中心(center)。每个区域可以独立放置组件,提供灵活的页面布局。 例如,创建一个包含北部...

    ext常用操作

    - Ext JS 支持多种布局方式,可以根据实际需求选择合适的布局方式。 - 示例:使用表单布局来组织表单字段。 5. **国际化** - 支持多种语言包,可以在不同语言环境下使用相同的代码。 - 示例:根据用户选择的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    EXT教程EXT用大量的实例演示Ext实例

    其中BorderLayout是一种常用的布局方式,它能将页面区域划分为五个部分,每个部分都可以独立设置属性。 #### 7. 拖拽功能和基础问题 拖拽功能在Ext JS中实现起来非常简单,开发者可以轻松实现各种拖拽效果,例如...

    Windows读取Ext4分区的工具 Ext2Read

    Linux最常用的文件系统类型之一就是EXT系列,包括EXT2、EXT3和EXT4。然而,Windows操作系统默认并不支持直接读取这些格式的分区。这时,就需要借助第三方工具来实现这一目标,例如“Windows读取Ext4分区的工具”——...

    ext API帮助文档(chm格式),及ext教程

    EXT的布局管理是其灵活性的关键,有多种布局方式,如fit布局、border布局、form布局等,可以根据需求选择合适的布局以适应不同的界面设计。 学习EXT,不仅需要理解API和基本组件,还要熟悉MVC(Model-View-...

    多年积攒下来的EXT3.3例子大放送

    这个压缩包文件"多年积攒下来的EXT3.3例子大放送"显然包含了一系列EXTJS的示例代码,帮助开发者深入理解和应用EXTJS控件,以及如何进行后台数据的交互和报表展示。下面将详细探讨EXTJS、EXT3.3版本的关键特性,以及...

    Ext 表单布局实例代码

    EXT JS提供了多种布局方式,使得开发者可以灵活地设计和组织表单元素。在提供的代码实例中,我们看到了一个基于EXT JS的表单布局,其中包括了各种类型的表单字段以及一个HTML编辑器。下面我们将详细分析这段代码并...

    Ext常用扩展插件实例收集

    6. **LovCombo**: LovCombo,即“List-Of-Values Combo”,是一个增强版的ComboBox,通常用于显示一个预定义的值列表供用户选择。它增加了搜索功能和下拉列表的分页,适用于那些包含大量数据的下拉选项,提高用户...

    ext_教程 (ext 相 关)

    通过阅读这份文档,你可以了解EXT的基本架构,学习如何创建窗口、面板、表单等常用UI元素,以及如何管理布局、处理事件和数据绑定。 EXT学习文档是进一步深入EXT的重要资料。文档中可能涵盖了EXT的高级特性,如数据...

    ext UI效果模板

    这款模板集包含了EXT库的所有特色功能,覆盖了从基础控件到复杂布局的各种应用场景。 EXT UI模板的亮点在于它提供了源代码,这意味着开发者可以直接查看和修改代码,以适应自己的项目需求。无论是新手还是经验丰富...

    读Ext之十三(Ext元素)

    Ext.js是一个用于构建富客户端Web应用的JavaScript库,它提供了丰富的UI组件、数据管理和布局管理功能。该框架以其强大的组件模型、优雅的API和高效的性能而闻名。 标题“读Ext之十三(Ext元素)”暗示我们将关注...

    Ext组件说明 Ext组件概述

    BoxComponent是Ext中的基本布局容器,可以用来控制子元素的位置和大小。通过调整BoxComponent的配置选项,开发者可以实现灵活的布局设计。 ##### 2. **Button(按钮组件)** Button组件是Web应用中最常见的交互...

    ext学习手册(中英文版)

    "EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...

    ext控件demo+中文API+ext教程.pdf

    它通常包含了一系列预设的代码示例,展示了EXT控件的各种使用方式和功能。通过这些示例,开发者可以直接看到控件的实际效果,并能深入理解每个控件的属性、方法和事件。例如,你可以看到如何创建一个基本的按钮、...

Global site tag (gtag.js) - Google Analytics