extjs表格下的分页条——Ext.grid.Panel 的 pagingtoolbar
两种分页条:每页固定条数的分页条 和 自定义选择每页内容条数的分页条
一、每页固定条数的分页条
这种样式的——

dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // GridPanel中使用的数据
dock: 'bottom',
displayInfo: true
}],
二、自定义选择每页内容条数的分页条
这种样式的——

dockedItems: [{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
items: ['-', '每页', {
xtype: 'combobox',
displayField: 'id', //获取的内容
valueField: 'value', //显示的内容
editable: false, //不允许编辑只能选择
allowBlank: false, //不允许为空
triggerAction: 'all', //请设置为”all”,否则默认 为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项,
//如果设为”all”的话,每次下拉均显示全部选项
width: 60,
listeners: {
render: function (comboBox) {
comboBox.setValue(comboBox.ownerCt.getStore().getPageSize()); //使得下拉菜单的默认值是初始值
},
select: function (comboBox) {
var pSize = comboBox.getValue();
comboBox.ownerCt.getStore().pageSize = parseInt(pSize); //改变PagingToolbar的pageSize 值
comboBox.ownerCt.getStore().load({start: 0, limit: parseInt(pSize)});
}
},
queryMode: 'local',
store: {
fields: ['id', 'value'],
data: [['2', 2], ['5', 5], ['25', 25], ['50', 50]]
}
}, '条'],
store: store // GridPanel中使用的数据
}],
extjs表格下的分页条——Ext.grid.Panel 的 pagingtoolbar的更多相关文章
- Ext.grid.Panel表格分页存储过程
/*首先需要引入两个Extjs插件类 Ext.ux.data.PagingMemoryProxy和Ext.ux.ProgressBarPager这两个类*/ /*下面是控制弹出窗体放大缩小时窗体居中的 ...
- [Extjs] Ext4 Ext.grid.Panel 分页实现(mybatis 分页插件-PageHelper 使用)
先看图: 页面js代码: var userStore=Ext.create('Ext.data.Store', { storeId:'userStore', fields:['uname', 'ema ...
- 【extjs】 ext5 Ext.grid.Panel 分页,搜索
带有分页,搜索的grid. <%@page language="java" contentType="text/html; charset=UTF-8" ...
- Ext.grid.Panel表格分页
转载:http://www.cnblogs.com/libingql/archive/2012/04/22/2464994.html cshtml @{ Layout = null; } <!D ...
- ExtJs 学习之开篇(三)Ext.grid.Panel表格中的处理
Ext.grid.Panel Ext.create('Ext.grid.Panel',{ title:'测试表格', width:400, height:20 ...
- 【extjs】 extjs5 Ext.grid.Panel 搜索示例
先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore ...
- 完善ext.grid.panel中的查询功能(紧接上一篇)
今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...
- 导出Ext.grid.Panel到excel
1.客户端定义,基本的想法是form提交表格头定义,数据,以json方式传输 Ext.grid.Panel.addMembers({ exportExcel:function(options){ if ...
随机推荐
- 计算机网络——超文本传送协议HTTP
一.简述 每个万维网网点都有一个服务器进程,它不断地监听TCP的端口80,以便发现是否有浏览器向它发出连接建立请求.一旦监听到连接建立请求并建立了TCP连接之后,浏览器就向万维网服务器发出浏览某个页面 ...
- MySQL与Oracle 差异比较之七用户权限
用户权限 编号 类别 ORACLE MYSQL 注释 1 创建用户 Create user user_name identified by user_password default tablespa ...
- Spring3.0.6定时任务
项目使用的Spring版本比较旧是3.0.6版本,由于需要进行定时任务,就决定使用Spring自带的scheduled task. 在网上找了很多文章,也查看了Spring3.0.6的官方文档,按照网 ...
- 插件二之页面加载进度条pace.js
关于pace.js pace.js包含14样式,每种样式可以自定义颜色,官方下载中提供了几种颜色的主题,使用方式也很简单,引入pace的js文件跟所需样式文件即可 <link rel=" ...
- 怎样为EXCEL2010添加下拉列表
注意,下面是Excel2010的步骤和截图,其他版本的Excel类似. 首先用鼠标左键点击你要添加下拉列表的单元格. 如果你只想部分区域有下拉列表,也可以选择部分区域. 下面图片是选择的整个列都是 ...
- 获取当前的 viewController
- (UIViewController *)currentController { UIViewController *result = nil; UIWindow *window = [ ...
- Oracle优化器介绍
Oracle优化器介绍 本文讲述了Oracle优化器的概念.工作原理和使用方法,兼顾了Oracle8i.9i以及最新的10g三个版本.理解本文将有助于您更好的更有效的进行SQL优化工作. RBO优化器 ...
- selenium python (十二)下拉框的处理
#!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #下拉框在web页面上非常常见,对于下拉框的处理采用二次定位的方法进行元 ...
- Cocos2d-android (01) 创建一个简单的cocos2d应用程序
下载Cocos2d-android的源代码:cocos2d-android-1 git@github.com:ZhouWeikuan/cocos2d.git 将项目导入到eclipse中.运行实例: ...
- static_cast .xml
pre{ line-height:1; color:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...