extjs基础知识点归纳二

布局

1、fit布局

在fit布局中，子元素将自动填满整个父容器。
注意：在fit布局下，设置子元素的宽度是无效的。如果在fit布局中防止了多个组件，则只会显示第一个子元素。

Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});

2、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.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()
});
}
});

3、accordion布局

accordion布局：

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

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

 

4、card布局

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

5、anchor布局

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

    使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
    anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
    anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
    anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
    anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%

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

6、Absolute布局

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

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,//横坐标为距父容器左边缘10像素的位置
				y: 10,//纵坐标为距父容器上边缘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()
	});
}
});

 该网站详细的说明了各个布局的特点也有实例，可以进行参考。

Extjs4 布局