extjs5 combo分页时pagingToolbar之解决

　 combo使用方法

　　combo组件是extjs中相当重要的组件，在form表单和tbar,fbar等使用较多，尤其是与后台交互，动态加载数据，更加彰显其强大

1. 普通的combo

   示例代码：

   xtype : 'combo',
   fieldLabel : '群组',
   store : groupStore,
   queryModel : 'remote',  // 默认是'remote'
   pageSize : 10,
   name : 'groupId',
   displayField : 'name',
   valueField : 'id',
   editable : false,
   allowBlank : false

2. 分页的combo

   如果数据比较多，会导致整个combo列表过长，所以需要进行分页，分页时queryModel必须是'remote'。

   示例代码：

   xtype : 'combo',
   fieldLabel : '群组',
   store : groupStore,
   queryModel : 'remote',
   pageSize : 10,
   name : 'groupId',
   displayField : 'name',
   valueField : 'id',
   editable : false,
   allowBlank : false,
   

   只需要再配置pageSize属性即可。

　问题

　　有时候分页会导致，pagingToolbar显示不完整。

　解决方案

　　1.调整combo的宽度，如果是form表单的话，调整form的width或者form所在的window的width，否则就直接调整combo的width。

　　　　缺点：显示整个combo的pagingToolbar会使得combo显得过宽，样子很丑，所以这个方案并不完美

   2.配置matchFieldWidth为false，默认是true，表示combo的下拉列表的宽度是否和这个field宽度一致，这步很关键！

    再配置listConfig中的属性width指定你想要的下拉列表的宽度。listConfig专门来控制下拉列表的样式

        示例代码：

xtype : 'combo',
fieldLabel : '群组',
store : groupStore,
queryModel : 'remote',
pageSize : 10,
name : 'groupId',
displayField : 'name',
valueField : 'id',
editable : false,
allowBlank : false,
matchFieldWidth : false,
listConfig : {
     width : 330
}

　　

　　3.使用listeners事件，动态控制pagingToolbar

　　示例代码：

• 　　

  xtype : 'combo',
  fieldLabel : '群组',
  store : groupStore,
  queryModel : 'remote',
  pageSize : 10,
  name : 'groupId',
  displayField : 'name',
  valueField : 'id',
  editable : false,
  allowBlank : false,
  listeners : {
  	beforerender : function(that, eOpts) {
  		var picker = that.getPicker(),
  		    pagingToolbar = picker.pagingToolbar;
                 // pagingToolbar有个overflowHandler属性可以用来pagingToolbar溢出问题。  
                 // overflowHandler是受layout控制，可以通过setLayout重新布局               
                 // enableOverflow属性也有此效果，但是只能在配置时使用有效，如果动态更新还是得使用overflowHandler属性　　 		  
              pagingToolbar.setLayout({
  		       overflowHandler : 'menu'
  	        })
  	}
  }
  

        缺点：这种做法有个bug，会导致zIndexManager出现问题，尤其是当form的ownerCt（上级的ownerCt）是panel时，关闭panel会出问题！推荐使用方法2

 　combo实现过程

　　1.combo的整个下拉列表创建boundlist组件实现，将其称之为picker。

　　2.如果pageSize大于0，就会创建pagingToolbar组件，并添加分页事件。

    总结

　　1.extjs3与extjs5的combo的配置有差异，请分别对待

　　2.combo是由boundlist组件实现，pageSize属性可以决定是否创建pagingToolbar

　　3.combo中pagingToolbar溢出问题，可以先获取到pagingToolbar对象再利用setLayout方法解决