Ext4 vBox的使用

最新推荐文章于 2020-08-07 16:11:03 发布
最新推荐文章于 2020-08-07 16:11:03 发布
阅读量551 收藏
点赞数
分类专栏： EXT.JS 文章标签： EXT Ext4 vBox VBox VBox布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011229848/article/details/53293043
版权

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

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

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

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

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

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

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

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

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

    2、center：组件在容器中间

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

 

HTML代码：



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入EXT样式  -->
<link href="../resources/ext-5.0.1-min/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
<!-- 引入EXT all -->
<script src="../resources/ext-5.0.1-min/ext-all.js"></script>
<!-- 引入EXT  国际化-->
<script src="../resources/ext-5.0.1-min/packages/ext-locale/ext-locale-zh_CN.js"></script>

</head>
<body>


</body>
<script type="text/javascript">
Ext.onReady(function() { 
    var currentName; 
    var replace = function(config, name) { 
        var btns = Ext.getCmp('btns'); 
        if (name && name != currentName) { 
            currentName = name; 
            btns.remove(0); 
            btns.add(Ext.apply(config)); 
        } 
    }; 
      
    var viewport = Ext.create('Ext.Viewport', { 
        layout:'border', 

        items: [{ 
            id:'btns', 
            region:'west', 
            baseCls:'x-plain', 
            split:true, 
            width:150, 
            minWidth: 100, 
            maxWidth: 250, 
            layout:'fit', 
            margins: '5 0 5 5', 
            items: { 
                baseCls: 'x-plain', 
                html: '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>' 
            } 
       }, { 
            region:'center', 
            margins: '5 5 5 0', 
            layout: 'anchor', 
            items:[{ 
                anchor: '100%', 
                baseCls:'x-plain', 
                layout: { 
                    type:'hbox', 
                    padding: 10 
                }, 
                defaults:{ 
                    margins:'0 5 0 0', 
                    pressed: false, 
                    toggleGroup:'btns', 
                    allowDepress: false 
                }, 
                items: [{ 
                    xtype:'button', 
                     
                    text: 'Spaced / Align: left', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'left' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'tbspacer', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                margins:'0' 
                            }] 
                        }, 'spaced'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Multi-Spaced / Align: left', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'left' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'tbspacer', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'tbspacer', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'tbspacer', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                margins:'0' 
                            }] 
                        }, 'multi spaced - align left'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Align: left', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'left' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4' 
                            }] 
                        }, 'align left'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4' 
                            }] 
                        }, 'align center'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Align: stretch', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'stretch' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4' 
                            }] 
                        }, 'align stretch'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Align: stretchmax', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'stretchmax' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Jamie' 
                            },{ 
                                xtype:'button', 
                                text: 'Aaron' 
                            },{ 
                                xtype:'button', 
                                text: 'Tommy' 
                            },{ 
                                xtype:'button', 
                                text: 'Ed ' 
                            }] 
                        }, 'align stretchmax'); 
                    } 
                }] 
            },{ 
                anchor: '100%', 
                baseCls:'x-plain', 
                layout: { 
                    type:'hbox', 
                    padding: '0 10 10' 
                }, 
                defaults:{ 
                    margins:'0 5 0 0', 
                    pressed: false, 
                    toggleGroup:'btns', 
                    allowDepress: false 
                }, 
                items: [{ 
                    xtype:'button', 
                    text: 'Flex: Even / Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                flex:1, 
                                margins:'0' 
                            }] 
                        }, 'align flex even'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Flex: Ratio / Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                flex:3, 
                                margins:'0' 
                            }] 
                        }, 'align flex ratio'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Flex + Stretch', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                align:'stretch' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3', 
                                flex:1 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                flex:3, 
                                margins:'0' 
                            }] 
                        }, 'align flex + stretch'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Pack: start / Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                pack:'start', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4' 
                            }] 
                        }, 'align pack start + align center'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Pack: center / Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                pack:'center', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                margins:'0' 
                            }] 
                        }, 'align pack center + align center'); 
                    } 
                },{ 
                    xtype:'button', 
                    text: 'Pack: end / Align: center', 
                    handler: function(){ 
                        replace({ 
                            layout: { 
                                type:'vbox', 
                                padding:'5', 
                                pack:'end', 
                                align:'center' 
                            }, 
                            defaults:{margins:'0 0 5 0'}, 
                            items:[{ 
                                xtype:'button', 
                                text: 'Button 1' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 2' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 3' 
                            },{ 
                                xtype:'button', 
                                text: 'Button 4', 
                                margins:'0' 
                            }] 
                        }, 'align pack end + align center'); 
                    } 
                }] 
            }] 
        }] 
    }); 
});
</script>
</html>


cnsu-cmh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EXTJS4自学手册
05-03
EXTJS4自学手册——EXT容器布局（Vbox,Accordion,Table,Column） EXTJS4自学手册——EXT容器布局（Fit,Card,Border） EXTJS4自学手册——EXT组件布局 四、Extjs页面控件 EXTJS4自学手册——页面控件（表格） EXTJS4...
Ext Js权威指南(.zip.001
09-26
9.4.4　盒子布局、垂直布局与水平布局：ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5　为盒子模型提供调整大小的功能：ext.resizer.splitter / 445 9.4.6　手风琴...
Ext.js表单—Vbox布局（46）
鹿惊的博客
12-21 532
/** * This example shows how to use vbox layout with Ext JS Forms. * 怎么用vbox布局表单 */ Ext.define('KitchenSink.view.form.VBoxLayoutForm', { extend: 'Ext.window.Window', xtype: 'form-vboxlayout'
Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介
weixin_30252709的博客
11-26 432
VBox布局方式，熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchma...
Extjs 关于Vbox布局方式
m0_37822534的博客
09-09 576
一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。 二、fl...
ExtJS4学习笔记(三)---VBox的使
nuoyan666的专栏
08-02 2526
要使用VBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、left（默认）：排列于容器左侧。     2、center ：控件在容器水平居中。     3、stretch：控件横向拉伸至容器
Ext 常用布局
VFrank
02-24 1142
Ext 常用布局 hbox 和 vbox 一个是水平布局，一个是垂直方向的布局 // vbox new Ext.Container({ width: 1000, cls: 'sf-wrap', layout: { type: 'vbox', align: 's...
js资源ext 2.2
09-18
3. **布局管理**：Ext JS 提供了多种布局模式，如fit布局、border布局、hbox和vbox布局，可以灵活地调整组件在容器中的排列方式，适应不同屏幕尺寸和设备。 4. **Ajax和异步通信**：内置的Ajax工具类使开发者可以...
ExtJs4_笔记.docx
06-26
一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本数据类型 19 四、函数执行时间控制 20 五、...
ext学习笔记教程和实例
09-20
本教程将带你逐步走进EXTJS的世界，通过实际的开发实例来帮助你理解并掌握EXTJS的基本概念和使用技巧。 EXTJS的主要组成部分包括以下几个方面： 1. **组件（Components）**：EXTJS的核心是其组件系统，这些组件...
ext学习笔记 2010-9-16 Ext.Button
elfenliedef的编程之旅
09-16 723
<br />var btn = new Ext.Button({   <br />                      text:"hello button!",   <br />                      allowDepress: true, //显示按钮按下效果，需要和enableToggle联合使用   <br />                      enableToggle: true,  //为按钮添加开关效果   <br />               
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2102
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
flex布局中的align-items:stretch属性
热门推荐
weixin_46663461的博客
08-06 1万+
align-items:stretch align-items:stretch是一个默认值,永远保持在侧轴拉伸项目,怎么理解这句话呢? 如果侧轴是垂直方向,那么在垂直方向如果项目没有设置高度,则会拉伸至弹性父级盒子的高度, 如果侧轴为水平方向,如果项目没有设置宽度,那么就会拉伸其宽度至父级弹性盒子的宽度一致。 这里用一个布局例子详细解释这个属性 我们想实现类似于这个效果，基本的布局思路是，给一个白色的大盒子弹性布局，设置主轴方向为column，然后让其两端对其，然后再让两个盒子设置为弹性盒子，两边对齐
Ext4使用总结（二）简单的hbox布局
大脑与思维的专栏
11-07 3708
布局的合理利用： 如图： { xtype:'container', margins:'5 0 0 0', layout:{ align:'stretch
ExtJS4学习笔记(三)---VBox布局的使用
随风的专栏
01-17 810
要使用VBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、left（默认）：排列于容器左侧。     2、center ：控件在容器水平居中。     3、stretch：控件横向拉伸至容器大小     4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。 二、flex:数字类型，指示组件在容器中
flex布局
lj1530562965的博客
08-07 188
align-self:stretch flex布局中，经常子元素内容不一样，导致高度不一，可以通过设置子元素样式align-self:stretch，以适应容器
木禾讲解Ext JS界面设计（布局,xtype,items,vbox,form,column）
木禾
10-24 1795
关键词： xtype,items,vbox,hbox,anchor,defaults,padding,frame,ui,form,column,
Ext3.2 布局——vbox layout
专注于应用与管理！
02-11 1500
一种在容器中垂直布置项目的布局。 此布局在包含一个数字 flex 配置项的 子项目之间分割可用垂直空间。通过配置 align 选项，此布局也可以用来设置子项目的宽度。  Ext.onReady(function() { var currentName; var replace = function(config, name) {
javafx vbox
最新发布
09-07
你可以使用VBox的`getChildren()`方法来获取VBox中的子组件列表，并使用`add()`方法将组件添加到VBox中。可以通过设置VBox的属性来调整组件在垂直方向上的对齐方式、间距等。在JavaFX中，你可以使用VBox来创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值