带分页的下拉列表

      在做一个模块的时候，用到了下拉列表，但是下拉列表中的数据太多，一次性如果全部加载的话，肯定是不现实或者不可续的方法，所以此时需要对下拉列表中的数据进行分页展示。我们用到了Ext.form.ComboBox对象。觉得这个东东挺不错，值得写出来总结下，方便以后用到。

      1、定义对象

             var SelectedUser = Ext.data.Record.create([{
                      name : 'userId',
                      type : 'int'
                    }, {
                       name : 'userWorkNum',
                       type : 'string'
                    }, {
                       name : 'userName',
                       type : 'string'
                      }]);

      2、定义数据模式，封装数据

            var reader = new Ext.data.JsonReader({
             totalProperty : 'totalProperty',
             root : 'root'
            }, [{
                   name : 'userId',
                   type : 'int'
               }, {
                   name : 'userWorkNum',
                   type : 'string'
                 }, {
                      name : 'userName',
                 type : 'string'
                 }]);
  var ds = new Ext.data.Store({
     proxy : new Ext.data.HttpProxy({
        url : 'queryGroupCustList.action'
       }),
     reader : reader
    });
  ds.baseParams.limit = 10;

 

3、具体combobox代码

     var queryUserCombo = new Ext.form.ComboBox({
     mode : 'remote',// 指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载
     // 则为remote.默认值为：remote
     border : true,
     frame : true,
     pageSize : 10,// 当元素加载的时候，如果返回的数据为多页，则会在下拉列表框下面显示一个分页工具栏，该属性指定每页的大小
     // 在点击分页导航按钮时，将会作为start及limit参数传递给服务端，默认值为0，只有在mode='remote'的时候才能够使用
     width : 250,
     emptyText : '可输入姓名或工号查询，支持模糊查询',
     title : '显示格式：姓名(工号)(负责客户数)',
     triggerAction : 'all',
     displayField : 'displayUserInfo',
     valueField : 'userId',
     queryDelay : 600,
     typeAhead : true,
     editable : true,
     store : ds,
     selectOnFocus : true,
     listeners : {
      'select' : function(combo, record, index) {
       panel.selectedUser = new SelectedUser(record.data);
      },
      'beforequery' : function(queryEvent) {
       var key = queryEvent.query;
       key = key.trim();

       ds.baseParams.managerType = panel.managerType;
       if (Ext.isEmpty(key)) {
        ds.baseParams.query = '';
       } else {
        var keys = key.split(" ");
        if (keys.length == 1) {
         if (keys[0] != '*') {
          ds.baseParams.query = keys[0];
         }
        } else {
        }
       }
       ds.load({
          params : {
           start : 0,
           limit : 10
          }
         });
      }
     }
    });

         其中'beforequery' 事件支持用户手动输入动态提示数据功能。