2023年2月7日 星期二

V120202B : css - div margin border 的用法 - table cellsapcing - cellpadding border 的用法

 目的: V120202B css - div  margin  border 的用法   - table   cellsapcing - cellpadding border 的用法

           HTML online : https://www.tutorialspoint.com/online_html_editor.php

處理說明: 1> 設定標籤的長寬 & 標籤的列印位置往右移 & 設定邊線寬度
                       <div id='print_area' style='width:10cm;height:4cm;margin:0px 0px 0px 20px;
                         border:5px solid green;'>

                  2>設定  table 的 邊線間距(cellspacing) , 邊框2文字間距(cellpadding=0)
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0 cellpadding=0>
 
                 3>  <table> row底線
<td width=35% style='border-bottom:1px solid black;'>機號:"+Tmp_ASN+"</td>
<td width=35% style='border-bottom:1px solid black;' >工號: "+Tmp_SAPNO+"</td>

                         

1>範例1 : <div> marin padding


*.html
<div id='print_area' style='width:10cm;height:4cm;border:5px solid green;
margin:0px 0px 0px 20px;padding:0px 0px 0px 10px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid brown;font-size:0.5pt;'>
<table id='my_tbl1' style='width:100%; margin:0px 0px 0px 10px;' border=1px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


2>範例2 : <table> margin cellspacing cellpadding
*.html
<table id='my_tbl1' style='width:100%;margin:0px 0px 0px 10px;' cellpadding=6 border=1px borderstyle='solid' bordercolor='blue' cellspacing=2>

<tr>
<td width=35%>機號: A049 </td>
<td width=35% '>工號: 12345678</td>
<td width=35% '>工單件號: SROPN_1 </td>
</tr>
</table>


3> <table> row底線


<div id='print_area' style='width:10cm;height:4cm;border:5px solid green; margin:2px 5px 1px 15px;'>
<div id='my_div_1' style='width: 9.8cm; height: 3.5cm;border: 1px solid yellow;font-size:4pt; margin:2px 5px 1px 15px; '>
<table id='my_tbl1' style='width:100%;padding:0 0 0 10;' border=0px borderstyle='solid' bordercolor='blue' cellspacing=0>
<tr style="border-bottom:1px solid blue">
<td width=35% style='border-bottom:1px solid black;'>機號: A049 </td>
<td width=35% style='border-bottom:1px solid black;'>工號: 12345678</td>
<td width=35% style='border-bottom:1px solid black;'>工單件號: SROPN_1 </td>
</tr> </table>






Sample:


Source:   

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  height: 200px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>





V120502B - 標籤列印 & 二維條碼列印 & 列印方向: 橫向/直向

 目的: V120502- 標籤列印  &  二維條碼列印(V120502B)

處理說明: 1> 如下以  <div> & <table> 畫出標籤內容
                            <div  id= my_div1>   
                            <table  id= my_tbl1 >   
                            <div  id=my_barcode1>   
                            <div  id= break_page1>   
                  2>預覽列印                     $('#my_div1,#my_barcode1,#break_page1,#my_div2,#break_page2,#my_div3').printThis({});

0>印表機設定:

    標籤樣式: USER: 100mm*60mm 
    襯紙寬度:  左: 2mm  右: 2mm
    方冋:  直向




1>標籤列印 :


2>二維條碼列印


3>列印方向:橫向/直向 - print.css
/*    size: portrait; //* 直向 
       size: landscape; //* 橫向 
       size: A4;  //* 紙張大小 
       size: A4 portrait; //* 混合使用 
       margin: 0; //* 邊界與內容的距離 
*/
@media print {
    @page {
        size: portrait;
    }
}








1>*.js  - V120502B.js
//預覽列印
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 Tmp_uni = "0";
    var Tmp_barcode_text = "";
   var pub_print_area_Str1 = "<div  id='print_area'   style='border: 5px solid green;'>";
    //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();
        //barcode 文字=件號&ECNO&日期&數量&工號&備註(機號)
        Tmp_barcode_text = Tmp_PN + "&"
            + Tmp_EOCND + "&"
            + Tmp_DT + "&"
            + Tmp_QTY + "&"
            + Tmp_SAPNO + "&"
            + Tmp_RMK;


        pub_print_area_Str1 = pub_print_area_Str1
     + "<div  style='width: 6cm; height: 7cm;border: 1 px solid yellow;' id='my_div" + Tmp_uni + "'>"
     + "<table  id = 'my_tbl" + Tmp_uni + "' style='width: 95%; height: 5cm; font-size: 10pt;
                margin-top: 5pt;margin-left: 5pt; border-collapse:collapse;' border=1px  borderstyle='solid'   bordercolor='black' > "
      + "<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>"
            + "<table  id = 'my_bottom" + Tmp_uni + "' style='width: 100%; line-height: 9pt; font-size: 7pt;border-collapse:collapse;'  > "
            + "<tr >"
            + "<th width = 30% style='transform: scale(0.7);' >04/2004<br></th> "
            + "<td width = 70% style='transform: scale(0.7);'  align='right' >TAG-DR-006</td>"
            +"</tr > "
            + "</table>"
            + "</div>"
            + "<div id='my_div_barcode" + Tmp_uni + "' style='margin-top: 10pt;margin-left: 30pt; font-size: 6pt;' >"
            + genQRcodeStr(Tmp_barcode_text,90,90,false)
            + "</div>"

            //分頁        
            + "<div class='display' id='break_page" + Tmp_uni + "' style='break-after:page'></div>";

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

    console.log("pub_print_area_Str1:", pub_print_area_Str1);
    //將 [預覽列印]的 Table_div String 加入 子視窗.panel
    //將上次的列印資料 remove()
    $("#print_area").remove();
    var Tmp_sub_panel4 = $('#sub_panel4');
    console.log("Tmp_sub_panel4:", Tmp_sub_panel4);
    Tmp_sub_panel4.append(pub_print_area_Str1);
    var Tmp_Str = "<link type='text/css' rel='stylesheet' href='../JsFunction/print.css?v=@date' " + " media='print'>";
    $('head').append(Tmp_Str);
    console.log("0 $('#sub_panel4').width:", $("#sub_panel4").width());
    console.log("0 $('#sub_panel4').heigh:", $("#sub_panel4").height());     
    //顯示 [二維條碼] 在下方的 panel(sub_panel4)
    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;
            //新增 [二維條碼] 預覽列印
            Tmp_prn_div_Str = Tmp_prn_div_Str + ",#my_div_barcode" + 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?v=@date", // path to additional css file - use an array [] for multiple                
        });
    }


2>print.css  - 設定列印方向
@page {
    size: auto; /* auto is the initial value */
    /* margin: 0mm 10mm 0mm 10mm; */ /* this affects the margin in the printer settings 最關鍵參數
    margin: 0mm 0mm 0mm 0mm;
    /*margin-left: 0mm;*/
}

body {
    /*background-color: #FFFFFF;*/
    margin: 0mm;  /* this affects the margin on the content before sending to printer */
    /*padding: 5mm 0 5mm 0;*/
}

/*    size: portrait; //* 直向 
       size: landscape; //* 橫向 
       size: A4;  //* 紙張大小 
       size: A4 portrait; //* 混合使用 
       margin: 0; //* 邊界與內容的距離 
*/
@media print {
    @page {
        size: portrait;
    }
}



4>印表機設定畫面




V120502B 顯示 二維條碼 圖示 - genQRcodeDiv("mypanel", "5325YET064602&test&123eee"); - genQRcodeStr("TEST QRCODE",90,90);

目的: V120502B 產生二維條碼的圖案

處理說明:  1> 二維條碼 函式庫:  myfunc.js
                         Ext.Loader.loadScript({    url: '../JsFunction/qrcode.js'});
                          //barcode 文字(Tmp_barcode_text)=件號&ECNO&日期&數量&工號&備註(機號)   
                          genQRcodeStr(Tmp_barcode_text,90,90,false);

                    2>[顯示二維修碼] 鈕
                        //將 QRCODE 圖片放於 sub_panel4                        
                       genQRcodeDiv("sub_panel4", "5325YET064602&test&123eee");




1>*.js  
- myfunc.js

Ext.Loader.loadScript({
    url: '../JsFunction/qrcode.js'
});

/*
//產生二維條碼的範例 -
 var mypanel = new Ext.Panel({
        id: 'mypanel',
        layout:'fit'
    });

1>>於 DOM元件 加入  二維條碼圖片  - genQRcodeDiv
      Ex: genQRcodeDiv("mypanel", "5325YET064602&test&123eee");
  
 function genQRcodeDiv(destId, v, cm_x, cm_y) {
    //參考網址:https://github.com/papnkukn/qrcode-svg
    var qrcode = new QRCode({
        content: v,
        join: true, //Crisp rendering and 4-5x reduced file size
        width: 100, //px
        height: 100, //px,
        padding: 0
    });
    var svg = qrcode.svg();

    //$('<div></div>').html(svg+'<br>'+v).appendTo('#' + destId);
    document.getElementById(destId).innerHTML = svg + '<br>' + v;
}

2>>產生  二維條碼圖片字串  - genQRcodeStr
       Ex: Tmp_Str=Tmp_Str+ "<div id='my_div_barcode" + Tmp_uni + "'>"
                                                + genQRcodeStr("TEST QRCODE")
                                                +"</div>" ;

 function genQRcodeStr( v, px_w, px_h, is_showtxt) {
    //參考網址:https://github.com/papnkukn/qrcode-svg
    if (checkisnull(px_w))
        px_w = 50;
    if (checkisnull(px_h))
        px_h = 50;
    var qrcode = new QRCode({
        content: v,
        //container: "svg-viewbox", //Responsive use
        join: true, //Crisp rendering and 4-5x reduced file size
        width: px_w, //px
        height: px_h, //px,
        padding: 0
    });
    var svg = qrcode.svg();
    var Tmp_RtnStr = svg + '<br>' ;
    if (is_showtxt)
        Tmp_RtnStr = Tmp_RtnStr + v;
    console.log("QR Code Str", Tmp_RtnStr);
    return Tmp_RtnStr;


3>> V120502.js - [顯示二維條碼]
{
                            xtype: 'button',
                            id: 'sub_btn_OK',
                            flex: 3,
                            border: 1,
                            text: '二維標籤 ',  //sub2
                            hidden: true,
                            iconCls: 'icon-search',
                            handler: function () {
                               //顯示 [二維條碼] 在下方的 panel(sub_panel4)
                              genQRcodeDiv("sub_panel4", "5325YET064602&test&123eee");
                            }
                        },  // end of 確定                                        


PS: 條碼套件使用參考文件 -

Ext.Net 1.2.0_演示 Ext.Net+QR 码封装条形码控件

https://www.cnblogs.com/liuning8023/archive/2012/05/20/2511015.html


2023年2月2日 星期四

網頁列印 - 紙張方向: 橫向(landscape) / 直向(portrait) 的設定說明

 https://ithelp.ithome.com.tw/articles/10232006


今天要來介紹一個比較不常用的東西,那就是 CSS 中的列印,在以前常常會將網頁列印出來,所以經常會使用到這個屬性,時到今日,使用的時機越來越少,只有一些報表有用到,因此今天就讓我們一起看看吧!

首先我們有一個畫面,裡面有三個區塊,如下:

<body>
  <div class="page">
    <div class="box red">red</div>
  </div>
  <div class="page">
    <div class="box blue">blue</div>
  </div>
  <div class="page">
    <div class="box green">green</div>
  </div>
</body>
* {
  padding: 0;
  margin: 0;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
  height: 600px;
}
.red {
  border: 10px solid #f66;
}
.blue {
  border: 10px solid #66f;
}
.green {
  border: 10px solid #6f6;
}

print-page

列印方法

  • 直接網頁上右鍵列印(Ctrl+P
  • 使用 javascript 的 window.print()

如果想列印指定元素可以使用 javascript 另開分頁後列印

// 例:這邊只想列印 red 區塊
const content = document.querySelector(".red").innerHTML;
const newPage = window.open("", "", "width=1000,height=500");
newPage.document.write(content);
newPage.print();

或是使用可以接下來要介紹的 CSS 來控制

CSS 列印樣式

首先我們先來看看目前列印出來的樣式
print-origin
是不是看到了一些問題呢?

  • 頁首頁尾有怪東西
  • 同一區塊被斷開

其實列印的時候預設會有日期網頁標題網址頁碼,不過看起來有點醜,那麼如何解決哩?這邊就用到 CSS 的語法囉!

換頁

首先處理換頁的部分,這邊介紹兩個屬性,可以在列印時達到換頁的效果

.page {
  page-break-inside: avoid; /* 若順著向下排列時會切開此元素,則直接換頁 */
  page-break-after: always; /* 碰到此元素會直接換頁 */
}

print-break

@page

再來則是頁首頁尾,在 CSS 內可以使用 @page 來設定基本的列印樣式

  • size:設定列印的尺寸與方向,可依照紙張調整
  • margin:設定每頁邊界與內容的距離,小於一定數值時,則會將預設的標題等蓋過
@page {
  size: portrait; /* 直向 */
  size: landscape; /* 橫向 */
  size: A4; /* 紙張大小 */
  size: A4 portrait; /* 混合使用 */
  
  margin: 0; /* 邊界與內容的距離 */
}

設定好之後頁首頁尾就乾淨多了,如果想要上方有距離可自行設定 padding 或是 @page 內的 margin
print-@page

頁碼

剛剛將預設的東西清掉後雖然乾淨多了,不過如果還想留下頁碼怎麼辦!?這邊提供一個製作頁碼的方法

CSS 中其實有預設可用的計數器,功能有三個,分別是初始化增加取用

body {
  counter-reset: page-number; /* 初始化,名字可自訂,數值為0 */
}
.page {
  page-break-inside: avoid;
  position: relative;
  min-height: 100vh;
}
.page::after {
  content: counter(page-number); /* 取用該名字的計數器 */
  counter-increment: page-number 1; /* 增加計數器數值 */
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 30px;
  text-align: center;
}

完成之後如下圖
print-page-number
此方法是定位在 page 這個 class,若是 page 的高度太高的話就不適用了

@media print

我們完成頁碼之後發現,不是在列印時也有頁碼,而且因為剛剛加上了 height: 100vh,所以也不會正常的排列了
print-all
這時候就可以用到列印中最重要的東西了,也就是 @media print,他的概念跟 @media screen 一樣,一個是螢幕的樣式,而另一個則是列印的樣式,已經會 RWD 的應該很好上手,那就讓我們來修改一下剛剛的問題吧!

@media print {
  .page {
    page-break-inside: avoid;
    position: relative;
    min-height: 100vh;
  }
  .page::after {
    content: counter(page-number);
    counter-increment: page-number 1;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 30px;
    text-align: center;
  }
}

修改完成後就大功告成了,網頁上的樣式還是本來的樣式,而列印時改成了三頁,而且顯示頁碼

結語

之前我也不是很認識列印的屬性,剛好最近工作上用到才知道,基本上都跟 RWD 的概念一樣,只是多了幾個屬性可以用,用起來還算容易,不過能看到自己做的東西照著想像的樣子印出來還是相當療癒阿!哈哈


2023年1月31日 星期二

GitLab 操作說明 - 1>下載[master]最新程式 2>建立[分支] 3>上傳修改程式,[認同 & 推送]

GitLab操作說明:
1>GitLab.首頁.同步 - 從 GitLab 下載 [master]最新的專案程式
2>由下載最新的 [master] Source , 產生分支 [V120502_列印標籤]
3>[分支V120502_列印標籤]修改後, 上傳修改程式至 master , 以便合併至 master



1>GitLab.首頁.同步  GitLab 下載 [master]最新的專案程式









2>由下載最新的 [master] Source , 產生分支 [V120502_列印標籤]





3>[分支V120502_列印標籤]修改後, 上傳修改程式至  master , 以便合併至 master






2023年1月18日 星期三

V80201 - store 重設 timeout & WebService 重設 timeout -T1C - ds2T1C

 目的: V80201 - store 重設 timeout  & WebService 重設 timeout - 顯示子件資料

處理說明: 呼叫WebService(WS_PDM02) 顯示子件資料 
                    1> 後端 Webservice.重設 timeout  - web.config  - 10分鐘
                        <binding name="ServiceSoap"  
                          receiveTimeout="00:10:00"   .. >

                    2> 前端 store.重設 timeout   - 10分鐘
                        Ext.getCmp('sub_Grid').store.proxy.timeout=600000;

                  3>Ext.Ajax 設定 timeout  - 10 分鐘
                      Ext.Ajax.timeout = 600000; //如果有ajax timeout問題可以加上去



1>web.config -  後端 Webservice.重設 timeout - 10分鐘
<system.serviceModel>
    <bindings>
      <basicHttpBinding>
        <binding name="ILdapServiceHttpBinding" />
        <binding name="TLSWebServiceSoap" />
        <binding name="ID40AuthenticateSoap" />
        <binding name="AMMWebServiceSoap" />
        <binding name="zm179TlsSoap" />
        <binding name="ZRFC_ZM66Soap" maxBufferPoolSize="524288" maxBufferSize="2147483647"
          maxReceivedMessageSize="2147483647" />
        <binding name="ws_als_wbshourSoap" receiveTimeout="00:15:00"     
                     sendTimeout="00:15:00"/>
        <binding name="ServiceSoap"  
                 receiveTimeout="00:10:00" 
                 sendTimeout="00:10:00"
                 maxBufferPoolSize="524288" 
                 maxBufferSize="2147483647"
                 maxReceivedMessageSize="2147483647" />
        <binding name="ws_als_jcnhourSoap" />
      </basicHttpBinding>
      <customBinding>
        <binding name="ID40AuthenticateSoap12">
          <textMessageEncoding messageVersion="Soap12" />
          <httpTransport />
        </binding>
        <binding name="zm179TlsSoap12">
          <textMessageEncoding messageVersion="Soap12" />
          <httpTransport />
        </binding>
        <binding name="ServiceSoap12">
          <textMessageEncoding messageVersion="Soap12" />
          <httpTransport />
        </binding>
      </customBinding>
    </bindings>
    <client>
      <endpoint address="http://aidcldap/ldapService.do" binding="basicHttpBinding"
        bindingConfiguration="ILdapServiceHttpBinding" contract="aidcldap.ILdapServicePortType"
        name="ILdapServiceHttpPort" />
      <endpoint address="http://192.30.8.210:8503/TLSWebService.asmx"
        binding="basicHttpBinding" bindingConfiguration="TLSWebServiceSoap"
        contract="TLSWS.TLSWebServiceSoap" name="TLSWebServiceSoap" />
      <endpoint address="http://192.168.99.36/aeispj/aeis/webservice/id40Authenticate.asmx"
        binding="basicHttpBinding" bindingConfiguration="ID40AuthenticateSoap"
        contract="iAIDCWebservice.ID40AuthenticateSoap" name="ID40AuthenticateSoap" />
      <endpoint address="http://192.30.8.240:8100/AMMWebService.asmx"
        binding="basicHttpBinding" bindingConfiguration="AMMWebServiceSoap"
        contract="AMMWS_TEST.AMMWebServiceSoap" name="AMMWebServiceSoap" />
      <endpoint address="http://aesweb/SAP/Zm179tls.asmx" binding="basicHttpBinding"
        bindingConfiguration="zm179TlsSoap" contract="ZM179.zm179TlsSoap"
        name="zm179TlsSoap" />
      <endpoint address="http://194.1.5.106/SAPWS/ZRFC_ZM66.asmx" binding="basicHttpBinding"
        bindingConfiguration="ZRFC_ZM66Soap" contract="ZRFC_ZM66.ZRFC_ZM66Soap"
        name="ZRFC_ZM66Soap" />
      <endpoint address="http://194.1.5.106/sapws/ws_als_wbshour.asmx"
        binding="basicHttpBinding" bindingConfiguration="ws_als_wbshourSoap"
        contract="ws_als_wbshour.ws_als_wbshourSoap" name="ws_als_wbshourSoap" />
      <endpoint address="http://enovia/AMM/Service.asmx" binding="basicHttpBinding"
        bindingConfiguration="ServiceSoap" contract="PDM_WS.ServiceSoap"
        name="ServiceSoap" />
      <endpoint address="http://194.1.5.106/sapws/ws_als_jcnhour.asmx"
        binding="basicHttpBinding" bindingConfiguration="ws_als_jcnhourSoap"
        contract="ws_als_jcnhour.ws_als_jcnhourSoap" name="ws_als_jcnhourSoap" />
    </client>
  </system.serviceModel>
</configuration>

2> 前端 store.重設 timeout   - V80201A1.js
var win1 = getMyWindow("顯示子件明細資料", sub_ShowPNDetail_Flds, sub_ShowPNDetail_Btns, "A1");
    win1.x =400;
win1.setWidth(700);
    win1.setHeight(400);
    //顯示 sub Grid 資料        
    var np = {};
    np["PROJID"] = Ext.getCmp("sub_PROJID").getValue();
    np["PDM_CONFIG"] = Ext.getCmp("sub_PDM_CONFIG").getValue();    
    np["PDTP"] = Ext.getCmp("sub_PDTP").getValue();
    np["TYPE"] = Ext.getCmp("sub_TYPE").getValue();
    //目前所選件號(PN),ECNO,情況處理碼(CNDPROCCODE)
    np["PN"] = par_PN;
    np["ECNO"] = par_ECNO;
    np["CNDPROCCODE"] = par_CNDPROCCODE;
    np["ASN"] = par_ASN;    
    np["PROCWC"] = par_PROCWC;    

    Ext.getCmp('sub_Grid').store.getProxy().url = '../api/V80201A1API/getsubData';
    Ext.getCmp('sub_Grid').store.getProxy().extraParams = np; //分頁OK,篩選條件OK
   //Ext.getCmp('sub_Grid').store.clearOnPageLoad = true;
    //Ext.getCmp('sub_Grid').reloadGridData();    
//重新設定store.proxy 的timeout 時間(10分鐘), 以免store載入時間 timeuot , 出現 Error
    Ext.getCmp('sub_Grid').store.proxy.timeout=600000;    
    Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        console.log("STEP2 Ext.getCmp(sub_Grid).store.on(load ..");
        console.log("successful:", successful);
        console.log("records:", records);
        if (successful) {
            console.log("successful");
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
            win1.show();
            //若已載入完成,則            
            //Ext.getCmp('waitlbl').setVisible(false);         
            Ext.getCmp("myMask").hide();
            //myMask.unmask();                    
            //myMask.hide();                                
        }
    }
    );
    Ext.getCmp('sub_Grid').store.load();
    console.log(" STEP 1 Ext.getCmp('sub_Grid').store.load() ");
    Ext.getCmp('sub_Grid_ptb').hide();
    

};  // end of function ShowPNBtn_click() {

3>*.cs - V80201A1APIController.cs

//重新設定WebService 的timeout 時間(10分鐘), 以免呼叫 WebService  timeuot , 出現 Error
      DataSet ds = PDM02.AMM_PDM02(Tmp_PN, Tmp_ECNO,Tmp_CNDPROCCODE, Tmp_PDTP,                    
                                                                 Tmp_ASN,Tmp_PROJID, Tmp_PROCWC);

     //將  ds 轉成標準的  T1C 格式(TMGrid)
     ds = myfunc.ds2T1C(ds);