`
raymond.chen
  • 浏览: 1437252 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

垂直盒布局(VBoxLayout)

阅读更多

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
分享到:
评论

相关推荐

    Qt开发的教程.doc

    **垂直布局(VBoxLayout)**:控件按垂直方向排列。 **网格布局(GridLayout)**:控件按照网格的方式排列,可以指定控件所在的行列位置。 学习布局系统可以帮助你创建出更加美观和易用的用户界面。例如,使用网格...

    Qdesigner使用

    - QDesigner提供了多种布局方式,包括水平布局(HBoxLayout)、垂直布局(VBoxLayout)、网格布局(GridLayout)等。 - 通过右键菜单可以为控件添加布局。 5. **信号与槽机制**: - 选中一个控件后,在“信号”选项卡...

    ExtJS使用笔记

    ExtJS提供多种布局管理器,如AnchorLayout、FormLayout、AbsoluteLayout、FitLayout、AccordionLayout、CardLayout、ColumnLayout、VBoxLayout、HBoxLayout、TableLayout和BorderLayout等。每个布局管理器有其特定的...

    sfml-widgets:SFML 的简单 GUI 模块

    SFML 小部件SFML 的简单 GUI 模块。...:ProgressBar : 一个简单的水平进度条gui::Slider : 提供垂直或水平滑块gui::TextBox : 单行文本编辑器布局: gui::HBoxLayout : 水平排列小部件gui::VBoxLayout : 垂直gu

    asp.net ext 中文手册

    EXT提供了多种布局管理器,如BorderLayout、VBoxLayout、HBoxLayout等,每种布局都有其特点和适用场景。布局管理器能够自动调整组件大小和位置,确保界面在不同设备和窗口尺寸下都能良好显示。 #### 9. 表单组件与...

    快速tiles入门

    <definition name="site.menu.bar" path="/layouts/vboxLayout.jsp"> <!-- 设置菜单项列表 --> ``` #### 4. 使用Tiles实现页面布局 以`/layouts/classicLayout.jsp`为例,该文件是基于上述配置的实际...

    Ext+JS高级程序设计.rar

    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与...

    PyQt5实现暗黑风格的计时器

    通过VBoxlayout将控件垂直堆叠起来,创建了一个简单易懂的用户界面。 通过本例代码和知识点的学习,开发者可以了解到如何使用PyQt5创建一个带有暗黑风格的计时器应用程序,并掌握了多线程编程、定时器的使用以及QSS...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    VBoxLayout RowLayout ColumnLayout TableLayout 37. Removed [XType] Attribute and replaced with XType readonly property. Example (Old) [Xtype("window")] ...

Global site tag (gtag.js) - Google Analytics