【ExtJs】利用树状结构、Border布局与标签页刻划OA界面

之前说ExtJs是最适合做OA界面的前端框架，因为它把客户端界面搬来了网页，这东西可以说是，就是为那些各种各样的OA信息系统而生的。

一、基本目标

做出如下的OA界面，点击左边的项可以打开相应的标签页，点击标签页的关闭按钮可以关闭这个标签页，在下方的操作信息栏记录相应的操作。

树状结构可以折叠，可以调整。操作信息可以节点。

搞出这样的结构，就是从小的方面研究ExtJs的其它UI组件与Ajax系统，再配合php，aspx或者jsp等后端语言，就可以去OA系统开黑了，或者，一个不爽，标签页里面的系统直接通过iframe与ajax完事，也基本可以交差了。

二、制作过程

1、首先还是与《【ExtJs】ExtJs4.2.1的配置与Helloworld》（点击打开链接）一样，HTML里面没有任何东西，仅仅是引入ExtJs4的资源

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ViewPort</title>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
	</head>
	<body>
	</body>
</html>

2、首先创建一个container.Viewport，区分大小写的注意，充满整个窗口，自动随窗口的大小变化而变化。同时声明这个container.Viewport使用border布局，这个border布局与Java中的JFrame是一个样子。东南西北占小块，中间占大块。其中，里面的组件northItem,westItem,southItem,eastItem,centerItem再一个一个定义。Ext.getBody()就是添加到body节点的意思。

		Ext.create('Ext.container.Viewport',{
			layout:'border',
			renderTo:Ext.getBody(),
			items:[northItem,westItem,southItem,eastItem,centerItem]
		});

具体如下图：

3、先是最简单的eastItem，里面什么都没有，但注意声明region:‘east‘表明这东西放在border布局的东边

		var eastItem={
			region:'east',
			html:''
		};

4、之后是northItem，里面的html项同innerHTML，非常简单的前端内容，不解释了：

		var northItem={
			region:'north',//如果采用border布局，这个项一定要有
			html:'<div style="background-color:#00aacc;color:#ffffff;font-size:30px;">某某OA系统</div>'
		};

5、随后的centerItem也没有什么内容，通过xtype:‘tabpanel‘声明这是一个标签页，同时声明一个id，一会儿这部分的内容将要被控制：

		var centerItem={
			region:'center',
			id:'centerItem',
			xtype:'tabpanel'
		};

6、southItem也没有什么东西的，主要是多了一个collapsible:true，可以折叠的属性，同时通过xtype:‘panel‘声明这是一个面板，也是声明一个id，一会儿这部分的内容将要被控制。

		var southItem={
			region:'south',
			xtype:'panel',
			id:'southItem',
			title:'操作信息',
			collapsible:true//可以折叠
		};

7、精华落在westItem这里。先是声明一个树状结构、树状图。树状结构的内容看起来多，其实很简单，很有规律的。

之后通过xtype:‘treepanel‘声明westItem是一个树状结构，通过store:store放上去。

ExtJs标签页在《【ExtJs】tabPanel标签页与修改标签页的内容》（点击打开链接）已经说过了。这里的标签只是多了两个监听器，表示其被激活与被关闭的处理动作而已。

		//树状图
		var store=Ext.create('Ext.data.TreeStore',{
			root:{//树状图有且只有一个树根
				expanded:true,//这树状图是可以打开叶子的
				children:[
				{
					text:'大项目1',
					expanded:true,
					children:[
					{
						id:1,//为下面的监听事件所使用，且ID为1
						text:'项目1',
						leaf:true//表明这里是叶子，不再向下延伸，同时为下面的监听器所操作
					},
					{
						id:2,
						text:'项目2',
						leaf:true
					},
					{
						id:3,
						text:'项目3',
						leaf:true
					}
					]
				},
				{
					text:'大项目2',
					expanded:true,
					children:[
					{
						id:4,
						text:'项目4',
						leaf:true
					},
					{
						id:5,
						text:'项目5',
						leaf:true
					}
					]
				}
				]
			}
		});
		var westItem={
			region:'west',
			xtype:'treepanel',
			store:store,//添加树状图
			width:100,//这里一定要设置好宽度，否则不显示
			rootVisible:false,//不显示树根
			split:true,//可以自己调整其大小
			collapsible:true,//可以折叠
			listeners:{
				//如果项被点击的话
				itemclick:function(view,record,item){
					//如果是叶子，对应上面的leaf==true
					if(record.data.leaf){
						//如果没有与当前点击项目id相同的的标签页的话
						if(!Ext.getCmp(record.data.id)){
							//则新建一个与当前点击项目id相同的的标签页
							Ext.getCmp("centerItem").add({
								id:record.data.id,
								title:record.data.text,
								html:Ext.util.Format.date(new Date(),'H时i分s秒')+"",
								listeners:{
									//为这个标签页的关闭增加监听事件
									removed:function(){
										//在状态栏中删除原有的信息，添加新的操作信息
										Ext.getCmp("southItem").removeAll();
										Ext.getCmp("southItem").add({html:'关闭了：'+record.data.text+"！"});
									},
									activate:function(){
										Ext.getCmp("southItem").removeAll();
										Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
									}},
								closable:true//允许关闭，同时新建关闭按钮
							});
						}
						//有没有这个标签页都激活这个标签页
						Ext.getCmp("centerItem").setActiveTab(record.data.id);
						//然后在状态栏中删除原有的信息，添加新的操作信息
						Ext.getCmp("southItem").removeAll();
						Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
					}
				}
			}
		};

三、总结

于是，整个网页的代码如下图，也是仅仅130行而已！

注意所有Ext代码必须写在Ext.onReady(function(){});之中就可以了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ViewPort</title>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
        <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" >
	</head>
	<body>
	</body>
</html>
<script>
	Ext.onReady(function(){
		var northItem={
			region:'north',//如果采用border布局，这个项一定要有
			html:'<div style="background-color:#00aacc;color:#ffffff;font-size:30px;">某某OA系统</div>'
		};
		//树状图
		var store=Ext.create('Ext.data.TreeStore',{
			root:{//树状图有且只有一个树根
				expanded:true,//这树状图是可以打开叶子的
				children:[
				{
					text:'大项目1',
					expanded:true,
					children:[
					{
						id:1,//为下面的监听事件所使用，且ID为1
						text:'项目1',
						leaf:true//表明这里是叶子，不再向下延伸，同时为下面的监听器所操作
					},
					{
						id:2,
						text:'项目2',
						leaf:true
					},
					{
						id:3,
						text:'项目3',
						leaf:true
					}
					]
				},
				{
					text:'大项目2',
					expanded:true,
					children:[
					{
						id:4,
						text:'项目4',
						leaf:true
					},
					{
						id:5,
						text:'项目5',
						leaf:true
					}
					]
				}
				]
			}
		});
		var westItem={
			region:'west',
			xtype:'treepanel',
			store:store,//添加树状图
			width:100,//这里一定要设置好宽度，否则不显示
			rootVisible:false,//不显示树根
			split:true,//可以自己调整其大小
			collapsible:true,//可以折叠
			listeners:{
				//如果项被点击的话
				itemclick:function(view,record,item){
					//如果是叶子，对应上面的leaf==true
					if(record.data.leaf){
						//如果没有与当前点击项目id相同的的标签页的话
						if(!Ext.getCmp(record.data.id)){
							//则新建一个与当前点击项目id相同的的标签页
							Ext.getCmp("centerItem").add({
								id:record.data.id,
								title:record.data.text,
								html:Ext.util.Format.date(new Date(),'H时i分s秒')+"",
								listeners:{
									//为这个标签页的关闭增加监听事件
									removed:function(){
										//在状态栏中删除原有的信息，添加新的操作信息
										Ext.getCmp("southItem").removeAll();
										Ext.getCmp("southItem").add({html:'关闭了：'+record.data.text+"！"});
									},
									activate:function(){
										Ext.getCmp("southItem").removeAll();
										Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
									}},
								closable:true//允许关闭，同时新建关闭按钮
							});
						}
						//有没有这个标签页都激活这个标签页
						Ext.getCmp("centerItem").setActiveTab(record.data.id);
						//然后在状态栏中删除原有的信息，添加新的操作信息
						Ext.getCmp("southItem").removeAll();
						Ext.getCmp("southItem").add({html:'点击了：'+record.data.text+"！"});
					}
				}
			}
		};
		var southItem={
			region:'south',
			xtype:'panel',
			id:'southItem',
			title:'操作信息',
			collapsible:true//可以折叠
		};
		var eastItem={
			region:'east',
			html:''
		};
		var centerItem={
			region:'center',
			id:'centerItem',
			xtype:'tabpanel'
		};
		Ext.create('Ext.container.Viewport',{
			layout:'border',
			renderTo:Ext.getBody(),
			items:[northItem,westItem,southItem,eastItem,centerItem]
		});
	});
</script>
时间： 2024-08-28 18:43:41

【ExtJs】利用树状结构、Border布局与标签页刻划OA界面的相关文章

利用checkbox自带属性indeterminate构建含部分选中状态的树状结构

本来上个月就像发的,但是一直忙啊忙的也没时间整理,所以拖到了现在. 好吧上面这句就是废话,我就是感概下.下面是正文. 前段时间在弄一个轻量级的web项目,要构建一个树状结构目录,同时希望能把部分选中的状态给表现出来.项目中只用了jquery,个人也不想再引入一些其他的js框架或者插件,一个是考虑到界面展示的样式效果会不一样,另外就是懒得去研究啦. 话不多说,直接上测试图片和代码. Ps:我代码里还含有一些设置css以及属性等代码,需要参考的朋友请自动忽略.博文结尾处有我当时找到参考的外国网站上的

Day03处理上级部门(树状结构)和用户管理

系统管理:部门管理-处理上级部门 添加或者修改时,上级部门的格式如图:.解决此功能将面临两个问题:1.将所有部门名称以下拉选的形式展示出来2.以树状结构展示.在此我们先解决问题1. 在添加页面中展示所有部门名称,并完成添加功能 DepartmentAction: public String addUI() throws Exception { //准备数据 List<Department> departmentList = departmentService.findAll(); Action

由简入繁实现Jquery树状结构

在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比如说Jquery.treeview.js插件. 下面就直入主题,开始从简入繁的分析怎么使用treeview插件,从已知的知识开始轻松入手,让树状结构唾手可得. 显示树状结构的几个实现步骤: 一.HTML做初始静态原型. 首先通过<ul></ul><li></li>

优雅的处理树状结构——组合模式总结

1.前言 本模式经 遍历“容器”的优雅方法——总结迭代器模式 引出,继续看最后的子菜单的案例 2.组合模式的概念 组合模式,也叫 Composite 模式……是构造型的设计模式之一. 组合模式允许对象组合成树形结构,来表现“整体/部分”的层次结构,使得客户端对单个对象和组合对象的使用具有一致性. Composite Pattern Compose objects into tree structures to represent part-whole hierarchies. Composite

Android无限级树状结构

通过对ListView简单的扩展.再封装,即可实现无限层级的树控件TreeView. 1 package cn.asiontang.nleveltreelistview; 2 3 import android.annotation.TargetApi; 4 import android.content.Context; 5 import android.os.Build; 6 import android.util.AttributeSet; 7 import android.view.View

在Silverlight中使用HierarchicalDataTemplate为TreeView实现递归树状结构

将实体绑定到TreeView控件,实现树状结构的显示,如下图所示.这个功能通过HierarchicalDataTemplate实现. ? 1. 业务实体 作为举例,我定义了一个大家都很熟悉的Folder类型,即文件夹.我们都知道,文件夹又可以包含子文件夹,而且可以多层嵌套.所以,这是一个递归的结构体. public class Folder { public string Name { get; set; } public ObservableCollection<Folder> Folder

c# 递归、树状结构

1.树状结构 treeView.Nodes.Clear(); TreeNode tree = new TreeNode(); tree.Text = "字母"; treeView.Nodes.Add(tree); // tree.Nodes.Add("A"); TreeNode tree1 = new TreeNode(); tree1.Text = "汉字"; treeView.Nodes.Add(tree1); TreeNode a = ne

json格式转树状结构

转自:http://rockyuse.iteye.com/blog/1541308 /** * json格式转树状结构 * @param {json} json数据 * @param {String} id的字符串 * @param {String} 父id的字符串 * @param {String} children的字符串 * @return {Array} 数组 */ function transData(a, idStr, pidStr, chindrenStr){ var r = []

Java文件目录树状结构：控制台打印某个文件夹下的文件目录树状结构

1 package com.zhen.file; 2 3 import java.io.File; 4 5 /* 6 * 控制台打印某个文件夹下的文件目录树状结构 7 * 递归算法 8 */ 9 10 public class FileTree { 11 12 public static void main(String[] args) { 13 File file =new File("D:/Github/JavaTest"); 14 PrintFile(file, 0); 15 }