LearningExtJS_new 之 windows and dialog 的施用学习(七) PART II _JavaScript

LearningExtJS_new 之 windows and dialog 的应用学习(七) PART II
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=GB18030">
<title>Muti windows test</title>
<link rel="stylesheet" type="text/css" href="../pubjs/ext/resources/css/ext-all.css">

<script type="text/javascript" src="../pubjs/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../pubjs/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="./mutiWinTest.js"></script>

</head>
<body>
	<div id="divSessionGrp">
		<input type="button" id="btnSessionHide" value="隐藏">
		<input type="button" id="btnSessionTile" value="齐排">
		<div id="divSessionContext">
			<h1>session</h1>
			<p>Here is the session context</p>
			<div id="divSContext"></div>
		</div>
	</div>
	<div id="divAgentGrp">
		<input type="button" id="btnAgentHide" value="隐藏">
		<input type="button" id="btnAgentTile" value="齐排">
		<div id="divAgentContext">
			<h1>Agent</h1>
			<p>Here is the Agent context</p>
			<div id="divAContext"></div>
		</div>
	</div>
</body>
</html>

js 代码:

var mutiWin = {
	sessionGrp:null,
	agentGrp:null,
	init:function(){
		var g = Ext.get;
		var s = Ext.select;
		this.sessionGrp = new Ext.WindowGroup();
		this.agentGrp = new Ext.WindowGroup();
		
		s("#divSessionGrp div").on("click",this._showSessionWin,this);
		s("#divAgentGrp div").on("click",this._showAgentWin,this);
		
		g("btnSessionHide").on("click",this.sessionGrp.hideAll);
		g("btnAgentHide").on("click",this.agentGrp.hideAll);
		
		g("btnSessionTile").on("click",this._tileSession,this);
		g("btnAgentTile").on("click",this._tileAgent,this);
	},
	_tileSession:function(){
		this.agentGrp.hideAll();
		this._title(this.sessionGrp);
	},
	_tileAgent:function(){
		this.sessionGrp.hideAll();
		this._title(this.agentGrp);
	},
	_title:function(group){
		var previousWin = null;
		group.each(function(win){
			if(previousWin){
				//对齐,如果存在已有窗体,且超过browse长度,则往下排
				if(previousWin.getRight() + win.getWidth() > Ext.getBody().getWidth()){
					win.alignTo(Ext.getBody(),"tl-tl",[0,win.getHight()]);
				}else{
					//正常往后排
					win.alignTo(previousWin.getEl(),"tl,tr");
				}
			}else{
				//第一个向body对齐
				win.alignTo(Ext.getBody(),"tl-tl");
			}
			previousWin = win;
		});
	},
	_showSessionWin:function(e){
		//查找目标div
		var target = e.getTarget("div",5,true);
		var sessionWinId = target.dom.id + "_win";
		//查找windows窗体
		var win = this.sessionGrp.get(sessionWinId);
		//创建新窗体
		if(!win){
			win = new Ext.Window({
				manager:this.sessionGrp,
				id:sessionWinId,
				autoWidth:true,
				autoHeight:true,
				collapsible:true,
				title:target.down("h1").dom.innerHTML,
				html:target.down("p").dom.innerHTML
			});
		}
		//展示
		win.show();
		//对齐
		win.alignTo(target);
	},
	_showAgentWin:function(e){
		//查找目标div
		var target = e.getTarget("div",5,true);
		var sessionWinId = target.dom.id + "_win";
		console.debug(sessionWinId)
		//查找windows窗体
		var win = this.agentGrp.get(sessionWinId);
		//创建新窗体
		if(!win){
			win = new Ext.Window({
				manager:this.agentGrp,
				id:sessionWinId,
				autoWidth:true,
				autoHeight:true,
				collapsible:true,
				title:target.down("h1").dom.innerHTML,
				html:target.down("p").dom.innerHTML
			});
		}
		//展示
		win.show();
		//对齐
		win.alignTo(target);
	}
}
Ext.onReady(mutiWin.init,mutiWin);