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
   });
原文出自:
http://www.iteye.com/topic/296710

你可能感兴趣的:(Ext Combox 分页)