ExtJS4学习笔记(五)---VBox的使用

最新推荐文章于 2023-06-30 17:29:02 发布
最新推荐文章于 2023-06-30 17:29:02 发布 · 181 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文介绍了VBox布局方式及其主要属性，包括align、flex和pack，并通过实例展示了不同属性设置的效果。

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

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

1、left（默认）：排列于容器左侧。

2、center ：控件在容器水平居中。

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>VBox---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="vbox.js"></script>
  10. <styletype="text/css">
  11. html,body{
  12. font:normal12pxverdana;
  13. margin:0;
  14. padding:0;
  15. border:0none;
  16. }
  17. </style>
  18. </head>

  20. <body>
  21. </body>
  22. </html>

vbox.js：

  1. Ext.onReady(function(){
  2. varcurrentName;
  3. varreplace=function(config,name){
  4. varbtns=Ext.getCmp('btns');
  5. if(name&&name!=currentName){
  6. currentName=name;
  7. btns.remove(0);
  8. btns.add(Ext.apply(config));
  9. }
  10. };
  12. varviewport=Ext.create('Ext.Viewport',{
  13. layout:'border',

  15. items:[{
  16. id:'btns',
  17. region:'west',
  18. baseCls:'x-plain',
  19. split:true,
  20. width:150,
  21. minWidth:100,
  22. maxWidth:250,
  23. layout:'fit',
  24. margins:'5055',
  25. items:{
  26. baseCls:'x-plain',
  27. html:'<pstyle="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>'
  28. }
  29. },{
  30. region:'center',
  31. margins:'5550',
  32. layout:'anchor',
  33. items:[{
  34. anchor:'100%',
  35. baseCls:'x-plain',
  36. layout:{
  37. type:'hbox',
  38. padding:10
  39. },
  40. defaults:{
  41. margins:'0500',
  42. pressed:false,
  43. toggleGroup:'btns',
  44. allowDepress:false
  45. },
  46. items:[{
  47. xtype:'button',
  49. text:'Spaced/Align:left',
  50. handler:function(){
  51. replace({
  52. layout:{
  53. type:'vbox',
  54. padding:'5',
  55. align:'left'
  56. },
  57. defaults:{margins:'0050'},
  58. items:[{
  59. xtype:'button',
  60. text:'Button1'
  61. },{
  62. xtype:'tbspacer',
  63. flex:1
  64. },{
  65. xtype:'button',
  66. text:'Button2'
  67. },{
  68. xtype:'button',
  69. text:'Button3'
  70. },{
  71. xtype:'button',
  72. text:'Button4',
  73. margins:'0'
  74. }]
  75. },'spaced');
  76. }
  77. },{
  78. xtype:'button',
  79. text:'Multi-Spaced/Align:left',
  80. handler:function(){
  81. replace({
  82. layout:{
  83. type:'vbox',
  84. padding:'5',
  85. align:'left'
  86. },
  87. defaults:{margins:'0050'},
  88. items:[{
  89. xtype:'button',
  90. text:'Button1'
  91. },{
  92. xtype:'tbspacer',
  93. flex:1
  94. },{
  95. xtype:'button',
  96. text:'Button2'
  97. },{
  98. xtype:'tbspacer',
  99. flex:1
  100. },{
  101. xtype:'button',
  102. text:'Button3'
  103. },{
  104. xtype:'tbspacer',
  105. flex:1
  106. },{
  107. xtype:'button',
  108. text:'Button4',
  109. margins:'0'
  110. }]
  111. },'multispaced-alignleft');
  112. }
  113. },{
  114. xtype:'button',
  115. text:'Align:left',
  116. handler:function(){
  117. replace({
  118. layout:{
  119. type:'vbox',
  120. padding:'5',
  121. align:'left'
  122. },
  123. defaults:{margins:'0050'},
  124. items:[{
  125. xtype:'button',
  126. text:'Button1'
  127. },{
  128. xtype:'button',
  129. text:'Button2'
  130. },{
  131. xtype:'button',
  132. text:'Button3'
  133. },{
  134. xtype:'button',
  135. text:'Button4'
  136. }]
  137. },'alignleft');
  138. }
  139. },{
  140. xtype:'button',
  141. text:'Align:center',
  142. handler:function(){
  143. replace({
  144. layout:{
  145. type:'vbox',
  146. padding:'5',
  147. align:'center'
  148. },
  149. defaults:{margins:'0050'},
  150. items:[{
  151. xtype:'button',
  152. text:'Button1'
  153. },{
  154. xtype:'button',
  155. text:'Button2'
  156. },{
  157. xtype:'button',
  158. text:'Button3'
  159. },{
  160. xtype:'button',
  161. text:'Button4'
  162. }]
  163. },'aligncenter');
  164. }
  165. },{
  166. xtype:'button',
  167. text:'Align:stretch',
  168. handler:function(){
  169. replace({
  170. layout:{
  171. type:'vbox',
  172. padding:'5',
  173. align:'stretch'
  174. },
  175. defaults:{margins:'0050'},
  176. items:[{
  177. xtype:'button',
  178. text:'Button1'
  179. },{
  180. xtype:'button',
  181. text:'Button2'
  182. },{
  183. xtype:'button',
  184. text:'Button3'
  185. },{
  186. xtype:'button',
  187. text:'Button4'
  188. }]
  189. },'alignstretch');
  190. }
  191. },{
  192. xtype:'button',
  193. text:'Align:stretchmax',
  194. handler:function(){
  195. replace({
  196. layout:{
  197. type:'vbox',
  198. padding:'5',
  199. align:'stretchmax'
  200. },
  201. defaults:{margins:'0050'},
  202. items:[{
  203. xtype:'button',
  204. text:'Jamie'
  205. },{
  206. xtype:'button',
  207. text:'Aaron'
  208. },{
  209. xtype:'button',
  210. text:'Tommy'
  211. },{
  212. xtype:'button',
  213. text:'Ed'
  214. }]
  215. },'alignstretchmax');
  216. }
  217. }]
  218. },{
  219. anchor:'100%',
  220. baseCls:'x-plain',
  221. layout:{
  222. type:'hbox',
  223. padding:'01010'
  224. },
  225. defaults:{
  226. margins:'0500',
  227. pressed:false,
  228. toggleGroup:'btns',
  229. allowDepress:false
  230. },
  231. items:[{
  232. xtype:'button',
  233. text:'Flex:Even/Align:center',
  234. handler:function(){
  235. replace({
  236. layout:{
  237. type:'vbox',
  238. padding:'5',
  239. align:'center'
  240. },
  241. defaults:{margins:'0050'},
  242. items:[{
  243. xtype:'button',
  244. text:'Button1',
  245. flex:1
  246. },{
  247. xtype:'button',
  248. text:'Button2',
  249. flex:1
  250. },{
  251. xtype:'button',
  252. text:'Button3',
  253. flex:1
  254. },{
  255. xtype:'button',
  256. text:'Button4',
  257. flex:1,
  258. margins:'0'
  259. }]
  260. },'alignflexeven');
  261. }
  262. },{
  263. xtype:'button',
  264. text:'Flex:Ratio/Align:center',
  265. handler:function(){
  266. replace({
  267. layout:{
  268. type:'vbox',
  269. padding:'5',
  270. align:'center'
  271. },
  272. defaults:{margins:'0050'},
  273. items:[{
  274. xtype:'button',
  275. text:'Button1',
  276. flex:1
  277. },{
  278. xtype:'button',
  279. text:'Button2',
  280. flex:1
  281. },{
  282. xtype:'button',
  283. text:'Button3',
  284. flex:1
  285. },{
  286. xtype:'button',
  287. text:'Button4',
  288. flex:3,
  289. margins:'0'
  290. }]
  291. },'alignflexratio');
  292. }
  293. },{
  294. xtype:'button',
  295. text:'Flex+Stretch',
  296. handler:function(){
  297. replace({
  298. layout:{
  299. type:'vbox',
  300. padding:'5',
  301. align:'stretch'
  302. },
  303. defaults:{margins:'0050'},
  304. items:[{
  305. xtype:'button',
  306. text:'Button1',
  307. flex:1
  308. },{
  309. xtype:'button',
  310. text:'Button2',
  311. flex:1
  312. },{
  313. xtype:'button',
  314. text:'Button3',
  315. flex:1
  316. },{
  317. xtype:'button',
  318. text:'Button4',
  319. flex:3,
  320. margins:'0'
  321. }]
  322. },'alignflex+stretch');
  323. }
  324. },{
  325. xtype:'button',
  326. text:'Pack:start/Align:center',
  327. handler:function(){
  328. replace({
  329. layout:{
  330. type:'vbox',
  331. padding:'5',
  332. pack:'start',
  333. align:'center'
  334. },
  335. defaults:{margins:'0050'},
  336. items:[{
  337. xtype:'button',
  338. text:'Button1'
  339. },{
  340. xtype:'button',
  341. text:'Button2'
  342. },{
  343. xtype:'button',
  344. text:'Button3'
  345. },{
  346. xtype:'button',
  347. text:'Button4'
  348. }]
  349. },'alignpackstart+aligncenter');
  350. }
  351. },{
  352. xtype:'button',
  353. text:'Pack:center/Align:center',
  354. handler:function(){
  355. replace({
  356. layout:{
  357. type:'vbox',
  358. padding:'5',
  359. pack:'center',
  360. align:'center'
  361. },
  362. defaults:{margins:'0050'},
  363. items:[{
  364. xtype:'button',
  365. text:'Button1'
  366. },{
  367. xtype:'button',
  368. text:'Button2'
  369. },{
  370. xtype:'button',
  371. text:'Button3'
  372. },{
  373. xtype:'button',
  374. text:'Button4',
  375. margins:'0'
  376. }]
  377. },'alignpackcenter+aligncenter');
  378. }
  379. },{
  380. xtype:'button',
  381. text:'Pack:end/Align:center',
  382. handler:function(){
  383. replace({
  384. layout:{
  385. type:'vbox',
  386. padding:'5',
  387. pack:'end',
  388. align:'center'
  389. },
  390. defaults:{margins:'0050'},
  391. items:[{
  392. xtype:'button',
  393. text:'Button1'
  394. },{
  395. xtype:'button',
  396. text:'Button2'
  397. },{
  398. xtype:'button',
  399. text:'Button3'
  400. },{
  401. xtype:'button',
  402. text:'Button4',
  403. margins:'0'
  404. }]
  405. },'alignpackend+aligncenter');
  406. }
  407. }]
  408. }]
  409. }]
  410. });
  411. });

iteye_12837
关注
Extjs4.0学习笔记
12-19
ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid（SearchGrid） ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ...
extjs4 学习笔记源码
06-13
exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net
ExtJS4学习笔记(三)---VBox的使
nuoyan666的专栏
08-02 2628
要使用VBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、left（默认）：排列于容器左侧。     2、center ：控件在容器水平居中。     3、stretch：控件横向拉伸至容器
extjs panel 居中
jing的专栏
03-05 1万+
layout: {                         align: 'middle',                         pack: 'center',                         type: 'hbox'                     } 如图示，fieldset居中了，textfield也居中了
ExtJS4 相关
Lyndon的专栏
06-30 343
在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。1.Auto自动布局（系统默认）
ExtJs布局中，控件如何水平居中？
左直拳的马桶_日用桶
06-26 1万+
如此即可，有图有代码有j8:var formGridHead = Ext.create('Ext.form.Panel', { id: 'MyGridHead', region: 'north', bodyPadding: 10, bodyStyle: 'background:#fff', split: false,
extjs panel html 居中,ExtJs—FormPanel居中设置
weixin_42500625的博客
06-22 431
ExtJs—FormPanel居中.初学ExtJs 在使用FormPanel时发现产生后在窗口的左上方，在API里找了下配置属性貌似没看到可以让FormPanel居中的也许是有这个属性但是我没注意到，如果知道的朋友希望能给我说下虽然没有找到居中的属性但是可以通过以下的方法使FormPanel居中代码如下：[xhtml] view plaincopy-//W3C//DTD HTML 4.01//EN...
ExtJS4学习笔记：源码解析与Grid组件应用
- 这份资源是一份关于ExtJS 4的学习笔记源码。ExtJS是由Sencha公司开发的一个成熟的前端框架，它基于JavaScript语言，专门用于构建富互联网应用程序（RIA）。ExtJS使用了模型-视图-控制器（MVC）设计模式，以此来...
Extjs4.0学习笔记：深入浅出组件创建与使用
ExtJS 4支持动态加载JS文件，这意味着开发者可以根据需要按需加载特定的组件类文件，而不是在页面加载时就一次性加载整个框架。这一特点极大地优化了应用的加载时间，尤其是对于移动端等对加载性能要求较高的应用...
ExtJS4中文教程2 开发笔记 chm
12-13
ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)--...
EXTJS模拟Windows布局支持窗口拖动.rar
07-10
EXTJS插件模拟Windows布局支持窗口拖动，全部是仿Windows窗口的布局，每一个都可以实现拖动，可以设置一行或一列显示多少窗口，可以调用远程窗口。用好EXT插件，确实可以做出非常专业的在线管理系统。
关于Extjs的panel（画布）的居中问…
tobesili2012的专栏
01-08 808
最近在学extjs，遇到了想把new出来的panel渲染后，想让其居中的问题。 看了一下网上的解法，自己也测试了一下，解决如下：   new 一个 panel：举例form：   var panel = new Ext.form.FormPanel(        {         applyTo:Ext.get("div1"),//渲染到哪个对象上，这里是id为"div1"的对象上      
extjs panel html 居中,ExtJs设置GridPanel表格文本垂直居中示例
weixin_35825868的博客
06-22 277
业务场景，需要实现最终效果图如下：GridPanel代码如下配置：复制代码 代码如下:{xtype : 'grid',id : 'grid_jglb',frame : true,region : 'center',title : '列表详细信息',columnLines : true,loadMask : true,store : 'test_store',viewConfig : {force...
ExtJs布局中，控件如何水平居中
hddfuuh的博客
11-11 2879
ExtJs布局中，控件如何水平居中
ExtJs学习笔记
llwan的专栏
10-15 722
学习笔记
flex布局中的align-items:stretch属性
热门推荐
weixin_46663461的博客
08-06 1万+
align-items:stretch align-items:stretch是一个默认值,永远保持在侧轴拉伸项目,怎么理解这句话呢? 如果侧轴是垂直方向,那么在垂直方向如果项目没有设置高度,则会拉伸至弹性父级盒子的高度, 如果侧轴为水平方向,如果项目没有设置宽度,那么就会拉伸其宽度至父级弹性盒子的宽度一致。 这里用一个布局例子详细解释这个属性 我们想实现类似于这个效果，基本的布局思路是，给一个白色的大盒子弹性布局，设置主轴方向为column，然后让其两端对其，然后再让两个盒子设置为弹性盒子，两边对齐
flex布局常用属性
weixin_44303404的博客
12-27 1344
flex布局 flex布局是一种相对简单，但实现效率高的布局。相比于传统布局，flex布局有高度自适应、操作方便、布局极为简单的特点。一般会使用在移动端以及不考虑兼容性的网页端上面。 传统布局和flex布局的区别： 传统布局：兼容性好、布局繁琐、局限性，不能在移动端很好的布局。 flex布局：高度自适应、操作方便、布局极为简单、移动端应用很广泛、PC端浏览器支持情况比较差、IE 11或者更低的版本，不支持或者仅仅部分支持。 flex布局原理 flex布局：flexible Box的缩写，意为弹性布局，任何一
Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介
weixin_30252709的博客
11-26 519
VBox布局方式，熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchma...
Ext 按钮如何竖着排列呢
WoWoWoLee的博客
04-08 634
按钮布置为竖着的，大都是横着的，我看底层代码，并不是很熟悉，所以如何改请教大家了！
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值