2022年11月21日 星期一

V120502B - 預覽列印 - 標籤列印 - 先預覽再列印

 目的: V120502B  - 預覽列印  - 標籤列印 - 先預覽再列印

處理說明: 1>$('#my_div1,#break_page1').printThis({
                          importCSS: false, // import parent page css
                          importStyle: false, // import style tags
                          loadCSS: "../JsFunction/print.css", 
                          // path to additional css file - use an array [] for multiple
                        });
                    2>
pub_print_area_Str1 = pub_print_area_Str1
            + "<div  style='width: 9cm; height: 5cm;border: 3px solid yellow;' id='my_div" + Tmp_uni + "'>"
            + "<table  id = 'my_tbl" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 6pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
            + "<tr ><th width=30% style='transform: scale(0.7);'>件號<br>(PART NO)</th><td width=70%>" + Tmp_PN + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>EO號碼<br>(EONO)</th><td width=70%>" + Tmp_EOCND + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>日期<br>(DATE)</th><td width=70%>" + Tmp_DT + "</td></tr>"
            + "<tr ><th width=30% style='transform: scale(0.7);'>數量<br>(QTY)</th><td width=70%>" + Tmp_QTY + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>工令單號<br>(SOR NO)</th><td width=70%>" + Tmp_SAPNO + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>品保<br>(QC)</th><td width=70%></td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>備註<br>(REMARK)</th><td width=70%>" + Tmp_RMK + "</td></tr>"
            + "</table>"
            + "</div>"







1>*.js
  1>>V120502.js
    //按鈕 : [列印包裝貼紙]
    var BtnAry = [
        {
            xtype: 'button', text: '列印包裝貼紙', id: 'PrnPackBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("列印包裝貼紙  click");
                    PrnPackBtn_click();
                }
            }
        },        


   2>>V120502B.js
//[包裝貼紙列印]子視窗.[確定]
function PrnPackBtn_click() {
    var sub_Columns = [
        { header: "工號", dataIndex: "SAPNO", width: 150, TMType: "string" },
        { header: "件號", dataIndex: "PN", width: 150, TMType: "string" },
        { header: "數量", dataIndex: "QTY", width: 50, TMType: "string" },
        { header: "EO", dataIndex: "EOCND", width: 150, TMType: "string" },
        { header: "備註", dataIndex: "RMK", width: 200, TMType: "string", },
    ]

    var sub_Fields = [
        { name: "SAPNO" },
        { name: "PN" },
        { name: "QTY" },
        { name: "EOCND" },
        { name: "RMK" },
    ];
    //包籤列印 sub_Grid
    var sub_Grid = Ext.create('TMGrid', {
        grid_id: 'sub_Grid',
        columns: sub_Columns,
        autoScroll: true,
        flex: 1,        
        store: Ext.create('gridstore', { model: sub_Fields }),
    });

    //將子視窗 store 不分頁,  PageToolBar.Visible 設為 false , 不分頁
    Ext.getCmp('sub_Grid_ptb').setVisible(false);
    //[印表機選項]-ComboBox的下拉表單欄位值
    var store_PRNLIST = Ext.create("Ext.data.Store", {
        fields: ["Name", "Value"],        
    });

    //store_PRNLIST.load();       
    //[標籤高度] -ComboBox的下拉表單欄位值
    var store_LABELH = Ext.create("Ext.data.Store", {
        fields: ["Name", "Value"],
        data: [
            { Name: "40", Value: 40 },
            { Name: "60", Value: 60 },
            { Name: "70", Value: 70 },
        ]
    });


    // [包裝標籤列印]鈕  - 子畫面欄位
    var mySub = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 0, layout: { type: 'vbox', align: 'stretch' }, padding: "5",
            style: { margin: '0px, 0px, 0px, 0px' },
            items: [
                {
                    xtype: 'panel',
                    id: 'sub_panel1',
                    //title: 'sub2_panel1',
                    layout: { type: 'hbox', align: 'stretch' },
                    flex: 5,
                    border: 1,
                    items: [
                        {  //工號
                            xtype: "fieldcontainer", fieldLabel: "工號", labelWidth: 60, layout: "hbox", flex: 5,
                            items: [
      { xtype: "textfield", id: "sub_SAPNO", name: "sub_SAPNO", width: 110, padding: "0 4 0 0", },
                            ]
                        },  // end of 工號                                                                   
                        {
                            xtype: "fieldcontainer", fieldLabel: "", labelWidth: 60, layout: "hbox", flex: 5,
                            items: [
                                {
                               xtype: "checkbox", id: "sub_DT", name: "sub_DT", width: 110, padding: "0 4 0 0",
                                    boxLabelAlign: "after", boxLabel: "不印日期",
                                },
                            ]
                        },         // end of 不印日期                                                           
                        {
                            xtype: 'button',
                            id: 'sub_btn_Add',
                            flex: 2,
                            border: 1,
                            text: '加入標籤列印',  //sub2
                            iconCls: 'icon-search',
                            handler: function () {
                                //alert("加入標籤列印 click");
                                call_Add_Prn();
                            }
                        },  // end of 加入標籤列印                                                                    
                    ]  //end of panel1.items
                },  //end of panel1                    
                {  // Grid
                    xtype: 'panel',
                    id: 'sub_panel2',
                    //title: 'sub2_panel2',
                    layout: { type: 'vbox', align: 'stretch' },
                    flex: 30,
                    border: 1,
                    items: [sub_Grid]
                }, //end of panel2
                {  // 標籤列印.[確定]鈕
                    xtype: 'panel',
                    id: 'sub_panel3',
                    //title: 'sub2_panel2',
                    layout: { type: 'hbox', align: 'stretch' },
                    flex: 5,
                    border: 1,
                    items: [                        
                        {
                            xtype: 'panel',
                            flex: 15,
                        },
                        {  //刪除記錄
                            xtype: 'button',
                            id: 'sub_btn_DEL',
                            flex: 4,
                            border: 1,
                            text: '刪除記錄',  //sub2
                            iconCls: 'icon-search',
                            handler: function () {
                                //alert("刪除記錄 click");
                                //Tmp_sub_store.remove(record1);
                                var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
                                //console.log("Tmp_sub_Grid:", Tmp_sub_Grid);
                                var cur_recs;
                                var cur_rec;
                                cur_recs = Tmp_sub_Grid.selModel.getSelection();
                                //console.log("cur_recs.length=", cur_recs.length);
                                if (cur_recs.length == 0) {
                                    mywarnalert("請先選擇要刪除的資料");
                                    return;
                                }
                                else {
                                    cur_rec = cur_recs[0];
                                    //console.log("cur_rec:", cur_rec);                                                                                
                                    //console.log("Tmp_sub_Grid.store:", Tmp_sub_Grid.store);
                                    Tmp_sub_Grid.store.remove(cur_rec);
                                    mysuccessalert("刪除資料完成 !!");
                                    return;
                                }
                            }  // enf of 刪錄.handler()
                        },  // end of 刪除記錄
                        {
                            xtype: 'button',
                            id: 'sub_btn_OK1',
                            flex: 4,
                            border: 1,
                            text: '列印預覽',  //sub2
                            iconCls: 'icon-search',
                            handler: function () {
                                //[包裝標籤列印]子視窗.確定1_列印預覽
                                mySub1_OkBtn2_click();
                            }
                        },  // end of 確定1- 網頁預覽
                        {
                            xtype: 'button',
                            id: 'sub_btn_Cancel',
                            flex: 3,
                            border: 1,
                            text: '取消',  //sub2
                            iconCls: 'icon-search',
                            handler: function () {
                                //alert("取消 click");
                                this.up("window").close();
                                this.up("window").destroy();
                            }
                        },  // end of 取消                  
                    ]  //end of panel3.items
                },  //end of panel3         
                {  // [預覽列印]鈕  - 放[預覽列印]的 Table_div 元件暫時  panel4
                    xtype: 'panel',
                    id: 'sub_panel4',
                    layout: { type: 'hbox', align: 'stretch', },
                    style: { margin: '0px, 0px, 0px, 0px', border: 1 },
                    flex: 5,
                    border: 1,
                    items: [],
                }, // end of  mySub
            ]
        }  //end of panel
    ] // end of  mySub
    //mysuccessalert("mySub_OkBtn_click ");
    var win = getMyWindow("包裝標籤列印", mySub, null);
    win.width = 800;
    win.height = 600;
    win.closeable = true;
    win.on('resize', function (me, width, height, eOpts) {
        var Tmp_panel1_Height = Ext.getCmp('sub_panel1').getHeight();
        var Tmp_panel3_Height = Ext.getCmp('sub_panel3').getHeight();
        var Tmp_rHeight = Ext.getCmp('mySubForm').getHeight() - Tmp_panel1_Height - Tmp_panel3_Height - 30;
        //console.log("Ext.getCmp('mySubForm').getHeight()=", Ext.getCmp('mySubForm').getHeight());
        //console.log("Tmp_panel1_Height=", Tmp_panel1_Height);
        //console.log("Tmp_panel3_Height=", Tmp_panel3_Height);
        //console.log("Tmp_rHeight=", Tmp_rHeight);
        //console.log("win.buttons=", win.buttons);
        Ext.getCmp('sub_panel2').setHeight(Tmp_rHeight);
    });
    //新增 ComboBox[本機印表機選項]
    win.on('show', function (me, eOpts) {
        console.log("win.onshow");
        var np = {};
        Ext.Ajax.request({
            method: "POST",
            url: '../../api/V120502API/Get_PRNLIST',
            params: np,
            async: false,
            success: function (response, opts) {

                //console.log("0 response=", response);
                //console.log("0 response.responseText=", response.responseText);            
                var Tmp_Obj = Ext.decode(response.responseText);
                //console.log("3  Ext.decode(response.responseText)=", Tmp_Obj);            
                //解碼成 Tmp_Obj : Array
                var Tmp_Name, Tmp_Value;
                var cur_rec = {};
                for (i = 0; i < Tmp_Obj.length; i++) {
                    Tmp_Name = Tmp_Obj[i]["Key"];
                    Tmp_Value = Tmp_Obj[i]["Value"];
                    cur_rec = { Name: Tmp_Name, Value: Tmp_Value };
                    //cur_rec = { Name: Tmp_Obj[i]["Key"], Value: Tmp_Obj[i]["Value"] };
                    //console.log("6  cur_rec= ", cur_rec);
                    store_PRNLIST.add(cur_rec);
                }

            }, // end of  success 
            failure: function (response, opts) {
                //console.log("Ext.Ajax failure !!");
                //console.log("response=", response);
                //var obj = Ext.decode(response.responseText);
                ////var obj = Ext.decode(opts.response.responseText);
                ////console.log("obj:", obj);
                ////var Tmp_Str = "資料刪除失敗 !!  (" + obj['RtnMsg'] + ")";
                //var Tmp_Str = obj['RtnMsg'];   //刪除失敗
                //mywarnalert(Tmp_Str);
            }
        });  // end of Ext.Ajax        

    }); // end of on show event



    win.show();

    var Tmp_Str = '';
    var Tmp_Grid = Ext.getCmp('grid_Single');
    var Tmp_store = Tmp_Grid.store;  //= gridstore        
    var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
    var Tmp_sub_store = Tmp_sub_Grid.store;  //= gridstore        
    var Tmp_PageCnt = Tmp_store.getCount();
    //console.log("分頁共 N  筆 , Tmp_PageCnt =", Tmp_PageCnt);
    var cur_rec, Tmp_AMMNO, Tmp_CHECK, Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK;
    var Tmp_OK = true;
    var np = {};
    var sub_Store_np = {};
    var Tmp_SelCnt = 0;
    //將主畫面勾選的資料, 加入子視窗.DBGrid
    for (i = 0; i < Tmp_PageCnt; i++) {
        //console.log("更新第 i  筆", i);
       //依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)
        cur_rec = Tmp_store.getAt(i);
        Tmp_AMMNO = cur_rec.data["AMMNO"];
        Tmp_CHECK = cur_rec.data["CHECK"];
        Tmp_SAPNO = cur_rec.data["SAPNO"];
        Tmp_PN = cur_rec.data["PN"];
        Tmp_QTY = cur_rec.data["QTY"];
        if (!checkisnull(cur_rec.data["ECNO"])) {
            Tmp_EOCND = cur_rec.data["ECNO"] + "+" + cur_rec.data["CNDPROCCODE"];
        }
        else {
            Tmp_EOCND = "";
        }
        Tmp_RMK = cur_rec.data["ACNO_"];
        //若主畫面資料有勾選,則加入 sub_store , sub_store 不分頁
        if (Tmp_CHECK) {
            sub_Store_np = {
                SAPNO: Tmp_SAPNO,
                PN: Tmp_PN,
                QTY: Tmp_QTY,
                EOCND: Tmp_EOCND,
                RMK: Tmp_RMK,
            }
            Tmp_sub_store.add(sub_Store_np);
        }
    }  // end of for i=         

    Tmp_SelCnt = Tmp_store.getCount();
    if (Tmp_SelCnt == 0) {
        mywarnalert("請先選擇要列印的資料 !!");
        return;
    }
}  // end of  function mySub2_OkBtn_click()

//預覽列印
function mySub1_OkBtn2_click() {
    //組合  print_div    
    //取得是否列印日期
 var cur_rec, Tmp_AMMNO, Tmp_CHECK, Tmp_SAPNO, Tmp_PN, Tmp_QTY, Tmp_EOCND, Tmp_RMK, Tmp_DT;
    var Tmp_sub_DT = Ext.getCmp('sub_DT').getValue();
    console.log("Tmp_sub_DT:", Tmp_sub_DT);
    if (Tmp_sub_DT == true)
        Tmp_DT = "";
    else
        Tmp_DT = DatetoStr(now, "Y/m/d");

    //取得 sub_store;
    var Tmp_sub_Grid = Ext.getCmp('sub_Grid');
    var Tmp_sub_store = Tmp_sub_Grid.store;  //= gridstore        
    var Tmp_PageCnt = Tmp_sub_store.getCount();
    if (Tmp_PageCnt == 0) {
        var Tmp_Str = "請先選擇要列印的資料!!"
        mywarnalert(Tmp_Str);
        return;
    }

    var pub_print_area_Str1 = "<div  id='print_area'   style='border: 5px solid green;'>";
    var Tmp_uni = "0";
    //my_div1
    for (i = 0; i < Tmp_PageCnt; i++) {
        //console.log("更新第 i  筆", i);
        //依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)
        cur_rec = Tmp_sub_store.getAt(i);
        Tmp_AMMNO = cur_rec.data["AMMNO"];
        Tmp_CHECK = cur_rec.data["CHECK"];
        Tmp_SAPNO = cur_rec.data["SAPNO"];
        if (checkisnull(Tmp_SAPNO))
            Tmp_SAPNO = "";
        Tmp_PN = cur_rec.data["PN"];
        Tmp_QTY = cur_rec.data["QTY"];
        Tmp_EOCND = cur_rec.data["EOCND"];        
        Tmp_RMK = cur_rec.data["RMK"];
        if (checkisnull(Tmp_RMK))
            Tmp_RMK = "";
        Tmp_uni = (i + 1).toString();

        pub_print_area_Str1 = pub_print_area_Str1
            + "<div  style='width: 9cm; height: 5cm;border: 3px solid yellow;' id='my_div" + Tmp_uni + "'>"
            + "<table  id = 'my_tbl" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 6pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
            + "<tr ><th width=30% style='transform: scale(0.7);'>件號<br>(PART NO)</th><td width=70%>" + Tmp_PN + "</td></tr>"
        + "<tr  ><th width=30% style='transform: scale(0.7);'>EO號碼<br>(EONO)</th><td width=70%>" + Tmp_EOCND + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>日期<br>(DATE)</th><td width=70%>" + Tmp_DT + "</td></tr>"
            + "<tr ><th width=30% style='transform: scale(0.7);'>數量<br>(QTY)</th><td width=70%>" + Tmp_QTY + "</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.7);'>工令單號<br>(SOR NO)</th><td width=70%>" + Tmp_SAPNO + "</td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>品保<br>(QC)</th><td width=70%></td></tr>"
            + "<tr  ><th width=30% style='transform: scale(0.7);'>備註<br>(REMARK)</th><td width=70%>" + Tmp_RMK + "</td></tr>"
            + "</table>"
            + "</div>"
            //分頁        
            + "<div class='display' id='break_page" + Tmp_uni + "' style='break-after:page'></div>";
    };  // for (i = 0; i < Tmp_PageCnt; i++) {

    //將 [預覽列印]的 Table_div String 加入 子視窗.panel
    //將上次的列印資料 remove()
    $("#print_area").remove();
    var Tmp_sub_panel4 = $('#sub_panel4');
    Tmp_sub_panel4.append(pub_print_area_Str1);
    var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/print.css' " + " media='print'>";
    $('head').append(Tmp_Str);
    console.log("0 $('#sub_panel4').width:", $("#sub_panel4").width());
    console.log("0 $('#sub_panel4').heigh:", $("#sub_panel4").height());     

        //var Tmp_prn_div_Str = "'";
    var Tmp_prn_div_Str = "";
        for (i = 0; i < Tmp_PageCnt; i++) {
            Tmp_uni = (i + 1).toString();
            Tmp_prn_div_Str = Tmp_prn_div_Str + "#my_div" + Tmp_uni;
            if (i != (Tmp_PageCnt - 1))
                Tmp_prn_div_Str = Tmp_prn_div_Str + ",#break_page" + Tmp_uni + ",";
        }
        //if (Tmp_prn_div_Str.length > 0)
            //Tmp_prn_div_Str = Tmp_prn_div_Str + "'";
    console.log("Tmp_prn_div_Str:", Tmp_prn_div_Str);
        //預覽列印
        //$('#my_div1,#break_page2,#my_div2,#break_page3,#my_div3').printThis({
        $(Tmp_prn_div_Str).printThis({
            importCSS: false, // import parent page css  
            importStyle: false, // import style tags        
            loadCSS: "../JsFunction/print.css", // path to additional css file - use an array [] for multiple                
        });

    }

2022年11月6日 星期日

V120502A - jQuery - printThis() - 分頁處理

目的:   jQuery - printThis()  - 預覽列印 - 分頁處理 

處理說明: 0>預覽列印處理:
                       $('#my_div2,#break_page,#my_div1').printThis({
                            //***    inportCSS 設成 false , 才可以分頁   ***//
                            importCSS: false, // import parent page css  
                  1> 分頁處理:
                       "<div class='display' id='break_page' style='break-after:page'></div>"
                  2> 區域長寬設定:
                      "<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;' id='my_div1'>"    
                  3> Table的線條設定 - 行高, 字型, 線條
                         "<table  id = 'my_tbl1' style='line-height: 6pt; font-size: 3pt;
                         border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
                  4>顯示資料的縮放處理 -
                          transform: scale(0.6);

// 列印模式設定 @media print { *****css here***** } 
//列印頁面設定 @page{ ****setting here****}






1>*.js

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

    //my_div1
    +"<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;' id='my_div1'>"    
    + "<table  id = 'my_tbl1' style='line-height: 6pt; font-size: 3pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
    + "<tr ><th width=30% style='transform: scale(0.6);'>件號1<br>(PART NO)</th><td width=70%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>EO號碼<br>(EONO)</th><td width=70%>GM1381+A15</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>日期<br>(DATE)</th><td width=70%>2022/11/03</td></tr>"
    + "<tr ><th width=30% style='transform: scale(0.6);'>數量<br>(QTY)</th><td width=70%>2</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>工令單號<br>(SOR NO)</th><td width=70%>23169622</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>品保<br>(QC)</th><td width=70%></td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>備註<br>(REMARK)</th><td width=70%>A052</td></tr>"
    + "</table>"
    + "</div>"
    //分頁
    //+ "<div class='display' id='break_page' style='page-break-after:always'></div>"
    + "<div class='display' id='break_page' style='break-after:page'></div>"
    //my_div2
    + "<div  style='width: 8cm; height: 3.5cm;border: 3px solid yellow;'  id='my_div2'>"
    + "<table  id = 'my_tbl2' style='line-height: 6pt; font-size: 3pt;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue' > "
    + "<tr ><th width=30% style='transform: scale(0.6);'>件號2<br>(PART NO)</th><td width=70%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>EO號碼<br>(EONO)</th><td width=70%>GM1381+A15</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>日期<br>(DATE)</th><td width=70%>2022/11/03</td></tr>"
    + "<tr ><th width=30% style='transform: scale(0.6);'>數量<br>(QTY)</th><td width=70%>2</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>工令單號<br>(SOR NO)</th><td width=70%>23169622</td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>品保<br>(QC)</th><td width=70%></td></tr>"
    + "<tr  ><th width=30% style='transform: scale(0.6);'>備註<br>(REMARK)</th><td width=70%>A052</td></tr>"
    + "</table>"
    + "</div>"
    + "</div>"    
    ;



// [預覽列印]  - 
function sub_PrnTable_OkBtn3_click() {          
    //分頁列印 2 區域    
    $('#my_div2, #break_page, #my_div1').printThis({        
        //***    importCSS 設成 false , 才可以分頁   ***//
        importCSS: false, // import parent page css
        importStyle: false, // import style tags
        printContainer: true, // grab outer container as well as the contents of the selector
        //***    loadCSS 設成 "../JsFunction/print.css" , 第二頁Top 0cm ,   ***//
        //loadCSS: "../JsFunction/print.css", // path to additional css file - use an array [] for multiple        
        //***    loadCSS 設成 "" , 第二頁Top 會有 2cm ,  ***//
        loadCSS: "", // path to additional css file - use an array [] for multiple        
    });    
}

2>@media print   @page
@media print 
{ // 隱藏不要被列印的元素 .NotPrint { display:none; } 
   // 要被列印的元素 .PrintUnit { 
       // 元素前要被分頁 page-break-before:always; 
       // 元素本身不能被分頁 page-break-inside:avoid; }
}


@page
{ size: A4 portrait; //a4尺寸 直式 
   margin: 1cm; //邊距1公分 
   orphans:4; //頁面最後一段段落行數,預設值為2 widows:2; 
   //頁面第一段段落行數,預設值為2 
}

PS @page相關說明網址如下:
https://developer.mozilla.org/en-US/docs/Web/CSS/@page

2022年11月3日 星期四

網頁單位: px, pt ,cm ,in 說明 - font-size

目的: 了解網頁單位: px, pt ,cm ,in 

處理說明: 

1>px (1pixel = 1/96*DPI) -像素,螢幕的計量單位, 用於網頁設計,螢幕單位;
    一個100px寬度大小的圖片,在800×600解析度下,要占螢幕寬度的1/8,
    但在1024×768下,則只占約1/10

2>pt (1point = 1/72in)-印刷的計量單位,
    Word設定字體12pt, 無論解析度如何設定, 列印出來的大小都一樣, 即“絕對長度”

     Ex: 欄位高度 0.8cm=0.8/2.54 in  --> *72=22.6pt

3>cm
4>PPI(DPI):pixel(dot)per inch,每英寸的像素(點)數,表示了“清晰度”,“精度” , 
                            電腦預設值為 96 DPI。螢幕解析度改變(1024*768, 800*600), DPI 即會改變

(附公式:px /DPI= pt / 72)

在網頁設計中,面向用戶的螢幕的基本單位是px

大部分大型網站,包括Adobe和Microsoft,都是使用px作為單位,

而且在html中,默認的單位就是px,是不是也暗示著px是網頁設計的“內定單位”?

但是在word中,使用pt就相當方便。因為使用Word和Photoshop的主要目的都不是為了螢幕流覽,而是輸出列印。


1>>Word中普通的文檔都用“宋體 9pt”,標題用“黑體 16pt”等等,無論電腦怎麼設置,列印出來永遠就是這麼大。


2>>圖片(100px*100px)

一個100px寬度大小的圖片,在800×600解析度下,要占螢幕寬度的1/8,

但在1024×768下,則只占約1/10。





V120502A - Table 的邊框設定 - 放大縮小設定 - 預覽列印設定

 目的: Table 的邊框設定 - 利用 border=1 和  style=' border:1 red solid;' 的差異

處理說明:  1>Cell無邊框
                         <table style = 'border: 1px solid blue; ' id = 'my_tbl' >
                            style設定的border只有針對目前的邊框做設定
                            並不會針對 table.cell設定邊框

                   2>Cell 有邊框
<table id = 'my_tbl' border=2px borderstyle='solid' bordercolor='#0000ff' width=100% height=100% >
                             table border設定, 也針對 cell 的邊框




1>*.js

var pub_print_area_Str = "<div  id='print_area'   style = 'border: 1px solid red;' width=100%  height=100% >"
    + "<table id = 'my_tbl'  style = 'border: 1px solid blue; '  > "
    //+ "<table  id = 'my_tbl'  border=2px  borderstyle='solid'   bordercolor='#0000ff'  width=100% height=100% > "
    + "<tr  id='my_tr1'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"
    + "<tr  id='my_tr2'><th>EO號碼<br>(EONO)</th><td>GM1381+A15</td></tr>"
    + "<tr  id='my_tr3'><th>日期<br>(EONO)</th><td>2022/11/03</td></tr>"
    + "<tr  id='my_tr4'><th>數量<br>(EONO)</th><td>2</td></tr>"
    + "<tr  id='my_tr5'><th>工令單號<br>(SOR NO)</th><td>23169622</td></tr>"
    + "<tr  id='my_tr6'><th>品保<br>(QC)</th><td></td></tr>"
    + "<tr  id='my_tr6'><th>備註<br>(REMARK)</th><td>A052</td></tr>"
    + "</table>"
    + "</div>";


    var Tmp_sub_panel1 = $('#sub_panel1');
    Tmp_sub_panel1.append(pub_print_area_Str);
    

3>Table 邊框的設定


3.1>>*.js

var pub_print_area_Str = "<div  id='print_area'   class='break' style='width: 10cm; height: 6cm;border: 5px solid green;transform: scale(1);'>"
    + "<table  id = 'my_tbl' style='line-height: 14px; font-size: 12px;border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='blue'  width=100% height=100% > "
    + "<tr ><th width=20% style='transform: scale(1);'>件號1<br>(PART NO)</th><td width=80%>R=8-84-766-21-1</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>EO號碼<br>(EONO)</th><td width=80%>GM1381+A15</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>日期<br>(DATE)</th><td width=80%>2022/11/03</td></tr>"
    + "<tr ><th width=20% style='transform: scale(0.75);'>數量<br>(QTY)</th><td width=80%>2</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>工令單號<br>(SOR NO)</th><td width=80%>23169622</td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>品保<br>(QC)</th><td width=80%></td></tr>"
    + "<tr  ><th width=20% style='transform: scale(0.75);'>備註<br>(REMARK)</th><td width=80%>A052</td></tr>"
    + "</table>"
    + "</div>";






2022年11月2日 星期三

V120502A - jQuery - 屬性設定及 CSS

 目的: jQuery 屬性設定及 CSS

處理方法: 1>取得  jQuery屬性:  $("#my_tbl").attr('style')
                       var Tmp_tbl = $("#my_tbl");
                        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));
                  2>設定 jQuery屬性:   $("#my_tbl").attr('style') 
                     Tmp_tbl.attr('style','border: 5px solid red;');
                  3>取得輸入元件的欄位值
// HTML <input type="text"> // 設定欄位值 $('input').val('Hello World!'); // 設定後的結果 <input type="text" value="Hello World!">
4>設定 CSS 屬性值
                     例如,替所有段落的字體設為紅色,背景設為藍色:
                      $('p').css({ color: 'red', 'background-color': 'blue' });
      


1>*.js
// [確定]  - 於 sub_panel1 建立 Table
function mySub1_OkBtn1_click() {
    var Tmp_Str = "<div  id='print_area'   style = 'border: 1px solid red; width=100%;' >"
        + "<table style = 'border: 1px solid black; width=100%;'  id = 'my_tbl' > "        
        + "<tr style='border: 6px solid blue;'><th>件號<br>(PART NO)</th><td>R=8-84-766-21-1</td></tr>"
        + "<tr style='border: 6px solid blue;'><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("0 Tmp_tbl:", Tmp_tbl);        
        console.log("0 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));
        console.log("0 $('#my_tbl').attr('style'):", $("#my_tbl").attr("style"));
        Tmp_tbl.attr('style','border: 5px solid red;');
    };    
    var Tmp_sub_panel1 = $('#sub_panel1');
    Tmp_sub_panel1.append(Tmp_Str);
}


// [設定  property]  - 設定  Table 的 style  - 改變顏色為 藍色
function sub_PrnTable_OkBtn2_click() {
    var Tmp_tbl = $("#my_tbl");
    if (!checkisnull(Tmp_tbl)) {
        console.log("5 Tmp_tbl is captched");
        console.log("5 Tmp_tbl:", Tmp_tbl);        
        console.log("5 Tmp_tbl.attr('style'):", Tmp_tbl.attr('style'));        
        Tmp_tbl.attr('style', 'border: 2px solid blue;');
        console.log("5 $('#my_tbl').attr('style'): blue", $("#my_tbl").attr("style"));
    }
}


jQuery 屬性與樣式 (Attributes & CSS)

我想一般對於 JavaScript 大部分的操作都用在變動 HTML DOM 元素的屬性跟樣式,如果你有這個經驗,就會知道在設定時會有許多複雜及麻煩的問題,比如說舊 IE 它 setAttribute 不吃 name 屬性;又像在指定 class 屬性時,名稱不能用 class 而要用 className 等問題。令人開心的,jQuery 已經幫你處理掉中間這些繁雜過程可能遇到的問題了!

用 jQuery 時,你只需要記得原本的 HTML 和 CSS 是怎樣寫就行。

jQuery 對於 HTML Tag 屬性的操作 (Attributes)

取得選取到的元素之屬性值:

.attr(attributeName)

例如,取得第一個連結的 title 值:

$('a').attr('title');

替選取到的元素設定屬性值:

.attr(attributeName, value)

例如,替所有連結的 title 屬性設為 Enjoy jQuery:

$('a').attr('title', 'Enjoy jQuery');

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值:

.attr(attributes)

例如,同時改變 alt 和 title 屬性:

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

移除元素屬性也很簡單:

.removeAttr(attributeName)

例如,移除所有連結的 title 屬性:

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

jQuery 對 class 這個屬性有特別的處理

對於 class,jQuery 另外提供個別的函式來作 class 增刪的動作,這是為了可以方便疊加與移除特定的 class。

增加 class:

.addClass(className)

例如,幫所有的段落加入 selected 和 highlight 類別:

$('p').addClass('selected highlight');
用空白隔開多個 class。

移除 class:

.removeClass(className)

例如,移除 id 為 wrapper 的元素其 blue 這個類別:

$('#wrapper').removeClass('blue');

Value - Getter/Setter

val,一個很常用到的方法,用來取得和設定表單元素的 value 值:

.val() // get
.val(value) // set

例如,取得表單元素的值:

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如,設定表單元素的值:

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

jQuery 對於樣式的操作 (CSS)

傳統 JavaScript 在處理 CSS 的問題上簡直頭大,設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor;對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單,就直接用 key/value 成對的一組屬性來設定,我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式:

.css(propertyName)

例如,取得第一個段落的字體顏色:

$('p').css('color'); 

替所有匹配到元素設定一種樣式:

.css(propertyName, value)

例如,替所有段落的透明度設為半透明:

$('p').css('opacity', '0.5');
// 是的,設 opacity 就可以,jQuery 已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式:

.css(properties)

例如,替所有段落的字體設為紅色,背景設為藍色:

$('p').css({
  color: 'red',
  'background-color': 'blue'
});
若屬性中包含 -,記得加上引號,沒有的話則可有可無。

元素的位置及寬高 - 常用的屬性獨立出來

.width() // 取得元素寬度
.width(value) // 設定元素寬度
.height() // 取得元素高度
.height(value) // 設定元素高度

.width() .height() 抓到的值是元素內容寬、高度,不包含 padding, border, margin。

例如,取得第一個匹配到的段落元素高度 (px) (無參數)

$('p').height();

例如,設定每個匹配到的段落元素其高度設為 100px (沒指定單位時預設為 px) (有參數)

$('p').height(100);

取得元素相對於當前視窗左上角的位置偏移量:

.offset()
// 返回值 Object{top, left}
var offset = $('p:last').offset();
console.log(offset.left)
console.log(offset.top)

一般在傳統 JavaScript 我們會用 offsetLeft 及 offsetTop 來取得元素在頁面上的座標,不過 IE 與 FF 瀏覽器解讀這兩個屬性是不一樣的,IE 會解讀成目標元素跟父元素的 left-top 距離;FF 則是相對於頁面上的 left-top,所以在 IE 下我們一般都需要利用往父元素跑迴圈加總 offsetLeft 來取得元素在頁面上的座標值。不過,在 jQuery 中我們統一用 offset() 就可以囉!

看過上述 jQuery 對於屬性及樣式的操作,是不是簡化了我們許多不必要的煩惱,讓我們可以將精力拉回純 HTML 與 CSS 的思緒上面呢!

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 定義不同