ExtJS小结之layout布局

ExtJS中界面布局的方式有十多种,主要有:Auto(自动布局)、CheckboxGroup(复选框组布局)、Fit(自适应布局)、Column(列布局)、Accordion(折叠布局)、Table(表格布局)、Card(卡片式布局)、Border(边框布局)、Anchor(锚点布局)、Box(盒布局)、Absolute(绝对位置布局)。对于以上的一些布局方式,本文概要的做如下总结:

1、Auto自动布局

Auto自动布局是容器在没有指定布局方式时默认采用的布局类型,它使用原始的html文档流来布局子元素,并把布局调用传递到子容器中。

Auto布局示例

图1:Auto布局示例

上图1示例的代码如下:

Ext.onReady(function() {
  Ext.create('Ext.panel.Panel', {
    title : 'Auto布局示例',
    frame : true, // 渲染面板
    width : 250,
    renderTo : Ext.getBody(),
    bodyPadding : 5,
    layout : 'auto', // 自动布局
    defaults : { // 设置子元素的默认属性
      bodyStyle : 'background-color:#FFFFFF' // 设置面板体的背景色
    },
    // 面板items配置项默认的xtype类型为panel
    items : [{
      title : '内部面板1',
      html : '内部面板1中的内容'
        }, {
      title : '内部面板2',
      html : '内部面板2中的内容'
        }, {
      title : '内部面板3',
      html : '内部面板3中的内容'
        }]
    });
});

2、Fit自适应布局

Fit布局将使唯一的子元素充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。

Fit布局示例

图2:Fit布局示例

上图2示例的代码如下:

Ext.onReady(function() {
  Ext.create('Ext.panel.Panel', {
    title : 'Fit布局示例',
    framme : true,
    width : 250,
    height : 150,
    renderTo : Ext.getBody(),
    layout : 'fit',
    defaults : {
    	bodyStyle : 'background-color:#FFFFFF'
    },
    items : [{
      title : '内部面板1',
      html : '内部面板1中的内容'
    		}, {
      title : '内部面板2',
      html : '内部面板2中的内容'
    		}, {
      title : '内部面板3',
      html : '内部面板3中的内容'
    		}]
  	});
});

如上图2所示,使用fit布局,会发现第一个内部面板充分占据了整个页面,其他两个面板完全看不见,所以,fit布局方式一般适用于只显示一个子项的情况。

3、Accordion折叠布局

Accordion折叠布局会包含多个子面板,任何时候都只有一个子面板处于打开状态,每个子面板都内置了对展开和收缩功能的支持。

Accordion布局示例

图3:Accordion布局示例

上图3示例的代码如下:

Ext.onReady(function() {
  Ext.create('Ext.panel.Panel', {
    title : 'Accordion布局示例',
    frame : true,
    height : 300,
    width : 250,
    renderTo : Ext.getBody(),
    bodyPadding : 5,
    layout : 'accordion',
    defaults : {
    	// 经过我使用测试发现,在bodyStyle中使用字符串的形式设置CSS样式比较灵活好用一些,以后可以都采用这种方式将多个CSS样式写在一起
    	bodyStyle : 'background-color:#FFFFFF;padding:15px'
    },
    items : [{
      title : '内部面板1',
      html : '内部面板1中的内容'
    		}, {
      title : '内部面板2',
      html : '内部面板2中的内容'
    		}, {
      title : '内部面板3',
      html : '内部面板3中的内容'
    		}]
  	});
});

4、Card卡片式布局

Card布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,这种布局常用于用来制作向导和标签页,该布局的重点是setActiveItem,因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,它接受一个子面板id或索引作为参数。Card并没提供子面板的导航机制,导航逻辑需要自己实现。

Card布局示例

图4:Card布局示例

上图4示例的代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Card布局示例',
    frame : true,
    height : 150,
    width : 250,
    renderTo : Ext.getBody(),
    bodyPadding : 5,
    layout : 'card',
    defaults : {
    	bodyStyle : 'background-color:#FFFFFF;padding:15px'
    },
    items : [{
      id : 'tab1',
      title : '内部面板1',
      html : '内部面板1内容'
    		}, {
      id : 'tab2',
      title : '内部面板2',
      html : '内部面板2内容'
    		}, {
      id : 'tab3',
      title : '内部面板3',
      html : '内部面板3内容'
    		}],
    buttons : [{
      text : '上一页',
      // 我试过直接写成handler:changePage(btn),你会发现始终报错
      handler : function(btn) {
      	changePage(btn);
      }
    		}, {
      text : '下一页',
      handler : function(btn) {
      	changePage(btn);
      }
    		}]
  		});
  // changePage()函数
  var changePage = function(btn) {
  	var index = Number(panel.layout.activeItem.id.substring(3));
  	if (btn.text == '上一页') {
  		index = index - 1;
  		if (index < 1) {
    index = 1;
  		}
  	} else {
  		index = index + 1;
  		if (index > 3) {
    index = 3;
  		}
  	}
  	panel.layout.setActiveItem('tab' + index);
  };
});

5、Anchor锚点布局

Anchor是根据容器大小为其所包含的子面板进行定位的布局,如果容器大小发生变化,所有子面板的位置都会根据规则重新计算,并自动渲染。Anchor布局提供了anchorSize配置项用来设置虚拟容器的大小,默认情况下Anchor布局是根据容器自身的大小来进行计算定位的,如果提供了anchorSize属性则Anchor布局就会根据该尺寸生成一个虚拟容器,然后根据这个虚拟容器的大小来计算定位。加入到使用Anchor布局面板中的子面板也都支持一个anchor配置项,它是一个包含2个值的字符串,表示水平值和垂直值,例如'100%  50%',这个值的有效值包括百分比、偏移值、参考边,可参考API。

(1)百分比定位

使用百分比进行Anchor布局示例

图5:使用百分比进行Anchor布局示例

上图5的实现代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Anchor布局示例',
    frame : true,
    height : 250,
    width : 250,
    renderTo : Ext.getBody(),
    layout : 'anchor',
    items : [{
      anchor : '40% 70%', // 设置子面板的宽为父面板的40%,高为父面板的70%
      title : '子面板'
    		}]
  	});
});

(2)偏移值定位

使用偏移值进行Anchor布局示例

图6:使用偏移值进行Anchor布局示例

上图6的实现代码:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Anchor布局示例',
    // frame : true, // 由于如果设置为true,渲染的时候会有一些偏移,为方便看,先不渲染
    height : 250,
    width : 250,
    renderTo : Ext.getBody(),
    layout : 'anchor',
    items : [{
      anchor : '-40 -10', // 设置子面板的宽偏移40像素,高为父面板的10像素,注意是负数,如果换成正数,发现无法偏移
      title : '子面板'
		}]
  	});
});

(3)参考边定位

使用参考边进行Anchor布局示例

图7:使用参考边进行Anchor布局示例

上图7的实现代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Anchor布局示例',
    // frame : true, // 由于如果设置为true,渲染的时候会有一些偏移,为方便看,先不渲染
    height : 250,
    width : 250,
    renderTo : Ext.getBody(),
    layout : 'anchor',
    items : [{
      anchor : 'r b',
      width : 200,
      height : 200,
      title : '子面板'
    }]
  	});
});

上面的方式是可以在一起使用的,比如'40% -10',至于“参考边定位”这种方式目前我还没弄明白它应用的场景,也没用过。

6、Absolute绝对位置布局

Absolute布局根据子面板中配置的x/y坐标进行定位。

Absolute布局示例

图8:Absolute布局示例

上图8实现代码:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Absolute布局示例',
    frame : false,
    height : 250,
    width : 250,
    renderTo : Ext.getBody(),
    layout : 'absolute',
    defaults : {
    	frame : true,
    	heigth : 70,
    	width : 70
    },
    items : [{
      x : 10, // 横坐标为距离父容器左边缘10像素的位置
      y : 10, // 纵坐标为距离父容器上边缘10像素的位置
      title : '子面板1',
      html : '子面板1内容'
    		}, {
      x : 140,
      y : 50,
      title : '子面板2',
      html : '子面板2内容'
    		}, {
      x : 70,
      y : 100,
      title : '子面板3',
      html : '子面板3内容'
    		}]
  	});
});

7、CheckboxGroup复选框组布局

CheckboxGroup和RadioGroup组件示例

图9:CheckboxGroup和RadioGroup组件示例

上图9的实现代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'CheckboxGroup和RadioGroup组件示例',
    frame : true,
    height : 150,
    width : 250,
    renderTo : Ext.getBody(),
    defaults : {
    	labelSeparator : ':',
    	labelWidth : 50,
    	width : 200,
    	labelAlign : 'left'
    },
    items : [{
      xtype : 'radiogroup',
      fieldLabel : '性别',
      columns : 2,
      items : [{
        boxLabel : '男',
        name : 'sex',
        inputValue : 'male'
      		}, {
        boxLabel : '女',
        name : 'sex',
        inputValue : 'female'
      		}]
    		}, {
      xtype : 'checkboxgroup',
      fieldLabel : '兴趣',
      columns : 3,
      items : [{
        boxLabel : '游泳',
        name : 'swim'
      		}, {
        boxLabel : '散步',
        name : 'walk'
      		}, {
        boxLabel : '阅读',
        name : 'read'
      		}, {
        boxLabel : '电影',
        name : 'movie'
      		}]
    		}]
  	});
});

8、Column列布局

Column列布局是一种多列风格的布局样式,每一列的宽度都可以根据百分比或固定值来进行设置,高度允许根据内容进行变化,它支持一个特殊的属性columnWidth,每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值,来确定列宽。width配置项是以像素为单位的固定宽度,必须是大于或等于1的数字。columnWidth配置是以百分比为单位的相对宽度,必须是大于0小于1的小数。注意,所有列的columnWidth值相加必须等于1或者100%。

(1)指定固定列宽

指定固定列宽的Column布局示例

图10:指定固定列宽的Column布局示例

上图10的实现代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Column布局示例',
    frame : true,
    layout : 'column',
    height : 150,
    width : 250,
    renderTo : Ext.getBody(),
    defaults : {
    	height : 100,
    	frame : true
    },
    items : [{
      title : '子面板1',
      width : 50
    		}, {
      title : '子面板2',
      width : 150
    		}]
  	});
});

(2)使用百分比指定列宽

使用百分比指定列宽进行Column布局的示例

图11:使用百分比指定列宽进行Column布局的示例

如上图11的实现代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Column布局示例',
    frame : true,
    layout : 'column',
    height : 150,
    width : 250,
    renderTo : Ext.getBody(),
    defaults : {
    	height : 100,
    	frame : true
    },
    items : [{
    	title : '子面板1',
    	columnWidth : 0.3
    		// 也可以换成.3,我发现换成'30%'就有异常了
    	}, {
    	title : '子面板2',
    	columnWidth : 0.7
    		// 也可以换成.7,我发现换成'70%'就有异常了
    	}]
  	});
});

column布局也可以同时使用固定列宽、百分比,比如父容器总宽度150,那么设置固定列宽50,百分比分别设置0.3,0.7,那么就表示先固定列宽50,然后剩下的100进行百分比设置。

9、Table表格布局

Table布局允许你指定列数(columns)、跨行(rowspan)、跨列(colspan),可以创建出复杂的表格布局,类似html中的表格布局。table布局只有columns和tableAttrs两个配置项,其子面板具有rowspan和colspan两个配置项。注意,对于table布局只允许使用配置对象来配置,不能使用字符串来配置。

table布局示例

图12:table布局示例

上图12代码示例如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'table布局示例',
    // 这里需要使用配置对象来配置,不能是字符串
    layout : {
    	type : 'table',
    	columns : 4
    	// 设置表格一共有4列
    },
    frame : true,
    height : 150,
    width : 250,
    renderTo : Ext.getBody(),
    defaults : {
    	frame : true,
    	width : 50,
    	heigth : 50
    },
    items : [{
    	title : '子面板1',
    	width : 150,
    	colspan : 3
    		// 占据3列
    	}, {
    	title : '子面板2',
    	rowspan : 2, // 占据2行
    	height : 100
    }, {
    	// 默认是1行1列
    	title : '子面板3'
    }, {
    	title : '子面板4'
    }, {
    	title : '子面板5'
    }]
  	});
});

10、Border边框布局

Border布局包含多个子面板,它包含5个部分:east(东)、south(南)、west(西)、north(北)、center(中),加入到容器中的子面板需要指定region配置项来告知容器要加入到哪个部分。

border布局示例

图13:border布局示例

上图13的代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'Border布局示例',
    layout : 'border',
    height : 250,
    width : 400,
    frame : true,
    renderTo : Ext.getBody(),
    defaults : {
    	collapsible : true
    },
    items : [{
      title : 'north panel',
      html : 'north content',
      region : 'north',
      height : 50
    		}, {
      title : 'south panel',
      html : 'south content',
      region : 'south',
      height : 50
    		}, {
      title : 'west panel',
      html : 'west content',
      region : 'west',
      width : 100
    		}, {
      title : 'east panel',
      html : 'east content',
      region : 'east',
      width : 100
    		}, {
      title : 'center panel',
      html : 'center content',
      region : 'center'
    		}]
  	});
});

11、Box盒布局

Box布局分为HBoxLayout(水平盒布局)和VBoxLayout(垂直盒布局),该布局通过子元素的flex配置项来划分父容器的空间。

HBox盒布局示例

图14:HBox盒布局示例

上图14代码如下:

Ext.onReady(function() {
  var panel = Ext.create('Ext.panel.Panel', {
    title : 'HBox盒布局示例',
    layout : {
    	type : 'hbox',
    	align : 'stretch' // 高度自动充满整个容器
    },
    height : 150,
    width : 300,
    frame : true,
    renderTo : Ext.getBody(),
    items : [{
      title : '子面板1',
      flex : 1,
      html : '1/4宽'
    		}, {
      title : '子面板2',
      flex : 1,
      html : '1/4宽'
    		}, {
      title : '子面板3',
      flex : 2,
      html : '2/4宽'
    		}]
  	});
});

以上都是基于ExtJS4做的概括总结,详细的用法参见官方提供的API文档。

本文标题:ExtJS小结之layout布局

本文链接:http://yedward.net/?id=276

本文版权归作者所有,欢迎转载,转载请以文字链接的形式注明文章出处。

相关文章