이미 선택되어있을 때 콤보 상자 값을 숨기기

그리드 안에 콤보 상자가 2 개 있습니다. 두 번째 콤보 상자 값은 첫 번째 콤보 상자의 기준이됩니다.

예를 들어 콤보에는 3 항목이 있습니다. 아메리카, 유럽, 아시아.
첫 번째 콤보 상자에서 유럽을 선택한 경우 두 번째 콤보 상자에서 유럽이 다시 나타나지 않습니다.

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

MY COMBO INSIDE GRID
: 내가 사용의 ExtJS 버전을 모르는

, 여기

하지만 코드의

출처

2014-10-09 Then Theresia

-1

각 콤보 상자 당 하나씩 동일한 데이터로 채워진 두 개의 매장이 필요합니다.

그리고 당신은 할 것 :

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

출처

2014-10-09 07:07:17 Alexander

그래서 각 콤보 상자마다 2 개의 저장소를 만들어야합니까? 그리고 위에서 언급 한 기능을 어디에 배치해야합니까? var 외부 set_approval_dtl? –

두 개의 콤보 상자 각각에 대해 하나의 저장소에는 총 두 개의 저장소가 있습니다. 컴포넌트에서 리스너 객체를 사용하는 것은'component.on() '을 사용하는 것과 같기 때문에 당신은 내 함수를 받아서 리스너 : {select : function (combo, newVal) ...}에 넣을 수 있습니다. – Alexander

아, 각 콤보 상자마다 다른 저장소가 있지만 데이터는 동일합니까? 콤보 상자 이름을 호출 할 수 없습니다. 방화 광에서 오류가 발생했습니다. 내 콤보 이름은 정의되어 있지 않습니다. –

당신은 하나의 점과 두 개의 콤보와 행동의이 종류를 관리 할 수 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(); 
    } 
}

을 그것은 궁극적 인 해결책은 아니지만, 내 프로젝트 중 하나는 마치 마법처럼 일했다 : 그것이 작동되도록하려면 콤보 상자에서 템플릿을 설정하고 그들에게 약간의 리스너를 추가해야합니다. 솔루션을 명확하게 만들기 위해 가능한 한 좋은 예제를 단순화했습니다.

출처

2014-10-09 12:05:46 Tyr

도움 주셔서 감사합니다! 하지만 내게 효과가없는 것처럼 보입니다. 내 방화범이 끌려서 Ext.getCmp (...)는 정의되지 않았다. 설명해 주시겠습니까? –

호출하려고하는 구성 요소 중 하나가 주어진 ID와 함께 존재하지 않습니다. 빠른 방법으로 자바 스크립트 오류를 보여주는 "웹 개발자"addon을 다운로드 할 수도 있습니다. – Tyr

이미 선택되어있을 때 콤보 상자 값을 숨기기

답변

관련 문제