ExtJs ComboBox分页问题

最新推荐文章于 2019-09-27 14:09:47 发布

原创最新推荐文章于 2019-09-27 14:09:47 发布 · 257 阅读

0 ·

CC 4.0 BY-SA版权

ExtJs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍在ExtJs中使用ComboBox实现数据分页时遇到的问题及解决方案。通过调整triggerAction属性从'all'改为'query'，实现了有效的分页功能。

ExtJs中常常会用到ComboBox下拉列表来显示数据，但是如果数据过于多了，那么通常采用分页的技术。最近在做一个项目时候，遇到了下拉表中的数据读取出来了，但是却没有没有分页，我的主要代码如下：

1.得到store，即需要在ComboBox下拉列表中显示的数据。

var spCode = new Ext.data.Store({
   			url:'business!getAllBusiOfParent.action',
   			autoLoad:true,
   			params:{start:0},
            remoteSort: true,
            reader:new Ext.data.JsonReader({
                	    root: "data",
                	    totalProperty:'total'
                	},[        {name:"bizcode"},
                	           {name:"bizname"}
                	  ] )
                	  
   		});

2.将store放到ComboBox中并进行分页

 var spCombo = new Ext.form.ComboBox({   
	        hiddenName : 'bizcode',   
	        fieldLabel : '业务名称',   
	        emptyText:'请选择业务名称',   
	        mode : 'local',   
	        triggerAction : 'all',   
	        valueField : 'bizcode',   
	        displayField : 'bizname',   
	        editable : true,
	        forceSelection:true,
	        allowBlank:true,
	        pageSize:4,
	        store : spCode,
	        width:210,
	        maxHeight:100,
	        listeners : {  
                'beforequery':function(e){                      
                    var combo = e.combo;    
                    if(!e.forceAll){    
                        var input = e.query;     
                        combo.store.baseParams={query:input,limit:combo.pageSize};
                        combo.store.load();
                        return false;  
                    }  
                }
            }

这里分页的图标也出来了，但是显示的是所有的数据，分页并没有成功。后面仔细的检查代码，发现了triggerAction这个属性设置为了all，需要将其改为query即可。为all的话，则显示出所有的数据，如果为query有个问题就是，如果每次查询之后，都需要清空查询结果才能重新显示出数据。