`
andrew.yulong
  • 浏览: 171283 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

extJS控件之每页显示N条记录

阅读更多

  这是一个分页的控件,可以选择每页显示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
0
0
分享到:
评论
1 楼 ayaga 2010-07-09  
pt.afterTextEl.el.innerHTML = String.format(pt.afterPageText, d.pages); 
pt.field.dom.value = ap;
这两句有问题,当先选50,再选20时执行,会报对象不存在。

相关推荐

    extjs年份控件(只显示年,无月日时分秒)

    Extjs DateField控件 - 只选择年份(找了很久发现网上只有选择年月的控件,于是基于extjs年月控件设计了只选择年份的控件)

    从别地方下来的ExtJS简明教程

    ExtJS2.0实用简明教程 Extjs丰富多彩的对话框...extJS控件之每页显示N条记录 缺点: 所有的附图都没有。对话框演示不管用。 文章出处:http://www.diybl.com/chm/htm/1_web/javascript/jsjs/200884/200884173807.html

    extjs网页控件开发

    在"extjs网页控件开发"中,我们主要关注的是使用ExtJS来创建高效的网页组件,如图表和多级联动下拉列表框。这些控件能够显著提升用户界面的交互性和用户体验。 首先,让我们深入探讨ExtJS中的图表控件。ExtJS提供了...

    extjs时间控件精确秒

    要使时间控件显示秒,我们需要在创建时间字段时设置`format`属性。EXTJS支持多种日期格式,包括自定义格式。例如,我们使用`'H:i:s'`作为格式字符串,这将显示24小时制的小时、分钟和秒。代码示例如下: ```...

    EXTJS时间控件年月日时分秒

    通过这个控件,用户可以方便地选择一个精确到秒的时间值,这对于需要精确时间输入的应用场景非常有用,如排程、日程管理或时间记录等。 EXTJS时间控件的核心是`Ext.picker.Date`类,它是日期选择器的基础。不过,要...

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

    extjs4.2 分页combo动态条数 源码

    pageSize: 25 // 每页加载25条记录 }); ``` 2. **Combobox配置**:为Combobox配置`queryMode`为`remote`,这意味着Combobox将在用户输入时向服务器发送请求,以获取匹配的数据。同时,关联这个Store。 ```...

    extJs之分页控件

    pageSize: 25, // 每页显示25条记录 proxy: { type: 'ajax', url: 'your_data_source_url', reader: { type: 'json', rootProperty: 'data' // 如果数据源返回的JSON结构中包含"data"字段 } }, paging: ...

    extjs日期+时间控件

    3. **显示问题与解决**:在上述论坛帖子中提到的日期时间控件显示问题,可能涉及到样式、格式配置、时区处理或者与其他组件的交互。解决此类问题通常需要检查控件的配置项,如`format`属性(用于指定日期和时间的...

    extjs3.0 日期时间控件

    标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...

    ExtJs图片按钮控件

    ExtJs图片按钮控件是ExtJs框架中一种增强的按钮组件,它允许开发者在按钮上显示图片,以提供更丰富的用户界面。这个控件通常用于创建具有视觉吸引力的交互式UI元素,比如导航按钮或者操作按钮。下面我们将深入探讨...

    extjs 微调控件,时间微调控件,微调,javascript 微调

    6. **国际化支持**:ExtJS支持多语言,微调控件也可以根据用户设置的语言环境显示相应的提示信息。 7. **无障碍性**:确保微调控件遵循无障碍设计原则,如提供键盘导航支持和适当的ARIA属性。 理解并掌握这些知识...

    Ext扩展控件-------可以通过下拉列表框选择每页的分页条数

    这个扩展控件提供了下拉列表选项,用户可以根据需要选择每页显示的记录条数。这样,用户不再局限于预设的几个选项,可以自由调整,使分页功能更加灵活和人性化。 在EXT Grid中实现这种功能,主要涉及到以下几个关键...

    Extjs 5 日期时间控件

    在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...

    Extjs6 日期时间控件

    EXTJS6的日期控件具有多种配置选项,例如`format`用于定义日期的显示格式,`minValue`和`maxValue`用于限制可选的日期范围,以及`disabledDates`和`disabledDays`来禁用特定日期等。 时间控件(TimeField)则是在...

    extjs3.2、3.3 时间控件 日期控件扩展

    在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于处理用户输入的日期和时间数据。这些控件具有高度可定制性,可以满足各种界面和功能需求。 1. **时间控件...

    extjs扩展的月份控件

    同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目

    ExtJS下拉列表树控件

    在ExtJS中,下拉列表树控件(ComboBox Tree)是常见的组件之一,它结合了下拉列表和树结构,提供了更丰富的用户界面。这个控件允许用户从一个层级化的数据结构中进行选择,非常适合于展示有层次关系的数据。 在创建...

    extjs 多文件上传控件

    ExtJS 是一个强大的...综上所述,实现ExtJS多文件上传控件涉及到前端的文件选择、表单提交、进度显示,以及后端的文件接收和处理等多个环节。通过熟练掌握这些知识点,你可以创建出高效且用户友好的文件上传功能。

    extjs 时间控件

    ExtJS 的时间控件也支持响应式布局,可以根据屏幕大小自动调整其显示方式,确保在各种设备上都有良好的用户体验。 9. **与服务器端的交互** 选定的时间可以通过AJAX请求发送到服务器,进行验证或存储。在提交表单...

Global site tag (gtag.js) - Google Analytics