群组首页 → Web前端 → flex → 论坛
发表回复

ExtJs4 笔记之 layout 布局

agevs 2014-10-14

本篇讲解Ext另一个重要的概念：布局。一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。 某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。本节我们系统的分析各种布局方式。

一、absolute

这种方式的布局可以对子元素相对于父级容器控件进行绝对定位，它包含了x、y两个配置项用于定位。

我们来看看一个例子： 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. //absolute  
  2. Ext.create('Ext.Panel', {  
  3.     title: '容器面板',  
  4.     renderTo: 'div1',  
  5.     width: 400,  
  6.     height: 300,  
  7.     layout: 'absolute',  
  8.     items: [{  
  9.         title: '面板1',  
  10.         xtype: "panel",  
  11.         html: "子元素1",  
  12.         width: 200,  
  13.         height: 100,  
  14.         x: 50,  
  15.         y: 50  
  16.      
  17.     }, {  
  18.         title: '面板2',  
  19.         xtype: "panel",  
  20.         html: "子元素2",  
  21.         width: 200,  
  22.         height: 100,  
  23.         x: 100,  
  24.         y: 80  
  25.      
  26.     }]  
  27. });  

 

 

效果如下：

二、accordion

有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. //accordion  
  2. Ext.create('Ext.Panel', {  
  3.     title: '容器面板',  
  4.     renderTo: 'div2',  
  5.     width: 400,  
  6.     height: 300,  
  7.     layout: 'accordion',  
  8.     items: [{  
  9.         tools: [{ type: 'gear', handler: function () {  
  10.             Ext.Msg.alert('提示', '配置按钮被点击。');  
  11.         }  
  12.         }, { type: 'refresh'}],  
  13.         title: '面板1',  
  14.         xtype: "panel",  
  15.         html: "子元素1"  
  16.      
  17.     }, {  
  18.         title: '面板2',  
  19.         xtype: "panel",  
  20.         html: "子元素2"  
  21.     }, {  
  22.         id: 'panel3',  
  23.         title: '面板3',  
  24.         xtype: "panel",  
  25.         html: "子元素3"  
  26.     }]  
  27. });  
  28. Ext.create("Ext.Button", {  
  29.     renderTo: 'div2',  
  30.     text: "打开第三页",  
  31.     handler: function () {  
  32.         Ext.getCmp('panel3').expand(true);  
  33.     }  
  34. });  

 

 

效果如下：

三、anchor

这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. //anchor  
  2. Ext.create('Ext.Panel', {  
  3.     title: '容器面板',  
  4.     renderTo: 'div3',  
  5.     width: 400,  
  6.     height: 300,  
  7.     layout: 'anchor',  
  8.     items: [{  
  9.         tools: [{ type: 'gear', handler: function () {  
  10.             Ext.Msg.alert('提示', '配置按钮被点击。');  
  11.         }  
  12.         }, { type: 'refresh'}],  
  13.         title: '面板1',  
  14.         xtype: "panel",  
  15.         html: "子元素1",  
  16.         anchor: '80% 20%'  
  17.      
  18.     }, {  
  19.         title: '面板2',  
  20.         xtype: "panel",  
  21.         html: "子元素2",  
  22.         anchor: '-50 -200'  
  23.     }, {  
  24.         title: '面板3',  
  25.         xtype: "panel",  
  26.         html: "子元素3",  
  27.         anchor: '100% 30%'  
  28.     }]  
  29. });  

 

 

效果如下：

四、border

这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式。 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. //border  
  2. Ext.create('Ext.Panel', {  
  3.     title: '容器面板',  
  4.     renderTo: 'div4',  
  5.     width: 400,  
  6.     height: 300,  
  7.     layout: 'border',  
  8.     defaults: {  
  9.         split: true,                 //是否有分割线  
  10.         collapsible: true,           //是否可以折叠  
  11.         bodyStyle: 'padding:15px'  
  12.     },  
  13.     items: [{  
  14.         region: 'north',            //子元素的方位：north、west、east、center、south  
  15.         title: '北',  
  16.         xtype: "panel",  
  17.         html: "子元素1",  
  18.         height: 70  
  19.     }, {  
  20.         region: 'west',  
  21.         title: '西',  
  22.         xtype: "panel",  
  23.         html: "子元素2",  
  24.         width: 100  
  25.      
  26.     }, {  
  27.         region: 'east',  
  28.         title: '东',  
  29.         xtype: "panel",  
  30.         html: "子元素2",  
  31.         width: 100  
  32.      
  33.     }, {  
  34.         region: 'center',  
  35.         title: '主体',  
  36.         xtype: "panel",  
  37.         html: "子元素3"  
  38.     }, {  
  39.         region: 'south',  
  40.         title: '南',  
  41.         xtype: "panel",  
  42.         html: "子元素4",  
  43.         height: 70  
  44.     }]  
  45. });  

 

 

效果如下：

五、card

这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。我们可以定义翻页按钮来控制当前处于活动状态的子元素。 可以500%提高开发效率的前端UI框架！

.代码  收藏代码
  1. //card  
  2. var cardNav = function (incr) {  
  3.     var l = Ext.getCmp('cardPanel').getLayout();  
  4.     var i = l.activeItem.id.split('card')[1];  
  5.     var next = parseInt(i, 10) + incr;  
  6.     l.setActiveItem(next);  
  7.     Ext.getCmp('cardPrev').setDisabled(next === 0);  
  8.     Ext.getCmp('cardNext').setDisabled(next === 2);  
  9. };  
  10. Ext.create('Ext.Panel', {  
  11.     title: '容器面板',  
  12.     renderTo: 'div5',  
  13.     width: 400,  
  14.     height: 300,  
  15.     layout: 'card',  
  16.     activeItem: 1,                  //默认活动项  
  17.     id: 'cardPanel',  
  18.     items: [{  
  19.         id: 'card0',  
  20.         title: '面板1',  
  21.         xtype: "panel",  
  22.         html: "子元素1"  
  23.      
  24.     }, {  
  25.         id: 'card1',  
  26.         title: '面板2',  
  27.         xtype: "panel",  
  28.         html: "子元素2"  
  29.     }, {  
  30.         id: 'card2',  
  31.         title: '面板3',  
  32.         xtype: "panel",  
  33.         html: "子元素3"  
  34.     }],  
  35.     bbar: ['->', {  
  36.         id: 'cardPrev',  
  37.         text: '« 前一页',  
  38.         handler: Ext.Function.bind(cardNav, this, [-1])  
  39.     }, {  
  40.         id: 'cardNext',  
  41.         text: '后一页 »',  
  42.         handler: Ext.Function.bind(cardNav, this, [1])  
  43.     }]  
  44.      
  45. });  

 

 

效果如下：

border-color: initial; max-

发表回复
Global site tag (gtag.js) - Google Analytics