Ext.PagingToolbarNamesSize = Ext.extend(Ext.PagingToolbarNames, {
    displaySizeMsg : 'Show on Page:',
    showSizeCombo  : true,
    gridName       : '',

    initComponent : function(){
        Ext.PagingToolbarNamesSize.superclass.initComponent.call(this);
    },

    // private
    onRender : function(ct, position){
        Ext.PagingToolbarNamesSize.superclass.onRender.call(this, ct, position);
        if (!this.showSizeCombo) return;
        this.addSeparator();
        this.size = new Ext.form.ComboBox({
            mode: 'local',
            typeAhead: false,
            lazyInit: false,
            triggerAction: 'all',
            lazyRender:true,
            forceSelection:true,
            grow: true,
            listClass: 'x-combo-list-small',
            editable: false,
            displayField:'size',
            width: 50,
            store: [10, 20, 30, 50, 100],
            listeners: {
                select: {
                    fn: function (t, r, v) {
                        this.pageSize = this.size.getValue();
                        this.doLoad(0);
                    },
                    scope: this
                }
            }
        });
        this.size_label = new Ext.form.Label({
            text: this.displaySizeMsg
        });
        this.addField(this.size_label);
        this.addField(this.size);
        this.size.setValue(this.pageSize);
    },

    // private
    onLoad : function(store, r, o){
        if (this.showSizeCombo) this.size.setValue(this.pageSize);
        Ext.PagingToolbarNamesSize.superclass.onLoad.call(this, store, r, o);
    },

    doLoad : function(start){
//        gridArray[this.gridName].gridObj.reLoad();
        Ext.PagingToolbarNamesSize.superclass.doLoad.call(this, start);
    }
});
Ext.onReady(function(){
    Ext.reg('pagingNamesSize', Ext.PagingToolbarNamesSize);
});