Ext ComboBox的Template

      Ext ComboBox中我们如果想对下拉内容的显示样式进行修改，我们可以使用tpl字段，以下为官方API中内容:

 

tpl : String/Ext.XTemplate

The template string, or Ext.XTemplate instance to use to display each item in the dropdown list. The dropdown list is displayed in a DataView. See view.

The default template string is:

'<tpl for="."><div class="x-combo-list-item">{' + this.displayField + '}</div></tpl>'

Override the default value to create custom UI layouts for items in the list. For example:

'<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>'

The template must contain one or more substitution parameters using field names from the Combo's Store. In the example above an

ext:qtip

attribute is added to display other fields from the Store.

To preserve the default visual look of list items, add the CSS class name

x-combo-list-item

to the template's container element.

Also see itemSelector for additional details.

 

里面的内容也已写的较详细，下面是一个测试实例。

 

var store_customer = new Ext.data.JsonStore({
		root 			: 'list',
		fields 			: [
			{name : 'customerId'},
			{name : 'name'}
		],
		url 			: '<c:url value="/system/ResCustomerAction.do?method=list"/>'
    });
store_customer.load();

var cmb_customer = new Ext.form.ComboBox({
		hiddenName 		: "customerId",
		width 			: 150,
		fieldLabel 		: '<fmt:message key="view.report.customerName" bundle="${moduleBundle}" />',
		tpl:'<tpl for="."><div class="x-combo-list-item" ext:qtitle="title" ext:qtip="{name} : {customerId} tip" >{name} : {customerId} content</div></tpl>',
   	   	triggerAction 	: 'all',
   	 	displayField 	: 'name',
   	 	valueField 		: 'customerId',
		store 			: store_customer,
		mode 			: "local",
		forceSelection 	: true,
		selectOnFocus 	: true,
		allowBlank 		: false
	});

 

 

 

 

下面为效果显示效果：

 

 

JsonStore中name:test, customerId:70000