Extjs---HBox的使用 - 军军小站|张军博客

html中的代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<script src="ext4/ext-all.js" type="text/javascript"></script>
		<link href="ext4/resources/css/ext-all.css" rel="stylesheet"
			type="text/css" />
		<script type="text/javascript" src="js/hbox.js"></script>
	</head>
	<body>
		<div id="d1"></div><br>
	</body>
</html>

hbox.js中的代码：

    Ext.onReady(function() {
	var hbox1 = Ext.create('Ext.Panel', {
		title : 'HBox 顶对齐，且组件在容器的左边',
		frame : true,
		width : 600,
		height : 100,
		//renderTo:Ext.getBody(),
		items : [ {
			anchor : '100%',
			layout : {
				//设置布局为hbox
				type : 'hbox',
				padding : '10',
				//指定组件在容器中的位置；
				//start（默认）：组件在容器左边，center：组件在容器中间，end：组件在容器的右边 
				pack : 'start',
				//指定组件在容器内的对齐方式
				//top（默认）：排列于容器顶端。
				//middle：垂直居中排列于容器中。
				//stretch：垂直排列且拉伸义填补容器高度
				//stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
				align : 'top'
			},
			defaults : {
				margins : '0 0 5 5'
			},
			items : [ {
				xtype : 'button',
				text : 'Button 1'
			}, {
				xtype : 'button',
				text : 'Button 2'
			}, {
				xtype : 'button',
				text : 'Button 3'
			}, {
				xtype : 'button',
				text : 'Button 4'
			} ]
		} ]
	})
	//渲染到html页面中的d1层
	hbox1.render('d1');
})

效果图

Extjs---HBox的使用

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义