Extjs4中用combox做下拉带图片的下拉框

  今天,莫名的来个一个需求,需要做的一个下拉框中,需要有图片,这不。。。谷歌+度娘然后找网友,终于搞定。现在感谢这些提供资料的友友...

 

  效果如图:

      

 

var states = Ext.create('Ext.data.Store', {
		    fields: ['url', 'name'],
		    data : [
		        {"url":"花地1.jpg", "name":"Alabama"},
		        {"url":"花地1.jpg", "name":"Alaska"},
		        {"url":"花地1.jpg", "name":"Arizona"}
		        //...
		    ]
		});

		Ext.create('Ext.form.ComboBox', {
		    fieldLabel: 'Choose State',
		    store: states,
		    displayField: 'name',
		    queryMode: 'local',
		    renderTo: Ext.getBody(),
		    listConfig: {
		        getInnerTpl: function() {
		            return '<div data-qtip="{name}"><img src="{url}" width="16" height="16"> {name}</div>';
		        }
		    }
		});
	});

 

效果不错,学习研究Extjs4...工作中!

 

posted @ 2013-11-29 18:14  全力以赴001  阅读(1106)  评论(0编辑  收藏  举报