Extjs---HBox的使用
系統(tǒng)
1978 0
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 頂對(duì)齊，且組件在容器的左邊',
frame : true,
width : 600,
height : 100,
//renderTo:Ext.getBody(),
items : [ {
anchor : '100%',
layout : {
//設(shè)置布局為hbox
type : 'hbox',
padding : '10',
//指定組件在容器中的位置；
//start（默認(rèn)）：組件在容器左邊，center：組件在容器中間，end：組件在容器的右邊
pack : 'start',
//指定組件在容器內(nèi)的對(duì)齊方式
//top（默認(rèn)）：排列于容器頂端。
//middle：垂直居中排列于容器中。
//stretch：垂直排列且拉伸義填補(bǔ)容器高度
//stretchmax:垂直拉伸，并且組件以最高高度的組件為準(zhǔn)。
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頁(yè)面中的d1層
hbox1.render('d1');
})
效果圖
Extjs---HBox的使用
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元