V80202J- F16V工單進度 – checkboxgroup –機號多行多選 – get_cmp_ - New - 左右移動 - 前端取得SQL資料 - Tmp_Store

 目的: V80202J- F16V工單進度 – checkboxgroup – 機號多選 – get_cmp_ - New

處理說明: 

1>版面設計:   

        {

          xtype: 'panel',bodyStyle: "background-color:transparent;", xtype: 'panel', border: 0, padding: "1", 

            layout: 'border',            

            items: [

                {  //form_chkbox1 : 待挑選機號                                        

                    xtype: 'panel', title: '可挑選機號', width: 250,                    

                    region: 'west',

                    items: [  cmp_chk_chkboxgrp1,  ]

                },  //end of 待挑選機號                                        

                {  //按鈕 : 往右/往左/全部往右/全部往左

                    xtype: 'panel', title: '', width: 80,

                    region: 'west',                   

                    layout: { type: 'vbox', align: 'stretch' },                    

                    items: [                       ]

                },  //end of 待挑選機號                                        

                {  //checkboxgroup2 : 已挑選機號                                        

                    xtype: 'panel', title: '已挑選機號', 

                    region: 'center',

                    items: [ cmp_chk_chkboxgrp2,]

                },  //end of  已挑選機號2                

            ]

        }  // end of J_formFields_Sub2

        ];    

2>設定 checkboxgroup - 3欄 
    var cmp_chk_chkboxgrp1 = get_cmp_chkgrp1('', 'chkboxgrp1', 0, true, [.35, .35, .35]);        
    var cmp_chk_chkboxgrp2 = get_cmp_chkgrp1('', 'chkboxgrp2', 0, true, [.35, .35, .35]);        

     --> function get_cmp_chkgrp1(par_caption, par_id, par_l_width, par_vertical, par_columns) {

           checkboxgroup: 多欄時,  layout 不可設為 vbox

       

3>設定按鈕- 處理函式

//按鈕 : 往右/往左/全部往右/全部往左

    var cmp_btn_right = get_cmp_btn1("往右", "btn_move1", 1, "icon-right", cmp_btn_right_ok);

    var cmp_btn_left = get_cmp_btn1("往左", "btn_move2", 1, "icon-left", cmp_btn_left_ok);

    

    //按鈕- 處理函式應放在  CALL_V80202J() {} 函式內, 呼叫該函式時,才載入, 

       --> 不佔記憶空間 , 且結束時,函式空間就會釋放

4>checkboxs傳至後端, 若為 Array/Object 必需先轉成 JSON

     var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);

1>*.js

function  Call_V80202J() {

    console.log(" 2 inside - CALL_V80202J -  F16V 工單進度: ");          

    //3行 - checkboxgroup

    var cmp_chk_chkboxgrp1 = get_cmp_chkgrp1('', 'chkboxgrp1', 0, true, [.35, .35, .35]);        

    var cmp_chk_chkboxgrp2 = get_cmp_chkgrp1('', 'chkboxgrp2', 0, true, [.35, .35, .35]);        

    //按鈕 : 往右/往左/全部往右/全部往左

    var cmp_btn_right = get_cmp_btn1("往右", "btn_move1", 1, "icon-right", cmp_btn_right_ok);

    var cmp_btn_left = get_cmp_btn1("往左", "btn_move2", 1, "icon-left", cmp_btn_left_ok);

    var cmp_btn_allright = get_cmp_btn1("全部往右", "btn_move11", 1, "icon-right", cmp_btn_allright_ok);

    var cmp_btn_allleft = get_cmp_btn1("全部往左", "btn_move22", 1, "icon-left", cmp_btn_allleft_ok);

    

// [工作中心報工匯出]鈕  - 子畫面欄位

    var J_formFields_Sub2 = [

        {

            xtype: 'panel',bodyStyle: "background-color:transparent;", xtype: 'panel', border: 0, padding: "1", 

            layout: 'border',            

            items: [

                {  //form_chkbox1 : 待挑選機號                                        

                    xtype: 'panel', title: '可挑選機號', width: 250,                    

                    region: 'west',

                    items: [  cmp_chk_chkboxgrp1,  ]

                },  //end of 待挑選機號                                        

                {  //按鈕 : 往右/往左/全部往右/全部往左

                    xtype: 'panel', title: '', width: 80,                    

                    region: 'west',

                    layout: { type: 'vbox', align: 'stretch' },                     

                    items: [                                                

                        { xtype: 'panel', height: 50,   },// end of  虛 space

                        cmp_btn_right, cmp_btn_left,                        

                        { xtype: 'panel', height: 50 ,},// end of  虛 space

                        cmp_btn_allright, cmp_btn_allleft,                                                

                    ]

                },  //end of 待挑選機號                                        

                {  //checkboxgroup2 : 已挑選機號                                        

                    xtype: 'panel', title: '已挑選機號',                     

                    region: 'center',

                    items: [ cmp_chk_chkboxgrp2,]

                },  //end of  已挑選機號2                

            ]

        }  // end of J_formFields_Sub2

        ];    

    var cmp_btn_V80202J_OK = get_cmp_btn1("確定", "btn_V80202J_OK", 1, "", cmp_btn_V80202J_OK);

    function cmp_btn_V80202J_OK(me, e, eOpts) {

        console.log("1  OkBtn_Sub2 click ");

        var Tmp_Str = "";

        var Tmp_cnt = Ext.getCmp('chkboxgrp2').items.length;

        //var selectedSuccessValues = Ext.getCmp('cboxgrp2').getChecked();

        console.log("Tmp_cnt:", Tmp_cnt);

        if (Tmp_cnt == 0) {

            Tmp_Str = "請先挑選要匯出F16V報工現況的機號<br>"

                + " 敬請檢核 !!";

            mywarnalert(Tmp_Str);

            return;

        }

        //Ok_process_sub2(me, e, eOpts);                           

        V80202J_Ok(me, e, eOpts);

    } // end of click

    var cmp_btn_V80202J_CANCEL = get_cmp_btn1("取消", "btn_V80202J_CANCEL", 1, "", cmp_btn_V80202J_CANCEL);

    function cmp_btn_V80202J_CANCEL(me, e, eOpts) {

        me.up("window").close();

        me.up("window").destroy();        

    } // end of click

    var Sub2_Btns = [

        { xtype: 'panel', flex: 1 },// end of  虛 space

        cmp_btn_V80202J_OK,

        cmp_btn_V80202J_CANCEL,        

        { xtype: 'panel', flex: 1 },// end of  虛 space

    ];

    console.log(" 4-1 Tmp_mySubForm of window F16V報工現況匯出");

    var win = getMyWindow("F16V工單進度", J_formFields_Sub2, Sub2_Btns);

    console.log(" 4-2 Tmp_mySubForm of window F16V報工現況匯出");

    var Tmp_mySubForm = Ext.getCmp("mySubForm");

    console.log("Tmp_mySubForm of window F16V報工現況匯出", Tmp_mySubForm);

    //Tmp_mySubForm.layout = "{ xtype: 'vbox', align: 'stretch' }";

    //將現有機號加入  ckboxgrp1

    AddASN(win);     

    //function  - V80202J

    //將現有 ASN 加入 ckboxgrp1

    function AddASN(par_win) {

        //1>由 mystore1 取得現有機號 store

        console.log("inside AddASN");

        var Tmp_fields = [

            { name: "ACNO_" },  //飛機機號        

        ];

        var Tmp_Store = Ext.create('Ext.data.Store', {

            fields: Tmp_fields,

            autoLoad: false,

            proxy: {

                type: "ajax",

                start: 1,

                page: 1,

                limit: 30,

                async: false,  //必需執行完, 才執行下一步驟

                url: "",

                getMethod: function () { return 'POST'; },

                reader: {

                    type: "json",

                    root: 'T1',

                    totalProperty: 'T1C[0].TOTAL'

                }

            }

        });  // end of Tmp_store;

        var np2 = {};

        Tmp_Store.getProxy().url = '../../api/V80202JAPI/get_ASN';

        Tmp_Store.getProxy().extraParams = np2;　//分頁OK,篩選條件OK

        Tmp_Store.reload();

        //2>由 store 每一筆加入 ckboxgrp1

        Tmp_Store.on('load', function () {

            console.log("inside Tmp_Store.onload");

            var Tmp_PageCnt = Tmp_Store.getCount();  //store筆數    

            console.log("Tmp_PageCnt:", Tmp_PageCnt);

            var cur_rec;

            var Tmp_chkboxgrp1 = Ext.getCmp("chkboxgrp1");

            console.log("1 Tmp_chkboxgrp1:", Tmp_chkboxgrp1);

            Tmp_chkboxgrp1.removeAll();

            console.log("2 after Tmp_chkboxgrp1.items.removeAll:", Tmp_chkboxgrp1);

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

                //console.log("3 for(i=0:", i);

                //console.log("更新第 i  筆", i);

                //依目前 store的資料, 更新 AMM_FACDEPD.NWK , PK( DT+DEP+EMPLYID)

                cur_rec = Tmp_Store.getAt(i);

                Tmp_ACNO_ = cur_rec.data["ACNO_"];

                Tmp_ACNO_id = 'checkbox' + Tmp_ACNO_;

                //var Tmp_chkbox = {

                //    xtype: 'checkbox',

                //    boxLabel: Tmp_ACNO_,

                //    name: 'rb',

                //    inputValue: Tmp_ACNO_,

                //    id: Tmp_ACNO_id,

                //};

                var Tmp_chkbox = new Ext.form.Checkbox({

                    xtype: 'checkbox',

                    boxLabel: Tmp_ACNO_,

                    name: 'rb',

                    inputValue: Tmp_ACNO_,

                    id: Tmp_ACNO_id,

                    width: 70,

                });

                Tmp_chkboxgrp1.items.add(Tmp_chkbox);

            }  // end  for (i=0;)

            //console.log("4 after for(i=0:", i);        

            //console.log("5 before Ext.getCmp('chkboxgrp1').updateLayout();");

            Ext.getCmp('chkboxgrp1').updateLayout();

            //console.log("6 after Ext.getCmp('chkboxgrp1').updateLayout();");

            Ext.getCmp('chkboxgrp2').updateLayout();

            //console.log("7 after Ext.getCmp('chkboxgrp2').updateLayout();");

            par_win.width = 600;

            par_win.height = 300;

            par_win.y = 100;

            par_win.show();

        });  // end of Tmp_Store.on('load', function () {

    }  // end of AddASN();

    //[F16V工單進度].[確認]鈕 , 處理

    //function Ok_process_sub2(me, e, eOpts) {

    function V80202J_Ok(me, e, eOpts) {

        console.log(" 1.1 inside V80202J_Ok");

        console.log(" me: ", me);

        var Tmp_Str = "";

        //在 chkboxgrp2

        var selectedValues = Ext.getCmp('chkboxgrp2').items;

        console.log(selectedValues);

        var Tmp_ASNAry = [];  //var Tmp_Obj={};

        //chkboxgrp2 均設為 true

        for (var i = 0; i < selectedValues.length; i++) {

            console.log("selectedValues.items[i].value", selectedValues.items[i].value);

            console.log("selectedValues.items[i].getValue()", selectedValues.items[i].getValue());

            selectedValues.items[i].setValue(true);

        };

        var np = {};

        //取得 chkboxgrp2 的勾選欄位值 

        //Array , Object 傳至後端,必需先  JSON.stringify

        //np["s_VRCODE"] = Ext.getCmp('s_VRCODE').getValue();

        np["ASN_ARY"] = Ext.getCmp('chkboxgrp2').getValue();

        //np["ASN_ARY_rb"] = Ext.getCmp('rb').getValue();

        console.log("Ext.getCmp('chkboxgrp2').getValue(): ", Ext.getCmp('chkboxgrp2').getValue());

        console.log("Ext.getCmp('chkboxgrp2').getValue()['rb']: ", Ext.getCmp('chkboxgrp2').getValue()["rb"]);

        //將 Array 轉成  JSON字串, 以便傳至後端

        var Tmp_JSONStr = JSON.stringify(Ext.getCmp('chkboxgrp2').getValue()["rb"]);

        console.log("0 Tmp_JSONStr: ", Tmp_JSONStr);

        //若只選1個checkbox,則Ext.getCmp('chkboxgrp2').getValue()["rb"] , 傳回字串  "A026"

        //若只選2個checkbox,則Ext.getCmp('chkboxgrp2').getValue()["rb"] , 傳回Array   ["A012","A026"]

        if (Tmp_JSONStr.indexOf("[", 0) == -1) {

            Tmp_JSONStr = "[" + Tmp_JSONStr + "]";

        }

        console.log("1 Tmp_JSONStr: ", Tmp_JSONStr);

        np["ASN_ARY_JSONStr"] = Tmp_JSONStr;

        console.log("np['ASN_ARY_JSONStr']: ", np["ASN_ARY_JSONStr"]);

        console.log("0 np:", np);

        //np["ASN_ARY"] = Tmp_ASNAry;    

        np["FName"] = "F16V現況報工匯出.xlsx";

        console.log("np:", np);

        console.log("FName: ", np.FName);

        //EX_DFile : cookies, 傳回訊息  - 因傳回檔案不可用 HttpMessage , 所以用 Cookie 傳訊息

        //f_downloadFile 函式會自已產生 Form  & submit , 並不會帶本子視窗畫面的 欄位值(Ex: chkboxgroup2)

        f_downloadFile('EX_DFile', '../api/V80202BAPI/F16V_ALS_OUT', np, 'POST', function () {

            var r = r_cookies('EX_DFile');

            if (!checkisnull(r))

                mysuccessalert(r);

        });

    };  // end of Ok_process() {  // F16V報工現況匯出.確定

    function cmp_btn_right_ok() {

        var selectedValues = Ext.getCmp('chkboxgrp1').getChecked();

        console.log(selectedValues);

        for (var i = 0; i < selectedValues.length; i++) {

            Ext.getCmp('chkboxgrp1').remove(selectedValues[i]);

            var tempObj = new Ext.form.Checkbox(selectedValues[i]);

            Ext.getCmp('chkboxgrp2').items.add(tempObj);

        }

        Ext.getCmp('chkboxgrp1').updateLayout();

        Ext.getCmp('chkboxgrp2').updateLayout();

    };

    function cmp_btn_left_ok() {

        var selectedValues = Ext.getCmp('chkboxgrp2').getChecked();

        console.log(selectedValues);

        for (var i = 0; i < selectedValues.length; i++) {

            Ext.getCmp('chkboxgrp2').remove(selectedValues[i]);

            var tempObj = new Ext.form.Checkbox(selectedValues[i]);

            Ext.getCmp('chkboxgrp1').items.add(tempObj);

        }

        Ext.getCmp('chkboxgrp1').updateLayout();

        Ext.getCmp('chkboxgrp2').updateLayout();

    };

    function cmp_btn_allright_ok() {

        //將 chkboxgrp1.checkbox 均設為 true

        var selectedValues = Ext.getCmp('chkboxgrp1').items;

        console.log(selectedValues);

        //1>chkboxgrp1 均設為 true

        for (var i = 0; i < selectedValues.length; i++) {

            console.log("selectedValues.items[i].value", selectedValues.items[i].value);

            console.log("selectedValues.items[i].getValue()", selectedValues.items[i].getValue());

            selectedValues.items[i].setValue(true);

        };

        //2>將 checkboxgrp1.已勾選的資料,移至 chkboxgrp2

        selectedValues = Ext.getCmp('chkboxgrp1').getChecked();

        console.log(selectedValues);

        for (var i = 0; i < selectedValues.length; i++) {

            Ext.getCmp('chkboxgrp1').remove(selectedValues[i]);

            var tempObj = new Ext.form.Checkbox(selectedValues[i]);

            Ext.getCmp('chkboxgrp2').items.add(tempObj);

        }

        Ext.getCmp('chkboxgrp1').updateLayout();

        Ext.getCmp('chkboxgrp2').updateLayout();

    }

    function cmp_btn_allleft_ok() {

        var selectedValues = Ext.getCmp('chkboxgrp2').items;

        console.log(selectedValues);

        //1>chkboxgrp1 均設為 true

        for (var i = 0; i < selectedValues.length; i++) {

            console.log("selectedValues.items[i].value", selectedValues.items[i].value);

            console.log("selectedValues.items[i].getValue()", selectedValues.items[i].getValue());

            selectedValues.items[i].setValue(true);

        };

        //2>將 chkboxgrp2 勾選項目,移至 chkboxgrp1

        var selectedValues = Ext.getCmp('chkboxgrp2').getChecked();

        //var selectedValues = Ext.getCmp('chkboxgrp2').items.items;

        console.log("selectedValues:", selectedValues);

        for (var i = 0; i < selectedValues.length; i++) {

            Ext.getCmp('chkboxgrp2').remove(selectedValues[i]);

            var tempObj = new Ext.form.Checkbox(selectedValues[i]);

            Ext.getCmp('chkboxgrp1').items.add(tempObj);

        }

        Ext.getCmp('chkboxgrp1').updateLayout();

        Ext.getCmp('chkboxgrp2').updateLayout();

    }

};  // end of  function  Call_V80202J() {