tesia
- 浏览: 32900 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.HBox',
layout:{
type:'hbox', //水平盒布局
align:'stretch' //子面板高度充满父容器
},
frame:true,
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF',
frame:true,
width:50,
height:50
},
items:[{
title:'子面板一',
flex:1,
html:'1/4宽'
},
{
title:'子面板二',
flex:1,
html:'1/4宽'
},
{
title:'子面板三',
flex:2,
html:'1/2 宽'
}]
});
});
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局</title>
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.layout.container.HBox',
layout:{
type:'hbox', //水平盒布局
align:'stretch' //子面板高度充满父容器
},
frame:true,
height:150,
width:300,
renderTo:Ext.getBody(),
defaults:{
bodyStyle:'background-color:#FFFFFF',
frame:true,
width:50,
height:50
},
items:[{
title:'子面板一',
flex:1,
html:'1/4宽'
},
{
title:'子面板二',
flex:1,
html:'1/4宽'
},
{
title:'子面板三',
flex:2,
html:'1/2 宽'
}]
});
});
</script>
</head>
<body>
</body>
</html>
- 大小: 12.8 KB
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2052Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1344JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 924服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1039服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 630<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 677<!DOCTYPE html PUBLIC " ... -
Extjs自定义事件
2013-07-04 10:54 424<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 765<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 659<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 930<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1308<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 734Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 508<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 837<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 617函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
表格布局
2013-07-01 15:18 511<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 712<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 388Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 944<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 758<!DOCTYPE html PUBLIC " ...
相关推荐
JavaFX中的布局管理器，被称为布局窗格（Pane），它们负责管理其子节点的位置和大小，能够适应窗口的缩放，并且提供了多种布局方式，如边框布局（BorderPane）、水平盒子布局（HBox）、垂直盒子布局（VBox）、网格...
在GTK中，水平布局通常通过使用`HBox`（水平框）来实现，这是一种容器，可以将多个子组件按照从左到右的顺序排列。在C语言中使用GTK编写程序，需要对GTK的基本概念、函数和结构体有深入理解。 首先，我们来讨论一下...
#### HBox/VBox（水平/垂直盒子布局） 盒子布局将子项沿水平或垂直方向排列，适用于简单的线性布局。 #### Table（表格布局） 表格布局将子项放置在单元格中，类似于HTML表格，适合数据密集型应用。 三、ExtJS...
布局管理器有多种类型，如'fit'（适应）、'border'（边界）、'hbox'（水平盒子）和'vertical'（垂直盒子）等，每种布局都有其特定的用途和配置选项。 例如，'fit'布局会使得所有子组件完全填充容器空间；'border'...
- **水平盒子布局(hbox)**：水平排列组件。 - **表格布局(table)**：以表格形式布局组件。 - **垂直盒子布局(vbox)**：垂直排列组件。 #### 5. 添加与配置组件 - **添加组件**：通过拖放方式添加各种组件至设计区。...
在Gtk+中，布局管理是通过各种容器（container）实现的，其中最为基础的是水平盒子（HBox）和垂直盒子（VBox）。通过`GtkWidget*gtk_hbox_new(gint homogeneous, gint spacing);`和`GtkWidget*gtk_vbox_new(gint ...
5. `gtk_hbox_new(horizontal, spacing)`：创建一个新的水平盒控件。`horizontal`参数决定是创建水平盒还是垂直盒，`spacing`指定了盒中控件之间的间隔。 6. `gtk_box_pack_start`：将控件装入box中。参数分别表示...
产生新的水平盒子的函数为 GtkWidget *gtk_hbox_new (gint homogeneous, gint spacing); 参数homogeneous是用来控制是否盒子中的每个组件都有同样的大小（例如水平盒子中的控件有同样的宽度，垂直盒子中的控件有同样...
`HBox`和`VBox`分别是`Box`的两种具体实例，分别表示水平盒子和垂直盒子，它们简化了基本的布局任务。 ### Canvas（画布） `Canvas`提供了一个绝对定位的容器，子元素可以被放置在任意位置，不受任何布局规则的...
- 水平盒子通过`GtkWidget*gtk_hbox_new(gint homogeneous, gint spacing);`创建。其中`homogeneous`参数用于控制盒子内的所有小部件是否具有相同的大小，`spacing`参数则设置每个小部件之间的间距。 - 垂直盒子的...
- **水平盒子 (HBox)**: `hbox` 可能用于放置按钮等组件。 - **垂直盒子 (VBox)**: `vbox` 用于整体布局管理，将各个组件按顺序排列。 ##### 6. 文本视图配置 ```c show_buffer = gtk_text_view_get_buffer(GTK_...
常见的布局包括'fit'（适应）、'border'（边框）、'form'（表单）和'vbox/hbox'（垂直/水平盒）。理解每种布局的工作原理对于构建响应式和适应性的用户界面至关重要。 在实例中，你还会遇到ExtJS的数据绑定机制，这...
- **盒子控件详解**：详细介绍盒子控件（Box）的使用方法，包括水平盒子（HBox）、垂直盒子（VBox）及其属性设置。 - **布局演示程序**：提供一个综合示例程序，演示不同布局方式的应用场景。 - **表格布局**：介绍...
ExtJS提供了多种布局方式，如'fit'（适应）、'border'（边框）、'hbox'（水平盒）和'vertical'（垂直盒）等，以适应不同复杂度的界面设计。布局管理器负责在容器中调整子组件的位置和大小，确保界面的响应式和自...
- **HBOX和VBOX的使用**：介绍如何使用水平和垂直盒布局来组织组件。 - **Grid**：展示如何使用网格组件来显示表格数据。 - **Grid分页**：实现网格的分页功能，便于处理大量数据时提高用户体验。 - **多表头Grid**...
- **水平盒子**（HBox）：按水平方向排列子元素。 - **垂直盒子**（VBox）：按垂直方向排列子元素。 - **层叠盒子**（ZBox）：层叠显示多个子元素。 - **填充**（Fill）：根据空间大小自动调整尺寸。 ##### 3. 分组...
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 手风琴...
- **盒子容器**: 如`<hbox>`、`<vbox>`等，用于水平或垂直排列子元素。 - **额外的盒子特性**: 如`<stack>`和`<deck>`等，提供了更高级的布局方式。 **3.10 XUL属性** - **拉伸性**: 控制元素如何填充其父容器的...