- 1、布局概述
容器中可以放置各种各样的元素,这些元素在容器怎么排放,是从左到右,还是从上到下,这些是容器自身所不知道的。容器中的子元素如何排放,在Ext中由布局来处理。
所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作,每一个容器都会有一个对应的布局,布局负责管理容器组件中子元素的排列、组合及渲染方式等。
Ext提供了一套功能强大的布局系统,通过这些布局的应用,可以满足应用程序中各种复杂的用户界面布局处理,下面我们将对ExtJS中的布局作介绍。Ext中的每一个布局类都有一个简短的布局名称,在使用布局的时候直接使用布局名称即可。
布局主要应用于容器组件,在Container类中,提供了一个layout配置选项,该项可以是一个预定义布局名称(字符串),也可以是一个布局对象。比如下面是两种使用布局的方式:
- new Ext.Panel({
- renderTo:"test",
- width:400,
- height:100,
- layout:new Ext.layout.ColumnLayout(),
- items:[{columnWidth:.5, title:"面板1"},
- {columnWidth:.5, title:"面板2"}]
- });
-
- new Ext.Panel({
- renderTo:"test",
- width:400,
- height:100,
- layout:"column",
- items:[{columnWidth:.5, title:"面板1"},
- {columnWidth:.5, title:"面板2"}]
- });
ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置。
Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。
- 2、通过Examples看常用布局示例,
Ext Layout Browser、Border Layout示例;
- 3、Border布局,把容器分成东西南北中几大区域,容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
- 4、Column布局,把子元素按列排放,通过columnWidth及width属性来指定子元素的所占的列宽度。
- 5、Form布局,容器中的元素包括标题及组件内容两项值。
- 6、Fit布局,子元素填充整个容器区域。
- 7、Accordion布局,折叠布局。
extjs的容器组件都可以设置它的显示风格,它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。简单总结一下,帮助记忆。
- absolute
- accordion
- 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:''}
- ]
- }
- );
- });
- anchor
1.容器内的组件要么指定宽度,要么在anchor中同时指定高/宽,
2.anchor值通常只能为负值(指非百分比值),正值没有意义,
3.anchor必须为字符串值
- 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();
- });
- border
- 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);
- });
- });
- card
- Ext.onReady(function() {
- var i = 0;
- var navHandler = function(direction) {
- if (direction == -1) {
- i--;
- if (i < 0) { i = 0; }
- }
- if (direction == 1) {
- i++;
- if (i > 2) { i = 2; return false; }
- }
- var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];
- var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];
- if (i == 0) {
- btnBack.disabled = true;
- }
- else {
- btnBack.disabled = false;
- }
- if (i == 2) {
- btnNext.value = "完成";
- btnNext.disabled = true;
- }
- else {
- btnNext.value = "下一步";
- btnNext.disabled = false;
- }
- card.getLayout().setActiveItem(i);
- };
- var card = new Ext.Panel({
- width: 200,
- height: 200,
- title: '注册向导',
- layout: 'card',
- activeItem: 0, // make sure the active item is set on the container config!
- bodyStyle: 'padding:15px',
- defaults: {
- border: false
- },
- bbar: [
- {
- id: 'move-prev',
- text: '上一步',
- handler: navHandler.createDelegate(this, [-1])
- },
- '->',
- {
- id: 'move-next',
- text: '下一步',
- handler: navHandler.createDelegate(this, [1])
- }
- ],
- items: [{
- id: 'card-0',
- html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'
- }, {
- id: 'card-1',
- html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'
- }, {
- id: 'card-2',
- html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'
- }],
- renderTo: "container"
- });
- });
- column
- Ext.onReady(function() {
- var win = new Ext.Window({
- title: "Column Layout",
- height: 300,
- width: 400,
- plain: true,
- layout: 'column',
- items: [{
- title:"width=50%",
- columnWidth:0.5,
- html:"width=(容器宽度-容器内其它组件固定宽度)*50%",
- height:200
- },
- {
- title:"width=250px",
- width: 200,
- height:100,
- html:"固定宽度为250px"
- }
- ]
- });
- win.show();
- });
- fit
- Ext.OnReady(function(){
- var panel=new Ext.Panel(
- {
- renderTo:'paneldiv',
- title:'容器组件',
- layout:'fit',
- width:500,
- height:100,
- items:[
- {title:'子元素1'},
- {title:'子元素2'},
- {title:'子元素3'},
- {title:'子元素4'},
- {title:'子元素5'}
- ]
- }
- );
- });
- form
- 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();
- });
- table
- 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:''}
- ]
- }
- );
- });
-