Ext.layout.VBoxLayout扩展自Ext.layout.BoxLayout,其xtype值为vbox。
主要配置项:
align:子元素在水平方式的对齐方式,可选值有left、center、stretch(水平伸展)、stretchmax,默认为left。
flex:垂直伸缩。将面板的body高减去不伸缩的子元素的高后剩余的高度等分成【flex和值】份,子元素伸缩后占的份数。默认为0,即不伸缩。
pack:子元素在垂直方向的包装方式,可选值有start、center、end,默认为start。
new Ext.Panel({
title: "垂直盒布局(VBoxLayout)",
width: 500,
height: 300,
renderTo: "div2",
frame: true,
layout: "vbox",
layoutConfig: {
align: "left",
pack: "start"
},
items: [
{xtype:"button", text:"按钮1", width:40, flex:1},
{xtype:"spacer", flex:1},
{xtype:"button", text:"按钮2", width:60, flex:1},
{xtype:"spacer", flex:1},
{xtype:"button", text:"按钮3", width:80, flex:1},
{xtype:"spacer", flex:1},
{xtype:"button", text:"按钮4", width:100, flex:1}
]
});
- 大小: 14 KB
分享到:
相关推荐
**垂直布局(VBoxLayout)**:控件按垂直方向排列。 **网格布局(GridLayout)**:控件按照网格的方式排列,可以指定控件所在的行列位置。 学习布局系统可以帮助你创建出更加美观和易用的用户界面。例如,使用网格...
- QDesigner提供了多种布局方式,包括水平布局(HBoxLayout)、垂直布局(VBoxLayout)、网格布局(GridLayout)等。 - 通过右键菜单可以为控件添加布局。 5. **信号与槽机制**: - 选中一个控件后,在“信号”选项卡...
ExtJS提供多种布局管理器,如AnchorLayout、FormLayout、AbsoluteLayout、FitLayout、AccordionLayout、CardLayout、ColumnLayout、VBoxLayout、HBoxLayout、TableLayout和BorderLayout等。每个布局管理器有其特定的...
SFML 小部件SFML 的简单 GUI 模块。...:ProgressBar : 一个简单的水平进度条gui::Slider : 提供垂直或水平滑块gui::TextBox : 单行文本编辑器布局: gui::HBoxLayout : 水平排列小部件gui::VBoxLayout : 垂直gu
EXT提供了多种布局管理器,如BorderLayout、VBoxLayout、HBoxLayout等,每种布局都有其特点和适用场景。布局管理器能够自动调整组件大小和位置,确保界面在不同设备和窗口尺寸下都能良好显示。 #### 9. 表单组件与...
<definition name="site.menu.bar" path="/layouts/vboxLayout.jsp"> <!-- 设置菜单项列表 --> ``` #### 4. 使用Tiles实现页面布局 以`/layouts/classicLayout.jsp`为例,该文件是基于上述配置的实际...
8.1.2 在FormPanel中使用HBoxLayout和VBoxLayout进行布局 219 8.1.3 Panel的body的样式范围 224 8.2 Form表单组件 226 8.2.1 DisplayField控件 226 8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与...
通过VBoxlayout将控件垂直堆叠起来,创建了一个简单易懂的用户界面。 通过本例代码和知识点的学习,开发者可以了解到如何使用PyQt5创建一个带有暗黑风格的计时器应用程序,并掌握了多线程编程、定时器的使用以及QSS...
VBoxLayout RowLayout ColumnLayout TableLayout 37. Removed [XType] Attribute and replaced with XType readonly property. Example (Old) [Xtype("window")] ...