Extjs的窗口是可以加载自己的HTML的,但这样两个页面就相当独立了,传参是个问题 ,网上也没有很好的解答清楚,猫猫今天就说清楚这个模式的传参要点。
一、传参
窗口定义:
代码语言:javascript复制 var win3 = new Ext.Window({
id: 'win3',
width: 800,
height: 500,
modal: true,
closeAction: 'hide', //hide
title: '选择产品',
plain: true,
modal: true, //设置遮罩即只能操作最上层
html: "<iframe id='openwin' src='Hrproduct_sel.html' scrolling='auto' style='width:100%;height:100%;margin:0;padding:0'></iframe>",
renderTo: Ext.getBody(),
defaults: {
border: false
}
});
其中html 中的 src 可以用来传参 src='Hrproduct_sel.html?id=1',
子窗口内的html怎么取得参数呢? getUrlParam可以获取url传参
代码语言:javascript复制 var id = getUrlParam('id'); //得到传过来的ID
console.log(id)
function getUrlParam(param) {
var params = Ext.urlDecode(location.search.substring(1));
return param ? params[param] : params;
}
也可以用win3的属性传参,首先要点是要把父页面的窗口id传过来,比如 id是 win3
代码语言:javascript复制 <iframe id='openwin' src='Hrproduct_sel.html?winid=win3' scrolling='auto' style='width:100%;height:100%;margin:0;padding:0'></iframe>
子窗口内html获取窗口的标题
代码语言:javascript复制 var winid = getUrlParam('winid'); //得到传过来的ID
//获取窗口标题
var objwin = parent.Ext.getCmp(winid);
console.log(objwin.title)
二、获取返回值
在窗口定义中像id,width 等等都是属性,JS可以随意自己添加(猫猫原来没有理解,后面才知道这么搞,VFP也可以这样搞。),如我添加一个returnVal
代码语言:javascript复制 var win3 = new Ext.Window({
id: 'win3',
returnVal:"",
width: 800,
height: 500,
modal: true,
closeAction: 'hide', //hide
title: '选择产品',
plain: true,
modal: true, //设置遮罩即只能操作最上层
html: "<iframe id='openwin' src='Hrproduct_sel.html' scrolling='auto' style='width:100%;height:100%;margin:0;padding:0'></iframe>",
renderTo: Ext.getBody(),
defaults: {
border: false
}
});
子页面往win3的returnVal写值
代码语言:javascript复制 var winid = getUrlParam('winid'); //得到传过来的ID
var objwin = parent.Ext.getCmp(winid);
objwin.returnval="123"
父页面在子窗口hide事件中获取这个值
代码语言:javascript复制 win3.on("hide",function(){
console.log("hide");
console.log(win3.returnval);
})
这样就可以完成父子页面传参了