如何在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 
{ 
} 

你可以找到更多關於templates in the docs

Answer 2

這裏有一個解決方案，你至少可以使用Ext JS的4.2.1。這是一個插件，根據每條記錄的值禁用綁定列表中的某些項目。可以配置用於檢查是否應禁用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; 
}