这是一个分页的控件,可以选择每页显示N条记录,就是在分页工具栏里面加个下拉框来选择显示的记录数。这个控件也是我从ext的官方论坛上偷下来的嘿嘿。不说了,代码如下
Ext.namespace('Ext.ux.Andrie');
/**
* @class Ext.ux.Andrie.pPageSize
* @extends Ext.PagingToolbar
* A combobox control that glues itself to a PagingToolbar's pageSize configuration property.
* @constructor
* Create a new PageSize plugin.
* @param {Object} config Configuration options
* @author Andrei Neculau - andrei.neculau@gmail.com / http://andreineculau.wordpress.com
* @version 0.6
*/
Ext.ux.Andrie.pPageSize = function(config){
Ext.apply(this, config);
};
Ext.extend(Ext.ux.Andrie.pPageSize, Ext.util.Observable, {
/**
* @cfg {String} beforeText
* Text to display before the comboBox
*/
beforeText: 'Show',
/**
* @cfg {String} afterText
* Text to display after the comboBox
*/
afterText: 'items',
/**
* @cfg {Mixed} addBefore
* Toolbar item(s) to add before the PageSizer
*/
addBefore: '-',
/**
* @cfg {Mixed} addAfter
* Toolbar item(s) to be added after the PageSizer
*/
addAfter: null,
/**
* @cfg {Bool} dynamic
* True for dynamic variations, false for static ones
*/
dynamic: false,
/**
* @cfg {Array} variations
* Variations used for determining pageSize options
*/
variations: [5, 10, 20, 50, 100, 200, 500, 1000],
/**
* @cfg {Object} comboCfg
* Combo config object that overrides the defaults
*/
comboCfg: undefined,
init: function(pagingToolbar){
this.pagingToolbar = pagingToolbar;
this.pagingToolbar.pageSizeCombo = this;
this.pagingToolbar.setPageSize = this.setPageSize.createDelegate(this);
this.pagingToolbar.getPageSize = function(){
return this.pageSize;
}
this.pagingToolbar.on('render', this.onRender, this);
},
//private
addSize:function(value){
if (value>0){
this.sizes.push([value]);
}
},
//private
updateStore: function(){
if (this.dynamic) {
var middleValue = this.pagingToolbar.pageSize, start;
middleValue = (middleValue > 0) ? middleValue : 1;
this.sizes = [];
var v = this.variations;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue - v[v.length - 1 - i]);
}
this.addToStore(middleValue);
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
}else{
if (!this.staticSizes){
this.sizes = [];
var v = this.variations;
var middleValue = 0;
for (var i = 0, len = v.length; i < len; i++) {
this.addSize(middleValue + v[i]);
}
this.staticSizes = this.sizes.slice(0);
}else{
this.sizes = this.staticSizes.slice(0);
}
}
this.combo.store.loadData(this.sizes);
this.combo.collapse();
this.combo.setValue(this.pagingToolbar.pageSize);
},
setPageSize:function(value, forced){
var pt = this.pagingToolbar;
this.combo.collapse();
value = parseInt(value) || parseInt(this.combo.getValue());
value = (value>0)?value:1;
if (value == pt.pageSize){
return;
}else if (value < pt.pageSize){
pt.pageSize = value;
var ap = Math.round(pt.cursor/value)+1;
var cursor = (ap-1)*value;
var store = pt.store;
if (cursor > store.getTotalCount()) {
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(cursor-value);
}else{
store.suspendEvents();
for (var i = 0, len = cursor - pt.cursor; i < len; i++) {
store.remove(store.getAt(0));
}
while (store.getCount() > value) {
store.remove(store.getAt(store.getCount() - 1));
}
store.resumeEvents();
store.fireEvent('datachanged', store);
pt.cursor = cursor;
var d = pt.getPageData();
pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages);
pt.field.dom.value = ap;
pt.first.setDisabled(ap == 1);
pt.prev.setDisabled(ap == 1);
pt.next.setDisabled(ap == d.pages);
pt.last.setDisabled(ap == d.pages);
pt.updateInfo();
}
}else{
this.pagingToolbar.pageSize = value;
this.pagingToolbar.doLoad(Math.floor(this.pagingToolbar.cursor/this.pagingToolbar.pageSize) * this.pagingToolbar.pageSize);
}
this.updateStore();
},
//private
onRender: function(){
this.combo = Ext.ComponentMgr.create(Ext.applyIf(this.comboCfg||{}, {
store:new Ext.data.SimpleStore({
fields:['pageSize'],
data:[]
}),
displayField:'pageSize',
valueField:'pageSize',
mode:'local',
triggerAction:'all',
width:50,
xtype:'combo'
}));
this.combo.on('select', this.setPageSize, this);
this.updateStore();
if (this.addBefore){
this.pagingToolbar.add(this.addBefore);
}
if (this.beforeText){
this.pagingToolbar.add(this.beforeText);
}
this.pagingToolbar.add(this.combo);
if (this.afterText){
this.pagingToolbar.add(this.afterText);
}
if (this.addAfter){
this.pagingToolbar.add(this.addAfter);
}
}
})
看不懂吧?不用看懂,只要知道关键部位就可以了!哎,我又开始不求甚解了! 看看怎么调用吧?
bbar: new Ext.PagingToolbar({
plugins:new Ext.ux.Andrie.pPageSize(),
pageSize: 20,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
例子下载地址如下http://download.csdn.net/source/526365
分享到:
相关推荐
Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)
ExtJS2.0实用简明教程 Extjs丰富多彩的对话框...extJS控件之每页显示N条记录 缺点: 所有的附图都没有。对话框演示不管用。 文章出处:http://www.diybl.com/chm/htm/1_web/javascript/jsjs/200884/200884173807.html
在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...
要使时间控件显示秒,我们需要在创建时间字段时设置`format`属性。EXTJS支持多种日期格式,包括自定义格式。例如,我们使用`'H:i:s'`作为格式字符串,这将显示24小时制的小时、分钟和秒。代码示例如下: ```...
通过这个控件,用户可以方便地选择一个精确到秒的时间值,这对于需要精确时间输入的应用场景非常有用,如排程、日程管理或时间记录等。 EXTJS时间控件的核心是`Ext.picker.Date`类,它是日期选择器的基础。不过,要...
本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...
pageSize: 25 // 每页加载25条记录 }); ``` 2. **Combobox配置**:为Combobox配置`queryMode`为`remote`,这意味着Combobox将在用户输入时向服务器发送请求,以获取匹配的数据。同时,关联这个Store。 ```...
pageSize: 25, // 每页显示25条记录 proxy: { type: 'ajax', url: 'your_data_source_url', reader: { type: 'json', rootProperty: 'data' // 如果数据源返回的JSON结构中包含"data"字段 } }, paging: ...
3. **显示问题与解决**:在上述论坛帖子中提到的日期时间控件显示问题,可能涉及到样式、格式配置、时区处理或者与其他组件的交互。解决此类问题通常需要检查控件的配置项,如`format`属性(用于指定日期和时间的...
标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...
ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...
6. **国际化支持**:ExtJS支持多语言,微调控件也可以根据用户设置的语言环境显示相应的提示信息。 7. **无障碍性**:确保微调控件遵循无障碍设计原则,如提供键盘导航支持和适当的ARIA属性。 理解并掌握这些知识...
这个扩展控件提供了下拉列表选项,用户可以根据需要选择每页显示的记录条数。这样,用户不再局限于预设的几个选项,可以自由调整,使分页功能更加灵活和人性化。 在EXT Grid中实现这种功能,主要涉及到以下几个关键...
在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...
EXTJS6的日期控件具有多种配置选项,例如`format`用于定义日期的显示格式,`minValue`和`maxValue`用于限制可选的日期范围,以及`disabledDates`和`disabledDays`来禁用特定日期等。 时间控件(TimeField)则是在...
在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于处理用户输入的日期和时间数据。这些控件具有高度可定制性,可以满足各种界面和功能需求。 1. **时间控件...
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
在ExtJS中,下拉列表树控件(ComboBox Tree)是常见的组件之一,它结合了下拉列表和树结构,提供了更丰富的用户界面。这个控件允许用户从一个层级化的数据结构中进行选择,非常适合于展示有层次关系的数据。 在创建...
ExtJS 是一个强大的...综上所述,实现ExtJS多文件上传控件涉及到前端的文件选择、表单提交、进度显示,以及后端的文件接收和处理等多个环节。通过熟练掌握这些知识点,你可以创建出高效且用户友好的文件上传功能。
ExtJS 的时间控件也支持响应式布局,可以根据屏幕大小自动调整其显示方式,确保在各种设备上都有良好的用户体验。 9. **与服务器端的交互** 选定的时间可以通过AJAX请求发送到服务器,进行验证或存储。在提交表单...