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();
        }
    }
    );

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

Ext.Ajax.request - 傳送檔案至 Browser - mask 資料處理中,請稍候 , Cookie

1>目的: 透過 Form.submit 方式,於後端處理後,將結果檔案傳送至前端
2>處理說明: 

1>*.js  - [確認匯入]鈕, 將匯入結果,存於 xls最後一欄後,傳至前端 , 錯誤訊息以 Cookie 傳回

 //[確認匯入]鈕 , 處理
    function mySubForm_2_btnokClick() {
        //取得 [檔案上傳].檔名
        var btn_FileIn_Obj = Ext.getCmp('sub_FName');
        var Tmp_Str = "";
        var np = {
            FName: Ext.getDom(btn_FileIn_Obj.inputId).value
        };
        console.log("FName: ", np.FName);
        //submit會將fileUploadForm裡面input name送到後端
        //Ext.getCmp('btn_FileIn').getForm().submit({
        Ext.getCmp('mySubForm_2_btnok').up("form").submit({
            //standardSubmit: false,    //default:false
            url: '../api/V120103API/uploadFileToDB',
            method: 'POST',
            async: false,
            headers: { 'Content-type': 'multipart/form-data' },
            params: np,

            standardsubmit=true    //才可將檔案送至前端

        } ) //end of submit;
          //顯示匯入結果
        var mask = new Ext.LoadMask(Ext.getBody(), {
            msg: '資料處理中,請稍候...'
        });
        mask.show();//使用 mask 需手動呼叫show() 方法下
        var timer = setInterval(function () {
            var cookie_token = Ext.util.Cookies.get("Rtn_Msg");
            if (cookie_token != null) {
                clearInterval(timer);
                timer = null;
                mask.hide();
                //console.log(" show result !!");
                var r = r_cookies("Rtn_Msg");
                mysuccessalert(r);
                Ext.getCmp('mySubForm_2_btnok').up("window").close();
                Ext.getCmp('mySubForm_2_btnok').up("window").destroy();
                //mysuccessalert('檔案匯出完成');
            }
        }, 1000);       
        
    };  // end of mySubForm_2_btnokClick() {

2>*.cs  - 透過 Current.Response.AddHeader("Content-Disposition", "attachment;filename=\"" +          

                HttpUtility.UrlEncode(Tmp_FName, System.Text.Encoding.UTF8) + "\"");  

             --> 傳送檔案至 Browser   

//[匯入] 鈕 , 匯入 XLS 檔案 void

        [HttpPost]

        public void uploadFileToDB()

        {

            HttpContext c = HttpContext.Current;

            NameValueCollection nvc = c.Request.Form;

            //匯入檔案名稱(含 *.xlsx)

            string FName = nvc["FName"];

            string FName0 =Path.GetFileNameWithoutExtension(FName) ;  //不含 extension

            string Tmp_FName = FName;

            Workbook wk = null;

            HttpRequest Request = HttpContext.Current.Request;

            var response = this.Request.CreateResponse();

            string file_Name = FName;

            string FILEDT = DateTime.Now.ToString("yyyy-MM-dd");

            string Tmp_RtnMsg = "";

            string Tmp_Sql = "", Tmp_Str = "";

            int Tmp_CNT = 0;

            MemoryStream stream = new MemoryStream();

            HttpCookie MyCookie = new HttpCookie("Rtn_Msg");

            foreach (string cur_FName in Request.Files)

            {

                string fileType = Request.Files[cur_FName].ContentType;

                Stream file_Strm = Request.Files[cur_FName].InputStream;

                file_Name = Path.GetFileName(Request.Files[cur_FName].FileName);                

                int fileSize = Request.Files[cur_FName].ContentLength;

                byte[] fileRcrd = new byte[fileSize];

                //更新資料庫欄位值                

                int Tmp_curpos = 0;                

                bool Tmp_isOK = true;

                try

                {

                    wk = new Workbook();

                    wk.LoadFromStream(file_Strm);

                    Worksheet sheet1 = wk.Worksheets[0];//獲取第一個工作表

                                                        //共 10 欄

//string[] outFieldArray = { "計畫代碼", "父件件號", "件號", "件號中文名稱", "每機用量", 

                                             "BOM量", "計量單位", "工廠", "類別","備註" };

                                                        //int RowsCount = sheet1.Rows.Count();

                    int RowsCount = sheet1.LastRow;

                    string Tmp_CLS,Tmp_ITM,  Tmp_DITM, Tmp_NM, Tmp_REPN, Tmp_RESN, Tmp_INPN, Tmp_INSN, Tmp_RMK;

                    string Tmp_PLNC, Tmp_REWK, Tmp_INSC, Tmp_STLCT, Tmp_NOTE, Tmp_FACWC;

                    string Tmp_RESULT;

                    //STEP1 檢核  XLS 欄位名稱資料是否正確                                            

                    //類別 排序項次 名稱 拆移件號 拆移序號 安裝件號 安裝序號 備考

                    // 拆移PlanningCard 修理REWORK 安裝InstallationCard 儲位 備註 拆移工廠

                    Tmp_RtnMsg = "匯入檔案欄位名稱必需如下:<br>";

                    Tmp_CLS = sheet1.Range[myfunc.GetExcelPos(0, 0)].Value;

                    if (Tmp_CLS != "類別")

                        Tmp_RtnMsg = Tmp_RtnMsg + "第1欄位名稱必需為[類別],";

                    Tmp_DITM = sheet1.Range[myfunc.GetExcelPos(1, 0)].Value;

                    if (Tmp_DITM != "排序項次")

                        Tmp_RtnMsg = Tmp_RtnMsg + "第2欄位名稱必需為[排序項次],";

                    //新增[結果說明]欄位

                    Tmp_RESULT = "結果說明";

                    sheet1.Range[myfunc.GetExcelPos(14, 0)].Value=Tmp_RESULT;

                    //xls 欄位名稱有問題                                                    

                    if ((Tmp_CLS != "類別") || (Tmp_DITM != "排序項次") || (Tmp_NM != "名稱") || (Tmp_REPN != "拆移件號") || (Tmp_RESN != "拆移序號") ||

                          (Tmp_INPN != "安裝件號") || (Tmp_INSN != "安裝序號") || (!Tmp_RMK.Contains("備考")) ||

                          (Tmp_PLNC != "拆移PlanningCard") || (Tmp_REWK != "修理REWORK") || (Tmp_INSC != "安裝InstallationCard") || 

                          (Tmp_STLCT != "儲位") || (Tmp_NOTE != "備註") || (Tmp_FACWC != "拆移工廠")

                          )

                    {

                        Tmp_RtnMsg = Tmp_RtnMsg

                                                 +"敬請檢核";

                        //Tmp_Rtn_JSON = "{success: false,FName:" + myfunc.AA(FName) + ",Rtn_Msg:" + myfunc.AA(Tmp_RtnMsg) + "}";

                        MyCookie.Value=  HttpUtility.UrlEncode(Tmp_RtnMsg);

                        HttpContext.Current.Response.Cookies.Add(MyCookie);

                        HttpContext.Current.Response.End();

                        return ;

                    };

                    int Tmp_index;

                    Tmp_isOK = true;

                    //STEP2 檢核資料

                    for (int i = 0; i < RowsCount; i++)

                    {

                        Tmp_curpos = i + 1;

                     

                    //若資料不正確,則不寫入資料庫,只傳回檔案

                    if (Tmp_isOK == false)

                    {

                        Tmp_Str = "匯入檔案欄位值需修正!!<br>"

                                    + "請檢核如下檔案名稱(" + Tmp_FName + ")<br>";

                                    

                        MyCookie.Value = HttpUtility.UrlEncode(Tmp_Str);

                        // 若匯入資料有問題, 則不寫入資料庫 , 傳回結果檔案(*_結果.xlsx)

                        Tmp_FName = FName0 + "_結果.xlsx";

                        wk.SaveToStream(stream, FileFormat.Version2007);

                        HttpContext.Current.Response.AddHeader("Content-Disposition", "attachment;filename=\"" + HttpUtility.UrlEncode(Tmp_FName, System.Text.Encoding.UTF8) + "\"");

                        HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;

                        HttpContext.Current.Response.BinaryWrite(stream.ToArray());

                        HttpContext.Current.Response.Cookies.Add(MyCookie);

                        HttpContext.Current.Response.End();

                        return;

                    }