ExtJS中layout的12种布局风格

最新推荐文章于 2018-09-16 16:13:44 发布
转载 最新推荐文章于 2018-09-16 16:13:44 发布 · 1.8k 阅读 · 4

本文详细介绍了ExtJS中各种布局的使用方法及应用场景，包括绝对定位、手风琴、锚点、边框等常见布局。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

layout: 'absolute',
items:[{
    title: 'Panel 1',
    x: 50,
    y: 50,
    html: 'Positioned at x:50, y:50'
}]

 

· accordion 这个是最容易记的，手风琴效果

<!DOCTYPE html>
<html>
  <head>
    <title>hello-extjs</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入extjs样式文件 -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
    <!-- 引入extjs库文件，底层驱动 -->
    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
    <!-- 引入extjs-all -->
    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        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:''}  
                   ]  
                  }  
                 );  
            });  
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
     <div id="paneldiv"></div>
  </body>
</html>
复制代码

· anchor 这个效果具体还不知道有什么用，就是知道注意一下 
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，  

2.anchor值通常只能为负值(指非百分比值)，正值没有意义， 
3.anchor必须为字符串值

<!DOCTYPE html>
<html>
  <head>
    <title>hello-extjs</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入extjs样式文件 -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
    <!-- 引入extjs库文件，底层驱动 -->
    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
    <!-- 引入extjs-all -->
    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        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();   
             }); 
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
     <div id="paneldiv"></div>
  </body>
</html>
复制代码

 

 

· border 将容器分为五个区域:east东(右),south南(下),west西(左),north北(上),center中

layout:'border',
defaults: {
    collapsible: true,
    split: true,
    bodyStyle: 'padding:15px'
},
items: [{
    title: 'Footer',
    region: 'south',
    height: 150,
    minSize: 75,
    maxSize: 250,
    cmargins: '5 0 0 0'
},{
    title: 'Navigation',
    region:'west',
    margins: '5 0 0 0',
    cmargins: '5 5 0 0',
    width: 175,
    minSize: 100,
    maxSize: 250
},{
    title: 'Main Content',
    collapsible: false,
    region:'center',
    margins: '5 0 0 0'
}]

 

· card (TabPanel)

<!DOCTYPE html>
<html>
  <head>
    <title>hello-extjs</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入extjs样式文件 -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
    <!-- 引入extjs库文件，底层驱动 -->
    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
    <!-- 引入extjs-all -->
    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        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);   
         });   
        });  
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
     <button id="show-btn">button</button>
  </body>
</html>
复制代码

 

 · card (Wizard)

您可以使用一张卡片布局来创建您自己的自定义向导式界面。布局是一个标准的CardLayout底部工具栏,和开发人员必须提供导航功能,实现了向导的业务逻辑(参见代码基础。js)。

layout:'card',
activeItem: 0, // index or id
bbar: ['->', {
    id: 'card-prev',
    text: '&laquo; Previous'
},{
    id: 'card-next',
    text: 'Next &raquo;'
}],
items: [{
    id: 'card-0',
    html: 'Step 1'
},{
    id: 'card-1',
    html: 'Step 2'
},{
    id: 'card-2',
    html: 'Step 3'
}]
复制代码

 

 
· column 把整个容器看成一列,然后向容器放入子元素时 

layout:'column',
items: [{
    title: 'Width = 25%',
    columnWidth: .25,
    html: 'Content'
},{
    title: 'Width = 75%',
    columnWidth: .75,
    html: 'Content'
},{
    title: 'Width = 250px',
    width: 250,
    html: 'Content'
}]
复制代码

 

· fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

layout:'fit',
items: {
    title: 'Fit Panel',
    html: 'Content',
    border: false
}

 

·  form 是一种专门用于管理表单中输入字段的布局

复制代码 
<!DOCTYPE html>
<html>
  <head>
    <title>hello-extjs</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入extjs样式文件 -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
    <!-- 引入extjs库文件，底层驱动 -->
    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
    <!-- 引入extjs-all -->
    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        Ext.onReady(function() {    
          var win = new Ext.Window({   
              title: "form Layout",   
             height: 150,   
             width: 230,   
              plain: true,    
             bodyStyle: 'padding:15px',    
             items:    
              {    
                 xtype: "form",   
                 labelWidth: 30,   
                 defaultType: "textfield",    
                 frame:true,   
                 items:    
                 [   
                     {    
                         fieldLabel:"姓名",   
                         name:"username",   
                         allowBlank:false    
                     },   
                     {    
                         fieldLabel:"呢称",   
                         name:"nickname"    
                     },   
                     {    
                         fieldLabel: "生日",   
                         xtype:'datefield',   
                         name: "birthday",    
                         width:127    
                     }   
                 ]   
             }   
         });   
         win.show();    
     });   
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
</html>
复制代码

 · table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

复制代码 
<!DOCTYPE html>
<html>
  <head>
    <title>hello-extjs</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!-- 引入extjs样式文件 -->
    <link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css" />
    <!-- 引入extjs库文件，底层驱动 -->
    <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
    <!-- 引入extjs-all -->
    <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
    <!-- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script> -->
    <script type="text/javascript">
        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:''}   
                      ]   
                  });   
            }); 
    </script>
  </head>
  
  <body>
    This is my HTML page. <br>
    <div id="paneldiv"><div>
  </body>
</html>
复制代码

VBox

布局,允许子元素的垂直和水平拉伸,就像集装箱布局与规模管理。

layout: {
    type: 'vbox'
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', height:150},
    {html:'panel 3', flex:2}
]
复制代码

 

HBox

布局,允许子元素的垂直和水平拉伸,就像列布局,但垂直延伸项目。

layout: {
    type: 'hbox',
    pack: 'start',
    align: 'stretch'
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', width:150},
    {html:'panel 3', flex:2}
]
复制代码 


  •     
    •

xys_00
关注
ExtJS之布局篇
Kenshin Cui's Blog
08-28 6万+
Ext布局总的来说是很灵活的，因此我觉得有必要一块探讨一下。 Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过"new"来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。 Border布局 Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗
ExtJS border布局之小案例
zhaohuanzh的博客
01-23 371
前言： layout:‘border’。该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east,south, west, north, center,加入到容器中的字面板需要指定region配置这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置，并且该布局还内建了对面板分割栏的支持。 一．实现界面： 二．实现思路： １－首先确定整体panel为Viewport,layout:"border"(东南西北中　五个区域) ２
ExtJs布局大全
weixin_30500105的博客
09-13 154
1.Fit 布局 　　在Fit 布局中，子元素将自动填满整个父容器。注意：在fit 布局下，对其子元素设置宽度是无效的。如果在fit 布局中放置了多个组件，则只会显示第一个子元素。在Fit 布局中，子元素将自动填满整个父容器。典型的案例就是当客户要求一个window 或panel 中放置一个GRID 组件，grid 组件的大小会随着父容器的大小改变而改变。 效果图： 示例代码： E...
EXTJs 布局
落日小屋
05-05 6432
FitLayout 自适应布局 FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。 Ext.onReady(function(){ //数据存储 var store = new Ext.data.SimpleStore( {
ExtJs布局详解
weixin_33862993的博客
08-28 171
序言     1、百度百科上说：ExtJs功能丰富，无人能出其右。无论是界面之美，还是功能之强，extjs都高居榜首。     2、呵呵，界面之美当是少不了布局的，这篇文章我写layout的七种布局。（extjs是4.+版本） Border布局__边界布局    这中布局是最常用的布局之一，看图                  border布局：border布局也称边界布局，他将...
ExtJS中九种布局方式
vickyfei的专栏
12-09 1309
１、布局概述 　　容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。容器中的子元素如何排放，在Ext中由布局来处理。　　 　　所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 　　Ext提供了一套功能强大的布
EXTJS实现MSN风格界面布局教程
在EXTJS中，布局（Layout）是关键概念，它决定了组件如何在容器内排列和调整大小。在本教程中，我们将使用EXTJS的`fit`布局，这种布局方式使得容器内的唯一子组件完全填充整个容器空间。 首先，创建一个`Ext.Window...
利用jQuery EasyUI打造Extjs风格界面布局
Extjs 的界面布局通常包括高度定制的布局管理器，例如左右布局（Splitter），卡片布局（Card Layout），以及复杂的表单布局等。 #### 3. 手风琴折叠菜单（Accordion） 手风琴菜单是一种常见的界面组件，用于在有限...
ExtJS面板与布局详解：关键组件与灵活布局
1. **布局灵活性**：ExtJS提供了丰富的布局风格，总计10种，包括标准布局（如Fitting、Border、Table等）、卡片式布局（CardLayout）、网格布局（Grid Layout）等。这使得开发者可以根据项目需求选择合适的布局方式...
ExtJS开发的高效管理系统布局设计
3. 一致性和可预测性：整个系统的布局风格和操作逻辑应该保持一致，减少用户的学习成本。 4. 响应式设计：随着设备多样化，布局设计需要适应不同尺寸的屏幕，提供良好的适应性和可访问性。 5. 状态和反馈：系统应该...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦！
Extjs主题(12种)
10-25
Extjs主题(共12种) 使用把Css添加到Ext/resources/css文件夹下，把图片添加到Ext/resources/images文件夹下；在页面直接引用css就可以了 如果是动态的话弄个下拉框 然后 Ext.util.CSS.swapStyleSheet("theme", "Ext/resources/css/" + css); 就ok
Extjs布局
weixin_39102174的博客
09-16 470
Ext.js 绝对布局 absolute &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel...
Extjs中layout的用法总结
a138571的博客
11-04 365
好久没看过EXT了，最近项目中需要用到就重新复习了下，对于一些知识也都模糊不清，现对Extjs中的layout布局进行总结下： layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例： 1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下 2.anch...
Extjs--12种布局方式
weixin_30755709的博客
09-29 742
按照Extjs的4.1的文档来看，extjs的布局方式大致有12种，下面一一介绍，有些代码就是文档中的。 1.Border 边界布局 border布局，最多可以将页面分割为“东南西北中”五部分，是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉。 1.1效果图预览 1.2 代码demo Ext....
Extjs -layout详解
weixin_33981932的博客
04-26 124
好久没看过EXT了，最近项目中需要用到就重新复习了下，对于一些知识也都模糊不清，现对Extjs中的layout布局进行总结下：layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下2.anchor:...
Extjs4布局详解(六)—Absolute布局
coolybq的专栏
01-07 1871
Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用 Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用
ExtJs的layout的12种风格
iteye_10637的博客
06-09 149
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。 另外几种见： http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html 里面有详细的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值