скрыть поле со списком, когда уже выбран extjs

Question

У меня есть 2 поля со списком внутри сетки. Вторым значением поля со списком будет база изменений в первом поле со списком.

Например, combo имеет 3 товар: Америка, Европа, Азия.
Если в первом поле со списком выбрана Европа, то во втором поле со списком Европа снова не отображается.

Я не знаю, какая версия ExtJS я использовал,

но вот код:

МОЙ COMBO STORE

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

МОЙ COMBO ВНУТРИ GRID

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

Вам понадобятся два магазина, по одному для каждого комбинированного блока, оба с теми же данными.

И тогда вы будете делать:

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

Answer 2

Вы можете использовать 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(); 
    } 
} 

Это не окончательное решение, но для одного из моих проектов, он работал как шарм. Я упростил пример как можно лучше, чтобы сделать решение более ясным.