`
牧羊人
  • 浏览: 215498 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

PagingToolbar PageSizePlugin

EXT 
阅读更多
/**  
* Page Size Plugin for Paging Toolbar  
*   
* @author    wjc
*/

Ext.ux.PageSizePlugin = Ext.extend(Ext.form.ComboBox, { 
	store: new Ext.data.SimpleStore({
              fields: ['text', 'value'],
              data: [['5', 5], ['10', 10], ['15', 15], ['20', 20], ['25', 25], ['50', 50], ['100', 100]]        
        }),        
    mode: 'local',        
    displayField: 'text',        
    valueField: 'value',        
    allowBlank: false,        
    triggerAction: 'all',        
    width: 50,        
    maskRe: /[0-9]/  ,   
    beforeText:'显示',    
    afterText:'条/页', 
    init: function(paging) {        
         paging.on('render', this.onInitView, this);
    },        
    onInitView: function(paging) {
    	paging.insert(paging.items.length-2,'-', this.beforeText, this, this.afterText);
    	 function GetCookie(cookieName){
		    var cookies = document.cookie;
		    var cStartIndex = -1, cEndIndex = -1;
		    cookieName = cookieName + "=";
		    cStartIndex = cookies.indexOf(cookieName);    
		    if(cookies.length && (-1 != cStartIndex))
		    {
		        cEndIndex = cookies.indexOf(";", cStartIndex + cookieName.length)
		        if(-1 == cEndIndex)
		        {
		            cEndIndex = cookies.length;
		        }
		         
		        return cookies.substring(cStartIndex + cookieName.length, cEndIndex);
		    }    
		    return null; 
		};
          
         var pageSize = GetCookie("PageSizePlugin_pageSize"); 
         if (pageSize!=null && pageSize!=""){
			this.setValue(pageSize);
		 }else{
			this.setValue(paging.pageSize);
		 }
         this.on('select', this.onPageSizeChanged, paging);        
         this.on('specialkey', function(combo, e) {            
              if(13 === e.getKey()) {                
                  this.onPageSizeChanged.call(paging, this);                    
              }        
          });    
     },    
     onPageSizeChanged: function(combo) { 
     	 function SetCookie(cookieName, value){
		    cookieValue=value;
		    var date = new Date();
		    date.setTime (date.getTime() + 3600000000); //设置过期时间
		    document.cookie = cookieName + "=" + cookieValue + ";expires=" + date.toGMTString()+";path=/";   //设置cookie值
	     };
         this.pageSize = parseInt(combo.getRawValue(), 10); 
         SetCookie("PageSizePlugin_pageSize",this.pageSize);       
         this.doLoad(0);    
     }
 
 });

分享到:
评论

相关推荐

    extjs使用pagingtoolbar时,点击下一页,出现查询结果和查询条件不的解决办法

    在EXTJS中,PagingToolbar 是一个非常实用的组件,用于在大数据集上实现分页显示,提升用户体验。然而,在实际使用过程中,我们可能会遇到一些问题,比如在点击“下一页”按钮时,加载的数据与预设的查询条件不符。...

    Extjs TreeStore+pagingToolbar 分页

    在这个主题中,我们将深入探讨如何结合TreeStore和pagingToolbar实现分页功能。 在传统的表格数据展示中,分页是一种常见的优化策略,它允许用户逐页查看大量数据,而不是一次性加载所有内容。在树形数据中,由于...

    Ext JS PagingToolbar 组件

    Ext JS PagingToolbar组件是用于实现数据分页显示的重要工具,尤其在处理大量数据时非常有用。它提供了一种用户友好的界面,使用户能够轻松浏览和导航大量的信息。PagingToolbar通常与Ext JS的数据存储(如Store)和...

    ExtJS 自定义分页控件---- PM3PagingToolbar.js

    参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, ...

    EXTJS3 Ext.PagingToolbar() 快捷键应用

    在EXTJS3中,`Ext.PagingToolbar()` 是一个非常重要的组件,用于在大量数据的网格或视图中实现分页功能。这个组件允许用户轻松地浏览和操作大量的记录,而不需要一次性加载所有数据,从而提高了应用程序的性能和用户...

    ExtJs自定义分页控件----PM3PagingToolbar.js

    非传统分页工具. 简单说明下: ...参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道.

    flex 分页控件,通过事件处理

    1. **创建PagingToolbar实例**:`<mx:PagingToolbar id="pagingToolbar" dataProvider="{dataProvider}" />`,这里`dataProvider`是数据源,它告诉分页控件有多少数据和每页应显示多少条。 2. **设置属性**:可以...

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    ext page实现带参数的翻页

    ext PagingToolbar 带参数的翻页

    extjs 分页是碰到的问题,点击下一页事,查询条件无法传递

    var pagingToolbar = new Ext.PagingToolbar({ store: store, // store is the data store for this grid displayInfo: true, displayMsg: 'Displaying posts {0} - {1} of {2}', emptyMsg: "No posts to ...

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

    3. **PagingToolbar**:创建一个PagingToolbar,并将其与Store关联起来,以便自动处理分页。 ```javascript var pagingToolbar = Ext.create('Ext.toolbar.Paging', { store: store, dock: 'bottom', ...

    Ext表格获取后台数据

    因此,ExtJS提供了一个分页工具条,称为Ext.PagingToolbar,它可以帮助开发者快速实现分页功能。 在本例中,我们使用ExtJS 4.2创建了一个简单的表格控件,并使用Ext.PagingToolbar实现了分页功能。首先,我们创建了...

    extjs 分页

    在EXTJS中,分页是实现大数据量展示时不可或缺的功能,它能有效地提高网页性能,减少服务器压力。EXTJS分页通常与数据访问对象(DAO)和动作控制器(Action)结合使用,形成一个完整的数据获取和展示流程。...

    Extjs grid分页1

    `pagingToolbar`是一个包含导航按钮(如“上一页”、“下一页”)和当前页信息的工具栏,它与数据源(通常是`Ext.data.Store`)关联,控制数据的加载。 1. **创建Store**:首先,我们需要创建一个`Ext.data.Store`...

    ext设置分页大小.rar

    pagingToolbar.pageSize = parseInt(records[0].get('value')); // 更新分页大小 pagingToolbar.moveFirst(); // 重新加载数据 } } }); // 然后在你的分页工具栏配置中添加这个ComboBox plugins: [{ ... ...

    YUI2.8 实现datatable从server端动态获取数据,并实现分页功能(下)

    var pagingToolbar = new YAHOO.widget.PagingToolbar({ container: "pagingContainer", pages: 10, // 每页显示的记录数 recordsPerPage: 10 // 分页大小 }); dataTable.set("paginator", pagingToolbar); ```...

    ext页面显示行数选择与主子表显示

    在这个文件中,可能会定义一个新的组件或扩展,允许用户在界面上选择不同的记录数,然后动态更新PagingToolbar的`store`,实现用户自定义的分页大小。 实现这些功能的关键步骤包括: 1. 创建主子表的GridPanel,...

    Ext 分页核心代码

    在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...

    Ext_Js分页显示案例详解

    2. **PagingToolbar组件**:`Ext.PagingToolbar`是一个用于分页操作的工具栏组件,它可以与Store进行绑定,实现数据的分页加载。 3. **远程分页**:在Ext_Js中,通常采用远程分页的方式,即数据的分页逻辑发生在...

Global site tag (gtag.js) - Google Analytics