當已經選擇extjs時隱藏組合框值

Question

我在網格內有2個組合框。 第二個組合框的值將根據第一個組合框進行更改。

例如，組合有3個項目： 美國，歐洲，亞洲 。
如果在第一個組合框中選擇了Europe，則在第二個組合框中沒有再次出現Europe。

我不知道我使用了哪個版本的extjs，

但是這是代碼：

我的組合商店

var cb_group = Ext.create('Ext.data.Store', {
model: 'cb_group',
autoLoad: false,
proxy: {
    type: 'ajax',
    url: 'srv/master/group/combo',
    reader: {
        type: 'json',
        root: 'rows'
        }
    }
});

我的內網組合

var set_approval_dtl = Ext.create('Ext.Window', {
title: title_approval2, width: 850, height: 395, rowdblclick: true, forceFit: true,
closeAction: "hide", store: ms_set_approval_dtl_store,
defaults: {
    sortable: true, resizable: false
},
items: [
    {xtype: "form", items: [
            {layout: 'column', columnWidth: .5, itemId: 'set_approve', defaults: {border: false},
                items: [{xtype: "panel", itemId: "set_approve_panel", height: 330, defaultType: 'textfield', margin: '0 10px 0 10px',
                        defaults: {labelWidth: 120, width: 850, maxLength: 200},
                        items: [
                            {xtype: "grid", itemId: "grid_items", width: 782, height: 280, margin: '0 10px 10px 10px', autoScroll: true,
                                plugins: Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1, pluginId: 'rowEditing'}),
                                store: ms_set_approval_dtl_store, stripeRows: true, defaultType: "gridcolumn",
                                viewConfig: {forceFit: true},
                                columns: [
                                    {header: grid18j, width: 150, dataIndex: 'nm_act', align: 'center'},
                                    {header: subtitle_approval3, width: 126, dataIndex: 'level1', align: 'center',
                                        editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr1", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
                                            emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
                                            listeners: {
                                                expand: function(field, options, val) {
                                                    if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
                                                        field.getPicker().loadMask.hide();
                                                    }
                                                },
                                                select: function(value) {
                                                    var obj = this.lastSelection[0].data;
                                                    return obj.nm;
                                                    this.lastSelection[0].hide;
                                                    cb_group.removeAt(0);
                                                }
                                            }},
                                        renderer: function(val) {
                                            var index = cb_group.findExact('id', val);
                                            if (index !== -1) {
                                                var rs = cb_group.getAt(index).data;
                                                return rs.nm;
                                            }
                                        }
                                    },
                                    {header: subtitle_approval4, width: 126, dataIndex: 'level2', align: 'center', itemId: "level2",
                                        editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr2", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
                                            emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
                                            listeners: {
                                                expand: function(field, options) {
                                                    if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
                                                        field.getPicker().loadMask.hide();
                                                    }
                                                }
                                            }
                                        },
                                        select: function(value) {
                                            var obj = this.lastSelection[0].data;
                                            return obj.nm;
                                        },
                                        renderer: function(val) {
                                            var index = cb_group.findExact('id', val);
                                            if (index !== -1) {
                                                var rs = cb_group.getAt(index).data;
                                                return rs.nm;
                                            }
                                        }
                                    }]
                            }]}
                ]}]}
]});

我已經嘗試過this.lastSelection [0] .hide; 和cb_group.removeAt（0）; 在第一個組合中。 但這根本沒有用。 而且我不知道為什么我的選擇監聽器不起作用。
請分享一些解決方案。 謝謝

Answer 1

您可以使用XTemplates通過一個商店和兩個組合框來管理這種行為。

首先，您必須為組合框中的項目列表創建一個XTemplate：

// displayfield = displayfield configured in your combobox
var template = Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '  <tpl if="[Ext.getCmp(\'combobox1\').getValue()] != id && [Ext.getCmp(\'combobox2\').getValue()] != id">',
  '    <div class="x-boundlist-item">{label}</div>',
  '  <tpl else>',
  '    <tpl if="id == null || id == \'\'">',
  '      <div class="x-boundlist-item">{label}</div>',
  '    <tpl else>',
  '      <div class="x-boundlist-item" style="font-size:0px; height:0px;"></div>',
  '    </tpl>',
  '  </tpl>',
  '</tpl>'
);

XTemplate包含一些語句，以檢查是否已在組合框之一中選擇了特定值。 如果不是，則該條目將出現在下拉列表中，否則它將被隱藏。 要使其正常工作，您必須在組合框中設置模板並向其中添加一些偵聽器：

// Combobox 1
{
    xtype: 'combo',
    id: 'combobox1',
    store: 'your_store',
    tpl: template,
    displayField: 'label',
    valueField: 'id',
    listeners: {
    beforeSelect: function (combo, record, index, eOpts)
    {
        // Check if the selected value is already selected in combobox2
        var cbx2value = !!Ext.getCmp('combobox2').getValue() ? Ext.getCmp('combobox2').getValue() : '';

        if (cbx2value != record.get('id') && cbx2value != record.get('id')) {
            return true; // selected entry will be selected successfully
        } else {
            return false; // selected entry will not be selected
        }
    },
    change: function ()
    {
        // Get the picker (list of items) of the other combobox and refresh it's template state
        var cbx2picker = Ext.getCmp('combobox2').getPicker();
        cbx2picker.refresh();
    }
}

// Combobox 2
{
    xtype: 'combo',
    id: 'combobox2',
    store: 'your_store',
    tpl: template,
    displayField: 'label',
    valueField: 'id',
    listeners: {
    beforeSelect: function (combo, record, index, eOpts)
    {
        // Check if the selected value is already selected in combobox2
        var cbx1value = !!Ext.getCmp('combobox1').getValue() ? Ext.getCmp('combobox1').getValue() : '';

        if (cbx1value != record.get('id') && cbx1value != record.get('id')) {
            return true; // selected entry will be selected successfully
        } else {
            return false; // selected entry will not be selected
        }
    },
    change: function ()
    {
        // Get the picker (list of items) of the other combobox and refresh it's template state
        var cbx1picker = Ext.getCmp('combobox1').getPicker();
        cbx1picker.refresh();
    }
}

這不是最終的解決方案，但是對於我的一個項目來說，它就像一個魅力。 我已盡可能簡化示例，以使解決方案更加清晰。

Answer 2

您將需要兩個存儲，每個組合框一個，都充滿了相同的數據。

然后您將執行以下操作：

combo1.on('select',function(combo, newVal) {
    combo2.getStore().filterBy(function(rec){
        return rec.get("value")!=newVal;
    })
});