`

Ext combox使用

阅读更多
前一段时间使用了一段Ext combox ,一下是使用的一些心得,不知道大家有没有使用的一些技巧心得,交流交流??
首先定义一数据源,一般使用simpleStore,jsonStore。需要注意的是simpleStore用于读取二维数组的数据,而jsonStroe用于读取json数据格式。
Combox使用simpleStore 代码如下所示:
var subjectField = new Ext.form.ComboBox({
fieldLabel : '分类名称',
hiddenName : 'drug.subjectCode',// 传递到后台的参数
store : new Ext.data.SimpleStore({
autoLoad : true,
url :'xxx',
fields : ['subjectCode', 'subjectName']
}),
valueField : 'subjectCode',// 域的值,对应于store里的fields
displayField : 'subjectName',// 显示的域,对应于store里的fields
typeAhead : true,// 设置true,完成自动提示
mode : 'local', // 设置local,combox将从本地加载数据
triggerAction : 'all',// 触发此表单域时,查询所有
selectOnFocus : true,
anchor : '90%',
forceSelection : true
});





服务端返回的数据结构如下所示:
[
["00000003","硬膏剂"],
["00000005","滴眼剂"],
["00000016","栓剂"],
["00000017","注射剂"],
["00000018","软膏剂"]
]

当combox使用jsonStore时,一般运用于分页查询。页面效果如下所示:



示例代码如下所示:
// 药品商品名
    var itemNameField = new Ext.form.ComboBox({
    width : 200,
        fieldLabel : '药品商品名',
hiddenName : 'drug.itemName',
store : advanceStore,
valueField : 'itemName',
displayField : 'itemName',
typeAhead : true,
mode : 'remote',// 分页查询必须设置为remote,当我们点击下一页的时候是从服务端取数据,而不是本地
triggerAction : 'all',
emptyText : '请选择一个分类名',
selectOnFocus : true,
minChars : 0, // 完成自动提示,当mode为‘local’时,默认为0,当mode为‘remote’时候,默认为4,这里设置为0
pageSize : 10,// 每页显示的记录数字
queryParam :'drug.itemName' // 在combox内敲入字符时候,combox向后台查询传递的参数,这里设置为'drug.itemName'是为了更好的封装,默认传递参数‘query’
    });

这里还有一个问题,就是Combox设置初始值。
我是采用如下做法的,不知道各位知不知道其他用法?

var subjectField = new Ext.form.ComboBox({
fieldLabel : '分类名称',
hiddenName : 'drug.subjectCode',
store : new Ext.data.SimpleStore({
autoLoad : true,
url : 'xxx',
fields : ['subjectCode', 'subjectName'],
listeners : {
load : function(){
       subjectField.setValue(record.get("drug.subjectCode"));
}
}
}),
valueField : 'subjectCode',
displayField : 'subjectName',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择一个分类名',
selectOnFocus : true,
anchor : '90%',
forceSelection : true
});
  • 大小: 15 KB
分享到:
评论

相关推荐

    ext combox

    在提供的代码片段中,使用了`JsonStore`作为数据源,其通过指定的URL(`path+'/servlet/ComBox'`)异步加载JSON格式的数据。`JsonStore`的`fields`属性定义了数据集中字段的结构,这里的`groupId`和`groupName`分别...

    Ext_comBox模糊查询

    在EXT JS中,Combox(下拉框组件)是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能,以及后台处理自动检索的方法。 模糊...

    extcombox搜索功能

    在ExtJS中,`Ext.form.field.ComboBox`(简称ComboBox)是一种常用的控件,它提供了一个下拉列表,用户可以在其中选择一个或多个项目。这个控件在数据展示和用户交互方面具有广泛的应用,特别是在需要进行快速筛选和...

    EXT中COMBOX联动

    在EXTJS中,可以使用`Ext.Ajax`或`Ext.data.Store`的`load`方法发送异步请求,获取与新选择相关的数据。 4. **Model(数据模型)**:数据模型定义了数据的结构和行为。在联动中,可能需要根据不同的COMBOBOX定义...

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

    在EXT JS中,Combox组件是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,可以用于实现选择性的输入。在某些情况下,开发者可能希望实现类似百度搜索那样的实时提示功能,即用户在输入时,下拉框能根据...

    Ext+MVC(combox,tree,gird,layout)

    ext + mvc combox tree grid layout

    Ext 将grid渲染到combox

    ### Ext JS 中将 Grid 渲染到 ComboBox 的方法 在 Ext JS 框架中,有时需要将 Grid 控件的数据渲染到 ComboBox 中,这在实际应用中是非常实用且灵活的功能。下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现...

    重绘ComBox控件实现换行 当文本达到一定长度时实现换行

    在Windows编程中,ComBox(ComboBox)控件是一种常见的用户界面元素,用于提供下拉列表让用户选择。在某些情况下,当ComBox中的选项文本较长时,可能会超出控件的宽度,导致显示不全,影响用户体验。为了解决这个...

    Ext 异步加载添加 删除节点 修改combobox选择项

    2. 创建一个新的store,并使用这个数组作为数据源。 3. 将新的store赋值给ComboBox的store属性,以更新其选项。 例如: ```javascript var treeNodes = tree.getStore().getRange(); var comboBoxData = []; for ...

    Extjs之旅-combox之远程加载数据

    这个文件可能是数据库脚本,用于创建与Combox相关的数据表,但具体如何使用,取决于你的数据库管理和应用架构。 综上所述,理解并熟练运用ExtJS的Combox远程加载数据功能,能有效提升Web应用的性能和用户体验。在...

    Ext3.1 21款精美主题和动态换皮肤

    <link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />2、定义一个combox,将可选样式作为数据源填入下拉列表: 定义样式数据 Ext.simpledata.themes = [ ['...

    Ext IconComBox 图片下拉框

    在本文中,我们将深入探讨Ext IconComBox的原理、使用方法以及如何自定义图标。 首先,Ext JS是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了丰富的组件库,包括表格、面板、表单等,...

    Ext_iconcombox

    这个组件是Ext JS 3.2.0版本的一部分,因此在使用前需要确保你已经下载了该版本的Ext库。Ext JS是一个广泛使用的JavaScript框架,它提供了一系列丰富的UI组件,用于构建功能强大的Web应用程序。 首先,让我们深入...

    EXT控件lovcombo

    EXT控件是Sencha EXT JS框架中的一种组件,它提供了丰富的用户界面元素,用于构建复杂的Web应用程序。...对于使用EXT JS开发Web应用的程序员来说,理解并掌握lovcombo的用法和相关修正具有很高的实用价值。

    Ext用户扩展控件 ------超级下拉列表控件支持多选,删除,添加

    使用UxSuperBoxSelect之前,最好查阅其官方文档或社区提供的教程和示例,了解其完整功能和使用方法,以便更好地将其应用于项目中。 总之,UxSuperBoxSelect是一个强大且灵活的用户扩展控件,它增强了标准的下拉...

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

    在本篇文章中,我们将深入探讨如何使用Ext JS 实现建议词模糊动态搜索功能,这对于提升用户体验和提高数据查询效率至关重要。 首先,实现模糊动态搜索的核心组件是`Ext.form.ComboBox`,这是一个下拉框组件,支持...

    mysql SQLServer wo shi ext 数据的使用案例

    这个项目集中许多功能啊,好不容易,我做了半个月,我现在傻了,里面有Treeview ,combox,Gridview的增删改差!

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

    在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `ComboBox` 和 `GridPanel` 的特性,允许用户在一个下拉菜单中浏览和选择多行数据...

    comboxTree下拉树,实现单选功能

    在EXT JS框架中,ComboxTree是一种特殊的组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能,允许用户从一个可展开的树形结构中选择单个项。本代码示例专注于实现ComboxTree的单选功能,即用户只能...

Global site tag (gtag.js) - Google Analytics