前一段时间使用了一段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
分享到:
相关推荐
在提供的代码片段中,使用了`JsonStore`作为数据源,其通过指定的URL(`path+'/servlet/ComBox'`)异步加载JSON格式的数据。`JsonStore`的`fields`属性定义了数据集中字段的结构,这里的`groupId`和`groupName`分别...
在EXT JS中,Combox(下拉框组件)是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,常用于数据选择和输入。本文将深入探讨如何在EXT中实现Combox的模糊查询功能,以及后台处理自动检索的方法。 模糊...
在ExtJS中,`Ext.form.field.ComboBox`(简称ComboBox)是一种常用的控件,它提供了一个下拉列表,用户可以在其中选择一个或多个项目。这个控件在数据展示和用户交互方面具有广泛的应用,特别是在需要进行快速筛选和...
在EXTJS中,可以使用`Ext.Ajax`或`Ext.data.Store`的`load`方法发送异步请求,获取与新选择相关的数据。 4. **Model(数据模型)**:数据模型定义了数据的结构和行为。在联动中,可能需要根据不同的COMBOBOX定义...
在EXT JS中,Combox组件是一种常用的输入控件,它结合了文本输入框和下拉列表的功能,可以用于实现选择性的输入。在某些情况下,开发者可能希望实现类似百度搜索那样的实时提示功能,即用户在输入时,下拉框能根据...
ext + mvc combox tree grid layout
### Ext JS 中将 Grid 渲染到 ComboBox 的方法 在 Ext JS 框架中,有时需要将 Grid 控件的数据渲染到 ComboBox 中,这在实际应用中是非常实用且灵活的功能。下面将详细介绍如何利用 Ext JS 的 XTemplate 特性来实现...
在Windows编程中,ComBox(ComboBox)控件是一种常见的用户界面元素,用于提供下拉列表让用户选择。在某些情况下,当ComBox中的选项文本较长时,可能会超出控件的宽度,导致显示不全,影响用户体验。为了解决这个...
2. 创建一个新的store,并使用这个数组作为数据源。 3. 将新的store赋值给ComboBox的store属性,以更新其选项。 例如: ```javascript var treeNodes = tree.getStore().getRange(); var comboBoxData = []; for ...
这个文件可能是数据库脚本,用于创建与Combox相关的数据表,但具体如何使用,取决于你的数据库管理和应用架构。 综上所述,理解并熟练运用ExtJS的Combox远程加载数据功能,能有效提升Web应用的性能和用户体验。在...
<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 JS是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它提供了丰富的组件库,包括表格、面板、表单等,...
这个组件是Ext JS 3.2.0版本的一部分,因此在使用前需要确保你已经下载了该版本的Ext库。Ext JS是一个广泛使用的JavaScript框架,它提供了一系列丰富的UI组件,用于构建功能强大的Web应用程序。 首先,让我们深入...
EXT控件是Sencha EXT JS框架中的一种组件,它提供了丰富的用户界面元素,用于构建复杂的Web应用程序。...对于使用EXT JS开发Web应用的程序员来说,理解并掌握lovcombo的用法和相关修正具有很高的实用价值。
使用UxSuperBoxSelect之前,最好查阅其官方文档或社区提供的教程和示例,了解其完整功能和使用方法,以便更好地将其应用于项目中。 总之,UxSuperBoxSelect是一个强大且灵活的用户扩展控件,它增强了标准的下拉...
在本篇文章中,我们将深入探讨如何使用Ext JS 实现建议词模糊动态搜索功能,这对于提升用户体验和提高数据查询效率至关重要。 首先,实现模糊动态搜索的核心组件是`Ext.form.ComboBox`,这是一个下拉框组件,支持...
这个项目集中许多功能啊,好不容易,我做了半个月,我现在傻了,里面有Treeview ,combox,Gridview的增删改差!
在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `ComboBox` 和 `GridPanel` 的特性,允许用户在一个下拉菜单中浏览和选择多行数据...
在EXT JS框架中,ComboxTree是一种特殊的组件,它结合了ComboBox(下拉框)和TreePanel(树形面板)的功能,允许用户从一个可展开的树形结构中选择单个项。本代码示例专注于实现ComboxTree的单选功能,即用户只能...