Ext Grid paging插件

Ext.namespace('Ext.ux.grid');
Ext.ux.grid.PageSizePlugin = function() {
    Ext.ux.grid.PageSizePlugin.superclass.constructor.call(this, {
        store: new Ext.data.SimpleStore({
            fields: ['text', 'value'],
            data: [['10', 10], ['20', 20], ['50', 50], ['100', 100]]
        }),
        mode: 'local',
        displayField: 'text',
        valueField: 'value',
        editable: false,
        allowBlank: false,
        triggerAction: 'all',
        width: 60
    });
};

Ext.extend(Ext.ux.grid.PageSizePlugin, Ext.form.ComboBox, {
    init: function(paging) {
        paging.on('render', this.onInitView, this);
    },

    onInitView: function(paging) {
        paging.add('-','每页',this,'条');
       	var pageSize = function getCookie(c_name)
		{	
			c_name = 'pageSize';
			 if (document.cookie.length>0)
			  {
			  c_start=document.cookie.indexOf(c_name + "=")
			  if (c_start!=-1)
			    { 
			    c_start=c_start + c_name.length+1 
			    c_end=document.cookie.indexOf(";",c_start)
			    if (c_end==-1) c_end=document.cookie.length
			    return unescape(document.cookie.substring(c_start,c_end))
			    } 
			  }
			return ""
		}();
		if (pageSize!=null && pageSize!="")
		{
			this.setValue(pageSize);
		}
		else
		{
			this.setValue(paging.pageSize);
		}

        this.on('select', this.onPageSizeChanged, paging);
    },
    onPageSizeChanged: function(combo) {
        this.pageSize = parseInt(combo.getValue());
        function setCookie(c_name,value,expiredays)
		{	
			var exdate=new Date()
			exdate.setDate(exdate.getDate()+expiredays)
			document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
		};
        setCookie('pageSize',this.pageSize,14);
        this.doLoad(0);
    }
});

使用示例：
var pagingBar = new Ext.PagingToolbar({
        plugins : new Ext.ux.grid.PageSizePlugin(),
        pageSize: pageRowCount,
        store: this.store,
        displayInfo: true
    });
var grid = new Ext.grid.GridPanel({
		margins:'2 2 2 2',
		renderTo:document.body,
	         viewConfig: {
				forceFit:true,
				enableRowBody:true,
				showPreview:true,
				getRowClass : this.applyRowClass
			},
		bbar:pagingBar
	
	
	});

评论

3 楼 witcheryne 2009-06-19  

没明白楼主想干什么 - -|
Ext JS 不是有PagingToolBar这个组件么?

2 楼 xiexueze 2009-06-18  

至少也说明一下，传个示例图吧

1 楼 xiexueze 2009-06-18  

不知想干嘛，在展示代码的优美吗？