ExtJs LoadMask相關的遮罩效果

langgufu314發表於2011-06-10
Ext.onReady(function() {

var a = Ext.MessageBox.wait('content', 'title');

(function() {

a.hide()

}).defer(3000); //隱藏延遲,可簡化為 a.hide.defer(3000,a);

var mask = new Ext.LoadMask(Ext.getBody(), {

msg : 'please waiting ... ',

removeMask : true

});

mask.show();//使用 mask 需手動呼叫show() 方法下

(function() {

mask.hide();

}).defer(4000);

});

---------------------------------------------

var t=0;
function progress(){
t=0;
var msgbox=Ext.Msg.progress("請稍候","儲存資料","正在儲存資料, 請稍候。。。。。。");//顯示等待對話方塊
updateProgress();
}
function updateProgress(){ //更新進度條
t+=0.2;
Ext.Msg.updateProgress(t);
if(t>1)
Ext.Msg.hide();
else
updateProgress.defer(700);
}
progress();

------------------------------------------------------

var mask = new Ext.LoadMask("ID", {
msg : '正在載入...'
});
mask.show();
borrowhistory_store.load({
params : {
webname : "all",
start : 0,
limit : borrowhistory_pageTool.pageSize
}
});
borrowhistory_store.on("load", function() {
mask.hide();
})




Ext.LoadMask用於在載入資料時為元素做出類似於遮罩的效果。可以直接應用在元素上,如:

var loadMarsk = new Ext.LoadMask(document.body//元素、DOM節點或id, {
msg : '正在刪除資料,請稍候。。。。。。',
removeMask : true// 完成後移除
});
loadMarsk .show(); //顯示

然後在處理完成的方法中loadMarsk .hide();

還可以和Ext.data.Store結合,可將效果與Store的載入達到同步,如:

var loadMarsk = new Ext.LoadMask(document.body, {
msg : '資料處理中!',
disabled : false,
store : store
});

在form的submit方法中有waitMsg屬性來達到上面的效果 ,如:

form.submit({
waitMsg : '正在提交資料...'

相關文章