本人在做项目中，觉得这个布局最为常用（应该算是中国式的布局）所以记录下来，供大家参考！！！
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']
];
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:'center',
el:'center-center',
title:'条目列表',
ds: ds,
cm: colModel,
autoScroll: true
}),
{
region:'south',
contentEl:'center-south',
title:'内容',
split:true,
collapsible:true,
titlebar:true,
height:200,
minSize: 100,
maxSize:400,
collapsedTitle:'内容'
}
]
},
new Ext.BoxComponent({
region:'south',
el:'south-div',
height:24
})
]
});
root.expand()
function onItemClick(item){
alert(item.text);
}
})
- 描述: 布局升级版截图
- 大小: 71 KB
- 描述: 这是布局的截图，一定是大家想要
- 大小: 61.9 KB
分享到：
相关推荐
本篇文章将深入探讨Ext中常用的两种布局：Fit布局和Border布局，为初学者提供详细的指导。 首先，我们来看Fit布局。Fit布局主要用于那些需要完全填充容器空间的场景。它只有一个子组件可以展示，并且该子组件会自动...
环境：Window XP Sp3、IE 7、FireFox、Tomcat 6.0、Eclipse 3.3 使用步骤： 1、下载解压缩之后，使用IDE导入工程...3、一一注释main.js中的演示方法，可以看到11种Ext常用的布局方式 阅读：本中心学习Ext框架开发的学员
EXT后台简单布局，很好的，好用！！！！
其表格组件（`Ext.grid.GridPanel`）是其最具特色的功能之一，广泛应用于数据展示和管理。 #### 二、代码分析 在本例中，我们首先引入了必要的 ExtJS 相关文件，包括样式表、脚本等资源。 ```html ...
使用EXT进行网站布局的一个例子，供大家参考。
ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架
ext做简单布局，ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用ext简单布局，直接修改即可使用
### 其他常用布局 除了 Border 和 Column 布局之外，Ext JS 还提供了多种其他布局选项，如： - **Fit 布局**：该布局使得容器中的单一子元素充满整个容器空间。 - **Form 布局**：适用于表单，它使子元素以标签/...
Ext_Form精典布局
ext js3.0布局
在Ext JS这个强大的JavaScript框架中，布局管理是构建复杂用户界面的关键部分。本文将深入探讨“Ext table布局实例”以及“formpanel的table布局”，帮助开发者更好地理解和运用这两种布局方式。 首先，我们要理解...
ext布局和菜单设计整理
4. **Border布局**：Border布局是最常用的布局之一，它将容器分为五个区域：东(east)、南(south)、西(west)、北(north)和中心(center)。每个区域可以独立放置组件，提供灵活的页面布局。 例如，创建一个包含北部...
本文将深入探讨"Ext常用属性总结"这一主题，帮助开发者更好地理解和利用ExtJS的特性。 首先，让我们了解几个基本的ExtJS概念。`Ext.Component`是所有UI组件的基础类，它拥有众多属性来控制组件的行为、外观和交互。...
### Ext.Viewport布局详解 在前端开发领域，尤其是基于Ext JS框架进行应用设计时，`Ext.Viewport`布局是至关重要的概念。它提供了一个全面的、全屏的容器，用于组织和展示各种UI组件，如面板、表格、图表等。在给定...
ext写的完整布局，左侧是个树状形式的展现方式，可以参考一下
Ext简单后台布局，分享给大家
- **定义**：`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类，其他所有布局都基于此基类进行扩展。 - **作用**：当没有为容器指定任何布局时，默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...
用Ext的Panel实现了简单布局，并在左侧显示树形菜单
EXT2 文件系统是GNU/Linux操作系统中的标准文件系统，其磁盘布局是理解EXT2运作机制的关键。EXT2在Linux中扮演着重要角色，它负责管理和存储数据，为用户提供统一的文件操作接口。Linux支持多种文件系统，如EXT、EXT...