2022年8月14日 星期日

V120402B - 子視窗包成 V120402B.js V120403B_JSON.js , 以便程式容易編輯管理 - 子視窗子程式

 目的: 將子視窗包成子程式( V120402B.js   V120403B_JSON.js ), 

             以便程式容易編輯管理 - 子視窗子程式

處理說明:      1>產生子視窗的 Fields & Column 成子程式 *A.js  *A_JSON.js
                       2>呼叫子視窗


1>*.js  呼叫子視窗函式 - [歸還登記]
1>> V120402.js 
//歸還登記
Ext.Loader.loadScript({
    url: '../JsFunction/V120402B.js'
});


 {
            xtype: 'button', text: '歸還登記', id: 'BackBtn',
            listeners: {
                click: function () {
                    //console.log(" 1 inside 缺勤記錄維護: ");
                    BackBtn_click();
                }
            }
        },



2>>V120402B.js

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

// JavaScript source code
//[歸還登記]鈕 - 子視窗
function BackBtn_click() {
    console.log(" BackBtn  step1");

    //按鈕 : [確認] [取消]  - [歸還登記]鈕
    var sub_BackFlds_Btns = [
        {
            xtype: 'button', text: '確定', id: 'sub_BackFlds_OkBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_確定 ");
                    sub_BackFlds_OkBtn();
                }
            }
        },
        {
            xtype: 'button', text: '刪除', id: 'sub_BackFlds_DelBtn',
            listeners: {
                click: function () {
                    //mysuccessalert("mysub2_確定 ");
                    //sub_BackFlds_DelBtn();
                    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();
                    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;
                    }
                }
            }
        },
        {
            xtype: 'button', text: '取消', id: 'sub_BackFlds_CancelBtn',
            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();
                }
            }
        },
    ];

    console.log("step2");

    
    //歸還登記 Grid
    var sub_Grid = Ext.create('TMGrid', {
        grid_id: 'sub_Grid',
        columns: sub_B_Columns,
        autoScroll: true,
        flex: 1,
        store: Ext.create('gridstore', { model: sub_B_Fields }),
    });

    console.log("step2.5");

    // [歸還登記]鈕  - 子畫面欄位
    var sub_BackFlds = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",
            flex: 100,
            //layout: { type: 'vbox', align: 'stretch' }, 
            layout: 'border',
            items: [
                {
                    xtype: 'panel',
                    id: 'sub_panel1',
                    region: 'north',
                    layout: { type: 'hbox', align: 'stretch' },
                    //flex: 0,
                    //border: 1,
                    items: [
                        {
                            xtype: 'panel',
                            id: 'sub_panel11',
                            layout: { type: 'vbox', align: 'stretch' },
                            flex: 15,
                            border: 0,
                            items: [{
                                xtype: "fieldcontainer", fieldLabel: "歸還人員", labelWidth: 60, layout: "hbox", flex: 2,
                                items: [{
                                    //xtype: "textfield", id: "sub_RTER", name: "sub_RTER", width: 100, padding: "0 4 0 0", fieldCls: "required", value: "611292",
                                    xtype: "textfield", id: "sub_RTER", name: "sub_RTER", width: 100, padding: "0 4 0 0", fieldCls: "required", tabindex: 0,
                                    listeners: {
                                        change: function (textfield, newValue, oldValue) {
                                            if (newValue.length == 10) {
                                                getVcardInfo_B(newValue);
                                            }
                                        }
                                    }
                                },
                                { xtype: "textfield", id: "sub_RTER_", name: "sub_RTER_", width: 100, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
                                {
                                    xtype: "button", id: "sub_RTER_btn", name: "sub_RTER_btn", width: 100, padding: "0 4 0 0", text: "歸還人員變更",
                                    handler: function () {
                                        Ext.getCmp("sub_RTER").setValue("");
                                    }
                                },
                                ]
                            }, // end of s_歸還人員
                            {  //QRCODE 
                                xtype: "fieldcontainer", fieldLabel: "QR CODE", labelWidth: 60, layout: "hbox", flex: 2, 
                                items: [
                                    {
                                        //xtype: "textfield", id: "sub_TMNO", name: "sub_TMNO", width: 200, padding: "0 4 0 0", fieldCls: "required", value: "D100000101",
                                        xtype: "textfield", id: "sub_TMNO", name: "sub_TMNO", width: 200, padding: "0 4 0 0", fieldCls: "required", tabindex: 1,
                                        listeners: {
                                            blur: function (obj, event, opts) {
                                                //1>檢核 TMNO 是否存在 AMM_TMDWG
                                                //2>檢核 TMNO 存在 AMM_TMDWG 是否可歸還(STAT='A')
                                                var Tmp_TMNO = "";
                                                var isOk = true;
                                                Tmp_TMNO = Ext.getCmp("sub_TMNO").getValue();
                                                if (checkisnull(Tmp_TMNO)) {
                                                    mywarnalert("QR CODE 不可空白!!");
                                                    return;
                                                }
                                                var np = {};
                                                np["TMNO"] = Tmp_TMNO;
                                                Ext.Ajax.request({
                                                    method: "POST",
                                                    url: '../../api/V120402BAPI/CHECK_TMNO',
                                                    params: np,
                                                    async: false,
                                                    success: function (response, opts) {
                                                        console.log("0 response.responseText=", response.responseText);
                                                        var Tmp_Obj = Ext.decode(response.responseText);
                                                        console.log("1  Tmp_Obj=", Tmp_Obj);
                                                        if (Tmp_Obj["success"] == false) {
                                                            var Tmp_Rtn_Msg = "條碼編號 (" + Tmp_TMNO + ")錯誤訊息如下:<br>"
                                                                + Tmp_Obj["Rtn_Msg"];
                                                            mywarnalert(Tmp_Rtn_Msg);
                                                            isOk = false;
                                                        }
                                                    },  //end of success                
                                                    failure: function (response, opts) {
                                                        var Tmp_Obj = Ext.decode(response.responseText);
                                                        var Tmp_Rtn_Msg = "條碼編號 (" + Tmp_TMNO + ")錯誤訊息如下:<br>"
                                                            + Tmp_Obj["Rtn_Msg"];
                                                        mywarnalert(Tmp_Rtn_Msg);
                                                        isOk = false;
                                                    }
                                                })  //end of Ext.Ajax.Request              
                                                //若 ok ,才可按 [加入資料]
                                                if (isOk == true) {
                                                    console.log("isOk:", isOk);
                                                    if (!checkisnull(Ext.getCmp("sub_btn_add")))
                                                        Ext.getCmp("sub_btn_add").setDisabled(false);
                                                }
                                                else {                                                
                                                    if (!checkisnull(Ext.getCmp("sub_btn_add")))
                                                        Ext.getCmp("sub_btn_add").setDisabled(true);
                                                }
                                                //3>將 TMNO資料加入 sub_store
                                                console.log("1 sub_btn_add.fireHandler()");
                                                Ext.getCmp("sub_btn_Add").fireHandler();
                                            }  // end of blur event
                                        }  // end of Listener
                                    },  // end of sub_TMNO
                                ]       // end of QR_CODE.ITEMS
                            },
                            ]
                        }, //end of sub2_panel11 , flex:20   
                        {
                            //xtype: 'toolbar',
                            xtype: 'panel',
                            id: 'sub_panel12',
                            layout: { type: 'vbox', align: 'right' },
                            flex: 5,
                            border: 0,
                            items: [                        
                                {
                                    xtype: 'button',
                                    id: 'sub_btn_Add',
                                    flex: 2,
                                    border: 1,
                                    text: '加入資料',  //sub_btn_Add
                                    iconCls: 'icon-search',
                                    hidden: true,
                                    handler: function () {
                                        //--> 需改為將 TMNO 的[AMM_TMDWG]資料加入 store 
                                        var np = {};
                                        np["sub_RTER"] = Ext.getCmp("sub_RTER").getValue();
                                        np["sub_TMNO"] = Ext.getCmp("sub_TMNO").getValue();
                                        var is_Ok = true;
                                        //console.log('np:', np);                                        
                                        Ext.Ajax.request({
                                            method: "POST",
                                            url: '../../api/V120402BAPI/get_sub_data1',
                                            params: np,
                                            async: false,
                                            success: function (response, opts) {
                                                console.log("0 response.responseText=", response.responseText);
                                                var Tmp_Obj = Ext.decode(response.responseText);
                                                console.log("1  Tmp_Obj=", Tmp_Obj);
                                                if (Tmp_Obj["success"] == true) {
                                                    //var Tmp_Rtn_Msg = "歸還人(" + np["sub_RTER"] + ")條碼編號(" + np["sub_TMNO"] + ")的資料取得(AMM_TMDWG)成功<br>";
                                                    //mysuccessalert(Tmp_Rtn_Msg);
                                                    console.log("1 Tmp_Obj[Rtn_Msg]:", Tmp_Obj["Rtn_Msg"]);
                                                    isOk = true;
                                                    var Tmp_recs = Ext.decode(Tmp_Obj["Rtn_Msg"]);
                                                    console.log("Tmp_recs:", Tmp_recs);
                                                    console.log("Tmp_recs.length:", Tmp_recs.length);
                                                    var Tmp_rec;
                                                    for (i = 0; i < Tmp_recs.length; i++) {
                                                        console.log("1 Tmp_rec:", Tmp_rec);
                                                        Tmp_rec = Tmp_recs[i];
                                                        console.log("Tmp_rec:", Tmp_rec);
                                                        if (Ext.getCmp("sub_Grid").store.find("TMNO", Tmp_rec["TMNO"]) == -1)
                                                            Ext.getCmp("sub_Grid").store.add(Tmp_rec);
                                                        //else
                                                            //mywarnalert("條碼編號(" + Tmp_rec["TMNO"].toString() + ")已加入,不可重複加入<br>");

                                                    } // for (i=0;i<)
                                                }
                                                if (Tmp_Obj["success"] == false) {
                                                    console.log(" false , Tmp_Obj[Rtn_Msg]", Tmp_Obj["Rtn_Msg"]);
                                                    var Tmp_Rtn_Msg = "歸還人(" + np["sub_RTER"] + ")條碼編號(" + np["sub_TMNO"] + ")的資料錯誤訉息如下:<br>"
                                                        + Tmp_Obj["Rtn_Msg"];
                                                    mywarnalert(Tmp_Rtn_Msg);
                                                    isOk = false;
                                                }
                                            },  //end of success                
                                            failure: function (response, opts) {
                                                var Tmp_Obj = Ext.decode(response.responseText);
                                                var Tmp_Rtn_Msg = "歸還人(" + np["sub_RTER"] + ")條碼編號(" + np["sub_TMNO"] + ")的資料錯誤訊息如下:<br>"
                                                    + Tmp_Obj["Rtn_Msg"];
                                                mywarnalert(Tmp_Rtn_Msg);
                                                isOk = false;
                                            }
                                        })  //end of Ext.Ajax.Request
                                        return isOk;
                                    } // end of handler of sub_btn_Add
                                },// end of  button  sub_btn_Add  , 加入資料

                                {
                                    xtype: 'label',
                                    id: 'sub_btn_label',
                                    flex: 2,
                                },
                            ]
                        }  //end of sub_panel12
                    ]
                },  //end of panel1                    
                {
                    xtype: 'panel',
                    id: 'sub_panel2',
                    //title: 'sub_panel2',
                    region: 'center',
                    layout: 'fit',
                    //flex: 60,
                    //border: 20,
                    items: [sub_Grid]
                },
            ] // end of   layout: "vbox", padding: "5", items: [
        }  //end of  my_Sub2 , items[{
    ]      //end of  my_Sub2 , items[


    Ext.getCmp('sub_Grid').store.on("load", function (me, records, successful, eOpts) {
        if (successful) {
            console.log("Ext.getCmp('sub_Grid').store", Ext.getCmp('sub_Grid').store);
            console.log("Ext.getCmp('sub_Grid').store.data", Ext.getCmp('sub_Grid').store.data);
        }
    }
    );


    console.log("sub_Grid:", sub_Grid);
    //console.log("sub_Grid.getHeight():" ,sub_Grid.getHeight());
    console.log("step3");




    console.log("step4");


    console.log("step5");

    var win = getMyWindow("歸還登記", sub_BackFlds, sub_BackFlds_Btns);
    //var win = getMyWindow("歸還登記", sub_BackFlds);
    win.width = 600;
    win.heigh = 400;
    win.show();
    Ext.getCmp('sub_Grid_ptb').hide();
    console.log("step6");
} // end of   function BackBtn_click() {



V120402 - 顯示資料 - 資料累加, 不清空原本的資料 - store.clearOnPageLoad = false;

目的: 顯示資料 - 資料一直累加, 不清空原本的資料 - 

處理說明: 1> Ext.getCmp('sub_Grid').store.clearOnPageLoad = false;


1>*.js - store.clearOnPageLoad = false;

  {
                                        xtype: 'button',
                                        id: 'sub_btn_Show',
                                        //hidden: true,
                                        flex: 2,
                                        border: 1,
                                        text: '資料顯示',  //sub2
                                        iconCls: 'icon-search',
                                        handler: function () {
                                            //--> 需改為將 TMNO 的[AMM_TMDWG]資料加入 store 
                                            var np = {};
                                            np["sub_BRP"] = Ext.getCmp("sub_BRP").getValue();
                                            np["sub_TMNO"] = Ext.getCmp("sub_TMNO").getValue();
                                            //console.log('np:', np);
                          Ext.getCmp('sub_Grid').store.getProxy().url = '../api/V120402API/getsubData';
                          Ext.getCmp('sub_Grid').store.getProxy().extraParams = np; //分頁OK,篩選條件OK
                          Ext.getCmp('sub_Grid').store.clearOnPageLoad = false;
                          Ext.getCmp('sub_Grid').reloadGirdData();                                            
                                        }
                                    },  // end of 顯示資料





V120402 - 將後端的多筆資料,加入前端畫面的dataset - dt2JSON , JSON, JSONAA

目的:  由後端取得多筆資料,加入現有畫面的 datastore

處理說明: 1>後端如何將datatable 的資料包成 JSON的格式, 傳至前端,並解碼
                  2>前端如何解碼 JSON 的格式


1>*.cs  myfunc.cs  - 宣告 dt2JSON 函式 , 傳回 datatable T1 的  JSON格式
       using Newtonsoft.Json;

        public static string dt2JSON(DataTable dt)
        {
            string JsonString = string.Empty;
            if (dt.Rows.Count > 0)
            {
                JsonString = JsonConvert.SerializeObject(dt);
            }
            return JsonString;
        }



2>*.cs  V120402, 取得 ds , 並將 ds.Tables["T1"] 轉換成 JSON格式字串, 傳回 前端
[HttpPost]
public HttpResponseMessage get_sub_Data1()
        {
            var c = HttpContext.Current;
            NameValueCollection nvc = c.Request.Form;
            string Tmp_BRP = nvc["sub_BRP"];
            string Tmp_TMNO = nvc["sub_TMNO"];

            OracleCommand cmd = new OracleCommand();
            string Tmp_Sql1 = "";  //for 日期起迄
            string Tmp_Sql = "  SELECT                              
                                                    RNK,TMNO,TMNOXX,DOCNO,SHT,REV,DOCTLE,STLCT,VOL,
                                                    BRDAY_,REMARK_,STAT,NATIXX,LGTPXX "
                                        + "  FROM   ( SELECT  dense_rank()  over(order by  TMNO) as RNK,"
                                        + "    TMNO,TMNOXX,DOCNO,SHT,REV,DOCTLE,STLCT,
                                                  VOL,10 as BRDAY_,'  ' as  REMARK_,STAT,  "
                                                                      + "     NATIXX,LGTPXX "
                                                        + "   FROM     AMM_TMDWG "
                                                       + "   WHERE  1=1 ";
            //panel11
            //條碼編號 
            if (!myfunc.checkisnull(Tmp_TMNO))
            {
                Tmp_Sql = Tmp_Sql + " AND    TMNO=  " + myfunc.AA(Tmp_TMNO);
            };
            Tmp_Sql = Tmp_Sql + ")";

            cmd.CommandText = Tmp_Sql;
            string countSql = " SELECT COUNT(*) as total FROM (" + Tmp_Sql + ")";
            DataSet ds = getDataTable(cmd, countSql);

            int Tmp_TOTAL = int.Parse(ds.Tables["T1C"].Rows[0]["TOTAL"].ToString());
            string Tmp_STAT = "";
            string Tmp_Str = "";
            if (Tmp_TOTAL > 0)
            {
                Tmp_STAT = ds.Tables["T1"].Rows[0]["STAT"].ToString();
                if (Tmp_STAT == "A")
                {
                    Tmp_Str = "目前條碼編號(" + Tmp_TMNO + ")的文件已借出/已刪除, 不可借閱";
                }
            }

            //新增  CaluField 欄位  - [管制現況]            
            getKeyCode("STAT", ref ds);

            //取得最新版期, 版別
            //自訂  CaluField 欄位  - [最新版期(VNDTXY_)] [最新版別(VNTPXD_)]
            ds.Tables["T1"].Columns.Add("VNDTXY_", typeof(object));
            ds.Tables["T1"].Columns.Add("VNTPXD_", typeof(object));

            string Tmp_Val = "";  //欄位值 以 ; 分隔
            string Tmp_NATIXX = "", Tmp_LGTPXX = "", Tmp_TMNOXX = "";
            string Tmp_VNDTXY_ = "", Tmp_VNTPXD_ = "";
            OracleConnection conn = new OracleConnection(DBService.ConnectionString(DBLINK));
            OracleCommand cmd1 = new OracleCommand();
            OracleDataReader reader;
            var response = this.Request.CreateResponse();
            string Tmp_dt2JSON;
            string Tmp_RtnMsg = "";
            try
            {
                conn.Open();
                conn.ClientInfo = User.Identity.Name;
                conn.ModuleName = BaseSYS + "_" + BaseMODID;
                conn.ActionName = ActionName;
                cmd1.Connection = conn;

                foreach (DataRow row in ds.Tables["T1"].Rows)
                {
                    Tmp_NATIXX = row["NATIXX"].ToString();
                    Tmp_LGTPXX = row["LGTPXX"].ToString();
                    Tmp_TMNOXX = row["TMNOXX"].ToString();
                    Tmp_VNDTXY_ = "";
                    Tmp_VNTPXD_ = "";
                    if (Tmp_NATIXX.Length > 0)
                    {
                        //自訂 SQL , 取得 CaluField 欄位值 
                        Tmp_Sql = " SELECT ITEMXY,VNDTXY, VNTPXD "
                                       + "  FROM  TM_XY@TLS_245 "
                                       + " WHERE  OWN_DEP='L'  "
                                       + "  AND       NATIXX=" + myfunc.AA(Tmp_NATIXX)
                                       + "  AND       LGTPXX=" + myfunc.AA(Tmp_LGTPXX)
                                       + "  AND      TMNOXX=" + myfunc.AA(Tmp_TMNOXX)
                                       + "   ORDER  BY ITEMXY DESC ";
                        cmd1.CommandText = Tmp_Sql;
                        reader = cmd1.ExecuteReader();
                        //只取最大版期 & 版別
                        if (reader.Read())
                        {
                            Tmp_VNDTXY_ = Tmp_VNDTXY_ + String.Format("{0:yyyy/MM/dd}", DateTime.Parse(reader["VNDTXY"].ToString())) + ",";
                            Tmp_VNTPXD_ = Tmp_VNTPXD_ + reader["VNTPXD"].ToString() + ",";
                        }  // end of  while 
                        if (Tmp_VNDTXY_.Length > 0)
                            Tmp_VNDTXY_ = Tmp_VNDTXY_.Substring(0, Tmp_VNDTXY_.Length - 1);
                        if (Tmp_VNTPXD_.Length > 0)
                            Tmp_VNTPXD_ = Tmp_VNTPXD_.Substring(0, Tmp_VNTPXD_.Length - 1);
                        row["VNDTXY_"] = Tmp_VNDTXY_;
                        row["VNTPXD_"] = Tmp_VNTPXD_;
                    }  // end of   if (Tmp_NATIXX.Length > 0)
                }  // end of  foreach (DataRow row in ds.Tables["T1"].Rows)
                   //如何將  ds 的 T1包成 JSON格式, 傳回前遄                

                Tmp_dt2JSON = myfunc.dt2JSON(ds.Tables["T1"]);
                Tmp_RtnMsg = Tmp_dt2JSON;
                
                Tmp_Str = "{success: true,Rtn_Msg:" + myfunc.AA(Tmp_RtnMsg) + ","
                    + " }";
                response.Content = new StringContent(Tmp_Str);    // 回應內容
                return response;
            } // end of try
            catch (Exception e)
                {
                var Tmp_ErrMsg = myfunc.Get1ORA(e.Message);
                Tmp_RtnMsg = "取得[條碼編號]的資料失敗 (get_sub_data1) !!  <br> "
                                         + Tmp_ErrMsg;

//JSON 傳回字串 {"sucess": false, "Rtn_Msg" : "錯誤訊息"  },  以 myfunc.JSONAA 包含   \"
Tmp_Str = "{"+myfunc.JSONAA("success")+": false ,"+myfunc.JSONAA("failure")+": true , "
                        + myfunc.JSONAA("Rtn_Msg")+":"+myfunc.JSONAA(Tmp_RtnMsg) + "}";
                response.Content = new StringContent(Tmp_Str);    // 回應內容
                return response;
            }
            finally
            {
                conn.Close();
            }

            //return ds;
            
        }// end of get_sub_Data1();


3>*.js  , 將 Ext.Ajax 的傳回值(JSON 字串), 轉換成 JSON Object(Ext.decode(JSONString))
               var Tmp_recs = Ext.decode(Tmp_Obj["Rtn_Msg"]);
               console.log("Tmp_recs:", Tmp_recs);
               console.log("Tmp_recs.length:", Tmp_recs.length);
               var Tmp_rec;
               for (i = 0; i < Tmp_recs.length; i++) {
                     Tmp_rec = Tmp_recs[i];
                     console.log("1 Tmp_rec:", Tmp_rec);
                     console.log("Tmp_rec:", Tmp_rec);
                      Ext.getCmp("sub_Grid").store.add(Tmp_rec);
               } // for (i=0;i<)
    







2022年8月11日 星期四

V120402 - 子視窗,自動填滿畫面的設定 - 版面

 目的: 子視窗, 自動填滿畫面的設定 

處理說明 : 1>parent.panel  :  layout : border
                       items.panel:   region:   1) north/south , 只可設定 Height
                                                            2) east/west, 只可設定 width

PS: north和south部分只能設置高度(height)
   west和east部分只能設置寬度(width)
   center區域必須有,且它的大小是在其他4個部分設置好以後自動計算出來的,
              所以不能為它指定寬度值或高度值。


1>*.js

        var win = getMyWindow("借閱登記", sub_LendBtn, sub_LendBtn_Btns);
        win.width=600;
        win.heigh=400;
        win.show();
        console.log("step6");

// [缺勤記錄維護]鈕  - 子畫面欄位
        var sub_LendBtn = [
            {
                type: 'panel', bodyStyle: "background-color:transparent;", border: 0, padding: "5",
                flex: 100,
                layout: 'border',
                items: [
                    {
                        xtype: 'panel',
                        id: 'sub_panel1',
                        region: 'north',
                        layout: { type: 'hbox', align: 'stretch' },
                        items: [
                            {
                                xtype: 'panel',
                                id: 'sub_panel11',
                                layout: { type: 'vbox', align: 'stretch' },
                                flex: 15,
                                border: 0,
                                items: [{
                                    xtype: "fieldcontainer", fieldLabel: "借閱人員", labelWidth: 60, layout: "hbox", flex: 2,
                                    items: [{
                                        xtype: "textfield", id: "sub_BRP", name: "sub_BRP", width: 100, padding: "0 4 0 0", fieldCls: "required", value:"611292" ,
                                        listeners: {
                                            change: function (textfield, newValue, oldValue) {
                                                if (newValue.length == 10) {
                                                    getVcardInfo(newValue);
                                                }
                                            }
                                        }
                                    },
                                        { xtype: "textfield", id: "sub_BRP_", name: "sub_BRP_", width: 100, padding: "0 4 0 0", readOnly: true, fieldCls: "readonly", },
                                    {
                                        xtype: "button", id: "sub_BRP_btn", name: "sub_BRP_btn", width: 100, padding: "0 4 0 0", text: "借閱人員變更",
                                        handler: function () {
                                        
                                        }
                                    },
                                    ]
                                }, // end of s_借閱人員
                                       :
                        ]
                    },  //end of panel1                    
                    {
                        xtype: 'panel',
                        id: 'sub_panel2',
                        region: 'center',
                        layout: 'fit',
                        items: [sub_Grid]
                    },
                ] // end of   layout: "vbox", padding: "5", items: [
            }  //end of  my_Sub2 , items[{
        ]      //end of  my_Sub2 , items[

V120402 - 刷識別證,自動轉成員工帳號 - 識別證卡號自動轉成員工帳號 , 下一欄位 focus()

目的: 刷識別證,自動轉成員工帳號  - 識別證卡號自動轉成員工帳號

處理說明 : 1>讀取識別證卡號透過aes apserver , AP Server資訊如下: 
                         url:http://192.30.8.224:5556/soap/IMDPApp
                         --> AES 的 AP Server 類似  AMM的 AP Server  , 連到 AES的資料庫  
                   2>SQL:
                                   SELECT PSNNO
                                   FROM SMS_AIDC.dbo.V_CARD
                                   WHERE CARDNO ='0069099682';




1>*.js  - 呼叫 getVcardInfo(CardNo)
 {
                                xtype: 'panel',
                                id: 'sub_panel11',
                                layout: { type: 'vbox', align: 'stretch' },
                                flex: 15,
                                border: 0,
                                items: [{
                         xtype: "fieldcontainer", fieldLabel: "借閱人員", labelWidth: 60, layout: "hbox", flex: 2,
                                    items: [{
xtype: "textfield", id: "sub_BRP", name: "sub_BRP", width: 100, padding: "0 4 0 0", 
            fieldCls: "required", value:"611292" ,
                                        listeners: {
                                            change: function (textfield, newValue, oldValue) {
                                                if (newValue.length == 10) {
                                                    getVcardInfo(newValue);
                                                }
                                            }
                                        }
                                    },
                           

function getVcardInfo(CardNo) {
        Ext.Ajax.request({
            url: '../../api/VD01API/GETVCARDINFO?CARDNO=' + CardNo,
            method: 'POST',
            success: function (response, opts) {
                var value = JSON.parse(response.responseText);
                if (value[0]['PSNNO'] == 'NA') {
                    mywarnalert('查無員工資料!!');
                } else {
                    Ext.getCmp('sub_BRP').setValue(value[0]['PSNNO']);
                    Ext.getCmp('sub_BRP_').setValue(value[0]['NM']);
                    //下一欄位 focus() 
                    Ext.getCmp('sub_TMNO').inputEl.dom.focus();          
                }

            }
        });
    }


2>*.cs
[HttpPost]
        public dynamic GETVCARDINFO(string CARDNO)
        {
            List<object> result = new List<object>();
            var PSNNO = TLSWS.GetPanNo(CARDNO);
            var NM = TLSWS.GetUserName(PSNNO);
            result.Add(new
            {
                PSNNO = PSNNO,
                NM = NM
            });
            return result;
        }

V120402 - 設定欄位屬性: 唯讀/必填(readonly , required) - 計算欄位(calculate)

目的: 設定欄位屬性為 唯讀/必填 (readonly , required )  - 計算欄位(calculate)

處理說明 : 1> { xtype: "textfield", id: "sub_TMNO", name: "sub_TMNO", width: 110, 

                            padding: "0 4 0 0", fieldCls: "required",  },

                   2>{ xtype: "textfield", id: "sub_BRP_", name: "sub_BRP_", width: 100, padding: "0 4 0 0",

                           readOnly: true, fieldCls: "readonly", },

                  3>{ id: "STAT_", name: "STAT_", xtype: "textfield", width: 60, 

                         readOnly: true, fieldCls: "calculate", padding: "0 4 0 0" }