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 }