随笔 - 27  文章 - 1 评论 - 52 阅读 - 64245

ExtJS4学习笔记之VBox的使

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

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

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

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

    3、stretch：控件横向拉伸至容器大小

    4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。

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

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

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

    2、center：组件在容器中间

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

 

HTML代码：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>VBox---MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
  7. <script type="text/javascript" src="http://www.cnblogs.com/bootstrap.js"></script>
  8. <script type="text/javascript" src="http://www.cnblogs.com/locale/ext-lang-zh_CN.js"></script>
  9. <script type="text/javascript" src="vbox.js"></script>
  10. <style type="text/css">
  11.         html, body {
  12.             font: normal 12px verdana;
  13.             margin: 0;
  14.             padding: 0;
  15.             border: 0 none;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21. </body>
  22. </html>

vbox.js：

 
  1. Ext.onReady(function() {
  2.             var currentName;
  3.             var replace = function(config, name) {
  4.                 var btns = Ext.getCmp('btns');
  5.                 if (name && name != currentName) {
  6.                     currentName = name;
  7.                     btns.remove(0);
  8.                     btns.add(Ext.apply(config));
  9.                 }
  10.             };
  11.              
  12.             var viewport = 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: '5 0 5 5',
  25.                     items: {
  26.                         baseCls: 'x-plain',
  27.                         html: '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>'
  28.                     }
  29.                }, {
  30.                     region:'center',
  31.                     margins: '5 5 5 0',
  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:'0 5 0 0',
  42.                             pressed: false,
  43.                             toggleGroup:'btns',
  44.                             allowDepress: false
  45.                         },
  46.                         items: [{
  47.                             xtype:'button',
  48.                             
  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:'0 0 5 0'},
  58.                                     items:[{
  59.                                         xtype:'button',
  60.                                         text: 'Button 1'
  61.                                     },{
  62.                                         xtype:'tbspacer',
  63.                                         flex:1
  64.                                     },{
  65.                                         xtype:'button',
  66.                                         text: 'Button 2'
  67.                                     },{
  68.                                         xtype:'button',
  69.                                         text: 'Button 3'
  70.                                     },{
  71.                                         xtype:'button',
  72.                                         text: 'Button 4',
  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:'0 0 5 0'},
  88.                                     items:[{
  89.                                         xtype:'button',
  90.                                         text: 'Button 1'
  91.                                     },{
  92.                                         xtype:'tbspacer',
  93.                                         flex:1
  94.                                     },{
  95.                                         xtype:'button',
  96.                                         text: 'Button 2'
  97.                                     },{
  98.                                         xtype:'tbspacer',
  99.                                         flex:1
  100.                                     },{
  101.                                         xtype:'button',
  102.                                         text: 'Button 3'
  103.                                     },{
  104.                                         xtype:'tbspacer',
  105.                                         flex:1
  106.                                     },{
  107.                                         xtype:'button',
  108.                                         text: 'Button 4',
  109.                                         margins:'0'
  110.                                     }]
  111.                                 }, 'multi spaced - align left');
  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:'0 0 5 0'},
  124.                                     items:[{
  125.                                         xtype:'button',
  126.                                         text: 'Button 1'
  127.                                     },{
  128.                                         xtype:'button',
  129.                                         text: 'Button 2'
  130.                                     },{
  131.                                         xtype:'button',
  132.                                         text: 'Button 3'
  133.                                     },{
  134.                                         xtype:'button',
  135.                                         text: 'Button 4'
  136.                                     }]
  137.                                 }, 'align left');
  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:'0 0 5 0'},
  150.                                     items:[{
  151.                                         xtype:'button',
  152.                                         text: 'Button 1'
  153.                                     },{
  154.                                         xtype:'button',
  155.                                         text: 'Button 2'
  156.                                     },{
  157.                                         xtype:'button',
  158.                                         text: 'Button 3'
  159.                                     },{
  160.                                         xtype:'button',
  161.                                         text: 'Button 4'
  162.                                     }]
  163.                                 }, 'align center');
  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:'0 0 5 0'},
  176.                                     items:[{
  177.                                         xtype:'button',
  178.                                         text: 'Button 1'
  179.                                     },{
  180.                                         xtype:'button',
  181.                                         text: 'Button 2'
  182.                                     },{
  183.                                         xtype:'button',
  184.                                         text: 'Button 3'
  185.                                     },{
  186.                                         xtype:'button',
  187.                                         text: 'Button 4'
  188.                                     }]
  189.                                 }, 'align stretch');
  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:'0 0 5 0'},
  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.                                 }, 'align stretchmax');
  216.                             }
  217.                         }]
  218.                     },{
  219.                         anchor: '100%',
  220.                         baseCls:'x-plain',
  221.                         layout: {
  222.                             type:'hbox',
  223.                             padding: '0 10 10'
  224.                         },
  225.                         defaults:{
  226.                             margins:'0 5 0 0',
  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:'0 0 5 0'},
  242.                                     items:[{
  243.                                         xtype:'button',
  244.                                         text: 'Button 1',
  245.                                         flex:1
  246.                                     },{
  247.                                         xtype:'button',
  248.                                         text: 'Button 2',
  249.                                         flex:1
  250.                                     },{
  251.                                         xtype:'button',
  252.                                         text: 'Button 3',
  253.                                         flex:1
  254.                                     },{
  255.                                         xtype:'button',
  256.                                         text: 'Button 4',
  257.                                         flex:1,
  258.                                         margins:'0'
  259.                                     }]
  260.                                 }, 'align flex even');
  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:'0 0 5 0'},
  273.                                     items:[{
  274.                                         xtype:'button',
  275.                                         text: 'Button 1',
  276.                                         flex:1
  277.                                     },{
  278.                                         xtype:'button',
  279.                                         text: 'Button 2',
  280.                                         flex:1
  281.                                     },{
  282.                                         xtype:'button',
  283.                                         text: 'Button 3',
  284.                                         flex:1
  285.                                     },{
  286.                                         xtype:'button',
  287.                                         text: 'Button 4',
  288.                                         flex:3,
  289.                                         margins:'0'
  290.                                     }]
  291.                                 }, 'align flex ratio');
  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:'0 0 5 0'},
  304.                                     items:[{
  305.                                         xtype:'button',
  306.                                         text: 'Button 1',
  307.                                         flex:1
  308.                                     },{
  309.                                         xtype:'button',
  310.                                         text: 'Button 2',
  311.                                         flex:1
  312.                                     },{
  313.                                         xtype:'button',
  314.                                         text: 'Button 3',
  315.                                         flex:1
  316.                                     },{
  317.                                         xtype:'button',
  318.                                         text: 'Button 4',
  319.                                         flex:3,
  320.                                         margins:'0'
  321.                                     }]
  322.                                 }, 'align flex + 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:'0 0 5 0'},
  336.                                     items:[{
  337.                                         xtype:'button',
  338.                                         text: 'Button 1'
  339.                                     },{
  340.                                         xtype:'button',
  341.                                         text: 'Button 2'
  342.                                     },{
  343.                                         xtype:'button',
  344.                                         text: 'Button 3'
  345.                                     },{
  346.                                         xtype:'button',
  347.                                         text: 'Button 4'
  348.                                     }]
  349.                                 }, 'align pack start + align center');
  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:'0 0 5 0'},
  363.                                     items:[{
  364.                                         xtype:'button',
  365.                                         text: 'Button 1'
  366.                                     },{
  367.                                         xtype:'button',
  368.                                         text: 'Button 2'
  369.                                     },{
  370.                                         xtype:'button',
  371.                                         text: 'Button 3'
  372.                                     },{
  373.                                         xtype:'button',
  374.                                         text: 'Button 4',
  375.                                         margins:'0'
  376.                                     }]
  377.                                 }, 'align pack center + align center');
  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:'0 0 5 0'},
  391.                                     items:[{
  392.                                         xtype:'button',
  393.                                         text: 'Button 1'
  394.                                     },{
  395.                                         xtype:'button',
  396.                                         text: 'Button 2'
  397.                                     },{
  398.                                         xtype:'button',
  399.                                         text: 'Button 3'
  400.                                     },{
  401.                                         xtype:'button',
  402.                                         text: 'Button 4',
  403.                                         margins:'0'
  404.                                     }]
  405.                                 }, 'align pack end + align center');
  406.                             }
  407.                         }]
  408.                     }]
  409.                 }]
  410.             });
  411.         });
原文链接：http://www.mhzg.net/a/20115/2011569120232.html
posted on   gmval  阅读(1324)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
Copyright © 2025 gmval
Powered by .NET 9.0 on Kubernetes Powered by: 博客园
点击右上角即可分享
微信分享提示