<html pageEncoding="utf-8">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.2/ext-all-debug.js"></script>
<script>
Ext.onReady(function(){
var tb = new Ext.Toolbar('toolbar-div');//创建一个工具条
tb.add(new Ext.Toolbar.SplitButton({
text: '文件',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '新建',
handler: onItemClick
}, {
text: '保存',
handler: onItemClick
}, {
text: '加载',
handler: onItemClick
}]
}
}), new Ext.Toolbar.MenuButton({
text: '编辑',
cls: 'x-btn-text-icon blist',
menu: {
items: [{
text: '复制',
handler: onItemClick
}, {
text: '粘贴',
handler: onItemClick
}]
}
}));
var root = new Ext.tree.TreeNode({
text: '文件夹',
allowDrag: false,
allowDrop: false
});
root.appendChild([new Ext.tree.TreeNode({
text: '收件箱',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '发件箱',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '联系人',
allowDrag: false
}), new Ext.tree.TreeNode({
text: '已删除的邮件',
allowDrag: false
})]);
var myData = [['张三', '测试', '2006-1-1'], ['李四', '测试一', '2006-5-6'], ['王五', '测试二', '2007-12-1'], ['刘六', '测试三', '2006-12-1'], ['张三', '测试四', '2007-6-1'], ['李四', '测试五', '2007-7-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试六', '2007-8-1'], ['张三', '测试七', '2007-9-1'], ['李四', '测试八', '2007-10-1'], ['王五', '测试九', '2007-11-1'], ['刘六', '测试十', '2007-8-1'], ['张三', '测试十一', '2007-9-1'], ['李四', '测试十二', '2007-10-1'], ['王五', '测试十三', '2007-11-1'], ['刘六', '测试十四', '2007-8-1'], ['张三', '测试十五', '2007-9-1'], ['李四', '测试十六', '2007-10-1'], ['王五', '测试十七', '2007-11-1'], ['刘六', '测试十八', '2007-8-1']];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [{
name: 'sender'
}, {
name: 'title'
}, {
name: 'sendtime'
}])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([{
header: '发送人',
width: 100,
sortable: true,
dataIndex: 'sender'
}, {
id: 'title',
header: '标题',
width: 100,
sortable: true,
dataIndex: 'title'
}, {
header: '发送时间',
width: 75,
sortable: true,
dataIndex: 'sendtime'
}]);
var viewport = new Ext.Viewport({
layout: 'border',
items: [new Ext.BoxComponent({
region: 'north',
el: 'north-div',
tbar: tb,
height: 26
}), new Ext.tree.TreePanel({
region: 'west',
contentEl: 'west-div',
title: '树列表',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 0',
root: root
}), {
region: 'center',
layout: 'border',
items: [new Ext.grid.GridPanel({
region: 'west',
el: 'center-center',
title: '条目列表',
ds: ds,
cm: colModel,
autoScroll: true,
split: true,
collapsible: true,
titlebar: true,
height: 200,
width: 200,
minSize: 100,
maxSize: 400
}), {
region: 'center',
contentEl: 'center-south',
title: '内容',
split: true,
collapsible: true,
titlebar: true,
collapsedTitle: '内容'
}]
}, new Ext.BoxComponent({
region: 'south',
el: 'south-div',
height: 24
})]
});
root.expand()
function onItemClick(item){
alert(item.text);
}
})
</script>
<body>
<div id="north-div">
<div id='toolbar-div'>
</div>
</div>
<div id="west-div">
</div>
<div id='center-center'>
</div>
<div id='center-south'>
</div>
<div id="south-div">
状态栏
</div>
</body>
</html>
[img]
http://lym6520.iteye.com/upload/attachment/78019/d67c0dde-31a6-32dc-9bc7-75c3ccfd8258.gif
[/img]
- 大小: 24.7 KB
分享到：
相关推荐
2、Border布局介绍： Ext 几乎所有的容器组件都有layout属性。layout属性是决定容器内部组件的排列布局的一个属性。而Border属性是将内部的组件划分为 东南西北中五个区域。 。。。。 具体请看教程。
ext2+,树,tree,布局,border
EXT的强大之处在于其灵活性和组件的可扩展性，你可以根据项目需求对布局稍作调整，比如改变区域大小、添加自定义组件或调整布局参数，从而实现更多样化的界面设计。 这个名为“简单布局”的压缩包文件可能包含了...
2. **子容器也采用Border布局**：在`center`区域中，`treeb`位于`west`，而`Panel`位于`center`。 #### 四、具体实现步骤 接下来，我们将详细介绍具体的实现步骤： 1. **创建主容器**：首先创建一个主容器，设置其...
本篇文章将深入探讨Ext中常用的两种布局：Fit布局和Border布局，为初学者提供详细的指导。 首先，我们来看Fit布局。Fit布局主要用于那些需要完全填充容器空间的场景。它只有一个子组件可以展示，并且该子组件会自动...
4. **Border布局**：Border布局是最常用的布局之一，它将容器分为五个区域：东(east)、南(south)、西(west)、北(north)和中心(center)。每个区域可以独立放置组件，提供灵活的页面布局。 例如，创建一个包含北部...
**Border** 布局由类 `Ext.layout.BorderLayout` 定义，其布局名称为 `border`。Border 布局将容器划分为五个区域：东 (`east`)、南 (`south`)、西 (`west`)、北 (`north`) 和中心 (`center`)。 在向容器添加子元素...
`Ext.Viewport`布局是Ext JS框架中构建复杂用户界面的关键组件之一。通过合理的属性配置和布局设计，它可以有效地管理页面上的多个区域和组件，实现灵活的布局调整和动态内容加载。对于希望利用Ext JS创建高级Web...
- **定义**：通过 `Ext.layout.BorderLayout` 类定义，布局名称为 `border`。 - **功能**：该布局将容器划分为五个区域：东、南、西、北和中心，分别对应于 `east`、`south`、`west`、`north` 和 `center`。 - **...
2. Border布局：将容器分为五个区域（东、南、西、北、中），每个子组件可以指定在哪个区域内显示。 3. Column布局：将容器视为一列，并通过`columnWidth`或`width`属性指定子组件的宽度，可以混合使用百分比和绝对...
2. Border布局： Border布局将屏幕分为五个区域：东、南、西、北和中心（中央）。通过`region`属性来定位子组件，如`region: 'north'`表示放置在上方。中央区域是必需的，其他区域可选。这种布局常用于创建带有侧...
2. **Border布局**：此布局将容器分为五个区域——东（east）、南（south）、西（west）、北（north）和中心（center）。通过`Ext.layout.BorderLayout`定义，可以灵活地在各个区域内放置组件，实现复杂的页面结构。...
Ext 2.1提供了多种布局模式，如fit布局、border布局、form布局等，以适应不同类型的用户界面需求。布局管理器负责调整组件大小和位置，确保它们在容器中正确显示。 此外，Ext 2.1还包含一套强大的表格处理功能。Ext...
2. **Border布局**： - `border` 布局是EXTJS中的一种复合布局，可以将容器划分为多个区域，便于创建复杂的多面板布局。 - 区域包括：`north`（顶部）、`south`（底部）、`east`（右侧）、`west`（左侧）和`center...
EXT 3.3 提供了多种布局模式，如fit布局、border布局、form布局等，满足各种布局需求。 EXT 3.3 的数据绑定机制也是其强大之处，它允许开发者将模型（Model）的数据直接绑定到视图（View）上，实现了数据与界面的...
第一步：Ext需要支持AIR的支持。下载并安装 ...第二步: 安装Ext的核心安装包xds_preview.air; 第三步汉化: 解压Ext Designer Preview.rar,...附：以处提供两个教程：Border布局.7z，Combobox.7z，请下载7z格式解压包查看
2. **Border布局**：这种布局将容器分为五个区域：北（North）、南（South）、东（East）、西（West）和中（Center）。每个区域可以通过`region`属性进行定位，如`region: 'center'`表示中心区域，这是必需的。 ...
通过以上对accordion布局和border布局的详细解析，我们可以看到Ext4.0如何提供了灵活的界面设计工具，以满足各种复杂应用的需求。这些布局方式使得开发者可以轻松地组织和管理界面元素，创建出用户友好的Web应用。
ExtJS布局是构建用户界面的关键部分...同时，理解布局的原理和规则，可以避免常见的错误，比如一行内所有组件的`columnWidth`之和不等于1，导致布局混乱。掌握Column布局，将有助于开发出更加美观、响应式的ExtJS应用。
3. **布局管理**：EXT提供多种布局模式，如Fit布局、Border布局、Form布局等，可以根据需要灵活调整组件的大小和位置，适应不同屏幕尺寸和设备。 4. **Ajax和数据存储**：EXT内置了Ajax通信机制，可以方便地与...