私はさらに単純に見える別の解決策を思いつきました、そして、速いテストは副作用を明らかにしません:
コンボボックスロジックはそのままにしておくことができますが、CSSを介して選択したアイテムを非表示にするだけです。
.x-boundlist-selected {
display: none;
}
そして出来上がり、選択したアイテムが表示されません!これが本番コードでどれほど信頼できるかはわかりませんが、それでも検討する価値があると思います...
アップデート。Comboboxの構成フラグを介してこの動作を制御する場合の完全なソリューションは次のとおりです。
Ext.define('My.ComboBox', {
extend: 'Ext.form.field.ComboBox',
/**
* @cfg {Boolean} hideActive=true
* When true, hides the currently selected value from the dropdown list
*/
hideActive: true,
/**
* Internal method that creates the BoundList
*/
createPicker: function() {
var picker = this.callParent(arguments);
// honor the hideActive flag
if(this.hideActive) {
picker.addCls('x-boundlist-hideactive');
}
return picker;
}
});
CSSのどこか:
.x-boundlist-hideactive .x-boundlist-selected {
display: none;
}
更新2.私のアプローチでUIの問題が見つかりました!
ドロップダウンリストから選択した項目を非表示にすると、キーボードナビゲーションに癖が生じます。要素は視覚的に非表示になっていますが、要素はまだ存在しており、上/下キーを押すとExtがその項目を選択します。視覚的には、ある時点で選択範囲が消え、次の表示要素に戻すにはもう一度上/下を押す必要があることを意味します。
これまでのところ、これに対する簡単な修正を見つけることができませんでした。私の最善の策itemSelector
は、バインドされたリスト(データビュー)を変更し.x-boundlist-item:not(.x-boundlist-selected)
て、選択した要素がクエリに含まれないように設定することです。
セレクター自体は機能しますが、追加のクラス(選択したアイテムクラスを含む)がアイテムに適用される前にビューがこのセレクタークエリを実行するため、問題は解決しません(これはExt.view.AbstractView.refresh()で発生します)。
また、この解決策では、コンボボックスの上にドロップダウンリストが表示されたときに、ドロップダウンリストが誤って配置されます。
私のアプローチは簡単すぎて完璧に機能できないと感じました:)