EXT遮罩效果

          <link href="/resources/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

   <script src="/resources/Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="/resources/Ext/ext-all.js" type="text/javascript"></script>

--html代码

  <asp:Button ID="btnSupplier" runat="server" Text="搜 索" Width="75px" Height="30px"
                    OnClick="btnSupplier_Click" OnClientClick="return Loadshow();" />

  function Loadshow() {
            var myMask = new Ext.LoadMask(Ext.getBody(), { msg: "加载数据中，请稍候..." });
            myMask.show();
            __doPostBack('btnSupplier', '');
            return true;
        }

  $(function () {
            //查询按钮
            $("#btnSearch").click(function () {
                //var panel1 = Ext.get("extpanel");
                var loadMask = new Ext.LoadMask(Ext.getBody(),
                {
                    msg: '正在查询数据，请稍候。。。。。。',
                    removeMask: true// 完成后移除
                });
                loadMask.show();
            })
            ////导出按钮
            //$("#btn_OutExcel").click(function () {
            //    var panel1 = Ext.get("extpanel");
            //    var loadMarsk = new Ext.LoadMask(panel1, {
            //        msg: '数据处理中，请稍候......',
            //        removeMask: true// 完成后移除
            //    });
            //    loadMarsk.show();
            //})

           
        })

  function Loadshow() {
            var myMask = new Ext.LoadMask(Ext.getBody(),
                {
                    msg: "加载数据中，请稍候...",
                    removeMask: true// 完成后移除
                });
            myMask.show();
            __doPostBack('btnSearch', '');
            return true;
        }

 

Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果，可以直接应用在元素上，如

var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id,

{
        msg : '正在删除数据，请稍候。。。。。。',
        removeMask : true// 完成后移除
    });
    在数据加载之前调用loadMarsk .show(); //显示

数据加载完毕时调用 loadMarsk .hide();

 

还可以和Ext.data.Store结合，可将效果与Store的加载达到同步，如：

var store1 = new Ext.data.Store({...})

var loadMarsk = new Ext.LoadMask(document.body, {
        msg : 'Loading...',
        disabled : false,
        store : store1
    });

 

panel中使用：

var panel1 = new Ext.Panel({});

var loading = new Ext.LoadMask(Ext.get(panel1.getEl()),

{
        msg : 'Loading...',
        removeMask : true// 完成后移除
    });

 

在异步加载树中可以在其listeners中使用：

var loading = null;

tree = new Ext.tree.TreePanel({

    ...

    listeners: {

        'beforeload': function(){

            loading = new Ext.LoadMask(Ext.get(this.getEl()),{

               msg : 'Loading...',

               removeMask : true// 完成后移除
 

转载于:https://www.cnblogs.com/Unrmk-LingXing/p/4263621.html