ExtJs学习篇---OA系统主窗体设计

于 2013-09-30 10:58:32 发布
阅读量3k 收藏 3
点赞数
分类专栏： ExtJs学习篇 文章标签： Extjs3.2 oa系统 ExtJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012141686/article/details/12187931
版权

前面我们登录是已经成功了的。现在我们就要来设计我们的主界面了，主界面其实也采用了border的布局方式。

北部：标题栏

南部：版权栏

西部：菜单栏

东部：内容栏

这儿难得地方应该就是菜单和内容栏部分了；

登录：


主界面布局：

主界面布局代码：

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = 'iamge/s.gif';
	Ext.QuickTips.init();
	Ext.lib.Ajax.defaultPostHeader += ";charsetutf-8";
	//head部分
	var head = new Ext.Panel({
		region:'north',//北方即顶部
		border:false,
		html:'<div style="background:url(image/main1.gif) repeat-x; height:78px;"></div>',
		height:80
	});
	//foot部分
	var foot = new Ext.Panel({
		region:'south', 	
		html:'<div style="background:url(image/main2.gif) repeat-x;height:33px;">'
		+'<div style="float:left;font:normal 12px 宋体;margin:10px 0 0 0px;">'
		+'Power By:<span style="color:blue">杨静</span>  </div>'
		+'<div style="float:right;margin:10px;font:normal 12px 宋体;">'
		+'版权所有：<a href="http://www/morik.com">http://write.blog.youkuaiyun.com/postlist</div>'
		+'</div>',
		height:35
	});
	//leftMenu部分
	//临时代码
	var leftmenu = new  Ext.Panel({
		region:'west',
		html:'<div>导航菜单</div>',
		width:200
	});
	
	//创建内容显示部分
	//临时代码
	var mainTab = new Ext.Panel( {
		region : 'center',
		html : '<div>主内容部分</div>'
	});

	
	//建立leftmenu和miantab两者之间的关系
	leftmenu.on("nodeClick", function(nodeAttr) {
		mainTab.loadTab(nodeAttr);
	});
	
	
	//创建布局
	var viewport = new Ext.Viewport( {
		layout : 'border',
		style : 'border:#024459 2px solid;',
		items : [head, foot, leftmenu, mainTab]
	});
	
});

主界面的html代码： 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA系统主页面</title>
<!-- 引入Ext Js的样式文件 -->
<link rel="stylesheet" type="text/css" href="extjs3.2.1/resources/css/ext-all.css">
<!-- 引入Ext Js的适配文件 -->
<script type="text/javascript" src="extjs3.2.1/adapter/ext/ext-base.js"></script>
<!-- 引入Ext Js的框架文件，该文件方便调试，在实际应用中直接引用ext-all.js文件 -->
<script type="text/javascript" src="extjs3.2.1/ext-all-debug.js"></script>
<!-- 引入相关的js文件 -->
<!-- 左边菜单区域的js文件 -->
<script type="text/javascript" src="js/LeftMenu.js"></script>
<!-- 主界面的右边的内容区域的js -->
<script type="text/javascript" src="js/MenuPanel.js"></script>
<!-- 主框架布局的js -->
<script type="text/javascript" src="js/Main.js"></script>
</head>
<body>
		<div id='deskTree' ></div>
		<div id='mainTree' ></div>
		<div id='sysTree' ></div>
</body>
</html>


现在窗体的框架基本都出来了现在我们就要向里面装东西了，

main.js代码如下：

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = 'image/s.gif';
	Ext.QuickTips.init();
	Ext.lib.Ajax.defaultPostHeader += ";charsetutf-8";
	//head部分
	var head = new Ext.Panel({
		region:'north',//北方即顶部
		border:false,
		html:'<div style="background:url(image/main1.gif) repeat-x; height:78px;"></div>',
		height:80
	});
	//foot部分
	var foot = new Ext.Panel({
		region:'south', 	
		html:'<div style="background:url(image/main2.gif) repeat-x;height:33px;">'
		+'<div style="float:left;font:normal 12px 宋体;margin:10px 0 0 0px;">'
		+'Power By:<span style="color:blue">杨静</span>  </div>'
		+'<div style="float:right;margin:10px;font:normal 12px 宋体;">'
		+'版权所有：<a href="http://weibo.com/207286868">http://weibo.com/207286868</div>'
		+'</div>',
		height:35
	});
	//leftMenu部分
	//临时代码
	/*var leftmenu = new  Ext.Panel({
		region:'west',
		html:'<div>导航菜单</div>',
		width:200
	});*/
	
	var t1 = new Ext.tree.TreePanel({
		//构建树组件
		border:false,
		rootVisible:false, //根节点不可视
		root:new Ext.tree.AsyncTreeNode({//通过根节点来实现所有节点数据
			text:'我的办公桌',//该内容在树组件中不可视
			expanded:true,//起初展开根状态
			//根节点的子节点数据
			children:[{
				id:"docRec",//text为节点显示的文本，leaf为叶子节点
				text:"接收公文",
				leaf:true  //说明他是叶子节点
			},{
				id:"docSend",
				text:"发送公文",
				leaf:true
			},{
				id:"docManage",
				text:"公文管理",
				leaf:true
			}]
		})
	});
	var t2 = new Ext.tree.TreePanel({
		border : false,
		rootVisible : false,
		root : new Ext.tree.AsyncTreeNode( {
			text : "主数据管理",
			expanded : true,
			children : [ {
				id : "department",
				text : "部门管理",
				leaf : true
			}, {
				id : "company",
				text : "公司管理",
				leaf : true
			}, {
				id : "permissions",
				text : "权限管理",
				children : [ {
					id : "permission",
					text : "权限管理",
					leaf : true
				}, {
					id : "permissionType",
					text : "权限类别",
					leaf : true
				}]
			}]
		})
	});
	var leftmenu = new Morik.Office.LeftMenu( {
		title : '我的办公系统',
	//	items : [ {
		//	title : '我的办公桌',
	//		items : [t1]
	//	}, {
	//		title : '主数据管理',
	//		items : [t2]
	//	}]
	 trees : [t1, t2]
	});
	
	//创建内容显示部分
	//临时代码
	/*var mainTab = new Ext.Panel( {
		region : 'center',
		html : '<div>主内容部分</div>'
	});*/
	var mainTab = new Morik.Office.MainingPanel( {
		style : 'padding:0 6px 0 0',
		autoScroll : true,
		region : 'center',
		deferredRender : false,
		activeTab : 0,
		resizeTabs : true,
		inTabWidth : 100,
		tabWidth : 90,
		enableTabScroll : true,
		items : [{
			title : '我的首页',
			html : '<div style="background:url(image/main.gif) no-repeat center middle; height:508px;"></div>'
		}]
	});
	
	
	//建立leftmenu和miantab两者之间的关系
	leftmenu.on("nodeClick", function(nodeAttr) {
		mainTab.loadTab(nodeAttr);
	});
	
	
	//创建布局
	var viewport = new Ext.Viewport( {
		layout : 'border',
		style : 'border:#024459 2px solid;',
		items : [head, foot, leftmenu, mainTab]
	});
	
});



在页面的左边是我们导航菜单，在Extjs中有种布局叫做accordion布局，这种布局专门用来处理我们现在遇到的这种情况。

LeftMenu.js代码示例如下：

Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.LeftMenu = function(config){
	var d = Ext.apply({
		split:true,//border布局中，中左区域和中右区域采用6px的分隔区域进行分隔
		region:'west',//默认在主框架页面的左边
		collapseMode :'mini',
		width:200,//宽为200px
		defaults : {
			border : false
		},
		layoutConfig : {
			animate : true
		}
		},config || {});//动画方式的accordion
	    //采用accordion布局来进行配置。这两个是导航菜单组件的核心，不能配置
	config = Ext.apply(d, {
		layout : 'accordion',
		collapsible : true
	});
	//我们通过Function类的call方法来改变Panel类的作用域
	//同时把配置项也传递给Panel类。继承Ext.Panel类中的构造函数功能
	Morik.Office.LeftMenu.superclass.constructor.call(this, config);
	//实现本类的功能
	
	//遍历配置项trees集合
	for(var i=0;i<this.trees.length;i++)		 
	 	this.add({title:this.trees[i].getRootNode().text,
	 	items:[this.trees[i]]
	 });
	//注册的事件名
	this.addEvents('nodeClick');
	//运行事件监听函数
	this.initTreeEvent();
}
Ext.extend(Morik.Office.LeftMenu, Ext.Panel, {
	//LeftMenu类的方法
	initTreeEvent:function(){
		if(!this.items) return;
		for(var i = 0; i<this.items.length;i++){//导航菜单每个子组件
			var p = this.items.itemAt(i);//每个子组件
			if(p) var t = p.items.itemAt(0);//每棵树
			if(t) t.on({
				//通过属组建click事件来构建LeftMenu组件的nodeClick事件
				'click':function(node,event){
					//叶子节点，取消其默认事件处理
					if (node && node.isLeaf()) {
						event.stopEvent();
						//执行注册nodeClick事件注册的回调函数
						this.fireEvent('nodeClick', node.attributes);
					}
				},
				scope : this
			})
		}
	}
});
左边的导航单部分我们是做好了，通过main.js中建立leftmenu和miantab两者之间的关系，我们来处理右部的内容界面。

当用户单击左边导航菜单中的节点时，工作区域就会载入与该节点相对应的内容。

MainPanel.js代码如下：

Ext.ns("Morik", "Morik.Office", "Morik.Util", "Morik.Office.Department");
Morik.Office.MainingPanel = Ext.extend(Ext.TabPanel, {
	initComponent : function() {
		//这里通过initComponent函数来初始化MainingPanel组件
		//一些初始化工作
		Morik.Office.MainingPanel.superclass.initComponent.call(this);
		this._cache = {};
	},
	/*其他的方法*/
	
	loadTab:function(node){
		var n = this.getComponent(node.id);//根据节点id找到TabPanel中的子组件
		if(n){
			this.setActiveTab(n);//如果该node的id指定的子组件存在，就激活他
		}else{
			//把node的属性组成一个参数对象
			var c = {
					'id' : node.id,
					'title' : node.text,
					closable : true
				};
			//没有找到就创建它
			var pn = this.findPanel(node.id);//找到对应类
			//构建该类的实例对象
			n = this.add(pn ? new pn(c) : Ext.apply(c, {
				html : '你还没有实现该页面！'
			}))
			n.show().doLayout();//显示并进行布局
		}
		if (n.ds)
			n.ds.load({params:{start:0, limit:10}});
	},
	findPanel : function(name) {
		//从手动建立的关系的集合查找
		var ret = this._cache[name];
		if(!ret){
			//采用指定的ns命名空间来构建，如果命名空间没有指定，采用默认命名空间
			var pn = (this.ns ? this.ns : 'Morik.Office') + "."
			+ Ext.util.Format.capitalize(name) + 'Panel';
			var ret = eval(pn);//通过该类名找到该类
		}
		return ret;//返回该类
	},
	addPanel : function(name, panel) {
		if (!this._cache)
			this._cache = {};//手动注册这些集合
		this._cache[name] = panel;
	}
	
});

最后的效果图：




评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值