V80202 – 工單查詢 - 畫面底部如何加一ToolBar -分成2行 - AddDocked - DockedItems

 目的:V80202 – 工單查詢   - 畫面底部如何加一ToolBar

處理說明:  1> Ext.Panel.AddDocked( {
                                  dock: ":元件位置, Ex:bottom",

                                  dockedItem:[{Items: [":元件,Ex: cmp_mytoolBar]}],

                                  },1);

                     2> Ext.getCmp("grid_Single").dockedItems : 列出目前Panel的DockedItems

                     3> 加入[過濾欄位]Toolbar, 

                          Ext.getCmp("grid_Single").AddDocked({

                                dock:"top",

                                dockedItem:[{items{Query,Query1}}]

                           });

                      4> 加入[額外按鈕]Toolbar

                         Ext.getCmp('grid_Single').addDocked({

                           dock: "bottom",

                           dockedItems: [{items: [cmp_mytoolBar]}],        

                             },3);

                      5>grid_ptb的 dockedItem.index 必需固定為 1

                          否則 .insertBtn(xxx); 會Error 

1>*.js  - 上方 -加入過濾欄位 Bar

      var cmp_filter1 = get_cmp_filter1("過濾條件1", "s_filter1", 80, 130, Tmp_Store);
      var cmp_filter2 = get_cmp_filter1("過濾條件2", "s_filter2", 80, 130, Tmp_Store);
      var cmp_filter3 = get_cmp_filter1("過濾條件3", "s_filter3", 80, 130, Tmp_Store);

      var Query1 = new Ext.FormPanel({

            id: 's_form1',
            layout: { type: 'hbox', align: 'stretch' },
            fieldDefaults: { labelAlign: 'right' },
            defaults: { margin: { top: 3 } },

             items: [{

           xtype: 'panel', id: 'panel21', layout: { type: 'hbox', align: 'stretch' }, flex: 14, border: 0, height: 25,            items: [ cmp_filter1, cmp_filter2, cmp_filter3,]

        }]

    });

 Ext.getCmp('grid_Single').addDocked({

        dock: "top",
        dockedItems: [{
            items: [Query, Query1]
        }]
    },0);

2>*.js  - 底部 -加入按鈕

var cmp_mytoolBar =

    {

        xtype: 'toolbar',

        dock: 'bottom',

        id: 'mytoolBar1',

        items: [

            {

                xtype: 'button', text: '整機抽換紀錄匯出', id: 'Call_V80202I_Btn',

                iconCls: 'icon-excel',

                listeners: {

                    click: function () {

                        Call_V80202I();

                    }

                }

            },                

            {

                xtype: 'button', text: 'F16V_CHECK', id: 'Call_V80202K_Btn',

                iconCls: 'icon-check',

                listeners: {

                    click: function () {

                        Call_V80202K();

                    }

                }

            },                

            {

                xtype: 'button', text: 'SAP單況比對', id: 'Call_V80202L_Btn',

                iconCls: 'icon-check',

                listeners: {

                    click: function () {

                        Call_V80202L();

                    }

                }

            },                

            {

                xtype: 'button', text: 'Finding處置匯入', id: 'Call_V80202M_Btn',

                iconCls: 'icon-add',

                border: '2',

                listeners: {

                    click: function () {

                        Call_V80202M();

                    }

                }

            },        

        ]

    };

 Ext.getCmp('grid_Single').addDocked({

        dock: "bottom",

        dockedItems: [{            

            items: [cmp_mytoolBar]

        }],        

    },1);

3>Ext.getCmp("grid_Single").dockedItems內容

.Items[0] : 上方,過濾條件

.Items[1]:  底部, ToolBar

.Items[2]:  grid , Grid 內容

.Items[3]: grid_ptb , 分頁按鈕

-->實際內容階層
Items[0]-dockedItems-Items[0].items.keys : [s_form,s_form1]
Items[1]-dockedItems-Items[0].items.keys : [mytoolBar1]

4>TMGrid.js

  insertBtn: function (i_btnJson) {

        //console.log('insertBtn_1');

   //如下因為在TMGrid Source, grid_ptb.index限定為1, 所以若 grid_ptb.index 改變時,會Error

        var bar = Ext.getCmp(this.dockedItems.keys[1]);

        if (i_btnJson.length > 0) {

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

                bar.insert(bar.items.length - 2, i_btnJson[i]);

            }

        } else {

            bar.insert(bar.items.length - 2, i_btnJson);

        }

    },

    reloadGridData: function (i_is_warnalert, i_idx) {

--> 所以改成 3

  Ext.getCmp('grid_Single').addDocked({

        dock: "bottom",

        dockedItems: [{            

            items: [cmp_mytoolBar]

        }],        

    },3);

V80202- 新增過濾欄位1,2,3

 目的: V80202- 新增過濾欄位1,2,3

處理說明: 1>提供[過濾欄位]挑選 - 挑選要過濾的欄位 & 過濾欄位值 & 欄位值挑選([...])
                  2>在畫面下方新增 Query1 - 過濾欄位 Panel

                        var Query1 = new Ext.FormPanel({ ,
                                                       items: [ cmp_filter1, cmp_filter2, cmp_filter3,]
                  3>產生[過濾欄位1,2,3]
                       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);

     

               4>[過濾欄位]名稱(combo.id):  Ex:  s_filter1  

                   [過濾欄位值].名稱(combo.id+"_txt"): Ex:   s_filter1_txt

                   [過濾欄位挑選按鈕].名稱(combo.id+"_btn"): Ex:   s_filter1_btn

                5>設定過濾欄位.挑選子視窗  - [過濾欄位挑選按鈕] .handler= function;

                    var onSelect = function (combo, records) {
                          var record = records[0] || records;
                         var cur_value = record.get("value");

                         switch (cur_value) {
                            case "MKNO":
                                  Ext.getCmp(cur_comboid_btn).handler = s_MKNO_pick1;
                                  break;

                             case "FIXPONO":

                                  Ext.getCmp(cur_comboid_btn).handler = s_FIXPONO_pick1;
                                  break;
                           default:
                                Ext.getCmp(cur_comboid_btn).handler = null;
                          }

                        //製程欄位 - DoubleClick 挑選子視窗

                           var s_MKNO_pick1 = function (me, e) {

                                 var Tmp_id = me.id; //s_filter1_btn

                                 var Tmp_pos = Tmp_id.indexOf("_btn");        

                                 var cur_comboid_txt = Tmp_id.substr(0, Tmp_pos)+"_txt";

                                 //允選多選 - get_pick1

                                 get_pick1('挑選製程',

                                                  '../api/V80202API/get_s_MKNOPick',

                                ['MKNO'], [cur_comboid_txt], J_pickstore_s_MKNO, J_pickcolumns_s_MKNO);        

                                };

                       //提領編號欄位 - DoubleClick 挑選子視窗

                         var s_FIXPONO_pick1 = function (me, e) {

                              var Tmp_id = me.id; //s_filter1_btn

                             var Tmp_pos = Tmp_id.indexOf("_btn");

                             var cur_comboid_txt = Tmp_id.substr(0, Tmp_pos) + "_txt";

                             //單選 - get_pick0

                             get_pick0('挑選提領編號', 

                                          '../api/V80202API/get_s_FIXPONOPick',

                  ['FIXPONO'], [cur_comboid_txt], J_pickstore_s_FIXPONO, J_pickcolumns_s_FIXPONO);

                    };

                6>[過濾欄位]值 np[]  傳至後端  -  [資料顯示]鈕

                     var selectedValues = {        

                           s_filter1: null,

                           s_filter2: null,

                           s_filter3: null,

                      };

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

                     //取得過濾欄位的過濾值, 並傳入  np

                     Tmp_filter_Ary.forEach(function (cur_filter) {

                                //取得過濾欄位名稱(Ex: AMMNO,SAPNO)

                                var Tmp_filter_NM = selectedValues[cur_filter];  

                                if (!checkisnull(Tmp_filter_NM)) {

                                     var cur_filter_txt = cur_filter + "_txt";

                                 var Tmp_filter_txt = nulltoStr(Ext.getCmp(cur_filter_txt).getValue()).trim();

                                    Tmp_filter_NM = "s_" + Tmp_filter_NM;

                                    np[Tmp_filter_NM] = Tmp_filter_txt;

                            }

                            }

                            );

              7>設定過濾欄位.挑選子視窗  - button.onclick handle

var s_MKNO_pick1 = function (me, e) {

        var Tmp_id = me.id; //s_filter1_btn

        var Tmp_pos = Tmp_id.indexOf("_btn");        

        var cur_comboid_txt = Tmp_id.substr(0, Tmp_pos)+"_txt";

         //允許多選 

           get_pick1('挑選製程',

            '../api/V80202API/get_s_MKNOPick',

            ['MKNO'], [cur_comboid_txt], J_pickstore_s_MKNO, J_pickcolumns_s_MKNO);        

    };

    var s_FIXPONO_pick1 = function (me, e) {

        var Tmp_id = me.id; //s_filter1_btn

        var Tmp_pos = Tmp_id.indexOf("_btn");

        var cur_comboid_txt = Tmp_id.substr(0, Tmp_pos) + "_txt";

金

         get_pick0('挑選提領編號', 

            '../api/V80202API/get_s_FIXPONOPick',

             ['FIXPONO'], [cur_comboid_txt], J_pickstore_s_FIXPONO, J_pickcolumns_s_FIXPONO);

    };

V80202 -Object.Keys() -Object.Values() -Object.entries() - Object2Array:Object.entries(Obj) - Array2Object: Object.fromEntries(Ary)

  目的:  Object 轉成 Array , Array 轉成Object

處理說明:  1>Object 轉成 Array  - Object.entries(obj);
                         const obj = { name: 'Luke Skywalker', title: 'Jedi Knight', age: 23 };
                         const Ary = Object.entries(obj);

                  2>Array 轉  Object  - Object.fromEntries(Ary);
                      const  Ary_filtered = Ary.filter(  ([key, value]) => typeof value === 'string');
                     const  obj_str = Object.fromEntries(Ary_filtered);

                3>Sample:
                     const Obj_num = { 'BUF': 11, 'MIA': 9, 'NE': 6, 'NYJ': 1 };
                     const Ary_num= Object.entries(Obj_num );
                     Ary_num.filter( function(key,value){ return value>=9; } ); //正式函式寫法
                     Ary_num.filter( ([key,value]) => value>=9; ); //另一寫法
                    const Obj_num9=Object.fromEntries(Ary_num);

               4>Object  - for  (key in Obj) {}
                  let rectangle = {width: 16, height: 9}; 
                  for (const key in rectangle) 

                    { console.log(key, rectangle[key]); } 

                  -->  // width 16 // height 9

               5>Object.keys() : 傳回  Array of  Keys
                   let obj = {a: 1, b: 2, c: 3}; 

                  console.log(Object.keys(obj)); // ["a", "b", "c"]

               6>Object.Values() : 傳回  Array of  Values

                   console.log(Object.values(obj)); // [1, 2, 3]

              7>Object.entries()直接取得所有 property 的 name 和 value,並以陣列回傳

                   console.log(Object.entries(object)); // [

                                                                                      ["a",1],

                                                                                      ["b",2],

                                                                                      ["c",3],

                                                                                  ]      

V80202 - store - filterBy - 過濾欄位 -只顯示符合條件的資料 - forEach() - filterBy()

 目的: V80202 - store - filterBy  - 過濾欄位 -只顯示符合條件的資料

處理說明: 1> store.filterBy(function(cur_rec))  :  過濾 function 傳回值為  true 的資料

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

V80202 - combobox - 產生靜態的選項(store local) - combo - 過濾欄位 - get_cmp_filter1

 目的:  Combobox 選項內容由 store(local) 提供

處理說明: 1>產生local  store
                      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單號", },
                                 ]

                         }  );

                2>產生過濾欄位

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

                3>get_cmp_filter1

//get_cmp_combox1 取得 combobox 元件 , 資料來源為 local , 非遠端, 獨立 checkbox , id : par_id, 且含有過濾條件的值

function get_cmp_filter1(par_caption, par_id, par_l_width, par_width, par_store, par_flex,par_t_width) {

    if (checkisnull(par_l_width)) {

        par_l_width = 60;

    }

    if (checkisnull(par_width)) {

        par_width = 80;

    }

    if (checkisnull(par_flex)) {

        par_flex = 10;

    }

    if (checkisnull(par_t_width)) {

        par_t_width = 40;

    }

    var rtn_cmp =

    {

        xtype: "fieldcontainer", fieldLabel: par_caption, labelWidth: par_l_width, layout: "hbox", flex: par_flex,

        items: [{

            xtype: "combo",

            id: par_id,

            //fieldLabel: par_caption,

            //labelWidth: par_l_width,

            width: par_width,

            queryMode: 'local',

            store: par_store,

            displayField: 'displayName',

            valueField: 'value',

            padding: "0 4 0 0",

            editable: false, // 禁止編輯

        },

            {

                xtype: "textfield", id: par_id + "_val", width: par_t_width, padding: "0 4 0 0",

            }, // end of s_AMM單號

        ]

    }; // end of s_AMM單號

    return rtn_cmp;

};

 

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

V80202 - 過濾欄位 - 多個欄位挑選其中一欄當過濾條件 - filter - 顯示資料 - 依過濾欄位值,過濾資料

 目的: V80202 過濾欄位 - 多個欄位挑選其中一欄當過濾條件 - filter
                          - 顯示資料  - 依過濾欄位值,過濾資料

處理說明:

   1>建立過濾條件1/2/3:

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

2>建立過濾條件的選項內容(store):
//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單號", },
]
}

3>若已挑選選項,則其他過濾條件不含該選項

var onSelect = function (combo, records) {

        var record = records[0] || records;

        var cur_value = record.get("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 ,則包含該選項     

                   //若store值= 目前挑選值，則不加入

                    var Tmp_isAdd = true;

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

                        Tmp_isAdd = false;   

　　　　　

　　　　　//若store值= 已挑選欄位值，則不加入　　　　　                  

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

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

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

                            Tmp_isAdd = false;

                    }

                    return Tmp_isAdd;

                });

            }

        });

    }; // end of onselection

//挑選欄位值時,若欄位值在SelectedValues內,則不包含該項

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

        });

    }

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;

        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;

                    //將 obj 轉成 Array             

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

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

2>*.js

  //取得過濾欄位的過濾值

      //var Tmp_filter_Ary = ["s_filter1", "s_filter2", "s_filter3"];   //過濾欄位的元件名稱

     //var Tmp_filter_Name1 = selectedValues["s_filter1"];

     //if (!checkisnull(Tmp_filter_Name1)) {

     //    var Tmp_filter_Name1_val = nulltoStr(Ext.getCmp("s_filter1_val").getValue()).trim();

     //    Tmp_filter_Name1 = "s_" + Tmp_filter_Name1;

     //    np[Tmp_filter_Name1] = Tmp_filter_Name1_val;

     //}

     //取得過濾欄位的過濾值, 並傳入  np

     Tmp_filter_Ary.forEach(function (cur_filter) {

          var Tmp_filter_NM = selectedValues[cur_filter];

          if (!checkisnull(Tmp_filter_NM)) {

              var cur_filter_txt = cur_filter + "_val";

              var Tmp_filter_NM_val = nulltoStr(Ext.getCmp(cur_filter_txt).getValue()).trim();

              Tmp_filter_NM = "s_" + Tmp_filter_NM;

              np[Tmp_filter_NM] = Tmp_filter_NM_val;

          }

          }

          );