ExtJs4学习(十二)layout布局

Fit布局

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

示例代码:

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : 'HelloExt',
	launch : function() {
		Ext.create('Ext.container.Viewport', {
			layout : 'fit',
			items : [ {
				title : 'Hello Ext',
				html : 'Hello! Welcome to Ext JS.'
			} ]
		});
	}
});</span>

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

示例代码:

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : "HelloExt",
	launch : function() {
		Ext.create('Ext.panel.Panel', {
			width : 1024,
			height : 720,
			layout : 'border',
			items : [ {
				region : 'south',
				xtype : 'panel',
				height : 20,
				split : false,
				html : '欢迎登陆!',
				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()
		});
	}
});</span>

Accordion布局

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

示例代码:

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : "HelloExt",
	launch : function() {
		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()
		});
	}
});</span>

Card布局

Card布局:这种布局用来管理多个子组件,并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式,也就是我们所说的分布提交。

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

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

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : 'HelloExt',
	launch : function() {
		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 : '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()
		});
	}
});</span>

Anchor布局

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

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

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

anchor:‘75% 25%‘,表示宽度为父容器的75%,高度为父容器的25%

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

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

示例代码:

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : 'HelloExt',
	launch : function() {
		Ext.create('Ext.Panel', {
			width : 500,
			height : 400,
			title : "Anchor布局",
			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%'
			} ]
		});
	}
});</span>

Absolute布局

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

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : "HelloExt",
	launch : function() {
		Ext.create('Ext.form.Panel', {
			title : 'Absolute布局',
			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()
		});
	}
});</span>

Column布局

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

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

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

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

示例代码:

<span style="font-family:Courier New;font-size:14px;">Ext.application({
	name : "HelloExt",
	launch : function() {
		Ext.create('Ext.panel.Panel', {
			title : '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()
		});
	}
});</span>
时间: 2024-12-21 07:55:43

ExtJs4学习(十二)layout布局的相关文章

ExtJs4学习(二):Dom文档操作

现在主流的JS框架要数ExtJs和JQuery应用的比较广泛.JQuery属于轻量级的,一般做网站应用比较常见,可见块头小的优势.ExtJs比较庞大,它除了对基本的JS语法和HTML DOM操作方式的封装之外,还提供了一套强大的UI库.在企业级B/S解决方案应用上独占优势.就单说它在原生JS的封装,DOM操作方式封装方面也足以藐视JQuery.下面我就通过对比API,体现两种框架的异曲同工之处.我们已JQuery API为主线,来看看ExtJs是否有替代的方案. 注意一点:ExtJs4.0相对上

springMVC3学习(十二)--文件上传优化CommonsMultipartResolver

基于上一篇文件上传发现效率很慢,我们应该对它进行优化  使用springMVC对文件上传的解析器 来处理文件上传的时候需要在spring的applicationContext里面加上springMVC提供的MultipartResolver的申明 这样客户端请求的时候 springMVC会检查request里面是否包含多媒体信息 如果包含了就会使用MultipartResolver进行解析, springMVC会使用一个支持文件  处理的MultipartHttpServletRequest来包

SpringMVC学习(十二)——SpringMVC中的拦截器

SpringMVC学习(十二)--SpringMVC中的拦截器 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理.本文主要总结一下SpringMVC中拦截器是如何定义的,以及测试拦截器的执行情况和使用方法. SpringMVC中拦截器的定义和配置 SpringMVC中拦截器的定义 在SpringMVC中,定义拦截器要实现HandlerInterceptor接口,并实现该接口中提供的三个方法,如下: public class Inter

EXT的layout十二种布局

layout的有效值有absolute,accordion,anchor,border,card,column,fit,form和table 1.absolute:在容器里面根据所给的坐标定位显示 2.accordion:手风琴的效果,一般用于侧边栏 代码演示:Ext.onReady(function(){ var panel=new Ext.Panel({ renderTo:'paneldiv', title:'容器组件', layout:'accordion', width:500, hei

GUI学习之二十七——布局管理学习总结

今天讲一个大的内容——布局管理. 一.布局管理的诞生背景 在前面所讲的所有案例中,我们都是用采用手动布局的方式来布局的.结合个案例来说明一下:在一个界面上放三个label,三个label纵向排列 from PyQt5.Qt import * import sys class Window(QWidget): def __init__(self): super().__init__() self.resize(600,400) self.UI_test() def UI_test(self): l

Android学习十二---在android上实现图像匹配

一.效果图及功能描述 效果图 点击ShowImg后 点击match,然后点击showmatch,可以不断点击showmatch. 主要功能描述:显示在SD卡上已经存在的图片test.jpg,根据图片在cameraframe对于每一帧计算和test.ipg的匹配并显示. 二.界面设计 一个JavaCameraView用来显示帧相当于是相机的预览,两个ImgView一个用来显示要匹配的图像,一个用来显示最后得到的匹配图.三个Button对应三个View,ShowImg用来显示SD卡上的test.jp

android学习十二(android的Content Provider(内容提供器)的使用)

文件存储和SharePreference存储以及数据存储一般为了安全,最好用于当前应用程序中访问和存储数据.内容提供器(Content Provider)主要用于在不同的应用程序之间实现数据共享的功能,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问数据的安全性.目前使用内容提供器是android实现跨程序共享数据的标准方式.内容提供器可以选择只对一部分数据进行共享,从而保证我们的程序中的隐私数据不会有泄漏的风险. 内容提供器的用法一般有两种,一种是使用现有的内容提

Python学习十二:高阶函数

在学习高阶函数之前需要搞清一个概念: 变量可以指向函数 意思就是:把函数名赋值给另一个变量,然后使用这个变量完成跟函数一样的功能. 如下代码所示: 将求绝对值函数abs赋值给f,然后调用f完成跟abs一样的功能. >>> f = abs >>> f(-100) 100 >>> 好了接下来看:高阶函数 定义为:一个函数接收另一个函数作为参数,这种函数就称之为高阶函数. 如下代码所示: def add(x , y , f): return f(x) + f

javaweb学习(十二)—— Session

本文整理自孤傲苍狼大大的博客,,, 一.Session简单介绍 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),注意:一个浏览器独占一个session对象(默认情况 下).因此,在需要保存用户数据时,服务器程序可以把用户数据写到用户浏览器独占的session中,当用户使用浏览器访问其它程序时,其它程序可以从用 户的session中取出该用户的数据,为用户服务. 二.Session和Cookie的主要区别 Cookie是把用户的数据写给用户的浏览器. Sessio

Android学习十二:跑马灯程序实现(简单联系)

package org.tonny; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.os.AsyncTask; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.util.Log; import android.w