2022年8月17日 星期三

V120402D - 子畫面onShow時,顯示目前所在資料的欄位值

 目的: 子畫面onShow時,顯示主畫面grid資料欄位值

處理說明: 1>取得主畫面grid資料欄位值,並存入 - np
                  2>np當參數傳入子畫面呼叫函式
                  3>設定子畫面欄位值



1>*.js

  {
            xtype: 'button', text: '查詢借閱記錄', id: 'LookBtn',
            listeners: {
                click: function () {
                    //console.log(" 1 inside 缺勤記錄維護: ");
                    var cur_recs,cur_rec;
                    var np = {};
                    var Tmp_Str = "";
                    cur_recs = Ext.getCmp("grid_M").selModel.getSelection();
                    if (cur_recs.length == 0) {
                        Tmp_Str = "請先選擇要查詢借閱記錄的資料<br>";
                        mywarnalert(Tmp_Str);
                        return;
                    }
                    cur_rec = cur_recs[0];
                    np["TMNO"] = cur_rec.data["TMNO"];
                    np["TMNOXX"] = cur_rec.data["TMNOXX"];
                    np["DOCNO"] = cur_rec.data["DOCNO"];
                    np["NATIXX"] = cur_rec.data["NATIXX"];
                    np["SHT"] = cur_rec.data["SHT"];
                    np["LGTPXX"] = cur_rec.data["LGTPXX"];
                    LookBtn_click(np);
                }
            }
        },

var win = getMyWindow("查詢借閱記錄", sub_LookFlds, sub_LookFlds_Btns);
    //var win = getMyWindow("查詢借閱記錄", sub_LookFlds);
    win.width = 700;
    win.heigh = 400;    

    win.on("show", function (me, eOpts) {
        console.log("win onshow!!");
        Ext.getCmp('sub_Grid_ptb').hide();
        Ext.getCmp("sub_TMNOXX").setValue(par_np["TMNOXX"]);
        Ext.getCmp("sub_DOCNO").setValue(par_np["DOCNO"]);
        Ext.getCmp("sub_NATIXX").setValue(par_np["NATIXX"]);
        Ext.getCmp("sub_SHT").setValue(par_np["SHT"]);
        Ext.getCmp("sub_LGTPXX").setValue(par_np["LGTPXX"]);
    });

    win.show();      //onShow event handler 必需在 win.show(); 執行前就宣告, 才會觸發 
    
} // end of   function LendBtn_click() {


2022年8月16日 星期二

V120402- V120402C - 子畫面查詢grid 採用 CheckboxModel- checkbox 方式選擇 row, 處理勾選資料

目的: grid 畫面新增 CheckboxModel 選擇 row

處理說明:  1> var view = sub_Grid.getView();
                         view.selModel = Ext.create('Ext.selection.CheckboxModel', {
                         selectionMode: 'SIMPLE',
                            : 
                          };
                         view.updateLayout();
                   2>selectionMode:
      • SINGLE表示單選
      • SIMPLEMULTI表示多選 , 預設是多選的(如上段程式碼已經有設定單選
                   3>處理勾選的資料
                      //檢查資料是否正確
                        cur_recs = Tmp_sub_Grid.getView().selModel.getSelection();
                        console.log("cur_recs:", cur_recs);
                         if (cur_recs.length == 0) {
                              mywarnalert("請先選擇要續借的資料");
                              return;
                         }
                         for (var i = 0; i < cur_recs.length; i++) {


1>V120402C.js

 var view = sub_Grid.getView();
    view.selModel = Ext.create('Ext.selection.CheckboxModel', {
        selectionMode: 'SIMPLE',
        listeners: {
            selectionchange: function (cb, selected, eOpts) {
                console.log(view.selModel.getSelection()); //選取的值
                //console.log("selected.data[TMNO]", selected.data["TMNO"]);
            },
            RowMouseDown: function (view, record, item, index, e) {
                var me = this;
                if (index !== -1) {

                    if (!me.allowRightMouseSelection(e)) {
                        return;
                    }

                    if (e.shiftKey && me.lastFocused) {
                        me.selectRange(me.lastFocused, record, e.ctrlKey);
                        me.processSelection(view, record, item, index, e);
                    }

                    if (!me.isSelected(record)) {
                        me.mousedownAction = true;
                        me.processSelection(view, record, item, index, e);
                    } else {
                        me.mousedownAction = false;
                    }
                }

            }
        }
    });
    view.updateLayout();


2>checkbox 勾選資料s 的處理  - [續借]鈕

//檢查資料是否正確
    cur_recs = Tmp_sub_Grid.getView().selModel.getSelection();
    console.log("cur_recs:", cur_recs);
    if (cur_recs.length == 0) {
        mywarnalert("請先選擇要續借的資料");
        return;
    }
    for (var i = 0; i < cur_recs.length; i++) {
        cur_rec = cur_recs[i];
        Tmp_Str = "第" + (i + 1).toString() + "筆選擇 -條碼編號(" + cur_rec.data["TMNO"] + ")";
        //console.log(Tmp_Str, cur_rec.data["CHECK"]);
        //if ((cur_rec.data["CHECK"] == undefined) || (cur_rec.data["CHECK"] == false))
        //continue;
        Tmp_TMNO = cur_rec.data["TMNO"];
        Tmp_BRDT = cur_rec.data["BRDT"];
        Tmp_BRDAY = cur_rec.data["BRDAY"];
        if (Tmp_BRDAY >=20) {
            Tmp_Str = "第" + (i + 1).toString() + "筆條碼編號(" + Tmp_TMNO + ")已續借展延10天<br>"
                + "不可再展延<br>"
                +"請檢核<br>";
            mywarnalert(Tmp_Str);
            //cur_rec.data["CHECK"].setValue(false);
            //console.log("Ext.getCmp(Tmp_TMNO)", Ext.getCmp(Tmp_TMNO));
            isOk = false;            
            break;
        }
    }// for i=0
    if (isOk == false)
        return false;



如上為 子畫面,單純 Grid , 不套用 Template
PS: 若為 Template of   grid_Single or grid_M 正式處理方式 : 將 TMGrid 換掉 
    Ext.getCmp('grid_Single').destroy(); //20220905
    var grid_Single = Ext.create('grid_Single', {
        id: 'grid_Single',
        resizable: true,
        selModel: Ext.create('Ext.selection.CheckboxModel', {
            selectionMode: 'SIMPLE',
            listeners: {
                /*selectionchange: function (cb, selected, eOpts) {
                    //view.selModel.getSelection()
                },*/
                RowMouseDown: function (view, record, item, index, e) {
                    var me = this;
                    if (index !== -1) {

                        if (!me.allowRightMouseSelection(e)) {
                            return;
                        }

                        if (e.shiftKey && me.lastFocused) {
                            me.selectRange(me.lastFocused, record, e.ctrlKey);
                            me.processSelection(view, record, item, index, e);
                        }

                        if (!me.isSelected(record)) {
                            me.mousedownAction = true;
                            me.processSelection(view, record, item, index, e);
                        } else {
                            me.mousedownAction = false;
                        }
                    }

                }
            }
        })
    });
    Ext.getCmp('tab2').add(grid_Single); //將grid加入到tab裡面
    Ext.getCmp('tab2').updateLayout();



2022年8月15日 星期一

V120402C - 隱藏子視窗的分頁Bar , PagingToolbar - 資料全取 -_ptb - Toolbar

 目的: 隱藏子視窗的分頁Bar , PagingToolbar

處理說明: 1>Pagingtoolbar 的id = sub_Grid+"_ptb"
                   2>Ext.getCmp('sub_Grid_ptb').hide();
                        //Ext.getCmp("sub_Grid").bbar.hidden = true;   --> 無效


1>*.js   -     Ext.getCmp('sub_Grid_ptb').hide();

//[續借登記]鈕 - 子視窗
function ContiBtn_click() {
       :
    var win = getMyWindow("續借登記", sub_ContiFlds, sub_ContiFlds_Btns);
    //var win = getMyWindow("續借登記", sub_ContiFlds);
    win.width = 600;
    win.heigh = 400;
    win.show();
    //隱藏[分頁控制] Bar  -->單檔主畫面.PagingToolbar='grid_ptb';
    Ext.getCmp('sub_Grid_ptb').hide();
    //Ext.getCmp("sub_Grid").bbar.hidden = true;  //--> 無效
    console.log("step6");
} // end of   function LendBtn_click() {

Question : V120402 - CheckBox & 全選CheckBox 如何處理 - Grid - 不用 CheckboxModel

目的: 如何加入 CheckBox 及全選 CheckBox

處理說明:  1>Grid.Columns 加入 CheckBox 欄 (xtype; 'checkcolumn')
                   2>如何標示每一row id , checkbox
                   ?? 3>如何全選 CheckBox 


1>*.js

var J_columns = [
{ header: "", xtype: "rownumberer", width: 50, align: "center", sortable: false },
{
header: '勾選',
dataIndex: 'CHECK',
xtype: 'checkcolumn',
width: 60,
renderer: function (value, metadata, record, rowIndex, colIndex, store) {
var tempVal = '';
if ((value === 'Y') || (value === true)) { tempVal = 'checked'; }
var Tmp_Str = "<input  type='checkbox'  name=" + (record.get('AMMNO')) + "   " + tempVal + " >";
return Tmp_Str;
},




2022年8月14日 星期日

V120402B - 修改程式的編碼方式(*.js/*.cs) - 程式的編碼方式 - Web程式預設為 UTF-8

目的: 修改程式的內部編碼方式(*.js/*.cs) - 程式的編碼方式  - Web程式預設為   UTF-8

處理說明:  1>檔案 --> 另存新檔 --> [存檔]右邊反三角選項 -->  編碼方式 [UTF-8]




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 顯示資料