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

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