`

Ext.form.ComboBox 本地和远程模式的基本定义

    博客分类:
  • Ext
阅读更多
一.本地模式
 
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列表显示的文本
 }); 
分享到:
评论

相关推荐

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    5. `queryMode`:定义查询模式,"local"表示本地数据源的即时查询,"remote"表示向服务器发送请求进行远程查询。 6. `queryParam`:当queryMode为"remote"时,用于指定发送到服务器的查询参数名。 7. `minChars`:...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择部门', store: Ext.create('Ext.data.TreeStore', { model: 'Department', root: { text: '所有部门', expanded: true, children: [ /* ... *...

    Ext Js权威指南(.zip.001

    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 comboBox的remote模式,联想功能实现

    总结起来,Ext JS的comboBox远程模式和联想功能是提高用户体验的有效手段,尤其适用于大数据量的场景。通过合理配置comboBox的相关属性,并结合服务器端的接口,我们可以创建出高效、智能的搜索输入控件。

    extjs的ComboBox 2级联动

    var provinceComboBox = Ext.create('Ext.form.ComboBox', { store: provincesStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { // 在...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    EXTJS属性文档

    本文将深入探讨EXTJS的一些重要属性,包括`Ext.form.TimeField`、`Ext.form.FieldSet`、`Ext.form.DateField`和`Ext.form.ComboBox`。 首先,`Ext.form.TimeField`是EXTJS中的一个时间选择控件,用于让用户选择一个...

    Ext JS 实现建议词模糊动态搜索功能

    总结一下,实现建议词模糊动态搜索的关键在于使用`Ext.form.ComboBox`并配置其属性以连接到服务器端接口,监听用户的输入,并根据输入进行远程查询。同时,`JsonStore`用于存储和管理从服务器获取的数据。通过调整...

    ExtJS Combobox二级联动列子

    1. 创建Store:定义两个Store,分别用于存储一级和二级的数据,可以使用JSONP或Ajax来加载远程数据。 2. 创建Combobox:为每个级别创建一个Combobox,设置其Store,并配置好显示和查询的字段。 3. 设置联动:在一级...

    Ext combo 下拉框级联

    4. `queryMode`:设置查询模式,如“local”(本地数据查询)或“remote”(远程数据查询)。 5. `cascadeFrom`:用于指定级联关系的父级`ComboBox` ID。 在级联过程中,我们通常会监听父级`ComboBox`的`select`...

    Extjs学习笔记(-):ComboBox联动

    1. **配置项**:在创建ComboBox时,我们需要定义配置项,如`fieldLabel`(标签)、`store`(数据源)、`displayField`(显示字段)和`valueField`(值字段)。对于联动,还需关注`queryMode`,一般设置为`local`或`...

    extJs ComboBox级联

    var provinceComboBox = Ext.create('Ext.form.field.ComboBox', { store: provinceStore, displayField: 'name', valueField: 'id', queryMode: 'local', listeners: { select: function(combo, record) { ...

    ext combox 下拉框不出现自动提示,自动选中的解决方法

    在EXT JS框架中,`Ext.form.ComboBox`是一个用于创建下拉选择框的组件,它提供了丰富的功能,包括自动提示和自动选中等。在你遇到的问题中,下拉框不出现自动提示,也不能自动选中,这通常是由于配置不当或者某些...

    ext 动态,匹配,下拉单

    `ext-all.css`和`ext-all.js`、`ext-base.js`是EXT库的核心文件,提供了ComboBox组件和其他基础功能。 7. **图片资源**: `images`目录可能包含了与下拉单示例相关的图标或装饰图片,这些图片可能会被用在ComboBox...

    Extjs3 多选下拉框LovCombo

    3. **配置LovCombo**:创建一个Ext.form.ComboBox实例,指定store、displayField、valueField等配置项,并开启多选模式(multiSelect: true)。 4. **加载数据**:如果数据是异步加载的,需要在store的load方法中...

    extjs 自动补全 模拟combobox

    总之,EXTJS的Combobox组件结合适当的配置和事件监听,可以轻松实现自动补全功能,无论是本地数据还是远程数据源,都能提供高效且友好的用户体验。在实际开发中,你可以根据项目需求灵活运用这些特性,提高应用的...

    Extjs中ComboBoxTree实现的下拉框树效果(自写)

    在案例中,`Ext.ux.TreeCombo` 是基于 `Ext.form.ComboBox` 进行扩展的,目的是实现一个包含树形结构的下拉框。 2. **Ext.ux.TreeCombo**: 这是一个自定义组件,它结合了ComboBox和TreePanel的特性。它继承了...

    Ext 可编辑表格

    1. **Combo(组合框)**:在表格中使用`Ext.form.field.ComboBox`可以让用户从预定义的选项列表中选择值。要将组合框作为编辑器添加到表格中,你需要在列模型(`columns`配置)中设置`editor`属性为一个组合框实例。...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: store, displayField: 'name', valueField: 'id', queryMode: 'local', renderTo: Ext.getBody(), width: 300, listConfig: { ...

    ExtJS下拉列表树控件1

    - 由于标准的`ComboBox`不支持树结构,我们可能需要创建一个新的类,继承自`Ext.form.field.ComboBox`,并添加额外的方法和配置来处理树形结构的展开和折叠。 4. **事件监听**: - 需要监听`beforeselect`事件,...

Global site tag (gtag.js) - Google Analytics