私はEXTJS4コンボボックスコントロールを探しています。ExtJs 4コンボボックスとチェックボックス
実際に私はこのコントロールhttp://lovcombo.extjs.eu/が必要ですが、ExtJs3用に実装されています。私はExtJs4に変換しようとしましたが、その作業は実際には簡単ではありません。
ExtJs4にも同様のコンポーネントを提案できますか？あるいは、私はいくつかのチュートリアルや例題を指摘することができます - そのようなことをする方法？
チェックボックス付きマルチセレクションコンボExtJS4.0のxは、数行のコードを追加することで実現できます。
基本的には、アイテムの選択と選択解除時に適用される既存のcssクラスを使用し、それに応じて画像（チェックボックスイメージ）をプッシュする必要があります。
"X-boundlist項目" および "X-boundlist選択は" EXT-all.cssから採取したクラスです。
<style>
.x-boundlist-item img.chkCombo {
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}
</style>
<head>
Ext.create('Ext.form.ComboBox', {
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 210,
multiSelect: true,
emptyText : "Select Bcc email addresses",
renderTo: 'extBCCAddress',
store: myArrayStore,
displayField: 'fieldName',
valueField: 'fieldName',
forceSelection: true,
editable: false,
mode: 'local',
triggerAction: 'all',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
}
}
});
[以下、このカスタムコンポーネントのイメージがある]
私はv4.2.1.883を使用していますが（それが重要かどうかはわかりませんが）、上記のコードは高さと幅を追加するまで機能しませんでした上記のスタイルのそれぞれに16pxの私は/ Imagesディレクトリに画像を移動しました（それが重要かどうかはわかりません）。私は本当にあなたがextjsリソースパスへの参照をハードコードする必要がないようにこれを行うためのより良い方法が何かを考えていますか？ –
ExtJS 4.2.1（およびおそらく他のバージョン）では、リソースパスをハードコードする必要はありません。代わりに、スタイルをSCSSファイル（例：sass/etc/all.scss）に置き、 "background：transparent url（images/menu/checked.gif）;"を使用してください。 4.2.1では、Peterが述べたように、16pxの幅と高さを明示的に指定する必要があります。 –
@ PeterKellnerによると、あなたのスタイルに16pxの高さと幅を加えなければなりません。私はextjs 4.2.2で働いています。 –
私は、このコンポーネントを見て、私はそれは素晴らしいことだと思います。しかし、私は正確にチェックボックス付きのコンボボックスが必要です。それは要件です。とにかくありがとう。 –
2番目の方法を試してください。私はlvcomboを4.xに動かす人がいるでしょう:) – atian25