Ext4 vBox的使用

2024-06-02 00:38
文章标签 使用 ext4 vbox

本文主要是介绍Ext4 vBox的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要使用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>


这篇关于Ext4 vBox的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1022560。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
【北交大信息所AI-Max2】使用方法

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡，拥有登录权限的账号密码，一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 （如果是1集群把75改成66） 交互式开发 执行器选Terminal 密码随便设一个（需记住） 工作空间：私有数据、全部文件 加速器选GeForce_RTX_2080_Ti
阅读更多...
【Linux 从基础到进阶】Ansible自动化运维工具使用

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具，采用无代理架构（agentless），基于 SSH 连接进行管理，具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用，旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2