V80403 – 設定 TextField 的欄位名稱 – 字體大小 – 字體顏色 - font-size

 目的: V80403 – 設定 TextField 的欄位名稱 – 字體大小 – 字體顏色

處理說明: 1> //取得 text欄位(GPASS1).up.fieldcontainer
                          Ext.getCmp("GPASS1").up("fieldcontainer").labelStyle = "color: blue; font-size: 14px";

1>*.js

//取得 text欄位.up.fieldcontainer

Ext.getCmp("GPASS1").up("fieldcontainer").labelStyle = "color: blue; font-size: 14px";

V80403 –[子件無架構發工]鈕 - 呼叫 V20301 子功能畫面 -iframe

 目的: V80403 –[子件無架構發工]鈕   - 呼叫 V20301 子功能畫面
處理說明: 1> 呼叫 V20301  子功能畫面  

                       - 利用  HTML  <iframe src= ?FUNID  > 開啟子功能 Windows 畫面 

                              var ParamStr = "?FUNID=V20301&GAMMNO=" + Tmp_AMMNO + "&GPASS1=" + Tmp_GPASS1;

                         src="/Home/CenterTab' + ParamStr + '">

                  2>利用 location.search 取得傳入參數值(ParamStr)

                      var Values = GetURLParamValues(location.search);    

                  3>嵌入框架：<iframe> 是 HTML 標籤，用來在一個網頁裡嵌入另一個網頁。

1>V80403.js
[子件無架構發工]鈕: 呼叫函式 CALL_V20301_f_V40105(cur_rec);
  var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();
                    if (cur_recs.length == 0) {
                        mywarnalert("請先選擇資料(母AMM單號-AMMNO)");
                        return false;
                    }
                    cur_rec = cur_recs[0];
                    var Tmp_Str = "確認要新增目前AMM號(" + cur_rec.data["AMMNO"].toString() + ")<br>"
                        + "件號(" + cur_rec.data["AMMNO"].toString() + ")<br>"
                        + "的子件發工資料嗎?";
                    Tmp_Str=Tmp_Str.replace(/<br>/g, "\n");
                    var id = confirm(Tmp_Str);
                    if (id) {
                        CALL_V20301_f_V40105(cur_rec);
                    }    }          }

function CALL_V20301_f_V40105(cur_rec) {
     var Tmp_AMMNO = nulltoStr(cur_rec.data['AMMNO']).toString();
     var Tmp_GPASS1 = 'GPASS1'; //傳回AMMNO字串的欄位名稱
var ParamStr = "?FUNID=V20301&GAMMNO=" + Tmp_AMMNO + "&GPASS1=" + Tmp_GPASS1;
var win = new Ext.Window({
layout: 'fit',
id: 'win_V20301',
title: 'V20103',
closable: false,
closeAction: 'destroy',
modal: true, //有pick視窗時,下面的不能按
html: '<iframe id="ifrm" scrolling="auto" frameborder="0" width="100%" height="100%" src="/Home/CenterTab' + ParamStr + '"></iframe>',
buttons: [
{
id: 'btnClose1', text: '關閉',
handler: function () {
this.up('window').close();
}}]
});
win.setHeight(700);
win.setWidth(1200);
win.show();
};

2>V20301.js
[確認轉發]鈕 : 傳回 新產生的子AMM單號至 GPASS1 元件
//傳回V40105
var AMMNOStr; // ex: 格式要為'NO1'+','+'NO2', 不要是 AA('NO1')+','+AA('NO2')
if (Tmp_isV40105) {
Tmp_AMMNO_Str = Tmp_Obj["Rtn_Msg"];
AssignParentValue_v([Tmp_GPASS1], [Tmp_AMMNO_Str]); //傳回的 AMMNOStr 至 GPASS1元件 CloseChildWin();
}

V80403 - iframe 和 windows 的差異 - 呼叫 V20301 的子功能畫面 - iframe

iframe 和 window 在網頁開發中是兩個不同層次的概念，雖然都能顯示內容，但用途和行為差異很大：

📌 iframe

• 嵌入框架：<iframe> 是 HTML 標籤，用來在一個網頁裡嵌入另一個網頁。

• 作用範圍：它存在於同一個瀏覽器視窗中，只是頁面的一部分。

• 用途：常用來載入外部頁面、報表、或第三方內容（例如地圖、影片）。

• 限制：受同源政策影響，跨網域存取內容會有限制。

• 控制方式：透過 DOM 操作 (document.getElementById("ifrm")) 來改變 src 或內容。

📌 window

• 獨立視窗：window 是瀏覽器提供的物件，代表一個完整的瀏覽器視窗或彈出視窗。

• 作用範圍：它是最上層的容器，包含整個 DOM、iframe、script 等。

• 用途：可用來開新視窗 (window.open)、或在 ExtJS 中建立彈出視窗 (Ext.Window)。

• 控制方式：可操作整個視窗的屬性與事件，例如大小、位置、關閉。

1>*.js
{ //測試用按鈕 - 模擬 V40105 呼叫 V20301 子功能
xtype: 'button', text: '子件無架構發工', id: 'btn_V80403C',
listeners: {
click: function () {
console.log(" 2 btn_V80403B click ");
var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();
if (cur_recs.length == 0) {
mywarnalert("請先選擇資料(母AMM單號-AMMNO)");
return false;
}
cur_rec = cur_recs[0];
CALL_V20301_f_V40105(cur_rec);
}
}
},

cmp_GPASS1,

}


2>V80403.js
//此函式不可寫在 V20301 因為 id 會和 V40105 相同,
// Ext.Loader.loadScript({ url: '../JsFunction/V20301.js' }); --> 會 Error
//只能利用 iframe 的方式 , 開啟 V20301 - id 重覆沒關係

function CALL_V20301_f_V40105(cur_rec) {
    var Tmp_AMMNO = nulltoStr(cur_rec.data['AMMNO']).toString();
    var Tmp_GPASS1 = 'GPASS1';
    var ParamStr = "?FUNID=V20301&GAMMNO=" + Tmp_AMMNO + "&GPASS1=" + Tmp_GPASS1;

var win = new Ext.Window({
layout: 'fit',
id: 'win_V20301',
title: 'V20103',
closable: false,
closeAction: 'destroy',
modal: true, //有pick視窗時,下面的不能按
html: '<iframe id="ifrm" scrolling="auto" frameborder="0" width="100%" height="100%" src="/Home/CenterTab' + ParamStr + '"></iframe>',
buttons: [
{
id: 'btnClose1', text: '關閉',
handler: function () {
this.up('window').close();
}
}
]
});

win.setHeight(700);
win.setWidth(1200);
win.show();

};

V60202R- 多張標籤列印(不同內容的標籤) - 每頁含 [內容+標籤]+[分頁]

 目的: V60202R- 多張標籤列印(不同內容)

處理說明: 1>$('#div_print_area').printThis({}); 利用 div_print_area - 包含多張內容來預覽列印

                        $("#div_print_area").printThis({});

                  2>my_div_x: 每頁內容=div_內容+div_分頁

                  3>my_tbl_x: 每頁資料=tbl_內容+tbl_barcode

                  4>my_tbl_x1,my_tbl_x2: tbl_內容, tbl_barcode

1>*.js

 pub_print_area_Str1 = "<div id='div_print_area' style='border: 1px solid black;'>"

                                                   +pub_print_area_Str1

                                  +" </div >  <!--  end of div id='div_print_area' -->";

            $("#div_print_area").remove();

            var Tmp_sub_panel4 = $('#sub_panel4');

            Tmp_sub_panel4.append(pub_print_area_Str1);

       

            var Tmp_prn_div_Str = "#div_print_area";

            //printThis  - 會開啟預覽列印.html  , 原本子畫面.html 已被預覽列印取代, 所以 header  也不同了..

            //所以 printThis(loadCSS:  )   --> 才是 [預覽列印] 視窗 戴入的 *.css

            $(Tmp_prn_div_Str).printThis({                

                loadCSS: "../JsFunction/print_V60202R.css?v=@date", 

            });

var Tmp_PageCnt = CHK_PK_OBJ.PK_LIST.length;

for (var i = 0; i < Tmp_PageCnt; i++)

            {

            Tmp_uni = (i + 1).toString();

            cur_rec = CHK_PK_OBJ.ALL_LIST[i];      

            Tmp_MATNR = nulltoStr(cur_rec['MATNR']).toString();

            Tmp_WH = nulltoStr(cur_rec['WH']).toString();

            Tmp_SP = nulltoStr(cur_rec['SP']).toString();

            Tmp_NAME = nulltoStr(cur_rec['NAME']).toString();

            Tmp_MAKTX = nulltoStr(cur_rec['MAKTX']).toString();

            Tmp_barcode_text = Tmp_MATNR+"&"+Tmp_WH+"&"+Tmp_SP;

        //預覽列印的 HTML 內容        

            pub_print_area_Str1 = pub_print_area_Str1

                    +"<div id = 'my_div_" + Tmp_uni + "' style = 'width:10cm;height:3.8cm;border:1px solid black;font-size:9pt;' > "

                    + "<table id='my_tbl_" + Tmp_uni + "' style='width: 100%;height: 100%;' border=1 bordercolor = 'black' cellspacing = 0 >  "

                + "   <tr>   <!-- 包含 左邊文字內容 + 右邊barcode -->"

                    + "    <td width=70%> <!-- 左邊文字內容  --> "

                    + " <table id='my_tbl_" + Tmp_uni + "1' style='width:100%;height: 100%;' border=1 bordercolor='black' cellspacing=0>   "

                    + " <tr>  "

                    + " <th width=30% style='margin: 0 0 0 0 ;'>件號<br>(Parts No) : </th>  "

                    + " <td width=70%>" + Tmp_MATNR + "</td>  "

                    + " </tr>  "

                    + " <tr>  "

                    + " <th width=30%>名稱<br>(Name) :</th>   "

                    + " <td width=70%>" + Tmp_NAME + "<br>" + Tmp_MAKTX + "</td>  "

                    + "</tr>  "

                    + "<tr> "

                    + "<th width=30%>庫房 :</th> "

                    + "<td width=70 %>" + Tmp_WH + "</td>  "

                    + "</tr>  "

                    + "<tr> "

                    + "<th width=30%>儲位 :</th>  "

                    + "<td width=70 %>" + Tmp_SP + "</td>"

                    + "</tr>  "

                    + "</table>  <!--  end of table id='my_tbl_x1' -->"

                + " </td >   <!-- end of  <td width=70%>   -->"

                    + "<td  width=30%>  "

                    + " <table id='my_tbl_" + Tmp_uni + "2' style='width:100%;height: 100%;' border=1 bordercolor='black' cellspacing=0>  "

                    + "<tr>  "

                    + "<td>  " + genQRcodeStr(Tmp_barcode_text, 90, 90, false) + " </td> "

                    + "</tr> "

                    + " </table>  <!--  end of table id='my_tbl_x2' -->"

                + " </td>   <!-- width= 30# 左邊文字內容  -->"

                + "</tr>   <!-- 包含  左邊文字內容+右邊barcode  -->"

                + " </table>   <!--  end of table id='my_tbl_x' -->"                    

                    + "  <div class='display'  style='break-after:page'>   "

                    + "  </div>   <!--  end of div break-after:page   -->"

                    + "</div>  <!--  <div id = 'my_div_x'   --> ";

            }   // end of for  for (var i = 0; i < Tmp_PageCnt; i++) {

V60202P – Label字體顏色 –字體大小 – style:"text-align:left; color:blue;fontSize: 14px"

 目的: V60202P – Label字體顏色 –字體大小 – style:"text-align:left; color:blue;fontSize: 14px"

處理說明: 1>style: "text-align:left; color:blue;fontSize: 14px"

1>*.js

 var cmp_sub_prnlbl = get_cmp_lbl0('(標籤格式: 10cm*6cm)', 180, 

                                                                "text-align:left; color:blue;fontSize: 14px");
    var sub_V60202P_Btns = [            
            {
                xtype: 'button', text: '列印標籤', id: 'sub_V60202P_OkBtn',
                //flex: 5,
                listeners: {
                    click: function () {
                        //mysuccessalert("mysub2_確定 ");
                        //檢核 AMM項次的需求工時正確, 若有問題,則 Tmp_isOk=false, 若沒問題, Tmp_isOk=true, 才執行[確認]的處理
                        V60202P_OK();
                    }
                }
            },
            {
                xtype: 'button', text: '離開', id: 'sub_V60202P_CancelBtn',
                //flex: 5,
                listeners: {
                    click: function () {
                        //mysuccessalert("mysub2_取消");
                        var Tmp_win = this.up("window");
                        if (Tmp_win == undefined) {
                            Ext.Msg.alert("取消時未取到Window Object");
                        }
                        this.up("window").close();
                        this.up("window").destroy();
                    }
                }
        },
        cmp_sub_prnlbl,
        ];

     var win1 = getMyWindow("膠漆料管制標簽查詢", sub_V60202P_Flds, sub_V60202P_Btns, "P");

        win1.x = 100;

        win1.setWidth(800);

        win1.setHeight(300);

        win1.show();

V60202 - [開啟V003子功能畫面]鈕: - 開啟另一子功能的畫面

 目的: V60202 - [開啟V003子功能畫面]鈕: -  開啟另一子功能的畫面

處處理說明: 1>利用 iframe  - 類似開子視窗 - 獨立的  BOM架構 - 所以不會有 id 相同的問題
                2> var ParamStr = '?FUNID=V003';

                         <iframe id="ifrm" scrolling="auto" frameborder="0" 
                      width="100%" height="100%"  src="/Home/CenterTab' + ParamStr + '">
                   </iframe>'

1>*.js
var ParamStr = '?FUNID=V003';
                var win = new Ext.Window({
                    layout: 'fit',
                    title: 'V003',
                    closable: false,
                    closeAction: 'destroy',
                    modal: true,    //有pick視窗時,下面的不能按
                    html: '<iframe id="ifrm" scrolling="auto" frameborder="0" width="100%" height="100%"  src="/Home/CenterTab' + ParamStr + '"></iframe>',
                    buttons: [{
                        id: 'btnClose', text: '關閉',
                        handler: function () {
                            this.up('window').close();
                        }
                    }]
                });
                win.setHeight(700);
                win.setWidth(1200);
                win.show();

 

V60202P -[預覽列印] - px 和 pt 的差異 - css margin-left: 3pt

V60202P

在 CSS 裡，px 和 pt 都是長度單位，但用途和效果有些差異：
1> px (像素)
o 表示螢幕上的「畫素」單位。
o 在大多數螢幕顯示環境下，1px 就是 1 個螢幕像素。
o 適合用在 網頁設計，因為它跟螢幕解析度直接相關。
o 例如：margin: 20px; → 在螢幕上留 20 像素的空間。

2> pt (點數)

o 傳統印刷單位，1pt = 1/72 英吋。

o 在列印或排版時比較常用，因為它跟實際物理尺寸有關。

Ex: V60202P - 預覽列印 - margin-left: 3pt