前一段时间使用了一段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自动提示 仿百度式自动提示
extcombox搜索功能
Ext中使用combox实现模糊查询,内附详细代码与图片!
EXTjsEXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动EXT中COMBOX联动
ext combox 如果想实现类似于 baidu 搜索时的提示功能。必须禁止其分页功能才可以。
ext + mvc combox tree grid layout
今天突然遇到ComBox选项长度过长问题.. 故重绘实现ComBox选项过长换行问题.
有时候我们需要在combo中渲染grid,这时候我们可以通过ext的模板xtemplate来实现此功能。
本代码实现ext combox tree 单选填充功能
Ext 异步加载添加 删除节点 修改combobox选择项,相当好的东西,值得参考!希望对你有用!
<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的用户扩展控件,支持用户多选,删除,添加下拉列表的选项。非常好用!
Ext中表单中各种组件的布局,例如TextField,Combox,还有DateField控件的基本使用
extjs combo下拉框多选(含源代码),对原本的ext下拉框进行的扩展,代码简单易懂,可根据自己的需求进行修改
主要介绍了Ext JS 实现建议词模糊动态搜索功能,需要的朋友可以参考下
这个项目集中许多功能啊,好不容易,我做了半个月,我现在傻了,里面有Treeview ,combox,Gridview的增删改差!
可以进行多选的带checkbox的combobox,大家运行一下就知道了。 本次修正了在combox的displayfield和valuefield不一致时会产生的错误
关于Ext普通以及带图下拉框做出demo供大家使用,使用前请下载ext-3.2.0.zip,以便jsp页面中的javascript可以调用