一.本地模式
var articlekind = new Ext.form.ComboBox({
fieldLabel : '部门', //UI标签名称
name : 'identity', //作为form提交时传送的参数名
allowBlank : false, //是否允许为空
mode : 'local', //数据模式, local为本地模式, 如果不设置,就显示不停的加载中...
readOnly : true, //是否只读
triggerAction : 'all', //显示所有下列数.必须指定为'all'
anchor : '90%',
emptyText:'请选择...', //没有默认值时,显示的字符串
store : new Ext.data.SimpleStore({ //填充的数据
fields : ['text', 'value'],
data : [['t1', 'v1'], ['t2', 'v2'], ['t3', 'v3']]
}),
value:'t2', //设置当前选中的值, 也可用作初始化时的默认值, 默认为空
valueField : 'value', //传送的值
displayField : 'text', //UI列表显示的文本
regex : /[\u4e00-\u9fa5]/, //只能输入中文. 正则表达式验证:详见: http://www.blogjava.net/algz/articles/263284.html
regexText : "只能输入中文!" //使用正则表达式时,设置的错误提示
});
五个必须项.
二.远程模式
//author.json页面: {author : [{text : "t1" , value : "v1" } , {text : "t2" , value : "v2" }]}
var remoteComboBox= new Ext.form.ComboBox({
fieldLabel : '部门', //UI标签名称
name : 'identity', //作为form提交时传送的参数名
allowBlank : false, //是否允许为空
mode : "remote", //数据模式为远程模式, 也可不设置,即默认值也为remote
readOnly : true, //是否只读
triggerAction : 'all', //显示所有下列数.必须指定为'all'
anchor : '90%',
emptyText:'请选择...', //没有默认值时,显示的字符串
store : new Ext.data.JsonStore({ //填充的数据
url : "author.json",
fields : new Ext.data.Record.create( ['text', 'value']), //也可直接为["text","value"]
root : "author"
}),
value:'v2', //设置当前选中的值, 也可用作初始化时的默认值, 默认为空
valueField : 'value', //传送的值
displayField : 'text' //UI列表显示的文本
});
分享到:
相关推荐
5. `queryMode`:定义查询模式,"local"表示本地数据源的即时查询,"remote"表示向服务器发送请求进行远程查询。 6. `queryParam`:当queryMode为"remote"时,用于指定发送到服务器的查询参数名。 7. `minChars`:...
Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...
8.4.4 状态管理:ext.state.manager、ext.state.provider、ext.state.local-storageprovider和ext.state.cookieprovider / 426 8.5 综合实例 / 426 8.5.1 使用子模板 / 426 8.5.2 递归调用模板 / 428 8.6 本章...
总结起来,Ext JS的comboBox远程模式和联想功能是提高用户体验的有效手段,尤其适用于大数据量的场景。通过合理配置comboBox的相关属性,并结合服务器端的接口,我们可以创建出高效、智能的搜索输入控件。
var provinceComboBox = Ext.create('Ext.form.ComboBox', { store: provincesStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { // 在...
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...
本文将深入探讨EXTJS的一些重要属性,包括`Ext.form.TimeField`、`Ext.form.FieldSet`、`Ext.form.DateField`和`Ext.form.ComboBox`。 首先,`Ext.form.TimeField`是EXTJS中的一个时间选择控件,用于让用户选择一个...
总结一下,实现建议词模糊动态搜索的关键在于使用`Ext.form.ComboBox`并配置其属性以连接到服务器端接口,监听用户的输入,并根据输入进行远程查询。同时,`JsonStore`用于存储和管理从服务器获取的数据。通过调整...
1. 创建Store:定义两个Store,分别用于存储一级和二级的数据,可以使用JSONP或Ajax来加载远程数据。 2. 创建Combobox:为每个级别创建一个Combobox,设置其Store,并配置好显示和查询的字段。 3. 设置联动:在一级...
4. `queryMode`:设置查询模式,如“local”(本地数据查询)或“remote”(远程数据查询)。 5. `cascadeFrom`:用于指定级联关系的父级`ComboBox` ID。 在级联过程中,我们通常会监听父级`ComboBox`的`select`...
1. **配置项**:在创建ComboBox时,我们需要定义配置项,如`fieldLabel`(标签)、`store`(数据源)、`displayField`(显示字段)和`valueField`(值字段)。对于联动,还需关注`queryMode`,一般设置为`local`或`...
var provinceComboBox = Ext.create('Ext.form.field.ComboBox', { store: provinceStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { ...
在EXT JS框架中,`Ext.form.ComboBox`是一个用于创建下拉选择框的组件,它提供了丰富的功能,包括自动提示和自动选中等。在你遇到的问题中,下拉框不出现自动提示,也不能自动选中,这通常是由于配置不当或者某些...
`ext-all.css`和`ext-all.js`、`ext-base.js`是EXT库的核心文件,提供了ComboBox组件和其他基础功能。 7. **图片资源**: `images`目录可能包含了与下拉单示例相关的图标或装饰图片,这些图片可能会被用在ComboBox...
3. **配置LovCombo**:创建一个Ext.form.ComboBox实例,指定store、displayField、valueField等配置项,并开启多选模式(multiSelect: true)。 4. **加载数据**:如果数据是异步加载的,需要在store的load方法中...
总之,EXTJS的Combobox组件结合适当的配置和事件监听,可以轻松实现自动补全功能,无论是本地数据还是远程数据源,都能提供高效且友好的用户体验。在实际开发中,你可以根据项目需求灵活运用这些特性,提高应用的...
在案例中,`Ext.ux.TreeCombo` 是基于 `Ext.form.ComboBox` 进行扩展的,目的是实现一个包含树形结构的下拉框。 2. **Ext.ux.TreeCombo**: 这是一个自定义组件,它结合了ComboBox和TreePanel的特性。它继承了...
1. **Combo(组合框)**:在表格中使用`Ext.form.field.ComboBox`可以让用户从预定义的选项列表中选择值。要将组合框作为编辑器添加到表格中,你需要在列模型(`columns`配置)中设置`editor`属性为一个组合框实例。...
Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', valueField: 'id', queryMode: 'local', renderTo: Ext.getBody(), width: 300, listConfig: { ...
- 由于标准的`ComboBox`不支持树结构,我们可能需要创建一个新的类,继承自`Ext.form.field.ComboBox`,并添加额外的方法和配置来处理树形结构的展开和折叠。 4. **事件监听**: - 需要监听`beforeselect`事件,...