<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HBox</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
</head>
<body>
要使用HBox布局方式，首先的熟悉下一下几个主要属性：
一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度
4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。
三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边
2、center：组件在容器中间
3、end：组件在容器的右边
<script type="text/javascript">
Ext.onReady(function(){
var d1 = Ext.create('Ext.Panel',{
title:'HBox 顶对齐，且组件在容器的左边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d1.render('d1');
var d2 = Ext.create('Ext.Panel',{
title:'HBox 垂直对齐，且组件在容器的右边',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type:'hbox',
padding:'10',
align:'middle',
pack:'end'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Button 1'
},{
xtype:'button',
text: 'Button 2'
},{
xtype:'button',
text: 'Button 3'
},{
xtype:'button',
text: 'Button 4'
}]
}]
})
d2.render('d2');
var d3 = Ext.create('Ext.Panel',{
title:'HBox 垂直水平居中，并且所有控件高度为最高控件的高度',
frame:true,
width:600,
height:100,
items:[{
anchor:'100%',
layout: {
type: 'hbox',
padding:'5',
align:'stretchmax',
pack:'center'
},
defaults:{margins:'0 5 0 0'},
items:[{
xtype:'button',
text: 'Small Size'
},{
xtype:'button',
scale: 'medium',
text: 'Medium Size'
},{
xtype:'button',
scale: 'large',
text: 'Large Size'
}]
}]
})
d3.render('d3');
})
</script>
</body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</html>
extjs4 学习笔记源码
4星 · 超过85%的资源 需积分: 9 13 浏览量
2011-06-13
11:09:53
上传
评论
收藏 1.07MB RAR 举报 
extjs4 学习笔记源码 （969个子文件） 
rowsEditGrid.asp 2KB editgrid.asp 2KB selectgrid.asp 2KB searchgrid.asp 2KB mydata.asp 1KB ext-sandbox.css 227KB ext-all-scoped.css 221KB ext-all-debug.css 203KB ext-all.css 202KB ext-ie-scoped.css 199KB ext-all-access.css 194KB ext-ie.css 181KB ext-standard-scoped.css 151KB ext-standard.css 139KB my-ext-theme.css 5KB statusbar.css 3KB GroupTabPanel.css 2KB ItemSelector.css 556B TabScrollerMenu.css 408B CheckHeader.css 351B RangeMenu.css 327B GridFilters.css 192B LiveSearchGridPanel.css 187B CenterLayout.css 164B DragSelector.css 76B
tool-sprites.gif 5KB btn.gif 4KB error-tip-corners.gif 4KB error-tip-corners.gif 4KB radio.gif 3KB tip-sprite.gif 3KB blue-loading.gif 3KB large-loading.gif 3KB checkbox.gif 3KB btn.gif 3KB tools-sprites-trans.gif 3KB tools-sprites-trans.gif 3KB tools-sprites-trans.gif 3KB group-cs.gif 2KB group-cs.gif 2KB saving.gif 2KB search-trigger.gif 2KB loading-balls.gif 2KB sort-hd.gif 2KB tb-sprite.gif 2KB checkbox_.gif 2KB checkbox.gif 2KB spinner.gif 2KB clear-trigger.gif 2KB panel-header-default-framed-top-sides.gif 2KB panel-header-default-framed-bottom-sides.gif 2KB panel-header-default-framed-collapsed-top-sides.gif 2KB panel-header-default-framed-collapsed-bottom-sides.gif 2KB tb-sprite.gif 2KB clear-trigger.gif 2KB tab-default-bottom-over-sides.gif 2KB tab-default-bottom-sides.gif 2KB tab-default-bottom-disabled-sides.gif 2KB tab-default-bottom-active-sides.gif 2KB tool-sprites.gif 2KB tool-sprites.gif 2KB tab-default-top-disabled-sides.gif 2KB spinner.gif 2KB tab-default-top-over-sides.gif 2KB tab-default-top-active-sides.gif 2KB tab-default-top-sides.gif 2KB btn-default-large-pressed-sides.gif 2KB btn-default-large-over-sides.gif 2KB btn-default-large-focus-sides.gif 2KB btn-default-large-pressed-sides.gif 2KB spinner_.gif 2KB btn-default-toolbar-large-focus-sides.gif 2KB btn-default-toolbar-large-over-sides.gif 2KB btn-default-large-sides.gif 2KB btn-default-toolbar-large-pressed-sides.gif 2KB btn-default-medium-over-sides.gif 2KB btn-default-medium-focus-sides.gif 2KB btn-default-medium-pressed-sides.gif 2KB btn-default-medium-pressed-sides.gif 2KB btn-default-large-disabled-sides.gif 2KB btn-default-large-sides.gif 2KB btn-default-large-disabled-sides.gif 2KB btn-default-large-focus-sides.gif 2KB btn-default-large-over-sides.gif 2KB panel-header-framed-sides.gif 2KB btn-default-toolbar-medium-pressed-sides.gif 2KB btn-default-toolbar-medium-focus-sides.gif 2KB btn-default-toolbar-medium-over-sides.gif 2KB btn-default-medium-sides.gif 2KB datepicker-footer-bg.gif 2KB btn-default-medium-disabled-sides.gif 2KB btn-default-medium-sides.gif 2KB btn-default-medium-disabled-sides.gif 2KB panel-header-default-framed-top-sides.gif 2KB panel-header-default-framed-bottom-sides.gif 2KB panel-header-default-framed-collapsed-bottom-sides.gif 2KB panel-header-default-framed-collapsed-top-sides.gif 2KB btn-default-small-focus-sides.gif 2KB btn-default-small-pressed-sides.gif 2KB btn-default-small-over-sides.gif 2KB共 969 条
- 1
- 2
- 3
- 4
- 5
- 6
- 10
倾斜的水瓶座
- 粉丝: 3764
- 资源: 20
最新资源
- Python爬取淘宝热卖商品并可视化分析
- 5152单片机proteus仿真和源码将按键次数写入AT24C02再读出并用1602LCD显示
- SE-SSD复现过程（Det3D的安装教程）
- 基于Python的在线学习与推荐系统设计与实现(论文+源码)-kaic
- 串口通过 YMODEM 协议进行文件传输
- 蓝桥杯2024年第十五届省赛真题-前缀总分
- com.qihoo.appstore_300101305-1.apk
- tensorflow-gpu-2.7.1-cp37-cp37m-manylinux2010-x86-64.whl
- tensorflow-2.7.2-cp37-cp37m-manylinux2010-x86-64.whl
- tensorflow-2.7.1-cp39-cp39-manylinux2010-x86-64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
- 3
- 4
前往页