2023年5月17日 星期三

V20302 - 1>前端取得 store 的欄位值 & store.總筆數 2>後端取得 datatable 的欄位值 , 取得 ds,dt 欄位值

 目的: 1>前端取得 store 的欄位值 *.js

               取得 store 總筆數(store.getTotalCount())

           2>後端取得 datatable 的欄位值 *.cs 

處理說明: 1>*.js
                         for (var i=0;i<ds1.getTotalCount(); i++){
                         var rec = ds1.getAt(i);
                         rec.data["NOTES_MAIL"].toString();
                         }
                  2>*.cs
                        for (var i = 0; i < dt1.Rows.Count; i++)





1>*.js
    var ds1 = Ext.getCmp("sub_Grid1").store;
    var rec;
    for (i = 0; i < ds1.getTotalCount(); i++) {
        rec = ds1.getAt(i);
        console.log("rec:", rec);
        Tmp_MEmail = Tmp_MEmail + rec.data["NOTES_MAIL"].toString() + ";";
    }

2>*.cs

2>*.cs
       for (var i = 0; i < dt1.Rows.Count; i++)
                {
                    Tmp_AMMNO = dt1.Rows[i]["AMMNO"].ToString();
                    Tmp_RPNOAF = dt1.Rows[i]["RPNOAF"].ToString();
                    Tmp_MRPNOAF = dt1.Rows[i]["MRPNOAF"].ToString();
                    Tmp_SAPNO_ = dt1.Rows[i]["SAPNO_"].ToString();

2023年5月16日 星期二

http傳送 字串編碼 & 字串解碼 - HttpUtility.UrlEncode(String) , UrlDecode(String) - Cookie

 目的: 在 Http的資料流程, 傳遞空白/標點符號之類的字元, 在接收端可能會錯誤解譯
          所以必需先 URL編碼 , 將URL中不允許的字元(空白,<>,...)編碼
          --> 當字元內嵌在 URL 中傳輸的文字區塊時,
                 這些字元 < and > 會編碼為 %3c 和 %3e

處理說明:  1>TextArea 欄位,以 "\r\n" 換行

                 2>由後端組合好的字串, 必需先 UriEncode ,再送至前端 

                 3>還原後端的字串,必需先 decodeURI , 

                      -->  但空白,可能變成+




1>*.cs
      if (Tmp_TYPEAF == "6")
          { Tmp_content6 = Tmp_content6 + "提領編號:" + Tmp_GONOAF + ",交修單號:" + Tmp_RPNOAF + "\r\n"; }
      else
          { Tmp_contentnot6 = Tmp_contentnot6 + "提領編號:" + Tmp_GONOAF + ",交修單號:" + Tmp_RPNOAF + "\r\n"; }
      MyCookie = new HttpCookie("V20302_content6", HttpUtility.UrlEncode(Tmp_content6));
      HttpContext.Current.Response.Cookies.Add(MyCookie);


2>*.js
   var r_V20302_contentnot6 = r_cookies('V20302_contentnot6');
   var Tmp_sub_contentnot6 = "已經接收器材:\r\n"
        + r_V20302_contentnot6 + "\r\n"
        + "請至 AMM系統 V20303: 進廠檢查資料登錄做後續處理。\r\n";  
    Ext.getCmp("sub_Subjext").setValue(Tmp_sub_Subjectnot6);
    Ext.getCmp("sub_content").setValue(Tmp_sub_contentnot6);    


function r_cookies(i_params) {
    var cookie_token = Ext.util.Cookies.get(i_params);
    return decodeURIComponent(escape(cookie_token));
}

PS1:
在 client 端送資料給 server 端時,若使用 query string 的方式,格式通常是這樣 https://www.sample.com?foo=abc&bar=def,而若當中有空白的話,像是 foo=a b c a、b、c 中間有空白,則會有以下加號(+)和 %20 兩種情況(可參考這裡)。

PS2: https://www.cythilya.tw/2020/07/24/encode-decode/
const encodedStr = encodeURIComponent('這是中文字串'); // encodedStr 得到 %E9%80%99%E6%98%AF%E4%B8%AD%E6%96%87%E5%AD%97%E4%B8%B2
const decodedStr = decodeURIComponent(encodedStr); // decodedStr 得到 這是中文字串

2023年5月12日 星期五

V20302A - 取得 TreePanel 所選的 nodes資料 , node.raw

 目的:V20302A - 取得 TreePanel 所選的 nodes資料

處理說明: 1>treepanel的 node 屬性  {id:611292 , leaf: true, text :"611292:蔡聰進"}
                  2>treepanel的 選擇 nodes , 
                      var nodes=treepanel.getSelectionModel().getSelection();
                      var node=nodes[0];
                      node.raw.id
                      node.raw.text
                      node.raw.leaf



1>*.js
   1>>[右移]鈕
         var nodes = treepanel.getSelectionModel().getSelection();
         var node = nodes[0];
         if (checkisnull(node))
              return;
         console.log("node:", node);
         console.log("node.raw:", node.raw);
         var Tmp_Emplyid, Tmp_EmplyNM, Tmp_Notes_EMAIL;
          if (node.raw.leaf) {
               Tmp_Emplyid = node.raw.id;
               Tmp_EmplyNM = StrExtract(node.raw.text, 2, ":");
               console.log("姓名:", Tmp_EmplyNM);
                var Tmp_Email = getEmp_Email(Tmp_Emplyid);
                console.log("Email:", Tmp_Email);
                var Tmp_rec = { EMPLYNM: Tmp_EmplyNM, NOTES_MAIL: Tmp_Email };
                Ext.getCmp("sub_Grid1").store.add(Tmp_rec);
         }

2>>[左移]鈕:
      var nodes = Ext.getCmp("sub_Grid1").getSelectionModel().getSelection();                                               
                                                if (nodes.length == 0) {                                                    
                                                        mywarnalert("請先選擇要左移的資料");                                                        
                                                    return;
                                                }
                                                var node = nodes[0];                                                
                                                Ext.getCmp("sub_Grid1").store.remove(node);

2023年5月11日 星期四

V20302A - 畫面版面設計 , layout , vbox, hbox

 目的: V20302A - 畫面版面設計 , layout , vbox, hbox

處理說明: 1>layout: { type: "vbox", align: 'stretch' }
                       flex: 設定垂直的比例, 若沒設align: stretch,則items必需設width
                  2>layout: { type: "hbox", align: 'stretch' }
                      flex: 設定水平的比例,若沒設align: stretch,則items必需設height




1>*.js
 //[顯示Email]  - 子畫面欄位
    var sub_ShowEmail_Flds = [
        {
            xtype:'panel',bodyStyle: "background-color:transparent;", border: false, 
            layout: {  type: "vbox",  align: 'stretch' }, padding: "5",
            id: 'sub_myForm', items: [
                {
                    xtype: "fieldcontainer", fieldLabel: "主旨", labelWidth: 60, layout: "fit", flex: 1, items: [
                        {
                            xtype: "textfield", id: "sub_Subjext", name: "sub_Subject",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                },  //end of 主旨
                {
                    xtype: "fieldcontainer", fieldLabel: "內容", labelWidth: 60, layout: "fit", flex: 4, items: [
                        {
                            id: "sub_content", name: "sub_content", xtype: "textfield",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                }, // end of 內容
                {  //下方 TreeView, 左右移,正本/副本
                    xtype: "panel", flex: 5,
                    layout: {type: 'hbox', align: 'stretch' },
                    items: [
                        { // TreeView
                            xtype: "panel", flex: 4, layout: 'fit',                            
                            autoScroll: true, items: [treepanel]
                        },  //TreeView
                        {  //正本&副本.[左移/右移]按鈕
                            xtype: "panel", flex: 2, layout: { type: 'vbox', align: 'stretch' }, border: false,
                            //bodyStyle: 'background:blue; ',
                            items: [
                                {  //  正本.左右移的 Button
                                    xtype: 'panel', id: 'panel_btns1', layout: { type: 'vbox', align: 'stretch' }, flex: 1, border: false,
                                    //bodyStyle: 'background:yellow; ',                                    
                                    items: [                                        
                                        {//space panel
                                            xtype: 'panel',    flex: 1,                                            
                                        },// end of 
                                        {//正本.往右移
                                            xtype: 'button',
                                            id: 'btn_move11',
                                            text: '1往右',
                                            iconCls: 'icon-right',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },// end of 往右移                                        
                                        {//正本.往左移
                                            xtype: 'button',
                                            id: 'btn_move12',
                                            text: '1往左',
                                            iconCls: 'icon-left',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },//往左移
                                        {//space panel
                                            xtype: 'panel',flex: 1,
                                        },// end of 
                                    ]
                                }, //panel_btn1
                                {  //  副本.左右移的 Button
                                    xtype: 'panel', id: 'panel_btns2', layout: { type: 'vbox', align: 'stretch' }, flex: 1, border: false,                                    
                                    //bodyStyle: 'background:red; ',
                                    items: [
                                    {//space panel                                    
                                    xtype: 'panel', flex: 1,                                },// end of 
                                        {//副本.往右移
                                            xtype: 'button',
                                            id: 'btn_move21',
                                            text: '2往右',
                                            iconCls: 'icon-right',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },// end of 往右移
                                        //{ xtype: 'panel', flex: 1, },// end of  虛 space
                                        {//副本.往左移
                                            xtype: 'button',
                                            id: 'btn_move22',
                                            text: '2往左',
                                            iconCls: 'icon-left',
                                            flex: 1,
                                            handler: function () {
                                            }
                                        },//往左移
                                        {//space panel
                                            xtype: 'panel', flex: 1,
                                        },// end of 
                                    ]
                                }, //panel_btn2                                                        
                            ]
                        },  //按鈕
                        {  //正本,副本人員
                            xtype: "panel", flex: 4,                            
                            layout: { type: 'vbox', align: 'stretch' },                            
                            items: [
                                {
                                    xtype: "panel", flex: 1, title: '正本人員', layout: 'fit',                                  
                                     bodyStyle: 'background:yellow; ', 
                                },
                                {
                                    xtype: "panel", flex: 1, title: '副本人員', layout: 'fit',                                                                       
                                    bodyStyle: 'background:blue; ',
                                },
                            ],                            
                        },  //正本副本
                    ]
                }, // end of TreeView                
            ]  //end of sub_myForm
        }]  //end of sub_ShowPN_Flds
        
    console.log(" ShowEmail  step4");   

    var win = getMyWindow("挑選 Email 人員", sub_ShowEmail_Flds, sub_ShowEmail_Btns);


2023年5月9日 星期二

V20302A - TextField 充滿範圍 (多行) -

 目的: V20302A - TextField 充滿範圍 (多行) -

處理說明: 1>{
                    xtype: "fieldcontainer", fieldLabel: "主旨", labelWidth: 80, layout: "fit", flex: 1, items: [
                        {
                            id: "sub_Subjext", name: "sub_Subject", xtype: "textfield",  padding: "0 4 0 0",
                        },
                    ]
                },  //end of 主旨



1>*.js
   {
     bodyStyle: "background-color:transparent;", border: false, layout: { type: "vbox", align: 'stretch' }, padding: "5",
            id: 'sub_myForm', items: [
                {
                    xtype: "fieldcontainer", fieldLabel: "主旨", labelWidth: 80, layout: "fit", flex: 1, items: [
                        {
                            id: "sub_Subjext", name: "sub_Subject", xtype: "textfield",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                },  //end of 主旨
                {
                    xtype: "fieldcontainer", fieldLabel: "內容", labelWidth: 80, layout: "fit", flex: 4, items: [
                        {
                            id: "sub_content", name: "sub_content", xtype: "textfield",  padding: "0 4 0 0",
                            //value: "AJT",
                        },
                    ]
                }, // end of 內容


V20302A - TreeView挑選Email人員, Scrollbar 無法動作

目的: V20302A - TreeView挑選Email人員, Scrollbar 無法動作 

處理說明: 1>上層Panel必須設定 ScrollBar: true
           2>  width: 400, height: 300 必需設定數值,才會有ScrollBar
                3> TreePanel.layout 不可設為 fit, 設為 vbox
                    { // TreeView
                            xtype: "panel", flex: 4, layout: { type: 'vbox', align: 'stretch' },                            
                            autoScroll: true, items: [treepanel1]
                        },  //TreeView



JSFiddle : javascript 的線上測試平台 - 如何 include ext

 目的: JSFiddle : javascript 的線上測試平台 - 如何 include ext