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

                },

            }

        },