var itemsPerPage = 20;
var combo;
//创建数据源store
Ext.define('recordStore', {
extend : 'Ext.data.Store',
// autoLoad : {
// start : 0,
// limit : itemsPerPage
// },
start : 0,
limit : itemsPerPage,
pageSize : itemsPerPage,
model : 'recordModel',
proxy : {
// 异步获取数据。这里的URL能够改为不论什么动态页面,仅仅要返回JSON数据就可以
type : 'ajax',
url : '../drivingrecord/driveingInfoList.do',
reader : {
type : 'json',
root : 'serials', // 返回信息的根名称。为必选项
// idProperty : 'id', // 数据唯一标识字段
successProperty : 'success',
totalProperty : "total"//总记录数
}
}
}); //分页的combobox下拉选择显示条数
combo = Ext.create('Ext.form.ComboBox',{
name: 'pagesize',
hiddenName: 'pagesize',
store: new Ext.data.ArrayStore({
fields: ['text', 'value'],
data: [['20', 20], ['40', 40],['60', 60], ['80', 80], ['100', 100]]
}),
valueField: 'value',
displayField: 'text',
emptyText:20,
width: 50
});//若要“永久性”更改全局变量itemsPerPage,此combox要放在Ext.onReady();中 //加入下拉显示条数菜单选中事件
combo.on("select", function (comboBox) {
<span style="white-space:pre"> </span>var pagingToolbar=Ext.getCmp('pagingbar');
pagingToolbar.pageSize = parseInt(comboBox.getValue());
itemsPerPage = parseInt(comboBox.getValue());//更改全局变量itemsPerPage
recordStore.pageSize = itemsPerPage;//设置store的pageSize,能够将工具栏与查询的数据同步。 recordStore.loadPage(1);//显示第一页,不论你在第几页又一次选择显示条数,默认都显示第一页数据,rowNumber也会自己主动转换成从1開始。 });
//为grid添加分页工具栏
dockedItems : [{
id:'pagingbar',
xtype : 'pagingtoolbar',
store : recordStore,
dock : 'bottom',
displayInfo : true,
autoScroll : true,
beforePageText : "第",// update
afterPageText : "页 共 {0} 页",// update
firstText : "第一页",
prevText : "上一页",// update
nextText : "下一页",
lastText : "最后页",
refreshText : "刷新",
displayMsg : "显示 {0} - {1}条,共 {2} 条",// update
emptyMsg : '没有数据',
items: ['-', '每页显示',combo,'条']//此处是将创建的combobox加入到工具栏中
}]

后台传回json数据:

{"total":29,"serials":[{"endNewOilCost":0,"endMileage":2.11960465E8,"endLatitude":"32.234183","beginMileage":2.11960465E8,"statusType":"PARK","beginDescription":"江苏省南京市栖霞区麒麟广场(南京)东南1.1公里","beginLongitude":"118.779383","beginTimeAsStr":"00:01:08","avelocity":"","sendDateAsStr":"2014-07-01","endTime":-24322000,"endDateAsStr":"1970-01-01 01:14:38","time":"1小时13分钟30秒","endOilCost":0,"carid":"苏AF1185","sendtime":"","msgid":270003281,"begintimeStr":"2014-07-01 00:01:08","beginOilCost":0,"mileage":"","status":2,"endDescription":"江苏省南京市栖霞区麒麟广场(南京)东南1.1公里","beginTime":-28732000,"minVelocity":0,"endLongitude":"118.779403","endTimeAsStr":"01:14:38","beginDateAsStr":"1970-01-01 00:01:08","sendDate":{"nanos":0,"time":1404144000000,"minutes":0,"seconds":0,"hours":0,"month":6,"timezoneOffset":-480,"year":114,"day":2,"date":1},"timeclose":"1小时13分钟30秒","endtimeStr":"2014-07-01 01:14:38","maxVelocity":0,"beginNewOilCost":0,"statusAsString":"停车","serial":"15251782437","averageVelocity":"","beginLatitude":"32.234217"
}],"success":true}

效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGlhb3Npamlhbnl1MTkzOA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框的更多相关文章

  1. easyUI combobox下拉框很长,easyUI combobox下拉框如何显示滚动条的解决方法

    如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...

  2. easyui combobox下拉框中显示大于号小于号的问题

    前两天同事做了个功能,通过勾选下拉框里的值进行列表查询,结果下拉框里的值是“0<t<=2”.“2<t<=5”.“t>5”这样的. combobox是用脚本渲染出来的,里面 ...

  3. easyui的combobox下拉框初始化默认值以及保持该值一直显示的方法

    easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库&quo ...

  4. 转:控制ComboBox下拉框的下拉部分宽度,使内容能够显示完全

    一般的情况下,如果下拉框的选项的文字太长,下拉框ComboBox的Width宽度属性我们又不想要改变(默认不变),下拉选项的文字内容就会被截剪,如下图所示: 解决办法: 1.自动判断下拉选项的文字长度 ...

  5. MVC实现多选下拉框,保存并显示多选项

    在"MVC实现多选下拉框"中,主要是多选下拉框的显示,而实际情况通常是:选择多个选项提交后,需要在编辑页把所有选中的项显示出来. 模拟这样的一个场景:一个车迷可能有多个自己喜欢的汽 ...

  6. jquery 分页 下拉框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Android 聊天表情输入、表情翻页带效果、下拉刷新聊天记录

    经过一个星期的折腾,最终做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这仅仅是一个单独聊天表情的输入,以及聊天的效果实现.由于我没有写server,所以没有两方聊天的效果. ...

  8. JQuery 插件之Ajax Autocomplete(ajax自动完成)搜索引擎自动显示下拉框

    平时用百度,谷歌搜索的时候 会有一个下 拉列表进行提示 这是一个非常好的功能 本文要介绍的这个JQuery 插件 名叫Ajax Autocomplete 顾名思义 ajax 也就是用ajax的方式获取 ...

  9. 让下拉框中同时显示Key与Value

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

随机推荐

  1. 异常与诊断(74篇,内含许多WinDBG的文章)

    http://www.cnblogs.com/lidabo/category/542683.html

  2. delphi中无类型文件读写

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  3. Eclipse在点击运行后不能自动保存的解决

    今天在eclipse上写程序调试时,发现当我点击运行按键之后,并不能在运行前帮我自动保存,也就是说每次修改代码之后, 运行的还是前一次运行之前的代码,并不是修改之后的代码,因此通过在网上搜索解决方案之 ...

  4. 14.6.3 Grouping DML Operations with Transactions 组DML操作

    14.6.3 Grouping DML Operations with Transactions 组DML操作 默认情况下,连接到MySQL server 开始是以启动自动提交模式, 会自动提交每条S ...

  5. 自己定义UITabBarController

    网上大多的自己定义TabBar都是继承View的,项目中要用到path+Tabbat这种话(path用的MMDrawerController这个框架),继承View的Tabbar是无法满足条件的(不是 ...

  6. 【Error】JavaWeb: 严重: Failed to initialize end point associated with ProtocolHandler [&quot;http-bio-8080&quot;]

    在MyEclipse中启动Tomcat时出现错误,错误信息例如以下: 严重: Failed to initialize end point associated with ProtocolHandle ...

  7. 怎么提高ArcGIS for Desktop10.x的性能

    Esri新公布了一篇提高ArcGIS for Desktop10.x的性能的文章.大家能够关注一下 http://support.esri.com/en/knowledgebase/techartic ...

  8. hao947 : Mybatis resultMap配置插入和主键自增返回 : 好947

    映射配置文件  好947  <!-- type:映射实体类的数据类型 id:resultMap的唯一标识 -->  <resultMap type="person" ...

  9. Swift - 自定义单元格实现微信聊天界面

    1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 (3)每条消息旁边有头像,在左边表示 ...

  10. 状态压缩动态规划 -- 棋盘问题 POJ 1321

    一个 N * N 的棋盘上面,有些格子不能放,放置 M 的棋子, 每两个棋子不能在同一行或者同一列,问有多少种放法 DFS太慢,用SCR好点点 Python 仅仅有 22 行,事实上能够更短.可是得排 ...