|
Posted on 2013-03-02 21:43 小胡子 阅读(877) 评论(0) 编辑 收藏 所属分类: Ext
首先定义一数据源,一般使用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 });
原文出自: http://www.iteye.com/topic/296710
|