顯示具有 async 標籤的文章。 顯示所有文章
顯示具有 async 標籤的文章。 顯示所有文章

2023年4月23日 星期日

V80204 – loadMask - 顯示等待訊息 - Ajas.async必需為 true

 目的: V80204 – WBS報工工時 [顯示資料], 去後端處理, 要顯示等待訊息

處理說明:  1> Ext.Ajax  的處理模式 :   必需  async: true,  - loadMask
                         // 1>> 異步模式  : false,    即會等後端執行完成,才會往下,所以不會顯示等待訊息
                                                                       async: false ,      
                 // 2>> 異步模式  : true,   即會不用等後端執行完成,前端仍會往下, 所以會顯示等待訊息
                                                                       async: true ,    (defaule)  


1>V80201.js
var myMask = new Ext.LoadMask(Ext.getBody(), {
msg: '資料處理中,請稍候...',
});

//顯示訊息
myMask.show();

//隱藏訊息
Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        if (successful) {

            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            myMask.hide();
        }
    }
    );






2022年12月26日 星期一

V80201- 請稍候訊息 - 1>Label方式 2>LoadMask方式

目的:  V80201- 顯示 請稍候訊息

處理說明: 1>畫面上,以 label 顯示訊息 - 請稍候  - label.setVisible(true)  ;
                  2>載入完成時, label.setVisible(false)  ;
                  3>Ext.Ajax 的  async 必需為 true, 異步式處理, 即去後端處理時,前端仍需繼續處理
                       ,如此前端才會顯示等待訊息




一.以 Label 方式處理
1>*.js
  //資料處理中..,請稍候
                {
                    xtype: 'label',
                    id: 'waitlbl1',
                    text: '.',
                    hidden: false,
                }, // end of 請稍候
                {
                    xtype: 'label',
                    id: 'waitlbl',

                    text: '資料處理中,請稍候...',
                    hidden: true,
                    style: {color: 'blue',}

                }, // end of 請稍候

{
            xtype: 'button', text: '確定', id: 'sub_ShowPN_OkBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_確定 ");
                    Ext.getCmp("waitlbl").setVisible(true);
                    //Ext.getCmp("waitlbl").setX(100);                                        
                    //myMask.show();                    
                    ShowPNGridDetail(par_PN, par_ECNO, par_CNDPROCCODE, par_ASN);
                }
            }
        },        


Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {        
        if (successful) {
            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            Ext.getCmp('waitlbl').setVisible(false);            
            //myMask.unmask();                    
            //myMask.hide();                                
        }
    }

二.以 LoadMask方式處理

目的:  V80201- 顯示 請稍候訊息  - 以 LoadMask 方式

處理說明: 1>畫面上,以 LoadMask 顯示訊息 - 請稍候  - Ext.getCmp("myMask").show();

                  2>載入完成時, - Ext.getCmp("myMask").hide();





1>*.js
var myMask = new Ext.LoadMask(Ext.getBody(), {
     msg: '資料處理中,請稍候...',
     id: 'myMask',

});

//顯示訊息
Ext.getCmp("myMask").show();

//隱藏訊息
Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        if (successful) {

            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            Ext.getCmp("myMask").hide();
        }
    }
    );






2022年8月29日 星期一

V120103 - Ext.Ajax 1> async=true/false 的不同 2>Ext.Ajax 和 Form.submit 的不同 3>loadMask

 目的:  說明 Ext.Ajax  - async : true/false 的不同


處理說明: 1>async: true, 不等後端執行完,即往下執行
                       async: false, 等後端執行完,才往下執行
   
                  2>Ext.Ajax       : 由 response.responseText 取得傳回值
                      form.submit  : 由 opts.response.responseText 取得傳回值
            
                 3>LoadMask : 適用於 async: true 



1>*.js  async=true/false 的區別

function mySub1_OkBtn_click() {
//取得 [類別][匯入機號][拆移工場]
console.log('0 xlsToV120101 click -  mySub1_OkBtn_click !!');
//1 > 讀取子畫面的過濾條件
var np = {};
var Tmp_sub_CLS = Ext.getCmp("sub_CLS").getValue();
var Tmp_sub_ASN = Ext.getCmp("sub_ASN").getValue();
var Tmp_sub_FACWC = Ext.getCmp("sub_FACWC").getValue();
np["sub_CLS"] = Tmp_sub_CLS;
np["sub_ASN"] = Tmp_sub_ASN;
np["sub_FACWC"] = Tmp_sub_FACWC;

console.log('5  before show mask !!');
var Tmp_upPanel = Ext.getCmp("mySub1_OkBtn").up("panel");
//console.log("Tmp_upPanel:", Tmp_upPanel);
//var mask = new Ext.LoadMask(Ext.getBody(), {
var mask = new Ext.LoadMask(Tmp_upPanel, {
msg: '處理中,請稍待...'
});

mask.show();//使用 mask 需手動呼叫show() 方法下
//顯示結果訊息..
//console.log('5.5  mask.show() !!');
console.log('6  before timer !!');
var timer = setInterval(function () {
clearInterval(timer);
mask.hide();
console.log('6.5  mask.hide() - after 20 sec !!');
timer = null;
//var r = r_cookies('EX_DFile');
//console.log("r_cookies=", r);
//if (!checkisnull(r)) {
// mysuccessalert(r);
//}
}, 30000);  //5000ms = 5sec

        //Ext.getCmp('mySubForm').submit({
Ext.Ajax.request({
url: '../../api/V120103API/xlsToV120101',
method: 'POST',
async: false,
//standardSubmit: true, // 非 Ajax 的方式  //若要傳送檔案至前端, standardSubmit必需設為 true 
params: np,
success: function (response, opts) {
console.log('0 xlsToV120101 sucess!!');
//console.log('0 opts:', opts);
//console.log('0 response:', response);
           console.log("success response.responseText:", response.responseText);
                var obj = Ext.decode(response.responseText);
                //console.log("obj:", obj);
if (obj["success"]) {
console.log(' 1 xlsToV120101 obj[sucess]  true !!');
Tmp_Str = "[匯入]完成 !! <br>"
           + obj["Rtn_Msg"];
mysuccessalert(Tmp_Str);
console.log("success=true , Tmp_Str=", Tmp_Str);
Ext.getCmp('mySub1_OkBtn').up("window").close();
Ext.getCmp('mySub1_OkBtn').up("window").destroy();
Ext.getCmp('btn_Show').fireHandler();
}
else {
console.log(' 2 xlsToV120101 obj[sucess]  false !!');
Tmp_Str = "[匯入]失敗 !! <br>"
            +obj["Rtn_Msg"];
mysuccessalert(Tmp_Str);
}
            },
            failure: function (response, opts) {
                //console.log('uploadFileToDB failure !!');
                //console.log(" failure opts.response.responseText:", opts.response.responseText);
console.log(' 3 xlsToV120101 failure !!');
                var obj = Ext.decode(response.responseText);
                console.log("obj:", obj);
Tmp_Str = "[匯入]失敗!! <br>"
+ obj["Rtn_Msg"];
                mywarnalert(Tmp_Str);                
            } // end of failure 
});  // end of submit
console.log('7  Ext.Ajax finished !!');
};  // end of function mySub1_OkBtn_click()


2>success: function (response, opts) {

     1>>若 Ext.Ajax 則由 response.responseText

             var obj = Ext.decode(response.responseText);

     2>>若 Form.submit 則由 opts.response.responseText

            var obj = Ext.decode(opts.response.responseText);



3>Loadmask的用法:  適用於 async : true