extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框
2014-07-03 16:36
441 查看
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"[code]: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"
[/code]
}],"success"
:true}
效果如下:
相关文章推荐
- extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框
- extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- gird的底部分页工具栏下拉菜单,可以用下拉菜单选择每页显示多少条数据
- extjs combobox分页加载数据不显示
- extjs combobox分页加载数据不显示
- extjs JsonStore加载数据,Combobox只显示最后一项值问题
- ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)
- extjs combobox下拉框显示位置问题
- extjs JsonStore加载数据,Combobox只显示最后一项值问题
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- extjs combobox下拉框显示位置问题
- extjs combobox下拉框显示位置问题
- EXT 分页 每页显示N条数据的办法
- extjs combobox下拉框显示位置问题