ExtJS中子页面调用父页面元素有感
时间:2010-09-03 来源:唯一小神
最近一段时间在弄ExtJS有关的项目,发现自己对于JavaScript东东实在是欠缺很多东西,所以写这篇有感记录一下,希望对大家有点帮助,^V^。
在ExtJS经常有使用TabPanel的例子,而TabPanel里的一个Panel镶嵌了一个JSP或者Html等等的子页面,而我们有时候需要在子页面上对父页面的
TabPanel进行一定的操作,比如说为TabPanel添加一个Panel,这样需要我们在子页面中能够获得父页面的TabPanel的对象或者在父页面中已经写好了的
对TabPanel添加Panel的方法。
子页面中无需多说了,一般是使用 window.parent.XXX 或者 window.parent.XXX() 的方式获取父页面对象或者方法( 注意:XXX代表父页面的
对象或者方法 ),如以下代码(addTab是子页面function,goto是父页面的function):
1 function addTab(url,proName,proId){
2 url = "projectInfo.jsp?projectId=" + url;
3 window.parent.goto(url,"项目概况",proName,proId,'4');
4 };
有时候经常我们使用window.parent.goto()获取不到方法,这是为什么呢,主要在一个JS的一个作用域的问题,由于在ExtJS中父页面常常采用Ext.onReady()方法的一个使用,常常会将定义放在这个方法中,比如:
1 Ext.onReady(function(){
2 function goto(){
3 XXXXXXXXXX....
4 }
5 var centerPanel = Ext.TabPanel();
6 })
这个地方的goto和centerPanel是处于Ext.onReady区域内的,作用域也在这个里面,不是全局的,所以我们在子页面访问不到,要访问是,就将方法和对象
放到Ext.onReady外面去。这样对于一些全局的方法,对象子页面有用的,我们在父页面里都设成全局的,以便于使用。