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();

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 得到 這是中文字串

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);

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);

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