欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-14 18:15:22
...

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

 

  效果如图:

      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...工作中!