PagingToolbar带参数的分页
编程技术 / houtizong 发布于 3年前 108
PagingToolbar带参数的分页
一般在分页的时候，会指定两个参数，Start与Limit一个是第几条记录开始，一个是一个页面最多几条记录，一般来说这两个条件已经够了，但是如果你要进行有多余条件查询的时候，就要传递额外的参数过去 了。
/** * ******************************************************************************************** * UserQueryFn.js */function userQueryFn(tabPanel) {// 创建记录模型var user = new Ext.data.Record.create([{name:"id",mapping:"id"},{name:"name",mapping:"name"},{name:"password",mapping:"password"}]);// 创建数据存储器var store = new Ext.data.Store({url:"User_queryOnCondition.action",reader:new Ext.data.JsonReader({id:"id",root:"users",totalProperty:"recordSize"},user)});// 查询条件区域var queryPanel = new Ext.form.FormPanel({baseCls: 'x-plain',layout:"column",items:[new Ext.form.Label({text:"查询条件"}),new Ext.form.ComboBox({triggerAction :"all",selectOnFocus:true,editable:false,store:new Ext.data.SimpleStore({fields:["queryL","queryV"],data:[["id","id"],["用户名","name"],["密码","password"]]}),typeAhead:true,displayField:"queryL",hiddenName:"queryCondition",valueField:"queryV",mode:"local",readOnly:true}),new Ext.form.Label({text:"查询值"}),new Ext.form.TextField({id:"queryValue",name:"queryValue"})]});// 创建列模型var colModel = new Ext.grid.ColumnModel([{header:"用户ID",dataIndex:"id",sortable:true},{header:"用户名",dataIndex:"name",sortable:true,width:300},{header:"密码",dataIndex:"password",sortable:true}]);// 主显示区var userQueryPanel = new Ext.grid.EditorGridPanel({width:800,height:370,frame:true,store:store,cm:colModel,autoExpandColumn:3,bbar:new Ext.PagingToolbar({pageSize : 10,displayInfo:true,store:store, displayMsg : '此页显示记录第{0}条到第{1}条，共{2}条', emptyMsg : '没有任何用户记录', firstText : '首页', prevText : '上一页', nextText : '下一页', lastText : '尾页', refreshText : '刷新'})});var tabPage = tabPanel.add({title:"用户查询",closable:true,tbar:[queryPanel,{text:"搜索",handler:function() {store.load({params:{"start":0,"limit":10,"queryCondition":Ext.get("queryCondition").dom.value,"queryValue":Ext.get("queryValue").dom.value}});}}],items:userQueryPanel});// 额外参数传递store.on('beforeload', function() { this.baseParams = {"queryCondition":Ext.get("queryCondition").dom.value,"queryValue":Ext.get("queryValue").dom.value};}); tabPanel.setActiveTab(tabPage);}
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
