V120202B - 了解畫面 DOM的結構 – sub_panel2 -append - $

 目的: V120202B- 了解畫面 DOM的結構 – sub_panel2

一.顯示[畫面元件]對應[DOM] -操作說明:

                    1>console.log("sub_panel2:", sub_panel2);

                    2>由[console]分頁 ,  展開 [sub_panel2] 欄位值, 點 div sub_panel2 , 跳至 [Elements]分頁

                    3>[Elements]分頁點選div[sub_panel2_header], 畫面顯示該 div

                    

二. $().append處理說明:  0> Ext 元件 panel , 實際上在 DOM 的結構分成 2 div(header, body)

                                          1>$("#sub_panel2").append("div  id=my_div_barcode  xxxx") , 

                                              會加在 body 下方看不到

1>*.js

 {

    xtype: 'button', text: '顯示  QrCode ', id: 'sub_QrCode_Btn',

    listeners: {

                click: function () {

                    //genQRcodeDiv("sub_panel2", "5325YET064602&test&123eee");                            

                    var Tmp_barcode_text = "5325YET064602&test&123eee";

                    var Tmp_QrcodeStr= "<div id='my_div_barcode'  style='width: 150px; height: 150px;margin-top: 5pt;margin-left: 30pt; font-size: 6pt;' >"

                        + genQRcodeStr(Tmp_barcode_text, 100, 100, true)

                        + "</div>"                    

                    //$("#print_area").remove();                    

                    //var Tmp_sub_panel2 = $("#sub_panel2");  --> 會看不到 條碼

                    var Tmp_sub_panel2 = $("#sub_panel2-innerCt"); //20230703

                    Tmp_sub_panel2.append(Tmp_QrcodeStr);

                    console.log("0 Tmp_sub_panel2:", Tmp_sub_panel2);

                    var pub_print_area_Str1 = "<div  id='print_area'   style='border: 5px solid green;'>";

                    Tmp_sub_panel2.append(pub_print_area_Str1);

                    console.log("1 Tmp_sub_panel2:", Tmp_sub_panel2);                    

                },

            }

        },

V120502B 1>Qrcode:二維條碼 2>Barcode:一維條碼 3>預覽列印:printThis.js 4>套件載入: centerTab.cshtml

目的: V120502B - 二維條碼列印 - 預覽列印 - printThis.js 

處理說明:   1>二維條碼套件 : qrcode.js  
                     2>一維條碼套件: JsBarcode.code39.min.js
                     3>預覽列印: printThis.js

                     4>套件放在 ..\Scripts\目錄 : 如上3檔案屬於套件的 *.js  

                     5>centerTab.cshtml : 程式啟動時 ,必需載入如上套件檔案

1>二維條碼 :  qrcode.js 

2>一維條碼 :  JsBarcode.code39.min

3>套件放在 ..\Scripts\目錄

4>centerTab.cshtml : 程式啟動時 ,必需載入如上套件檔案

     <!-- ***  barcode 相關 script  *** -->

    <script type="text/javascript" src="~/Scripts/tlsbase.js?v=@date"></script>

    <script type="text/javascript" src="~/Scripts/qrcode.js?v=@date"></script>

    <script type="text/javascript" src="~/Scripts/JsBarcode.code39.min.js?v=@date"></script>

    <script type="text/javascript" src="~/Scripts/printThis.js?v=@date"></script>

V120202E –[領料明細查詢] – 資料未正常顯示 , null.toString() --> Error - nulltoStr(rec["ITMNO]) - 將欄位值轉為 str

 目的: V120202E –[領料明細查詢] – 資料未正常顯示 , null.toString() à Error

處理說明: 1>  null.toString() à Error , rec["MATNR"].toString() , 
                           若rec["MATNR"]為 null, 則會Error
                  2> 先利用 rec2Str(rec) , 將 rec 的欄位值為 null , 轉成 ""

                  3>function DatetoStr(par_date) {   //若日期為空白,則傳回 ""

                       if (checkisnull(par_date)) {

                           return "";

                         }

                     var Tmp_DateStr;

                      Tmp_DateStr = Ext.Date.format(new Date(par_date), 'Y/m/d');

                      return Tmp_DateStr;

                     }

 

1>*.js

 //開啟 store;

    Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {

        console.log("records:", records);

        if (successful) {

            //設定畫面欄位值  -             

            np["sub_APNO"] = par_APNO;

            var Tmp_url = "../../api/V120202FAPI/get_main_data";

            //取得挑選資料的 dt2JSON 字串

            var rtn_Str = getUrlStr(Tmp_url, np, "設定畫面資料");

            console.log("rtn_Str:", rtn_Str);

            if (checkRtnOK(rtn_Str)) {

                var recs = Ext.decode(rtn_Str);

                console.log("recs:", recs);

                var rec = recs[0];

                console.log("0 rec:", rec);

                rec2Str(rec);

                //for (key in rec) {                    

                //    var value = rec[key];                                     

                //    if (checkisnull(value)) {                        

                //        rec[key] = '';

                //    };                    

                //};

                console.log("1 rec:", rec);

                var Tmp_APNO, Tmp_MATNR, Tmp_APER, Tmp_APDT, Tmp_MPKUPP, Tmp_MPKUPDT;

                var Tmp_APER_, Tmp_MPKUPP_;

                Tmp_APNO = rec["APNO"].toString();

                Tmp_MATNR = rec["MATNR"].toString();

                Tmp_APER = rec["APER"].toString();

                Tmp_APER_ = rec["APER_"].toString();

                Tmp_APDT = DatetoStr(rec["APDT"], "Y/m/d"); 

                Tmp_MPKUPP = rec["MPKUPP"].toString();

                Tmp_MPKUPP_ = rec["MPKUPP_"].toString();

                Tmp_MPKUPDT = DatetoStr(rec["MPKUPDT"], "Y/m/d"); 

                Ext.getCmp('sub_APNO').setValue(Tmp_APNO);

                Ext.getCmp('sub_MATNR').setValue(Tmp_MATNR);

                Ext.getCmp('sub_APER').setValue(Tmp_APER);

                Ext.getCmp('sub_APER_').setValue(Tmp_APER_);

                Ext.getCmp('sub_APDT').setValue(Tmp_APDT);

                Ext.getCmp('sub_MPKUPP').setValue(Tmp_MPKUPP);

                Ext.getCmp('sub_MPKUPP_').setValue(Tmp_MPKUPP_);

                Ext.getCmp('sub_MPKUPDT').setValue(Tmp_MPKUPDT);

            }// end of  if (checkRtnOK(rtn_Str)) 

        }  //end of  if(sucessful)

    }

    );  //end of on load

function DatetoStr(par_date) {

    //若日期為空白,則傳回 "" , 否則會傳回 , 0NaNNan

    if (checkisnull(par_date)) {

        return "";

    }

    var Tmp_DateStr;

    Tmp_DateStr = Ext.Date.format(new Date(par_date), 'Y/m/d');

    return Tmp_DateStr;

}

V20302 - 判斷 cur_rec={} 為空 Object

 目的: V20302 - 判斷  cur_rec={} 為空 Object 

處理方法:  1>var  cur_rec={} , cur_rec.keys(cur_rec --> [] 傳回 array 

                       if (cur_rec.keys(cur_rec).length==0){}

                   2>JSON.

V120202E 清除 store 所有資料 - removeAll - clearData

 目的: V120202E 清除 store 所有資料

處理說明: 1>  var Tmp_gridstore = Ext.getCmp("sub_Grid").store;
                                          Tmp_gridstore.clearData();
                                     Tmp_gridstore.removeAll();

1>*.js

    Tmp_Str = Tmp_Str
                    + "申請單號(" + cur_rec.data["APNO"].toString() + ") <br> "
                    + "退庫歸儲完成!!<br>";
                Ext.Msg.alert('確認', Tmp_Str, ok2go);
                function ok2go(id) {          
                    console.log("id:", id);
                    if (id == 'ok') {
                        //mysuccessalert("退庫歸儲完成 !!");
                        //清空 [點料人員][退庫原因] & grid 資料
                        Ext.getCmp("sub_BKMG").setValue("");
                        Ext.getCmp("sub_APNO").setValue("");
                        Ext.getCmp("sub_CAUSE_REMARK").setValue("");
                        var Tmp_gridstore = Ext.getCmp("sub_Grid").store;
                        Tmp_gridstore.clearData();
                        Tmp_gridstore.removeAll();
                    }// end of if(id=='yes')
                } //end of callbackfunc

V120202E – 確定後,才繼續往下執行 – Ext.Msg.alert –Ext.Msg.confirm - [退庫歸儲]鈕 , 詢問

 目的: V120202E – 確定後,才繼續往下執行 – Ext.Msg.alert –Ext.Msg.confirm  - [退庫歸儲]鈕

處理說明: 1> Ext.Msg.confirm('是&否', me.delMessage, yes2go);
                        function yes2go(id) 

                        { if (id == 'yes') { }}

                 2> Ext.Msg.alert('確定', me.delMessage, ok2go);
                        function ok2go(id) 

                        { if (id == 'ok') { }}

1>*.js

- Ext.Msg.alert  - ok

             Tmp_Str = Tmp_Str

                    + "申請單號(" + cur_rec.data["APNO"].toString() + ") <br> "

                    + "退庫歸儲完成!!<br>";

                Ext.Msg.alert('確認', Tmp_Str, ok2go);

                function ok2go(id) {          

                    console.log("id:", id);

                    if (id == 'ok') {

                        //mysuccessalert("退庫歸儲完成 !!");

                        //清空 [點料人員][退庫原因] & grid 資料

                        Ext.getCmp("sub_BKMG").setValue("");

                        Ext.getCmp("sub_APNO").setValue("");

                        Ext.getCmp("sub_CAUSE_REMARK").setValue("");

                        var Tmp_gridstore = Ext.getCmp("sub_Grid").store;

                        Tmp_gridstore.clearData();

                        Tmp_gridstore.removeAll();

                    }// end of if(id=='yes')

                } //end of callbackfunc

            }

-Ext.Msg.confirm - Yes & No

            me.delMessage = "確定刪除勾選的資料嗎?";

            Ext.Msg.confirm('提醒', me.delMessage, callBackFunc);

            function callBackFunc(id) {

                if (id == 'yes') {

                    console.log("cur_recs.length:", cur_recs.length);

                    var gridstore = Ext.getCmp('grid_Single').store;                        

                    for (let i = 0; i <= cur_recs.length - 1; i++) {

                        console.log("i:", i);                        

                        Ext.getCmp('grid_Single').getSelectionModel().select(cur_recs[i]); //grid select指向所選的資料

                        cur_rec = Ext.getCmp('grid_Single').getSelectionModel().getSelection();

                        console.log("cur_rec: ", cur_rec);                        

                        if (Ext.getCmp('btn_del').afterDel() == false) {

                            return;

                        }                                                

                    } //  end of for (let i=0,)

                    //資料庫均刪除完成後, 才由 gridstore 移除資料

                    for (let i = 0; i <= cur_recs.length - 1; i++) {

                        gridstore.remove(cur_recs[i]); //畫面上隱藏刪除列                     

                    } //  end of for (let i=0,)

                    Ext.getCmp('grid_Single').getView().refresh();

                    buttonModel.modelType = 0;

                }  // end    if (id == 'yes')             

            }  // end of callbackfunc

V120202E - 版面配置 - border – [north,center] – [east,center] - region

 目的: V120202E 版面配置 - border – [north,center] – [east,center]

處理說明: 1>第1層 : [north,center] , north: 必需設 height
                  2>第2層 : [east,center] , east: 必需設 width

1>*.js

var sub_V120202E_Flds = [

        {

            type: 'panel', bodyStyle: "background-color:transparent;", border: 5, padding: "1",            

            layout: 'border',            

            items: [                

                { // panel1: 過濾條件 : north , 必需設 height

                    xtype: 'panel',

                    id: 'sub_panel1',

                    //title: 'sub_panel1',

                    region: 'north',

                    height: 90,

                    layout:  'border',                        

                    items: [

                        { // panel11 : 退庫人員 , center

                            xtype: 'panel',

                            id: 'sub_panel11',

                            region: 'center',

                            layout: {

                                type: 'vbox',

                                //align: 'stretch'

                            },

                            items: [

                                {

                                  xtype: "fieldcontainer", fieldLabel: "退庫人員", labelWidth: 70, flex: 5, border: 2,

                                    layout: {

                                        type: 'hbox',

                                        //align: 'stretch' 

                                    },

                                    items: [

     { id: "sub_COMPER", name: "sub_COMPER", xtype: "textfield", width: 120, padding: "0 4 0 0", },

     { id: "sub_COMPER_", name: "sub_COMPER_", xtype: "textfield", width: 80, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },

                                        {:                                        },

                                        {:                                        },

                                    ]

                                },  // end of 退庫人員

                                {:                 },  // end of 點料人員

                                {:                },                                

                            ]

                        },  //end of sub_panel11 , 退庫人員/點料人員

                        {  // panel12 : 退庫說明 , east , 必需設 width

                            xtype: 'panel',

                            id: 'sub_panel12',

                            //title: 'sub_panel12',

                            //flex: 4,

                            region: 'east',

                            width: 350,

                            layout: {

                                type: 'fit',

                                //align: 'stretch'

                            },

                            items: [

                                {

                                  xtype: "fieldcontainer", fieldLabel: "退庫說明", labelWidth: 60, flex: 5, border: 0,

                                    layout: {

                                        type: 'fit',

                                        //align: 'stretch' 

                                    },

                                    items: [

                                        { id: "sub_CAUSE_REMDK", name: "sub_CAUSE_REMDK", xtype: "textareafield", width: 120, padding: "0 4 0 0", },

                                    ]

                                },  //退庫說明

                            ]

                        },  // end of sub_panel12 , 退庫說明

                    ],

                },//end of sub_panel1

                {  // panel2 : grid , center

                    xtype: 'panel',

                    id: 'sub_panel2',                    

                    region: 'center',        

                    layout: 'fit',

                    flex: 5,

                    border: 1,

                    items: [sub_Grid]

                },                

] // end of   layout: "vbox", padding: "5", items: [

}  //end of  sub_ShowPN_Flds , items[{

    ]      //end of  var sub_ShowPN_Flds