jQuery - printThis - jQuery元件 vs Ext.getCmp 元件的比較 - $("#sub_panel" )取得的元件,才可append

目的: 預覽資料後列印 - jQuery printThis

處理說明: 1>由 jQuery 取得 printArea 元件

                  2>利用 jQuery元件的 printThis() 函式, 預覽列印結果

                  3>jQuery元件和 Ext.getCmp() 元件的不同(兩種函式庫的Object  property 定義不同)

1>*.js
 var sub_PrnTableFlds = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",
            flex: 100,
            //layout: { type: 'vbox', align: 'stretch' }, 
            layout: 'border',
            items: [
                {  //sub_panel1 : table panel
                    xtype: 'panel',
                    id: 'sub_panel1',
                    //region: 'north',
                    border: true,
                    layout: { type: 'hbox', align: 'stretch' },                    
                    items: [],
                },  //end of panel1                                                    
            ] // end of   layout: "vbox", padding: "5", items: [
        }  //end of  sub_PrnTableFlds , items[{
    ]      //end of  sub_PrnTableFlds , items[    

 var win = getMyWindow("PrnTable測試", sub_PrnTableFlds, sub_PrnTableFlds_Btns);

    win.setWidth(600);

    win.setHeight(400);

    win.show();

    console.log("step6");

} // end of   function LendBtn_click() {

// 標籤列印 - 於 sub_panrl1 建立 Table

function mySub1_OkBtn2_click() {

    var Tmp_Str = "<div  id='print_area'   style = 'border: 1px solid black; width=100%;' >"

        + "<table style = 'border: 1px solid black; width=100%;'  id = 'my_tbl' > "        

        + "<tr style='border: 1px solid black;'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"

        + "<tr><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"

        + "</table>"

        +"</div>";

    //var Tmp_tbl = Ext.getCmp("my_tbl");

    var Tmp_tbl = $("#my_tbl");

    if (!checkisnull(Tmp_tbl)) {

        console.log("Tmp_tbl is captched");

        console.log("Tmp_tbl.style:",Tmp_tbl.style);

        Tmp_tbl.style = "{border: 2px solid red;}";

    }

    else 

        console.log("Tmp_tbl is null");

    //var Tmp_area = Ext.getCmp("print_area");

    var Tmp_area = $("#print_area");

    if (!checkisnull(Tmp_area)) {

        console.log("Tmp_area is captched");

        console.log("Tmp_area.style:", Tmp_area.style);

        Tmp_area.style = "{border: 2px solid red;}";

    }

    else

        console.log("Tmp_area is null");

    var Tmp_sub_panel1 = $('#sub_panel1');

    //var Tmp_sub_panel1 = Ext.getCmp('sub_panel1');

    if (!checkisnull(Tmp_sub_panel1)) {

        console.log("Tmp_sub_panel1 is not null");

        console.log("Tmp_sub_panel1", Tmp_sub_panel1);

    }

    Tmp_sub_panel1.append(Tmp_Str);

    //Tmp_area.printThis({});

    $('#print_area').printThis({ });    

    //$('#sub_panel1').remove();

}

2>Ext.getCmp("sub_panel1") 取得的元件,並沒有 append(), appendTo(), printThis() 函式

    只有 $("#sub_panel1");  jQuery取得的元件才有 append(), appendTo(), printThis()函式

    --> 即  jQuery $("#sub_panel1") 和 Ext.getCmp("sub_panel1") 取得的 Object 定義不同