extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框

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.load({
	        params:{
	            start:0,
	            limit: itemsPerPage
	        }
	    });//数据源重新加载
	    recordStore.loadPage(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}

效果如下:

extjs4 分页工具栏pagingtoolbar的每页显示数据combobox下拉框

时间: 2024-12-16 08:54:48

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

框架 day50 BOS项目 4 批量导入(ocupload插件,pinyin4J)/POI解析Excel/Combobox下拉框/分区组合条件分页查询(ajax)/分区数据导出(Excel)

知识点: 批量导入(ocupload插件,pinyin4J /POI解析Excel(apache POI) /区域分页查询 /Combobox下拉框 /分区组合条件分页查询(ajax) /分区数据导出(Excel下载) BOS项目笔记第4天 1.    区域批量导入功能 *Ajax不支持文件上传. *上传并且不刷新上传页面原理: Target到一个0,0,0的隐藏iframe里,造成一个没有刷新的假象 <form target="myIframe" action="ab

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

前两天同事做了个功能,通过勾选下拉框里的值进行列表查询,结果下拉框里的值是“0<t<=2”.“2<t<=5”.“t>5”这样的. combobox是用脚本渲染出来的,里面的data的格式就如这样: [{ID:"01",TEXT:"0<t<=2"},{ID:"02",TEXT:"2<t<=5"},{ID:"03",TEXT:"t>5&quo

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

easyui的combobox下拉框默认初始值是空,下面是实现从远程加载数据之后初始化默认值,以及让该值一直排在下拉框的最顶部的方式. 目前的需求是需要在初始化的时候添加"全部数据库"字段,并且在下拉的时候,"全部数据库"一直排在最顶部. 初始化效果如下: 下拉之后的效果如下: 实现方式: easyui的combobox有一个loader属性,easyui的API对loader属性说明如下: easyui的combobox有一个onLoadSuccess事件,eas

行内表单 在统一行显示搜索框 下拉框 按钮

05===> 在同一行显示 搜索表单 下拉框表单 搜索按钮 清空按钮 使用了[行内表单] inline 属性可以让表单域变为行内的表单域 (让表单显示在同一行) <el-form ref="formInline" :inline="true" :model="formInline" class="demo-form-inline"></el-form> demo-form-inline是自带的 f

ZP的EXTJS学习笔记(三)——邮箱功能的开发(按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组)

照例,先贴效果图: 本人比较满意,短时间开发的邮箱功能,这是收件箱,还有配套的发件箱与删除箱. 简单说下思路: 1.配置model.store,用的是MVC模式,可参考第一篇学习笔记. 2.页面简单布局: Ext.define('KitchenSink.view.mail.InBox', { extend: 'Ext.grid.Panel', alias : 'widget.inbox', xtype: 'inbox', autoHeight:true, bodyStyle:'width:100

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

经过一个星期的折腾,终于做完了这个Android 聊天表情输入.表情翻页带效果.下拉刷新聊天记录.这只是一个单独聊天表情的输入,以及聊天的效果实现.因为我没有写服务器,所以没有双方聊天的效果.主要是聊天中表情的选择,发送.表情翻页带有不同的效果.我在主要代码中都写了注释.下面看代码实现.附上本文源码,代码较多. 下载地址:点击 一.先看实现的效果图 二.调用接口以及设置MainActivity package com.example.activity; import java.util.Arra

.net简单页面后台绑定下拉框,按钮,分页 前台aspx页面

一.aspx页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdateMTablesQCols.aspx.cs"    Inherits="BS.EAP.Portal.Business.DataQuery.UpdateMTablesQCols" EnableEventValidation="false" %> <%

Ajax提高篇(7)Ajax实现简单的下拉框联动显示数据

页面中的两个下拉列表框: <tr> <td style="width: 130px"> 所在学院:</td> <td style="width: 100px"> <select id="college" style="width: 200px" runat="server" onchange="changcollege(this.value)&

jQuery自动显示搜索下拉框

描述:当用选择查询时,根据输入的关键字动态从后台模糊查询,把结果异步显示在前端. jsp代码; <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <% String