Ext JS에서 콤보 상자의 항목을 비활성화하는 방법은 무엇입니까?

Question

Ext JS의 콤보 박스에서 특정 항목을 어떻게 비활성화 할 수 있습니까?

예를 들어 나는이 기록

row_1_type_1 
row_2_type_2 
row_3_type_3 

을 가지고 있고 나는 그것이 레이블과 콤보를 유지해야한다 즉 세 번째 행을 사용하지 않으려는하지만 회색과 클릭되지 않습니다.

Answer 1

당신은 listConfig과 같은 것을 시도 할 수 있습니다 :

myItems: [ 
    { name: 'row_1_type_1', disabled: false}, 
    { name: 'row_2_type_2', disabled: false}, 
    { name: 'row_3_type_3', disabled: true } 
] 

listConfig: { 
    getInnerTpl: function(displayField) { 
     return Ext.create('Ext.XTemplate', 
      '<ul><li role="option"', 
      '<tpl for=".">', 
      '<tpl if="disabled == true">', 
       'class="x-disabled-item"', 
      '<tpl else>', 
       'class="x-custom-item"', 
      '</tpl>', 
      '>{#} - {name}</li></ul>' 
     ); 
    } 
} 

//CSS 
.x-disabled-item 
{ 
} 

.x-custom-item 
{ 
} 

당신은 여기 내선 JS 4.2.1 이상 사용할 수있는 솔루션의 더 templates in the docs

Answer 2

에 대해 찾을 수 있습니다. 그것은 각 레코드의 값을 기반으로 boundlist의 일부 항목을 비활성화하는 플러그인입니다. listitem을 비활성화해야하는지 확인하는 필드의 이름을 구성 할 수 있습니다.

플러그인을 사용하는 방법부터 시작하겠습니다.

{ 
    xtype: 'combo', 
    fieldLabel: 'My combo with disabled items', 
    valueField: 'value', 
    displayField: 'display', 
    queryMode: 'local', 
    store: { 
     fields: ['value', 'display', 'disabled'], 
     data: [{ 
      value: 1, display: 'an enabled item', disabled: false 
     },{ 
      value: 2, display: 'a disabled item', disabled: true 
     }] 
    }, 
    plugins: [{ 
     ptype: 'comboitemsdisableable', 
     disabledField: 'disabled' 
    }] 
} 

여기 플러그인이 있습니다.

Ext.define('Ext.ux.plugin.ComboItemsDisableable', { 
    extend: 'Ext.AbstractPlugin', 
    alias: 'plugin.comboitemsdisableable', 

    init: function (cmp) { 
     var me = this; // the plugin 
     me.disabledField = me.disabledField || 'disabled'; 

     cmp.tpl = Ext.create('Ext.XTemplate', 
      '<tpl for=".">', 
      ' <tpl if="this.isDisabled(' + me.disabledField + ')">', 
      ' <div class="x-boundlist-item x-item-disabled"><em>{' + cmp.displayField + '}</em></div>', 
      ' <tpl else>', 
      ' <div class="x-boundlist-item">{' + cmp.displayField + '}</div>', 
      ' </tpl>', 
      '</tpl>', { 
       isDisabled: function(disabled) { 
        return disabled; 
       } 
      } 
     ); 

     // make sure disabled items are not selectable 
     cmp.on('beforeselect', function(combo, record, index) { 
      return !record.get(me.disabledField); 
     }); 
    } 
}); 

다음은 플러그인과 함께 사용할 CSS입니다. 장애가있는 항목은 회색으로 표시되며, 마우스를 가져 가면 비활성화 된 항목의 배경이 선택되지 않도록 변경됩니다.

.x-item-disabled.x-boundlist-item { 
    color: #8c8c8c; 
    cursor: default; 
} 

.x-item-disabled.x-boundlist-item-over { 
    background: inherit; 
    border-color: white; 
}