EXT PANEL面板的刷新相关【转】

一、

引用页刷新的问题不仅仅体现在TabPanel里，只要是带load的panel都是适用的～怎么让一个panel去刷新和更新呢？

更新的话很容易，只要调用Ext.Panel.load()就可以，panel会自动用load方法里的参数去更新panel。
load的官方描述如下：
load( Object/String/Function config ) : Ext.Panel 
Loads this content panel immediately with content returned from an XHR call. 
那么按理说，我们要刷新的话，只要用load方法，传进原来的参数就可以实现刷新了，但是对于TabPanel 这种，panel 很多，ExtJS的Panel 本身没有得到URL的方法，自己记录管理URL又太麻烦，要是能让他有reload方法就好了。

其实是可以reload的，只是这个方法不在Panel里，往下看！
我们先来看一下，panel 是用什么去ajax加载引用另一个页面的。我们看下Panel的autoLoad，对于autoLoad 的官方描述如下：
autoLoad : Object/String/Function 
A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt to load its contents immediately upon render.
The URL will become the default URL for this panel's body element, so it may be refreshed at any time.

原来Panel 的autoLoad是借助Ext.Updater，在Updater的Method里，我们发现有这样一个方法：
refresh( [Function callback] ) : void 
Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
Parameters: 
callback : Function
(optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
Returns: 
void 
      看看，Updater 本身是有刷新的方法的，那么接下来只要找到Panel 和Updater 的关联的方法，就可以让Panel 自己刷新了。
Panel里有个叫getUpdater() 的方法，官方描述如下：
getUpdater() : Ext.Updater 
Get the Ext.Updater for this panel. Enables you to perform Ajax updates of this panel's body.
Parameters:
None.
Returns: 
Ext.Updater

问题解决了，我们来写2个function去分别封装下panel的“更新”和“刷新”：
//刷新一个panel
function Panel_Refesh(panelObj)
{
//panelObj是Ext.Panel
panelObj.getUpdater().refresh();//panel必须被渲染以后才能获得它的 getUpdater() 
}
//更新一个panel
function Panel_URLUpdate(panelObj,newURL)
{
//panelObj是Ext.Panel，newURL是一个String
panelObj.load(newURL);
}

Further more，针对TabPanel：（假设变量_myTabs是TabPanel的句柄，全局的）
function TabPanel_RefreshActiveTab()
{
_myTabs.getActiveTab().getUpdater().refresh();
}
function TabPanel_RefreshTab(panelID)
{
var x=_myTabs.getCmp(panelID);
if(x)
{
   _myTabs.setActiveTab(x);
   x.getUpdater().refresh();
}
}

 

二、

在声明panel时，增加个方法： 

var pn1=new Ext.Panel({    ...    refresh:function(){    //具体操作       }    });  

在加载Panel时，主动调用方法，就可以做相应的操作！