Ext.Net Mask

　　ext.net中经常在加载数据的时候需要显示一个mask来提示用户当前进行的处理，在GridPanel等控件中有LoadMask可以进行设置，但是在一些空间比如Combbox就没有提供，这个时候只能根据Loader来监听事件进行处理。可以通过BeforeLoad来显示Mask，Load之后来隐藏Mask。

　　如果要显示在这个页面上，可以通过Ext.getBody().mask("数据加载中..."); Ext.getBody().unmask("数据加载中..."); 来显示和隐藏Mask。如果显示在控件上可以根据获取控件名称：比如空间名称为"ControlName",那么我们就可以通过 Ext.getCmp("ControlName").getEl().mask("数据加载中...");  Ext.getCmp("ControlName").getEl().unmask();来显示或者隐藏Mask。通常最后把要显示的Mask显示到当前的控件上，避免整个页面被阻塞，不能其他操作。

HTMLCode

 1    <ext:TreeGrid ID="TreeGrid" runat="server" Border="true" AutoExpandColumn="State"

 2                                     Animate="true" RootVisible="false" RemoteJson="true" Lines="false">                                     <Root>

 3                                         <ext:AsyncTreeNode Text="Root" NodeID="root" Expanded="true" />

 4                                     </Root>  

 5 <Loader>

 6                                         <ext:TreeLoader DataUrl="/Home/Test" Json="true">

 7                                             <BaseParams>

 8                                                 <ext:Parameter Name="Id" Value="node.id" Mode="Raw" />

 9                                             </BaseParams>

10                                             <Listeners>

11                                                 <Load Handler="CloseMask(TreeGrid);" />

12                                                 <BeforeLoad Handler="ShowMask(TreeGrid)" />

13                                                 <LoadException Handler="CloseMask(TreeGrid)" />

14                                             </Listeners>

15                                         </ext:TreeLoader>

16                                     </Loader>

JS Code

1 function CloseMask(control) {

2     control.getEl().unmask();

3 

4 }

5 

6 function ShowMask(control) {

7     control.getEl().mask("数据加载中...");

8 }