`
zhuchengzzcc
  • 浏览: 442323 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext ComboBox的Template

    博客分类:
  • ext
阅读更多

      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

  • 大小: 3.5 KB
0
0
分享到:
评论

相关推荐

    Ext带图标Combobox

    而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...

    EXT核心API详解

    9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...

    EXT中COMBOX联动

    8. **模板(Template)**:当COMBOBOX需要自定义显示样式时,可以使用模板来格式化每个选项的显示内容。 9. **远程过滤(Remote Filtering)**:在大型数据集的情况下,联动可能利用远程过滤,即在用户输入时只向...

    EXT教程EXT用大量的实例演示Ext实例

    Ext的表单(Form)和输入控件(例如ComboBox)功能强大,支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据,并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则,使得表单验证更为...

    icon combobox

    Icon Combobox的实现主要通过ExtJS的组件模型,利用Combobox的基础结构,并在模板(template)中添加图标元素。开发者可以定义一个包含图标和文本的模板,然后在创建Combobox实例时,设置相应的配置项,如图标URL、...

    Ext二级联动完整例子

    6. **模板和渲染**:ComboBox的显示样式和内容可以通过模板(Template)进行定制,以满足不同的界面需求。 7. **配置项**:每个ComboBox的配置项可能包括`displayField`(显示字段)、`valueField`(值字段)、`...

    coolite ComboBox智能提示

    接着,`&lt;ext:Store&gt;`标签定义了一个数据存储,用于提供ComboBox的数据。这里使用了`HttpProxy`来从服务器获取数据,URL指向"Handler.ashx"。`ArrayReader`用于解析返回的数据,`RecordField`定义了数据结构,其中...

    EXT多选COMBO

    在EXTJS中,ComboBox是基于Ext.form.field.ComboBox类创建的,通常用于显示一个可搜索的下拉列表。多选功能则是通过扩展ComboBox的基本行为来实现的。这可能涉及到监听用户的交互事件,如点击或键盘操作,以及处理...

    Ext 开发指南 学习资料

    1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. 我们还需要什么? 1.6. 入门之前,都看helloworld。 1.6.1. 直接使用...

    EXT2.0中文教程

    1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看hello...

    Extjs3.4.0版本 多选下拉框效果支持多选/全选/全不选

    1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...

    extJs ComboBox级联

    6. **模板(Template)**:ComboBox的显示样式可以自定义,通过配置`displayField`和`valueField`来决定显示哪个字段的值,还可以使用模板来自定义显示内容。 7. **配置项**:ComboBox有许多可配置的选项,如`...

    ext 下拉树demo

    4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...

    Ext Js权威指南(.zip.001

    8.1.2 ext.template的创建与编译 / 385 8.1.3 格式化输出数据:ext.string、ext.number、ext.date和ext.util.format / 389 8.1.4 超级模板:ext.xtemplate(包括ext.xtemplateparser和ext.xtemplatecompiler) / ...

    ExtJS入门教程(超级详细)

    9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...

    Ext深入浅出 数据传输

    10.10.4 DWRProxy和ComboBox......253 10.11 localXHR支持本地使用Ajax ...............254 10.12 本章小结...............................................255 第11 章 实用工具....................................

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    66. Renamed ComboBox and DropDownField .Icon property to .TriggerIcon. Example (Old) &lt;ext:DropDownField runat="server" Icon="Search" /&gt; Example (New) &lt;ext:DropDownField runat=...

    Extjs带图片下拉框

    var comboBox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择项', store: store, displayField: 'text', valueField: 'text', tpl: template, renderTo: Ext.getBody() // 渲染到页面上 }); ...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.12 Ext.form.field.ComboBox组合框 4.1.13 Ext.form.field.Time时间选择框 4.1.14 Ext.form.field.Date日期选择框 4.1.15 Ext.form.field.Hidden隐藏字段 4.1.16 Ext.form.field.HtmlEditor编辑器字段 ...

Global site tag (gtag.js) - Google Analytics