ext 4 comboxのドロップダウンボックスに画像+文字を表示する機能


仕事の要求のため、comboxの中でピクチャー+文字の効果を実现する必要があって、本人材はiteyeの上でブログを出したばかりで、あまりピクチャーを貼ることができなくて、そのため効果図は私は添付ファイルの中に置いて、ダウンロードして见ることを歓迎します:
プロジェクトで使用する技術はext 4である.1、画像効果のようなコードを実現するには、以下のように、みんなに貼って、一緒に勉強しましょう.

this.items = [
		              {
		                  xtype: 'form',
		                  bodyPadding	: '5 5 0',
		                  items: [
		                      {
		                       		xtype: 'textfield',
		                          	name : 'name',
		                          	labelAlign	: 'right',
		                          	fieldLabel: '<font color=red>*</font> '
		                      },
		                      {
			                   		fieldLabel 	: ' ',
									xtype		: 'combobox',
							        name		: 'icon',
							        store 		: Ext.create('Ext.data.Store',{
							        				fields	: ['name', 'icon','value'],
							        				autoLoad:true,
										    		proxy	:{
										    				type	:'ajax',
										    				url 	:  '../***/***/***/***/store/button/icon.json'//json , json 
										    		},
										    		reader	: {
		                    								type	: 'json'
		                    						}
										    	}),
									labelAlign	: 'right',
									[b]tpl:'<tpl for="."><div x-boundlist-item:qtip="{icon}" class="x-boundlist-item"><img src="{icon}" width="16" height="16">&nbsp;{name}</div></tpl>'[/b],//zz icon , , json 
									displayField: 'name',
            						valueField  : 'value',
									editable	: false,
									multiSelect : false		                      	
		                      }
]



以前のextバージョンではtplも使用できますが、ext 4では以前のclassスタイルは存在しません.そのため、そのまま使用するとオプションが選択できないという問題が発生し、x-boundlist-itemというスタイルに変えることで実現できます.
久しぶりに見つけたよ、へへへ