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
分享到:
相关推荐
而"Ext带图标Combobox"(Ext IconCombobox)是Ext JS中的一个特色组件,它是Combobox(下拉框)与图标相结合的一种扩展形式,为用户提供了更加直观且美观的交互体验。 **1. Ext Combobox基础** 首先,我们需要了解...
9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...
8. **模板(Template)**:当COMBOBOX需要自定义显示样式时,可以使用模板来格式化每个选项的显示内容。 9. **远程过滤(Remote Filtering)**:在大型数据集的情况下,联动可能利用远程过滤,即在用户输入时只向...
Ext的表单(Form)和输入控件(例如ComboBox)功能强大,支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据,并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则,使得表单验证更为...
Icon Combobox的实现主要通过ExtJS的组件模型,利用Combobox的基础结构,并在模板(template)中添加图标元素。开发者可以定义一个包含图标和文本的模板,然后在创建Combobox实例时,设置相应的配置项,如图标URL、...
6. **模板和渲染**:ComboBox的显示样式和内容可以通过模板(Template)进行定制,以满足不同的界面需求。 7. **配置项**:每个ComboBox的配置项可能包括`displayField`(显示字段)、`valueField`(值字段)、`...
接着,`<ext:Store>`标签定义了一个数据存储,用于提供ComboBox的数据。这里使用了`HttpProxy`来从服务器获取数据,URL指向"Handler.ashx"。`ArrayReader`用于解析返回的数据,`RecordField`定义了数据结构,其中...
在EXTJS中,ComboBox是基于Ext.form.field.ComboBox类创建的,通常用于显示一个可搜索的下拉列表。多选功能则是通过扩展ComboBox的基本行为来实现的。这可能涉及到监听用户的交互事件,如点击或键盘操作,以及处理...
1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. 我们还需要什么? 1.6. 入门之前,都看helloworld。 1.6.1. 直接使用...
1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不到图片 1.6. 我们还需要什么? 1.7. 入门之前,都看hello...
1. **创建一个新的类**:定义一个继承自Ext.form.ComboBox的新类,添加必要的配置和方法来支持多选。 2. **配置store**:设置一个数据存储(Store)来保存可选项,确保每个记录都有一个表示选中状态的字段,如`...
6. **模板(Template)**:ComboBox的显示样式可以自定义,通过配置`displayField`和`valueField`来决定显示哪个字段的值,还可以使用模板来自定义显示内容。 7. **配置项**:ComboBox有许多可配置的选项,如`...
4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...
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) / ...
9、Ext.DomHelper类 …………………… 14 10、Ext.Template类 …………………… 14 11、Ext.EventManager类 ……………… 15 12、Ext.EventObject类 ………………… 15 13、Ext.CompositeElement类 ………… 16 14、...
10.10.4 DWRProxy和ComboBox......253 10.11 localXHR支持本地使用Ajax ...............254 10.12 本章小结...............................................255 第11 章 实用工具....................................
66. Renamed ComboBox and DropDownField .Icon property to .TriggerIcon. Example (Old) <ext:DropDownField runat="server" Icon="Search" /> Example (New) <ext:DropDownField runat=...
var comboBox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择项', store: store, displayField: 'text', valueField: 'text', tpl: template, renderTo: Ext.getBody() // 渲染到页面上 }); ...
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编辑器字段 ...