EXTJs 布局

曾经终败给现在 2022-02-27 15:46 292阅读 0赞

<1>FitLayout 自适应布局

FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。

Ext.onReady(function(){
    				//数据存储
    				var store = new Ext.data.SimpleStore(
    					{
    						fields: ['id', 'name', 'desc'],
    						data: [
    								['1', '埃尔克森', '广州恒大'],
    								['2', '埃杜', '辽宁宏运'],
    								['3', '布鲁诺', '青岛中能'],
    								['4', '武磊', '上海东亚'],
    								['5', '高迪', '杭州绿城'],
    								['6', '艾德华', '上海申花'],
    								['7', '王永珀', '山东鲁能'],
    						]
    					}
    				);
    				//表格
    				var grid = new Ext.grid.GridPanel(
    					{
    						title: '2013中超射手榜',
    						viewConfig: {forceFit: true},
    						store: store,
    						columns: [
    							{header:'排名', dataIndex: 'id'},
    							{header:'姓名', dataIndex:'name'},
    							{header:'球队', dataIndex:'desc'}
    						],
    						//工具条
    						tbar: new Ext.Toolbar(['添加','修改','删除']),
    						bbar: new Ext.PagingToolbar(
    							{
    								pageSize: 15,
    								store: store
    							}
    						)
    					}
    				);
    				//布局
    				/*
    					Fitlayout:
    					<1>layout: 'fit',组件的items只能放一个组件。即使放几个组件，也只有第一个组件会起作用。
    					<2>items中的表格里千万不要使用aotuHeight:true参数，这个参数会使Fitlayout失效。
    				*/
    				var viewport = new Ext.Viewport(
    					{
    						layout: 'fit',
    						items: [grid]
    					}
    				);
    			}
    		);

![20130505101909388][]

![20130505101954621][]

<2>BorderLayout边框布局

因为LitLayout布局每次只能使用一个组件，更复杂的布局它根本无法胜任。

现实中使用最多的就是边框布局，他将整个区域分成东西南北中五部分。除了中间区域其他区域都是可以省略的。

Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout: 'border',
    							items: [
    								//north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算。
    								//east和west两个区域只能指定宽度值，高度值由BorderLayout自动计算。
    								{region:'north',html:'north',height:120},
    								{region:'south',html:'south',height:30},
    								{region:'east',html:'east',width:40},
    								{region:'west',html:'west',width:100},
    								{region:'center',html:'center'}
    							]
    						}	
    					);
    				}
    			);

![20130505104141392][]

使用split并限制他的范围

使用了就可以允许用户自行拖放以改变某一区域的大小。

//north和south两个区域只能上下拖放east和west两个区域只能左右拖放
    								//minSize:菜单区域的最小范围maxSize:菜单区域的最大范围
    								{region:'west',html:'west',width:100,split:true,minSize:80,maxSize:120},

![20130505104734970][]

子区域的折叠和展开

Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout: 'border',
    							items: [
    								//north和south两个区域只能指定高度值，宽度值由BorderLayout自动计算。
    								//east和west两个区域只能指定宽度值，高度值由BorderLayout自动计算。
    								{region:'north',html:'north',height:120},
    								{region:'south',html:'south',height:30},
    								{region:'east',html:'east',width:40},
    								//collapsible:true激活了west区域的折叠功能。title是必须的，如果没有设置标题，折叠按钮就无法显示。
    								{region:'west',html:'west',width:100,title:'菜单栏',width:150,collapsible:true},
    								{region:'center',html:'center'}
    							]
    						}	
    					);
    				}
    			);

![20130505111643659][]

<3>制作伸缩菜单的布局 Accordion

/*
    			设置layout: 'accordion',在使用items添加三个元素，每个子元素都要加上title参数。
    			*/
    			Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout:'border',
    							items:[
    								{
    									region: 'west',
    									width: 200,
    									layout: 'accordion',
    									//与布局有关的参数
    									layoutConfig: {
    											titleCollapse: true,//点击标题时就可以折叠面板
    											animate: true,//展开和折叠都是用动画
    											activeOnTop: false//默认是false执行展开和折叠操作后子面板的顺序不会变。如果是true展开的子面板总是放在上面。
    									},
    									items: [
    										{
    											title: '中超',
    											html: '山东鲁能  19'
    										},
    										{
    											title: '中甲',
    											html: '河南建业	22'
    										},
    										{
    											title: '英超',
    											html: '	曼联	85'
    										}
    									]
    								},
    								{
    									region: 'center',
    									split: true,
    									border: true
    								}
    							]
    						}
    					);
    				}
    			);

![20130505191404202][]

<4>AnchorLayout 控制位置和大小的布局

/*
    			AnchorLayout提供了一种比较灵活的布局方式，既可以为items中的每个组件指定与总体布局大小的差值，也可以
    			设置一个比例使子组件可以根据整体自己计算本身的大小。
    			<1>使用百分比进行配置
    			anchor:'50% 80%' 宽度占整体宽度的50% 高度占整体高度的80%
    			anchor:'50%'  宽度占整体宽度的50% 高度自动设置为auto
    			<2>直接设置与右侧和底部的边距
    			anchor:'-50 -100' 距右侧50像素 距底部100像素
    			<3>使用前提是为作为整体布局的父组件和布局内的子组件都设置好width,height和auchorSize属性
    			Anchor会记录布局整体与子组件在大小的差值
    			anchor：'r b' 也可写成anchor:'right buttom'
    			*/
    			Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout: 'anchor',
    							items: [
    								{
    									title:'panel 1',
    									html:'panel 1',
    									anchor:'-50 -100'
    								},
    							]
    						}	
    					);
    				}
    			);

![20130506085705661][]

Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout: 'anchor',
    							anchorSize:{width:400,height:300},
    							items: [
    								{
    									title:'panel 1',
    									html:'panel 1',
    									width:200,
    									height:100,
    									anchor:'r b'
    								},
    								{
    									title:'panel 2',
    									html:'panel 2',
    									width:100,
    									height:200,
    									anchor:'r b'
    								},
    							]
    						}	
    					);
    				}
    			);

![20130506090257825][]

<5>表单布局 formLayout

Ext.onReady(function()
    				{
    					var viewport = new Ext.Viewport(
    						{
    							layout: 'fit',
    							items: [
    								{
    									xtype:'form',
    									title:"name",
    									labelAlign:"right",
    									labelWidth:50,
    									frame:true,
    									defaultType:"textfield",
    									items:[
    										{
    											fieldLabel:"名称",
    											name:"name",
    											anchor:'90%',
    										},
    										{
    											fieldLabel:"生日",
    											name:"birthday",
    											xtype:'datefield',
    											anchor:'90%',
    										},
    										{
    											fieldLabel:"备注",
    											name:"desc",
    											xtype:'textarea',
    											anchor:'90% -100',
    										},
    									]
    								},
    							]
    						}	
    					);
    				}
    			);

![20130506080631321][]

<6>TabPanel

Ext.onReady(function()
    				{
    					var simple = new Ext.FormPanel(
    						{
    							labelWidth: 70,
    							frame: true,
    							title: 'Simple Form',
    							bodyStyle: 'padding:5px 5px 0',
    							width: 800,
    							defaults: 
    							{
    								width: 300
    							},
    							defaultType: 'textfield',
    							items: [
    								{
    									xtype : "tabpanel",
    									//初始显示第几个Tab页  
    									activeTab : 0,
    									plain : true,
    									height : 195,
    									defaultType : "panel",
    									bodyStyle : "padding:5px;",
    									//当Tab标签过多时,出现滚动条
    									enableTabScroll: true,   
    									items : [
    										{
    											title : "联系方式",
    											layout : "form",
    											defaultType : "textfield",
    											defaults : {
    												widht : 400,
    												anchor : "96%,96%"
    											},
    											items : [
    												{
    													fieldLabel : "单位负责人",
    													name : "principal",
    													id : "principal"
    												}, 
    												{
    													fieldLabel : "传真",
    													name : "customer.fax",
    													xtype : "numberfield",
    													id : "fax"
    												}, 
    												{
    													fieldLabel : "网址",
    													name : "customer.site",
    													id : "site"
    												},   
    											]
    										}, 
    										{
    											title : "公司信息",
    											layout : "form",
    											defaults : {
    											widht : 400,
    												anchor : "96%,96%"
    											},
    											defaultType : "textfield",
    											items : [
    												{
    													fieldLabel : "公司规模",
    													hiddenName : "customer.companyScale",
    													id : "companyScale",
    													xtype : "combo",
    													mode : "local",
    													editable : false,
    													triggerAction : "all",
    													store : [
    														["1", "1-20人"],
    														["2", "20-50人"],
    														["3", "50-100人"],
    														["4", "100-200人"],
    														["5", "200-500人"],
    														["6", "500-1000人"],
    														["7", "1000人以上"]
    													]
    												},  
    												{
    													fieldLabel : "开户银行",
    													name : "customer.openBank",
    														id : "openBank"
    												}, 
    												{
    													fieldLabel : "银行账号",
    													xtype : "numberfield",
    													name : "customer.accountsNo",
    													id : "accountsNo"
    												}, 
    												{
    													fieldLabel : "税号",
    													name : "customer.taxNo",
    													id : "taxNo"
    												}
    											]
    										}, 
    										{
    											title : "其它信息",
    											layout : "form",
    											defaultType : "textarea",
    											defaults : {
    												widht : 400,
    												anchor : "96%,96%"
    											},
    											items : [
    												{
    													fieldLabel : "公司描述",
    													name : "customer.otherDesc",
    													id : "otherDesc"
    												}, 
    												{
    													fieldLabel : "备注",
    													name : "customer.notes",
    													id : "notes"
    												}
    											]
    										}
    									]
    								}
    							]
    						}
    					);
    					simple.render('spinner');
    				}
    			);

![20130523115932307][]

![20130523115942420][]

![20130523115949197][]

[20130505101909388]: /images/20220227/89c2b9416e9d493892af54b61a6948d3.png
[20130505101954621]: /images/20220227/042a0782c43d44278a24565d0a3b620d.png
[20130505104141392]: /images/20220227/ab7dbe8fd2d9451192776adebe41dde8.png
[20130505104734970]: /images/20220227/446d5c00edf5446a94cf02273b2ad82c.png
[20130505111643659]: /images/20220227/fe20474031844b078c646618b5fd38fb.png
[20130505191404202]: /images/20220227/12224941990e4bffacdd50a0dc5f9ab3.png
[20130506085705661]: /images/20220227/5107fae5bf45440aad8a0c61e7cf6e13.png
[20130506090257825]: /images/20220227/3a3dc70d71f4431e84080098301f53b0.png
[20130506080631321]: /images/20220227/7196f2f9bbd6472699d89083a0341bb0.png
[20130523115932307]: /images/20220227/25f2a49648d04a9f8d7530d736b89608.png
[20130523115942420]: /images/20220227/ec18c2bbf3a843f1b34e80f07e090e41.png
[20130523115949197]: /images/20220227/2815d3cfc001485e8d52efd420b467a2.png