`

ExtJs3.2.2使用combo实现自动完成(即动态查询)

阅读更多
     用过百度和Google的人,都会发现,当你输入关键字的时候,在输入框下面会列出一些近似或相关的关键字提供选择。最近,在添加歌曲的时候,需要选择歌手,其中需求提到在输入歌手名时,提供动态查询,代码如下:
    
{
xtype : 'combo',
id : 'songSingerId',
fieldLabel : '歌手',
displayField : 'singerName',
valueField : 'id',
store : singerStore,
mode : 'remote',
triggerAction : 'all',
// editable:false,
//hideTrigge:true,
minChars : 1,
queryParam : 'singer.singerName',
//typeAhead : true,
allowBlank : false,
forceSelection : true
} 


需要注意的地方:
1.minChars:如果没有为该属性赋值,则默认是4,即在输入4个字符时,才会触发自动完成(即动态查询)
2.forceSelection:只能从下拉框中任选一个值,如果输入的值不存在下拉框中,将会被自动清空。
3.queryParam:当在输入框输入1个字符时,将会把“singer.singerName=输入值”传递到服务端。
4.triggerAction : 'all':当值为all时,不传递queryParam参数,即不会会把“singer.singerName=输入值”传递到服务端,当值为“query”时,则传递queryParam参数。
5.hideTrigge:这个属性当为true时,会隐藏掉combobox的下拉按钮。(在这里不采用,已注释)

triggerAction在帮助文档中的解释:
triggerAction : String
The action to execute when the trigger is clicked.
'query' : Default
run the query using the raw value.
'all' :
run the query specified by the allQuery config option
See also queryParam.

有空的话,欢迎到红番薯逛逛
0
0
分享到:
评论

相关推荐

    extjs4.2 分页combo动态条数 源码

    在这个场景中,我们关注的是在EXTJS的Combobox(下拉框)组件中实现分页和动态加载数据的功能。Combobox通常用于展示有限数量的选项,但在大数据集的情况下,一次性加载所有数据可能导致页面性能下降。因此,引入...

    ext-3.2.2.zip

    ExtJS 3.2.2 提供了大量预定义的UI组件,如表格(GridPanel)、面板(Panel)、窗口(Window)、表单(FormPanel)等,这些组件可组合使用,实现复杂的应用界面。通过组件化的开发模式,开发者能够快速构建模块化的...

    EXTJS 自定义combo控件

    xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称,默认null //公共方法 getJXValue():返回自定义字段的值,如果没有自定义字段,则等价Ext.form.Combo类的getValue()方法

    extjs实现动态树

    在ExtJS中,这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree.TreePanel`:这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件,支持...

    extjs 实现动态表头

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...

    Extjs 自定义树结构实现以及动态表头实现

    在本文中,我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...

    ExtJs Google Suggest 动态查询效果

    在本示例中,"ExtJs Google Suggest 动态查询效果" 是一个利用ExtJs实现的功能,它模仿了谷歌搜索框的自动建议功能。当你在搜索框中输入文字时,下拉列表会实时更新,显示与输入内容匹配的建议项。 首先,我们要...

    extjs 自动补全 模拟combobox

    EXTJS并没有直接提供一个名为"自动补全"的组件,但它可以通过模拟Combobox组件来实现这一效果。Combobox是EXTJS中的一个下拉选择框,它可以显示一个下拉列表供用户选择,同时也可以配合自动补全功能。 首先,让我们...

    Extjs6中Combobox实现下拉多选

    该资源主要展示了在Extjs6中Combobox控件实现下拉选择多个数据的功能

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    extjs 在线sql查询

    3. **Ajax请求**: 为了将用户的查询提交到服务器并获取结果,会使用ExtJS的Ajax组件或`Ext.Ajax.request`方法,与后端数据库进行通信。 4. **SQL执行**: 后端服务器需要处理接收到的SQL查询,可能使用Java、PHP、...

    Extjs动态树的实现以及节点拖拽

    总的来说,ExtJS动态树的实现和节点拖拽涉及前端和后端的多个技术层面,包括JavaScript库的使用、事件监听、数据模型的处理、与服务器的通信以及数据库操作。掌握这些技能,开发者可以创建出功能强大且用户体验优秀...

    ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能

    在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...

    Extjs自动最大化panel

    这种功能通常通过设置Panel的布局和配置项来实现,比如使用`fit`布局,或者利用`autoWidth`和`autoHeight`属性,使Panel自动适应其父容器的大小。 在实现这种功能时,开发者可能需要关注以下几个关键知识点: 1. *...

    extjs动态生成表格,前台+后台

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    ExtJs动态grid的生成

    我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味着在运行时根据需求创建和更新Grid组件,而不是在应用初始化时静态定义。这种灵活性允许开发者更好地响应数据...

    extjs2.0 画的一个带查询条件和查询结果的页面

    在"extjs2.0 画的一个带查询条件和查询结果的页面"这个主题中,我们主要探讨如何使用ExtJS 2.0版本来设计一个具有搜索功能的用户界面。这个界面包括查询条件输入区域和展示查询结果的区域。 首先,我们需要了解...

    extjs实现动态树加载菜单

    在 ExtJS 中实现动态树加载,我们需要遵循以下步骤: 1. **配置树节点**:首先,我们需要为树节点定义模型(Ext.data.TreeModel),并在模型中设置`leaf`属性为`false`来表示这是一个可扩展的节点,而非叶子节点。...

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

Global site tag (gtag.js) - Google Analytics