zoukankan      html  css  js  c++  java
  • 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 }
  • 相关阅读:
    LeetCode 264. Ugly Number II
    LeetCode 231. Power of Two
    LeetCode 263. Ugly Number
    LeetCode 136. Single Number
    LeetCode 69. Sqrt(x)
    LeetCode 66. Plus One
    LeetCode 70. Climbing Stairs
    LeetCode 628. Maximum Product of Three Numbers
    Leetcode 13. Roman to Integer
    大二暑假周进度报告03
  • 原文地址:https://www.cnblogs.com/rpoplar/p/2766459.html
Copyright © 2011-2022 走看看