帶分頁的下拉列表

      在做一個模塊的時候，用到了下拉列表，但是下拉列表中的數據太多，一次性如果全部加載的話，肯定是不現實或者不可續的方法，所以此時需要對下拉列表中的數據進行分頁展示。我們用到了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' 事件支持用戶手動輸入動態提示數據功能。