V80202 - Array 的函式用法 filter , map , includes , forEach - get_cmp_filter1 - 挑選欄位

 目的:  V80202  Array 的函式用法  - filter  ,  map , includes , forEach

處理說明:  1>Array.filter(function()) :Array : 

                        -->  原Array元素 ,將符合過濾條件的元素,產生一新的Array

                       (部份元素of原Array)
                      const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
                      const result = words.filter((word) => word.length > 6);
                      console.log(result);

                      // Expected output: Array ["exuberant", "destruction", "present"]

                 2>Array.map(function()) :Array 

                     --> 將原 Array元素,傳入函式計算後, 產生一新的Array

                     (新元素)

                      const array1 = [1, 4, 9, 16];

                        // Pass a function to map

                      const map1 = array1.map((x) => x * 2);

                      console.log(map1);

                      // Expected output: Array [2, 8, 18, 32]

                 3>Array.includes: boolean

                    --> 判斷 Array 是否包含某一元素,若是,則傳回 true , 反之傳回  false

                      const array1 = [1, 2, 3];

                      console.log(array1.includes(2));

                     // Expected output: true

                       const pets = ['cat', 'dog', 'bat'];

                       console.log(pets.includes('cat'));

                      // Expected output: true

                      console.log(pets.includes('at'));

                      // Expected output: false

                4>Array.forEach(function())  :

                    --> 將  Array 元素傳入函式, 執行函式

                      const array1 = ['a', 'b', 'c'];

                      array1.forEach((element) => console.log(element));

                   

                4>過濾欄位1,2,3挑選 - 過濾欄位1已挑選欄位值,則其他過濾欄位(2,3)則不再列出

                   //展開時,過濾store值不等於其他過濾欄位值

                   var onExpand= function (combo) {

                       combo.getStore().clearFilter();

                       var otherSelectedValues = ['s_filter1', 's_filter2', 's_filter3'].filter

                           (otherId => otherId !== combo.id).map(otherId => selectedValues[otherId]);

                       combo.getStore().filterBy(function (record) {

                            return !otherSelectedValues.includes(record.get('value'));

                        });    }

                  //選擇後,過濾store值不等於目前過濾欄位挑選值

                  var onSelect = function (combo, records) {                

                      var record = records[0] || records;   //records : 多筆 Array Obj

                      var cur_value = record.get("value");

                     // 更新 selectedValues 對象

                     if (cur_value != '') {

                         selectedValues[combo.id] = cur_value;            

                     } else {

                          selectedValues[combo.id] = null; //挑選到"請選擇"要清空已選中的選項

                    };

                   // 刷新其他下拉列表的選項

        ['s_filter1', 's_filter2', 's_filter3'].forEach(function (id) {

            if (id !== combo.id) {

                var otherCombo = Ext.getCmp(id);

                otherCombo.getStore().clearFilter();

                otherCombo.getStore().filterBy(function (record) {

                    return record.get('value') !== cur_value && record.get('value') !== selectedValues[id];

                });

            }

        });

    };

1>*.js

//combo 選項 

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

        fields: ["value", "displayName"],

        data: [

            { value: "", displayName: "請選擇", },

            { value: "ECNO", displayName: "EO  ECN", },

            { value: "PROCWC", displayName: "生產工廠", },

            { value: "PN", displayName: "件號", },

            { value: "AMMNO", displayName: "AMM單號", },

        ]

    }

    );

    //儲存combox目前選擇的項目

    var selectedValues = {        

        s_filter1: null,

        s_filter2: null,

        s_filter3: null,

    };

    var onSelect = function (combo, records) {

        myalert("onSelect !!" + combo.id);

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

        var record = records[0] || records;   //{"PROCWC": "生產工廠"}

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

        var cur_value = record.get("value");

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

        // 更新 selectedValues 對象

        if (cur_value != '') {

            selectedValues[combo.id] = cur_value;            

        } else {

            selectedValues[combo.id] = null; //挑選到"請選擇"要清空已選中的選項

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

        };

        // 更新其他下拉列表的選項, store 的內容<> 目前過濾條件的挑選值  且  store 的內容<>目前挑選值

        var Tmp_filter_Ary = ['s_filter1', 's_filter2', 's_filter3'];  //過濾條件的 Array

        Tmp_filter_Ary.forEach(function (id) {

            if (id !== combo.id) {

                var otherCombo = Ext.getCmp(id);

                otherCombo.getStore().clearFilter();  //清除  store.filter 內容

                otherCombo.getStore().filterBy(function (record) {   //filterBy function , 若為 true ,則包含該選項     

                    var Tmp_isAdd = true;

                    if (record.get('value') == cur_value)

                        Tmp_isAdd = false;

                    //var obj = {"1":5,"2":7,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0}

                    //var result = Object.keys(obj).map((key) => [key, obj[key]]);

                    //var selectedValues_Ary = Object.keys(selectedValues).map((key) => [key, selectedValues[key]]);

                    var selectedValues_Ary = Object.entries(selectedValues);

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

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

                        if (record.get('value') == selectedValues[i])

                            Tmp_isAdd = false;

                    }

                    return Tmp_isAdd;

                });

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

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

                var Tmp_store = otherCombo.getStore();

                console.log(" otherCombo.getStore()- Tmp_store", Tmp_store);

            }

        });

    }; // end of onselection

    var onExpand= function (combo) {

        combo.getStore().clearFilter();

        var otherSelectedValues = ['s_filter1', 's_filter2', 's_filter3'].filter(otherId => otherId !== combo.id).map(otherId => selectedValues[otherId]);

        combo.getStore().filterBy(function (record) {

            return !otherSelectedValues.includes(record.get('value'));

        });

    }

    var cmp_filter1 = get_cmp_filter1("過濾條件1", "s_filter1", 80, 80, Tmp_Store);

    var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 80, Tmp_Store);

    var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 80, Tmp_Store);

    Ext.getCmp("s_filter1").on("select", onSelect);

    Ext.getCmp("s_filter2").on("select", onSelect);

    Ext.getCmp("s_filter3").on("select", onSelect);

    Ext.getCmp("s_filter1").on("expand", onExpand);

    Ext.getCmp("s_filter2").on("expand", onExpand);

    Ext.getCmp("s_filter3").on("expand", onExpand);