iframe + accordion + shortcut 实例（基于Ext）

[javascript]代码库

var loadMask =null;
var _MAXMODULE = 10;
var _ACTIVENODE=null;
var task = new Ext.util.DelayedTask(function(){
	if(!_ACTIVENODE) return;
	loadModel(_ACTIVENODE);
});


function initShortcuts(){
	
	//清空所有快捷方式
	Ext.select('.block').remove();
	
	//回收站域默认隐藏
	Ext.get('delDiv').hide();
	
	_Ajax.request({
		url:'system/Common_loadByEntity.action',
		params:{
			clazz:'com.tbyf.health.entity.XtShortcut'
		},
		xmlData:{
			userid : top._APP.operator.id
		},
		result : function(obj) {
			var res = Ext.decode(obj.detail);
			
			res.each(function(obj, i){
				
				//简化长字符串
				var shortcutname = obj.shortcutname.length > 6 ? obj.shortcutname.substring(0,3) + '...' + obj.shortcutname.substring(obj.shortcutname.length - 3, obj.shortcutname.length) : obj.shortcutname
				
				//构建可视的DOM元素
				var shortcut = Ext.get('shortcut').createChild({
					html : 
						'<li id="srt'+ obj.shortcutid +'" class="block" title="'+ obj.shortcutname +'" index="3" style="margin-left: 16px; margin-right: 16px;">' +
						'	<div class="img">' +
						'		<p><img src="../images/project.png"></img></p>' +
						'	</div>' +
						'	<a class="icon-text" href="'+ obj.shortcuturl +'">' +
						'		<span>'+ shortcutname +'</span>' +
						'	</a>' +
						'</li>'
		        });
				
				shortcut.on('click', function(){
					loadMod(obj.shortcutcode);
				});
				
				//委派拖拽
				var proxy=new Ext.dd.DragSource("srt" + obj.shortcutid, {group:'dt'});
				var target=new Ext.dd.DDTarget('delDiv','dt');
				
				//拖拽时显示回收站
				proxy.onDrag = function(){
					Ext.get('delDiv').show();
				}
				
				//拖拽结束隐藏回收站
				proxy.endDrag = function(){
					Ext.get('delDiv').hide();
				}
				
				//完成拖拽后触发的事件
				proxy.afterDragDrop = function(target, e, idc) {
					top.deleteShortcut(obj.id);
				}
			});
		}
	});
}

function deleteShortcut(id){
	_Ajax.request({
		url:'system/Common_deleteEntity.action',
		params:{clazz:'com.tbyf.health.entity.XtShortcut'},
		xmlData: {
			id: Number(id)
		},
		result:function(obj){
			top.initShortcuts();
		}
	});
}

function triggerDrag(){
	var node=null;
	
	Ext.each(Ext.getCmp('left_panel'),function(accrd){
		Ext.each(accrd.items.items,function(tree){
			tree.getRootNode().cascade(function(node) {
				if (!node.isLeaf() && !node.isLoaded()) {
					
					//重写reload方法，避免遍历每一个菜单项导致所有菜单展开的情况
					node.collapse(false,false);
					while(node.firstChild){
						node.removeChild(node.firstChild).destroy()
					}
					node.childrenRendered=false;
					node.loaded=false;
					if(node.isHiddenRoot()){
						node.expanded=false;
					}
					node.expand(false,false,function(){
						node.collapse();
					},null);
					return true;
				}
				if (node.attributes['url'] && node.attributes['url'].indexOf('HealthReport') > 0) {
					
					//委派拖拽
					var proxy=new Ext.dd.DragSource(node.getUI().getEl(),{group:'dd'});
					var target=new Ext.dd.DDTarget('dargDiv','dd');
					
					//完成拖拽后触发的事件
					proxy.afterDragDrop = function(target, e, idc) {
						
						if(Ext.get("srt" + node.attributes.id)){
							Ext.Msg.alert('提示','此快捷方式您已经添加！');
							return;
						}
						
						//构造快捷方式持久化对象
						var obj = {
							shortcutname : node.attributes.text,
							shortcuttype : '0',
							shortcutcode : node.attributes.code,
							shortcutid : Number(node.attributes.id),
							shortcuturl : node.attributes.url,
							userid : top._APP.operator.id
						};
						
						//持久快捷方式对象
						_Ajax.request({
							url : 'system/Common_saveObj.action',
							params:{
								clazz:'com.tbyf.health.entity.XtShortcut'
							},
							xmlData: obj,
							result : function(obj) {
								initShortcuts();
							}
						});
					};
				}
				return true;
			});
		});
	});
}

function loadModbak(id,params,title){
	alert(_ACTIVENODE.getOwnerTree());
    var node=_ACTIVENODE.getOwnerTree().getNodeById(id);
    if (!node) {
        Ext.each(Ext.getCmp('accordion'),function(accrd){
            Ext.each(accrd.items.items,function(tree){
                if (tree.getNodeById(id)) {
                    node=tree.getNodeById(id);
                    return false;
                }
            });
        });
    }
    Ext.apply(node.attributes,{params:params});
    loadModel(node,true,title);        
}
function loadMod(id,params,title,url,text,iconCls){
    var node=new Ext.data.Node({
     id:id,
     url:url
    });
    Ext.apply(node.attributes,{text:text});
    Ext.apply(node.attributes,{iconCls:iconCls});
    Ext.apply(node.attributes,{params:params});
    loadModel(node,true,title);        
}
function loadMod(code,params,title){
    var nodeMod=null;
    Ext.each(Ext.getCmp('left_panel'),function(accrd){
        Ext.each(accrd.items.items,function(tree){
			tree.getRootNode().cascade(function(node) {
				if (!node.isLeaf() && !node.isLoaded()) {
					node.reload();
					return true;
				}
				if (node.attributes['code'] && node.attributes['code'] == code) {
					nodeMod = node;
				}
				return true;
			});
        });
    });
    if (!nodeMod) {
        Ext.Msg.alert('提示','您未被授权访问该功能<br>菜单编码:'+code);
        return;
    }
    Ext.apply(nodeMod.attributes,{params:params});
    loadModel(nodeMod,true,title);
}
function loadModel(node,des,title){
    
    var centerTab = Ext.getCmp('centerTab');
    var id = node.id + "_subTab";
    var items = centerTab.items;
    var panel=null;
    for(var i=0;i<items.length;i++){
        var item = items.get(i);
        if(item.id==id){
            panel= item;
        }
    }
    if (des && panel) {
        panel.destroy();
        panel=undefined;
    }
    if (!panel && node.attributes.url!=null && node.attributes.url!="null"){
        if(items.length>_MAXMODULE){
            return Ext.Msg.alert("警告","超出模块加载最大数量，请关闭某些模块后重试！");
        }
        if (!title)
            title='';
        else
            title='【'+title+'】';
        if (node.attributes.params && !des)
            node.attributes.params=undefined;
          //  var htmlStr = '<iframe style="width:100%;height:100%" allowTransparency=true frameborder=0 name="detailframe" src="'+node.attributes.url+'?id='+node.id+'"></iframe>';
          var url=node.attributes.url;
          if(node.attributes.url.indexOf("?")>=0){
          url=node.attributes.url+"&usercode="+top._APP.operator.usercode;
          }
            var htmlStr = '<iframe style="width:100%;height:100%" allowTransparency=true frameborder=0 name="detailframe" src="'+url+'"></iframe>';//增加报表时去掉id参数

            if(node.text == '电子地图管理') {
            	Ext.getCmp('left_panel').collapse(true);
            	htmlStr = '<iframe style="width:100%;height:100%" allowTransparency=true frameborder=0 name="detailframe" src="http://www.hbredcross.org:8888/baseLine/jsp/googleEarth.html?sid=ABQIAAAApYwcWsoSiQ3WKySJxNfm1xSVmppIo2nBU5ROoP2QZFdzZe9JphT5DoyAF1vW-ujuHzHDhkjtgeg0NQ"></iframe>';
            }
        panel = new Ext.Panel({
                id:id,
                title:title+node.attributes.text,
                iconCls:node.attributes.iconCls,
                closable: true,
                html:htmlStr//'<iframe style="width:100%;height:100%" allowTransparency=true frameborder=0 name="detailframe" src="'+node.attributes.url+'?id='+node.id+'"></iframe>'
            });
        centerTab.add(panel);
      
    }
    centerTab.setActiveTab(panel);
    _ACTIVENODE=node;
}

function layOutPage(objRight){
	var menu = Ext.decode(objRight.MENU).children;
	var items = [];
	if(menu)
		for(var i =0;i<menu.length;i++){
			var menuitem = menu[i];
			if(i==0 && menuitem.children && menuitem.children[0])menuitem.children[0].expanded=true;

			items.push({
				border:true,
				title:menuitem.text,
				xtype:'treepanel',
				autoScroll: true,
				animate: true,
				containerScroll: true,
				rootVisible: false,
				iconCls:menuitem.iconCls,
				root: {
					nodeType: 'async',
					text: 'root',
					draggable: false,
					children:menuitem.children
				},
				listeners:{
					click  : function(node,e){
						_ACTIVENODE=node;
						task.delay(200);
					}
				}
			});
		}
	var viewport = new Ext.Viewport({
		layout: 'border',
		items: [
			new Ext.BoxComponent({
				region: 'north',
				el: 'north',
				minSize: 1,
				layout:'fit',
				height:50
			}),
//				{
//				region:'south',
//				contentEl: 'south',
//				split:true,
//				height: 28,
//				minSize: 28,
//				maxSize: 28,
//				margins:'0 0 0 0'
//			},
				{
				title:"系统菜单",
				region:'west',
				id:'left_panel',
				layout:'accordion',
				split:true,
				width: 175,
				minSize: 175,
				maxSize: 400,
				collapseMode:'mini',
				collapsibleSplitTip:'点击展开菜单',
			    useSplitTips:true,
			    splitTip:'点击收缩菜单',
				layoutConfig:{animate:true},
				//tbar:[{
				//	xtype:'textfield',
				//	emptyText:'请输入',
				//	width:150
				//},'-',{
				//	iconCls:'q-search',
				//	tooltip:'检索'
				//},'-'],
				items:items,
				items1:[{
					id:'menuPanel',
					title:'系统菜单',
					margins:'0 0 0 5',
					border:false,
					
					iconCls:'q-aplction_cscde',
					layoutConfig:{animate:true},
					items:items
				}]
			}, new Ext.TabPanel({
				id:'centerTab',
				region: 'center',
				deferredRender: false,
				activeTab: 0,
				enableTabScroll:true,
				plugins: new Ext.ux.TabCloseMenu(),
				items: [{
					title: '首页',
					iconCls:'q-home_blue',
					closable: false,
					autoScroll: true,
					html:'<iframe  style="width:100%;height:100%" allowTransparency=true frameborder=0 name="welcome_frame" src="welcome.html"></iframe>'
				},{
					title: '报表快捷方式',
					closable: true,
					autoScroll: true,
					html:
						'<div id="dargDiv" style="left: 0px; top: 10px; position: absolute; width: 100%; height: 100%;">' +
						'	<ul id="shortcut">' +
						'	</ul>' +
						'<div id="delDiv" style="height: 128px; width:128px; position:absolute; bottom:50px; right:10px;"><img src="../images/Recycle_Bin.png"></img></div>' +
						'</div>'
				}]
			})
		]
	});
}

function initAction(data){

	if(data.ENTERPRISE)
		_APP.setEnterprise(Ext.decode(data.ENTERPRISE));
	if(data.OPERATE)
		_APP.operator=Ext.decode(data.OPERATE);
	if(data.REGIONRIGHT)
		_APP.setRgionR(Ext.decode(data.REGIONRIGHT));
	if(data.REGION)
		_APP.setRegion(Ext.decode(data.REGION));
	_APP.setRight(Ext.decode(data.URIGHT));
	if(data.NOWTIME) _APP.nowTime=data.NOWTIME;
	if(data.BEGIN) _APP.BEGIN = data.BEGIN;
	if(data.TYPE) _APP.ASSTYPE = data.TYPE;
	if(data.END) _APP.END = data.END;
	if(data.YEAR) _APP.YEAR = data.YEAR;
	if(data.FUND) _APP.FUND = data.FUND;
	if(data.USERROLE) _APP.USERROLE = data.USERROLE;
	if(data.PARENTID) _APP.PARENTID = data.PARENTID;
	if(data.PARENTNAME) _APP.PARENTNAME = data.PARENTNAME;
	var App = Ext.decode(data.APP);
	_APP.setAppList(App);
	document.getElementById('operate_info').innerHTML="&nbsp;操作员:"+_APP.operator.username;
	if(_APP.ENTERPRISE.groupname!=null)document.getElementById('enterprise_info').innerHTML=_APP.ENTERPRISE.groupname+"&nbsp;&nbsp;&nbsp;";

	top.initShortcuts();
	top.triggerDrag();
}

function _initApp(){
	if(loginInfo){
		var obj = Ext.decode(loginInfo);
		layOutPage(obj);
		initAction(obj);
	}else{
		loadMask = new Ext.LoadMask(document.body,{msg:"加载中，请稍候..."});
		loadMask.show();
		_Ajax.request({
			url:'system/Login_loadInfo.action',
			result:function(obj){
				var detail = Ext.decode(obj.detail);
				layOutPage(detail);
				initAction(detail);
				var task = new Ext.util.DelayedTask(function(){
					loadMask.hide();
				});

				task.delay(500);
			}
		});
	}
}