paging form

by el_chief

HTML

<link rel="stylesheet" href="//extjs.cachefly.net/ext-4.1.0-gpl/resources/css/ext-all-gray-debug.css" />
<script src="//extjs.cachefly.net/ext-4.1.0-gpl/ext-all-dev.js"></script>

JavaScript

/* this is a function to simulate ajax requests in jsfiddle */

function sim(proxy, data, delay) {
    if (typeof data !== 'string') {
        data = Ext.JSON.encode(data);
    }

    proxy.url = '/echo/json/';
    proxy.actionMethods.read = "POST";
    proxy.extraParams.json = data;
    proxy.extraParams.delay = typeof delay == 'undefined' ? 0 : delay;
}

Ext.data.validations.presenceMessage = 'Required';

Ext.define('MiniPager', {
    extend: 'Ext.toolbar.Paging',
    alias: ['widget.minipager'],

    beforePageText: '',
    displayMsg: '{1} of {2}',
    prependButtons: true,
    inputItemWidth: 0,

    getPagingItems: function() {
        var me = this;

        return [{
            itemId: 'last',
            disabled: true,
            hidden: true,
            width: 0
        }, {
            xtype: 'tbtext',
            disabled: true,
            itemId: 'afterTextItem',
            hidden: true,
            width: 0,
            text: Ext.String.format(me.afterPageText, 1)
        }, {
            itemId: 'first',
            disabled: true,
            hidden: true,
            width: 0
        }, {
            hidden: true,
            disabled: true,
            width: 0,
            xtype: 'numberfield',
            itemId: 'inputItem',
            name: 'inputItem'
        }, {
            xtype: 'tbtext',
            itemId: 'displayItem'
        }, {
            itemId: 'prev',
            tooltip: me.prevText,
            overflowText: me.prevText,
            iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
            disabled: true,
            handler: me.movePrevious,
            scope: me
        }, me.beforePageText, {
            itemId: 'next',
            tooltip: me.nextText,
            overflowText: me.nextText,
            iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
            disabled: true,
            handler: me.moveNext,
            scope: me
        }, {
            itemId: 'refresh',
            tooltip: me.refreshText,
 ...