ExtJS4布局【转自MHZG.NET】

最新推荐文章于 2020-12-31 01:55:07 发布
最新推荐文章于 2020-12-31 01:55:07 发布
阅读量176 收藏
点赞数
文章标签： ext extjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yishowifyyx/article/details/84173991
版权
面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：
ContainerLayout（容器布局）
FitLayout（自适应布局）
AccordionLayout（折叠布局）
CardLayout（卡片式布局）
AnchorLayout（锚点布局）
AbsoluteLayout（绝对位置布局）
FormLayout（表单布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（边框布局）


Extjs4布局详解(一)—Fit布局


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

示例代码： 

 var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'company'},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ],
        data: myData
    });
    Ext.define('DataWindow',{
        extend : 'Ext.window.Window',
        title : 'MHZG.NET---Fit布局示例代码',
        width:550,
        layout : 'fit',
        items : {
            xtype : 'gridpanel',
            store: store,
            columns: [
               {
                   text     : 'Company',
                   flex     : 1,
                   sortable : false,
                   dataIndex: 'company'
               },
               {
                   text     : 'Price',
                   width    : 75,
                   sortable : true,
                   renderer : 'usMoney',
                   dataIndex: 'price'
               },
               {
                   text     : 'Change',
                   width    : 75,
                   sortable : true,
                   dataIndex: 'change'
               },
               {
                   text     : '% Change',
                   width    : 75,
                   sortable : true,

                   dataIndex: 'pctChange'
               },
               {
                   text     : 'Last Updated',
                   width    : 85,
                   sortable : true,
                   renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                   dataIndex: 'lastChange'
               }]
        }
    });
    Ext.onReady(function(){
        var win = Ext.create("DataWindow",{
            x:10,
            y:20,
        });
        win.show();
    });




Extjs4布局详解(二)—border布局


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区域时，会出现报错信息。

示例代码： 

  Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 400,
            title: 'MHZG.NET-Border Layout',
            layout: 'border',
            x:20,
            y:20,
            items: [{
                title: 'South Region is resizable',
                region: 'south',
                xtype: 'panel',
                height: 80,
                split: true,
                margins: '0 5 5 5'
            },{
                title: 'West Region is collapsible',
                region:'west',
                xtype: 'panel',
                margins: '5 0 0 5',
                width: 200,
                collapsible: true,
                id: 'west-region-container',
                layout: 'fit'
            },{
                title: 'Center Region',
                region: 'center',
                xtype: 'panel',
                layout: 'fit',
                margins: '5 5 0 0',
                html:'在Extjs4中，center区域必须指定，否则会报错。'
            }],
            renderTo: Ext.getBody()
        });



Extjs4布局详解(三)—accordion布局


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

示例代码： 

 Ext.create('Ext.panel.Panel', {
            title: 'Accordion Layout',    
            width: 300,     
            height: 300,
            x:20,
            y:20,
            layout:'accordion',    
            defaults: {
                bodyStyle: 'padding:15px'
            },
            layoutConfig: {       
                titleCollapse: false,        
                animate: true,        
                activeOnTop: true     
            },    
            items: [{        
                title: 'Panel 1',        
                html: 'Panel content!'     
            },{        
                title: 'Panel 2',        
                html: 'Panel content!'    
            },{
                title: 'Panel 3',        
                html: 'Panel content!'    
            }],     
            renderTo: Ext.getBody()
        });


[img]http://www.mhzg.net/upload/2012/2/89951.jpg[/img]


Extjs4布局详解(四)—Card布局


Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。

下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理： 

 var navigate = function(panel, direction){     
            var layout = panel.getLayout();    
            layout[direction]();     
            Ext.getCmp('move-prev').setDisabled(!layout.getPrev());     
            Ext.getCmp('move-next').setDisabled(!layout.getNext());
        }; 
        Ext.create('Ext.panel.Panel', {    
            title: 'MHZG.NET-Card布局示例',    
            width: 300,     
            height: 202,    
            layout: 'card',     
            activeItem: 0,
            x:30,
            y:60,
            bodyStyle: 'padding:15px',    
            defaults: {border: false},
            bbar: [{            
                id: 'move-prev',            
                text: 'Back',             
                handler: function(btn) {
                    navigate(btn.up("panel"), "prev");            
                },
                disabled: true
            },
            '->',
            {
                id: 'move-next',            
                text: 'Next',             
                handler: function(btn) {
                    navigate(btn.up("panel"), "next");
                }
            }],
            items: [{
                id: 'card-0',
                html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'     
            },
            {
                id: 'card-1',
                html: '<p>Step 2 of 3</p>'
            },
            {
                id: 'card-2',
                html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'     
            }],    
            renderTo: Ext.getBody()
        });



Extjs4布局详解(五)—anchor布局


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

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

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

anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%

anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200

anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%

示例代码： 

 Ext.create('Ext.Panel', {    
            width: 500,    
            height: 400,     
            title: "MHZG.NET-AnchorLayout Panel",    
            layout: 'anchor',
            x:60,
            y:80,
            renderTo: Ext.getBody(),    
            items: [{        
                xtype: 'panel',         
                title: '75% Width and 25% Height',        
                anchor: '75% 25%'    
            },{         
                xtype: 'panel',        
                title: 'Offset -300 Width & -200 Height',         
                anchor: '-300 -200'         
            },{        
                xtype: 'panel',         
                title: 'Mixed Offset and Percent',        
                anchor: '-250 30%'    
            }]
        });



Extjs4布局详解(六)—Absolute布局


Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。 


    Ext.create('Ext.form.Panel', {    
            title: 'MHZG.NET - Absolute Layout',    
            width: 300,     
            height: 275,
            x:20,
            y:90,
            layout:'absolute',    
            defaultType: 'textfield',    
            items: [{
                x: 10,        
                y: 10,         
                xtype:'label',        
                text: 'Send To:'    
            },{
                x: 80,         
                y: 10,        
                name: 'to',         
                anchor:'90%'    
            },{        
                x: 10,         
                y: 40,        
                xtype:'label',        
                text: 'Subject:'    
            },{         
                x: 80,        
                y: 40,        
                name: 'subject',         
                anchor: '90%'
            },{        
                x:0,         
                y: 80,        
                xtype: 'textareafield',        
                name: 'msg',         
                anchor: '100% 100%'
            }],     
            renderTo: Ext.getBody()
        });


Absolute Layout

效果图
[img]http://www.mhzg.net/upload/2012/2/289323433.jpg[/img]


Extjs4布局详解(七)—Column布局


Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。

注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。


示例代码： 


    Ext.create('Ext.panel.Panel', {         
            title: 'MHZG.NET - Column Layout - 按比例',        
            width: 350,         
            height: 250,
            x:20,
            y:100,   
            layout:'column',    
            items: [{             
                title: 'Column 1',            
                columnWidth: .25        
            },{             
                title: 'Column 2',            
                columnWidth: .55        
            },{             
                title: 'Column 3',            
                columnWidth: .20        
            }],         
            renderTo: Ext.getBody()    
        });


[img]http://www.mhzg.net/upload/2012/2/29101756238.jpg[/img] 


    Ext.create('Ext.Panel', {         
            title: 'MHZG.NET - Column Layout - 混合模式',        
            width: 350,        
            height: 250,
            x:20,
            y:120,     
            layout:'column',        
            items: [{            
                title: 'Column 1',             
                width: 120        
            },{            
                title: 'Column 2',             
                columnWidth: .7        
            },{            
                title: 'Column 3',             
                columnWidth: .3        
            }],        
            renderTo: Ext.getBody()    
        });



[img]http://www.mhzg.net/upload/2012/2/29101916550.jpg[/img]
yishowifyyx
关注
pdfPCell中设置单元格 setRowspan()与setColspan()，setPadding(),setBorder()
zpryan的专栏
09-12 2万+
打印pdf格式：打印的表格如下：
TutorialsPoint Angular2 ExtJS Groovy Julia MariaDB SAS VB.Net 教程
07-06
4. **ExtJS**：ExtJS是一个用于构建富客户端Web应用程序的JavaScript库，基于Sencha公司开发。它提供了一套完整的组件模型、数据绑定和强大的图表功能，常用于企业级应用开发。 5. **Groovy**：Groovy是Java平台上...
EXTJS4自学手册——EXT容器布局（Auto,Anchor,Absolute,Hbox）
wh591344741的专栏
04-20 1140
一、auto布局 说明：组件在容器中根据渲染顺序从上大小依次排列 例子： script type="text/javascript"> 在页面加载完成后调用JS代码--> Ext.onReady(function(){ //定义panel组件var panel1 = Ext.create('Ext.panel.Panel',{
extjs的panel怎么自适应高度_ExtJS 4中，accordion布局的Panel下，TreePanel高度自动适应...
weixin_30801745的博客
12-31 316
在accordion布局的Panel下，每个item放一个Treepanel应该是很常见的做法，但是在实际项目中发现，TreePanel的高度总是没办法恰好适应，要不就是Treepanel是完整高度的，超出了Panel的高度，下面的内容就无法显示出来了，如果是固定的高度，那么底部又有很多空白，通过监听Panel的resize事件可以很方便的解决这个问题。在Panel下添加一个resize的监听器，...
ExtJS4 布局及边框
程序人生，Zaza
02-16 1714
this.items=[{ fieldLabel:'公告内容', maxLength:50, xtype:'htmleditor', height:400, name:'content' },{ layout:'column',
Extjs4布局详解(六)—Column布局
coolybq的专栏
01-07 6692
Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。 Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。 Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使
Extjs4布局详解(二)——border布局
随风的专栏
01-17 722
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。 注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
Extjs4布局详解(一)—Fit布局
coolybq的专栏
01-07 1785
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素 在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的
Extjs4开发--框架的搭建（转）
zhousheng193的专栏
03-09 133
本文转自：http://www.mhzg.net/a/20116/201162913210280.html Extjs4开发笔记(二)——框架的搭建 2011-06-29    来源：mhzg    作者：mhzg    (共8 条评论) 头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，由于使用的是Extjs4，所以我们一定要使用Extjs4 动态加...
Extjs4布局详解(五)—anchor布局
coolybq的专栏
01-07 1627
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。 Anch
基于.NET MVC4、IbatisNet和log4net的ExtJS5增删改查设计源码
09-25
本项目为基于.NET MVC4、IbatisNet和log4net框架，结合ExtJS5前端技术实现的增删改查功能设计源码。项目包含829个文件，涵盖332个GIF图像、235个PNG图像、83个DLL库文件、51个XML配置文件、32个NUPKG包文件、31个CSS...
cms.zip_DotnetNuke_ExtJs for .net_cms_extjs_extjs cms .net
09-14
DotnetNuke与ExtJS：构建高效.NET CMS 在当今的Web开发领域，内容管理系统（CMS）已经成为构建网站和应用程序的必备工具。其中，DotnetNuke和ExtJS是两个非常重要的技术组件，它们共同为.NET平台提供了一个强大的、...
学习ExtJS form布局
01-21
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels：tru表示隐藏标签，默认为false。 ...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
前端初始化资源包初始化前端
10-01
.....................
vmware ubuntu22.04安装教程.docx
最新发布
10-01
vmware ubuntu22.04安装教程
语音处理相关的代码------matlab实现_______________开箱即用_soundProcess.zip
10-01
语音处理相关的代码------matlab实现_______________开箱即用_soundProcess
numpy-2.1.1-cp313-cp313t-macosx-14-0-x86-64.whl
10-01
numpy
ExtJS4布局详解：Fit布局原理与应用
"本文详细介绍了ExtJS4中的Fit布局，包括其特点、应用场景及示例代码。同时提到了在Fit布局中设置子元素宽度无效，并且如果有多个子元素，只会显示第一个。" 在ExtJS4中，布局管理是构建用户界面的关键部分，它决定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值