ExtJS4学习笔记(四)---HBox的使用

最新推荐文章于 2016-11-22 22:50:28 发布
最新推荐文章于 2016-11-22 22:50:28 发布 · 192 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文介绍了HBox布局方式的三个主要属性：align、flex 和 pack 的使用方法，并通过具体实例展示了如何利用这些属性来实现不同样式的布局效果。

要使用HBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

1、top（默认）：排列于容器顶端。

2、middle：垂直居中排列于容器中。

3、stretch：垂直排列且拉伸义填补容器高度

4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。

1、start（默认）：组件在容器左边

2、center：组件在容器中间

3、end：组件在容器的右边

实例代码：

一、HTML代码：

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  5. <title>HBox实例--MHZG.NET</title>
  6. <linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
  7. <scripttype="text/javascript"src="../../bootstrap.js"></script>
  8. <scripttype="text/javascript"src="../../locale/ext-lang-zh_CN.js"></script>
  9. <scripttype="text/javascript"src="hbox.js"></script>

  11. </head>

  13. <body>


  16. </body>
  17. <divid="d1"></div>
  18. <divid="d2"></div>
  19. <divid="d3"></div>
  20. </html>

hbox.js代码：

  1. Ext.onReady(function(){
  2. vard1=Ext.create('Ext.Panel',{
  3. title:'HBox顶对齐，且组件在容器的左边',
  4. frame:true,
  5. width:600,
  6. height:100,
  7. items:[{
  8. anchor:'100%',
  9. layout:{
  10. type:'hbox',
  11. padding:'10',
  12. pack:'start',
  13. align:'top'
  14. },
  15. defaults:{margins:'0500'},
  16. items:[{
  17. xtype:'button',
  18. text:'Button1'
  19. },{
  20. xtype:'button',
  21. text:'Button2'
  22. },{
  23. xtype:'button',
  24. text:'Button3'
  25. },{
  26. xtype:'button',
  27. text:'Button4'
  28. }]
  29. }]
  30. })
  32. d1.render('d1');


  35. vard2=Ext.create('Ext.Panel',{
  36. title:'HBox垂直对齐，且组件在容器的右边',
  37. frame:true,
  38. width:600,
  39. height:100,
  40. items:[{
  41. anchor:'100%',
  42. layout:{
  43. type:'hbox',
  44. padding:'10',
  45. align:'middle',
  46. pack:'end'
  47. },
  48. defaults:{margins:'0500'},
  49. items:[{
  50. xtype:'button',
  51. text:'Button1'
  52. },{
  53. xtype:'button',
  54. text:'Button2'
  55. },{
  56. xtype:'button',
  57. text:'Button3'
  58. },{
  59. xtype:'button',
  60. text:'Button4'
  61. }]
  62. }]
  63. })
  65. d2.render('d2');

  67. vard3=Ext.create('Ext.Panel',{
  68. title:'HBox垂直水平居中，并且所有控件高度为最高控件的高度',
  69. frame:true,
  70. width:600,
  71. height:100,
  72. items:[{
  73. anchor:'100%',
  75. layout:{
  76. type:'hbox',
  77. padding:'5',
  78. align:'stretchmax',
  79. pack:'center'
  80. },
  81. defaults:{margins:'0500'},
  82. items:[{
  83. xtype:'button',
  84. text:'SmallSize'
  85. },{
  86. xtype:'button',
  87. scale:'medium',
  88. text:'MediumSize'
  89. },{
  90. xtype:'button',
  91. scale:'large',
  92. text:'LargeSize'
  93. }]
  94. }]
  95. })
  97. d3.render('d3');



  101. })

最后是效果图：


iteye_12837
关注
Extjs4.0学习笔记
12-19
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid...
extjs4 学习笔记源码
06-13
exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net
ExtJS4学习笔记(二)---HBox的使用
nuoyan666的专栏
08-02 2177
要使用HBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、top（默认）：排列于容器顶端。     2、middle：垂直居中排列于容器中。     3、stretch：垂直排列且拉伸义填补
Extjs---HBox的使用
网站开发初中级代码参考-转载
09-11 345
html中的代码： &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;script src="ext4/ext-all.js" type="text/javascript"&gt;&lt;/script&gt;
Extjs4.0中hbox用法
a138571的博客
11-04 543
要使用HBOX的属性，首先要熟悉一下属性的内容： 一、align:字符类型，表示组件的对齐方式，有如下几种： 1.top(默认)：排列与容器顶部 2.middle：垂直居中排列与容器中 3.stretch：垂直排列且拉伸义填补容器高度 4.stretchmax：垂直拉伸，并且组件以最高高度的组件为准 二、flex:数值类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的...
ExtJS4学习笔记之HBox的使用
weixin_33691700的博客
06-02 196
要使用HBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。 1、top（默认）：排列于容器顶端。 2、middle：垂直居中排列于容器中。 3、stretch：垂直排列且拉伸义填补容器高度 4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。 二、flex:数字类型，指示组...
ExtJS4学习笔记：源码解析与Grid组件应用
- 这份资源是一份关于ExtJS 4的学习笔记源码。ExtJS是由Sencha公司开发的一个成熟的前端框架，它基于JavaScript语言，专门用于构建富互联网应用程序（RIA）。ExtJS使用了模型-视图-控制器（MVC）设计模式，以此来...
Extjs4.0学习笔记：深入浅出组件创建与使用
ExtJS 4支持动态加载JS文件，这意味着开发者可以根据需要按需加载特定的组件类文件，而不是在页面加载时就一次性加载整个框架。这一特点极大地优化了应用的加载时间，尤其是对于移动端等对加载性能要求较高的应用...
ExtJS4中文教程2 开发笔记 chm
12-13
ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...
EXT--水平盒布局HBox
开发者博客
09-27 654
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &am
Ext4 HBox的使用
cnsu-cmh
11-22 596
要使用HBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、top（默认）：排列于容器顶端。     2、middle：垂直居中排列于容器中。     3、stretch：垂直排列且拉伸义填补容器高度     4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。 二、flex:数字类型，指示组
Ext3.2 布局——hbox layout
专注于应用与管理！
02-11 1246
一个在容器中按照水平方向布置项目的布局。 此布局在包含一个数字 flex 配置项的 子项目之间分割可用水平空间。通过配置 align 选项，此布局也可以用来设置子项目的高度。  它与vbox基本是一样的。vbox，纵向；hbox，横向。Ext.onReady(function() { var currentName; var
ext4使用总结（二）简单的hbox布局
思考
03-22 346
布局的合理利用： 如图： [img]http://dl.iteye.com/upload/attachment/0082/0500/1fc27d18-aefb-3107-86e1-563e0ca65687.png[/img] [code="javascript"] { xtype:'container', ...
Ext4使用总结（二）简单的hbox布局
大脑与思维的专栏
11-07 3819
布局的合理利用： 如图： { xtype:'container', margins:'5 0 0 0', layout:{ align:'stretch
[Sencha ExtJS & Touch] Column Layout 和 HBox Layout 的区别
小桥流水丿小溪
04-13 2220
ExtJS一直以来都有一个布局叫Column Layout，也就是列布局。从ExtJS4开始，新增了HBox布局，中文意思是水平方向盒子布局。 区别一 首先是Column Layout Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), width: 400, height: 2
箱子布局攻略 (HBox/VBox Layout)
热门推荐
zhangxin09的专栏
05-28 4万+
一、了解箱子布局 箱子布局是一种新颖的布局方式，其布局模型可以更好地优化 UI 设计的工作。它率先在 XUL 界面语言中被提出，广泛应用于 Mozilla 的应用程序，如 FireFox 等等。在 CSS 布局系统中（for CSS3），作为新增的补充形式，箱子布局可以指定子元素在水平或垂直的任意一种方向进行排列，剩下有多的空间由已声明了的子元素来填空（声明 flex 项）。
Extjs4 新的布局方式
nuoyan666的专栏
08-02 2895
本问介绍一个常见的??例子“联系我们”在弹出窗口的形式。表单使用vbox和hbox布局，以实现一个统一的灵活的布局。 JS代码：   Ext.require([     'Ext.form.*' ]); Ext.onReady(function() {
ExtJs常用布局--layout详解（含实例）
weixin_30377461的博客
05-23 1074
序言： 笔者用的ExtJs版本：ext-3.2.0 ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码 简介： 最常用的边框布局—...
ExtJs2.0与Spket-1.6.11联合使用教程
- 通过阅读extJs2.0.doc和extJs2.0.pdf，学习ExtJs 2.0框架的使用和深入定制。 - 对于老项目，如果需要迁移到新版本的ExtJs或进行维护，可以参考ext-2.2.1.zip中的文档和代码，以了解旧版本的实现方式和API差异。 ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值