EXT4.1 查询分页技术分享

实现效果图

技术要点分享

开发关键，学会使用EXT API文档

1、分页要点

正确引用ext的分页相关代码，这部分内容中固定的参数会自动传输到后台控制器，控制器接收使用Integer start,Integer limit这2个参数。

2、查询显示要点

1）查询后需要正确设置起始页码

question_store.currentPage = 1;

2）带参数查询需要使用以下代码，将参数传回后台，重新查询结果，并从第一页开始重新排序，统计总数量在分页工具栏中显示。

question_store.loadPage(1,{params:{keyWord:”“,tiku:val}});

3)工具条翻页部分需要增加以下代码，否则参数无法传递到后台控制器中，造成翻页后的数据与查询条件无关。

question_tp_store.on(“beforeload”,function(){
Ext.apply(question_tp_store.proxy.extraParams,
{tiku:tikuValue,keyWord:keyWordValue});
});

工具条翻页异常效果图

上述两点设置不正确，会造成分页后表给内的记录序号显示不正确，当翻页时会出现此问题。再有就是不能正常进行分页，虽然数据已经正确查询出来。

关键代码段

1、刷新按钮代码段

tbar.add(‘-‘,{
text: ‘刷新’,
handler: function () {
Ext.getCmp(‘selector’).setValue(”);
Ext.getCmp(‘searchbar’).setValue(”);
question_store.currentPage = 1;
question_store.loadPage(1,{params:{keyWord:”“,tiku:”“}});
}
});

2、关键字查询代码段

tbar.add('-',{
        emptyText: '请输入题目关键词',
        xtype:'textfield', anchor:'90%',
        id:'searchbar'      
        },{
        text:'查询',
        handler: function () {
            Ext.getCmp('selector').setValue('');
            keyWord=Ext.getCmp("searchbar").value;
            question_store.currentPage = 1;
            question_store.loadPage(1,{params:{keyWord:keyWord,tiku:""}});
            } 
    });

3、题库名称查询代码段

tbar.add('-',{
        xtype:'combobox', anchor:'90%',
        listConfig:{//控制下拉列表的样式  
            emptyText:'没有找到匹配的数值',  
            maxHeight:200
        },  
        emptyText: '题库名称', 
        id:'selector',
        name:'tiku',  
        queryMode:'local',//[local|remot]  
        store:tk_store,  
        valueField:'id',  
        forceSelection:true,
        displayField :'tkname',//展示的名称
        listeners:{
            'select':function(combo,record,index){
                var val=combo.value;
                tikuValue =val;
                question_store.currentPage = 1;
                Ext.getCmp('searchbar').setValue('');
                question_store.loadPage(1,{params:{keyWord:"",tiku:val}});
            }
        }
        });

4、分页工具条代码段

       dockedItems: [{
                     xtype: 'pagingtoolbar',
                     store:question_store.load(),
                     dock: 'bottom',
                     displayInfo: true,
                     inputItemWidth: 50,
                     emptyMsg: "没有数据",
                     displayMsg: "显示从{0}条数据到{1}条数据，共{2}条数据"
                 }]

5、后台控制器代码段

/**
     * @Title:       [  searchAll    ]       
     * @Description: [  查询试题操作           ]            
     * @Author:      [  HQW          ]         
     * @param:       [  @param start 起始位置]
     * @param:       [  @param limit 查询数量]
     */
    @RequestMapping(value="/question/listall.ajax")
    public void searchAll(Integer start,Integer limit,Integer qtype,String keyWord,Integer tiku,HttpServletRequest req,HttpServletResponse response){
        List<TQuestionAll> result = new ArrayList<TQuestionAll>();
        int cnt = 0;
        if(tiku!=null){
            result = tiKuService.searchQbyTktype(start, limit,tiku,qtype);
            cnt = tiKuService.countQbyTktype(tiku, qtype);
        }else if (keyWord!=null &&!keyWord.equals("")){
            result = tiKuService.searchQbyInput(start, limit,keyWord,qtype);
            cnt = tiKuService.countInputQuestion(keyWord, qtype);
        }else {
            result = tiKuService.searchQuestion(start, limit, qtype);
            cnt = tiKuService.countQuestion(qtype);
        }
        if ( qtype==2 ){
            String imageUrl = "http://test";
            for(TQuestionAll question: result){
                question.setChoise_a(question.getChoise_a()==null?"":imageUrl+question.getChoise_a());
                question.setChoise_b(question.getChoise_b()==null?"":imageUrl+question.getChoise_b());
                question.setChoise_c(question.getChoise_c()==null?"":imageUrl+question.getChoise_c());
                question.setChoise_d(question.getChoise_d()==null?"":imageUrl+question.getChoise_d());
                /*question.setChoise_e(question.getChoise_e()==null?"":imageUrl+question.getChoise_e());*/
            }
        }
        Map<String, Object> map=new HashMap<>();
        map.put("list", result);
        map.put("total", cnt);
        String json = JSONObject.toJSONString(map);
        WebUtil.reponseJson(json, response);
    }