ExtJS中子页面调用父页面元素有感

       最近一段时间在弄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外面去。这样对于一些全局的方法，对象子页面有用的，我们在父页面里都设成全局的，以便于使用。