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');
})
2084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
