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