`
dowhathowtodo
  • 浏览: 778744 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

要使用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. });

分享到：
| ExtJS4学习笔记(四)---HBox的使用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics