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// 完成后移除

上一篇:NFS实践练习


下一篇:mixpanel umeng talkingdata