zoukankan      html  css  js  c++  java
  • 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,
    	       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}

    效果例如以下:



  • 相关阅读:
    动态数组的实现案例
    随机验证码实现案例
    wince下的CPU和内存占用率计算
    RT-Thread--时间管理
    RT-Thread--线程管理
    RT-Thread--内核基础
    RT-Thread--简介
    Git基本操作
    STM32F103/429串口IAP+Ymodem升级
    KEIL_MDK生成Bin文件
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/5126551.html
Copyright © 2011-2022 走看看