ext window嵌jsp页面自适应

Posted 2020-10-22 花满园

//定义window调用方法传入jsp所需参数
function getWindow(obj,obj1,obj2,obj3,obj4,obj5,obj6,obj7,obj8,obj9){
    Ext.define(‘zjfxjk.institutionsLib.jgjs.editPanel‘,{
      extend:‘Ext.window.Window‘,
      layout:‘border‘,//border布局
      alias: ‘editPanel_jg‘,//定义组件的别名，可直接传入create创建组件
      maximizable: true,//可最大化，最大化后jsp页面width和height要随之做自适应的变化
      id: ‘editPanel_jg‘,
        width:$(‘#homeCenterTab‘).width()*0.9,
        height:$(‘#homeCenterTab‘).height()*0.9,
        modal:true,//窗口背景模糊不可操作
        title:‘‘,
//        iconCls:‘icon-window‘,
        closable:true,//可关闭
        constrain:true,//强制组件在窗口内
        initComponent:function() {//定义子组件
            this.items=[this.getPlanPanel()];//,this.getFlowPanel()
            this.callParent();
          },
        getPlanPanel:function(){
            if(!this.planPanel){
                this.planPanel=Ext.create(‘flowPanel_jg_jsp‘);
            }
            return this.planPanel;
        },
        getFlowPanel:function(){
            if(!this.flowPanel){
                this.flowPanel=Ext.create(‘flowPanel_jg‘);
            }
            return this.flowPanel;
        },
    });
//    frameHeight=$(‘#homeCenterTab‘).height()*0.8-166;
//    frameWidth=$(‘#homeCenterTab‘).width()*0.8;
    //嵌入jsp页面的panel,自定义组件
    frameWidth=$(‘#homeCenterTab‘).width()*0.9;
    frameHeight=$(‘#homeCenterTab‘).height()*0.9-80;
    Ext.define(‘zjfxjk.institutionsLib.jgjs.flowPanel_jsp‘,{
        extend:‘Ext.tab.Panel‘,
        width: frameWidth,
        height: frameHeight,
        border:false,
        region:‘center‘,
        id:"jgflowPanel_jsp",
        alias: ‘flowPanel_jg_jsp‘,
        items: [{
            title: ‘计划详情‘,
            id:"jgTab",
            itemId:‘jgTab1‘,//tab ID
            tabConfig: {//tab 相关设置
                title: ‘计划详情‘,
                tooltip: ‘计划详情‘
            },
//嵌入jsp页面，页面效果好实现
        html:‘<iframe id="planFrame" style="width:‘+frameWidth+‘px;height:‘+frameHeight+‘px;border: none;"  src="‘+Util.getPath()+‘/zjfxjk/institutionsLib/jgjs/jgWindow/flowPage1.jsp?id=‘+obj+‘&partName=‘+obj1+‘&planId=‘+obj2+‘&FID=‘+obj3+‘&MODE=‘+obj4+‘&STATE=‘+obj5+‘&SHZT=‘+obj6+‘&TASK_ID=‘+obj7+‘&GKFW=‘+obj8+‘&SZJ_SPYJ=‘+obj9+‘" ></iframe>‘,//style="border:none;"
        }]
    //    height:900,
    });

//在jsp引用的js里面
//方法写在onready 和ext.onReady方法外面，然后再调用即可
//经过查apiExt.EventManager.onWindowResize 方法在5.0之后已被删除，官方建议用以下方法监听窗口变化
function resizeWin(){//监听窗口大小变化方法
    var planWin=this.parent.Ext.getCmp(‘editPanel_jg‘);
    planWin.on("resize",function(event){
        $(event.el.dom).find("iframe").width(event.width);
        $(event.el.dom).find("iframe").height(event.height-100);
    }); 
}

 

ps:this.parent.Ext.getCmp(‘editPanel_jg‘);
方法可获取窗口外面的所有Ext组件，
//例子

function closeWindow(){
var mode=$(‘#MODE‘).val();
if("check"==mode){
this.parent.Ext.getCmp(‘shListPanel‘).store.load();//列表刷新
}else{
this.parent.Ext.getCmp(‘jgListPanel‘).store.load();
}
this.parent.Ext.getCmp(‘editPanel_jg‘).close();//窗口关闭
}