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>
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){//查找目标divvar 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){//查找目标divvar 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);