如何为经典itemselector ExtJs制作listpaging插件

Question

如现代版本sencha一样，如何在itemselector中为边界列表制作列表分页插件。

我使用了现代版本的列表分页插件的代码，并将其放在sencha classic覆盖文件夹中：

Ext.define('Admin.overrides.listpaging.ListPaging', {
    extend: 'Ext.Component',
    alias: 'listpaging',

    config: {        
        autoPaging: false,        
        loadMoreText: 'Load More...',        
        noMoreRecordsText: 'No More Records',       
        loadTpl: [
            '<div class="{cssPrefix}loading-spinner" style="font-size: 180%; margin: 10px auto;">',
                 '<span class="{cssPrefix}loading-top"></span>',
                 '<span class="{cssPrefix}loading-right"></span>',
                 '<span class="{cssPrefix}loading-bottom"></span>',
                 '<span class="{cssPrefix}loading-left"></span>',
            '</div>',
            '<div class="{cssPrefix}list-paging-msg">{message}</div>'
        ].join(''),

        loadMoreCmp: {
            xtype: 'component',
            baseCls: Ext.baseCSSPrefix + 'list-paging',
            scrollDock: 'bottom',
            hidden: true
        },

        loadMoreCmpAdded: false,

        loadingCls: Ext.baseCSSPrefix + 'loading',

        list: null,

        scroller: null,

        loading: false
    },

    init: function(list) {
        var scroller = list.getScrollable(),
            store    = list.getStore();

        this.setList(list);
        this.setScroller(scroller);
        this.bindStore(list.getStore());

        this.addLoadMoreCmp();

        list.updateStore = Ext.Function.createInterceptor(list.updateStore, this.bindStore, this);

        if (this.getAutoPaging()) {
            scroller.on({
                scrollend: this.onScrollEnd,
                scope: this
            });
        }
    },

    bindStore: function(newStore, oldStore) {
        if (oldStore) {
            oldStore.un({
                beforeload: this.onStoreBeforeLoad,
                load: this.onStoreLoad,
                filter: this.onFilter,
                scope: this
            });
        }

        if (newStore) {
            newStore.on({
                beforeload: this.onStoreBeforeLoad,
                load: this.onStoreLoad,
                filter: this.onFilter,
                scope: this
            });
        }
    },

    disableDataViewMask: function() {
        var list = this.getList();
            this._listMask = list.getLoadingText();

        list.setLoadingText(null);
    },

    enableDataViewMask: function() {
        if(this._listMask) {
            var list = this.getList();
            list.setLoadingText(this._listMask);
            delete this._listMask;
        }
    },

    applyLoadTpl: function(config) {
        return (Ext.isObject(config) && config.isTemplate) ? config : new Ext.XTemplate(config);
    },

    applyLoadMoreCmp: function(config) {
        config = Ext.merge(config, {
            html: this.getLoadTpl().apply({
                cssPrefix: Ext.baseCSSPrefix,
                message: this.getLoadMoreText()
            }),
            scrollDock: 'bottom',
            listeners: {
                tap: {
                    fn: this.loadNextPage,
                    scope: this,
                    element: 'element'
                }
            }
        });

        return Ext.factory(config, Ext.Component, this.getLoadMoreCmp());
    },

    onScrollEnd: function(scroller, x, y) {
        var list = this.getList();

        if (!this.getLoading() && y >= scroller.getMaxUserPosition().y) {
            this.currentScrollToTopOnRefresh = list.getScrollToTopOnRefresh();
            list.setScrollToTopOnRefresh(false);

            this.loadNextPage();
        }
    },


    updateLoading: function(isLoading) {
        var loadMoreCmp = this.getLoadMoreCmp(),
            loadMoreCls = this.getLoadingCls();

        if (isLoading) {
            loadMoreCmp.addCls(loadMoreCls);
        } else {
            loadMoreCmp.removeCls(loadMoreCls);
        }
    },

    onStoreBeforeLoad: function(store) {
        if (store.getCount() === 0) {
            this.getLoadMoreCmp().hide();
        }
    },

    onStoreLoad: function(store) {
        var loadCmp  = this.getLoadMoreCmp(),
            template = this.getLoadTpl(),
            message  = this.storeFullyLoaded() ? this.getNoMoreRecordsText() : this.getLoadMoreText();

        if (store.getCount()) {
            loadCmp.show();
        }
        this.setLoading(false);

        loadCmp.setHtml(template.apply({
            cssPrefix: Ext.baseCSSPrefix,
            message: message
        }));

        if (this.currentScrollToTopOnRefresh !== undefined) {
            this.getList().setScrollToTopOnRefresh(this.currentScrollToTopOnRefresh);
            delete this.currentScrollToTopOnRefresh;
        }

        this.enableDataViewMask();
    },

    onFilter: function(store) {
        if (store.getCount() === 0) {
            this.getLoadMoreCmp().hide();
        }else {
            this.getLoadMoreCmp().show();
        }
    },

    addLoadMoreCmp: function() {
        var list = this.getList(),
            cmp  = this.getLoadMoreCmp();
        console.log(list);
        if (!this.getLoadMoreCmpAdded()) {
            list.add(cmp);
            list.fireEvent('loadmorecmpadded', this, list);
            this.setLoadMoreCmpAdded(true);
        }

        return cmp;
    },

    storeFullyLoaded: function() {
        var store = this.getList().getStore(),
            total = store.getTotalCount();

        return total !== null ? store.getTotalCount() <= (store.currentPage * store.getPageSize()) : false;
    },

    loadNextPage: function() {
        var me = this;
        if (!me.storeFullyLoaded()) {
            me.disableDataViewMask();
            me.setLoading(true);
            me.getList().getStore().nextPage({ addRecords: true });
        }
    }
});

但是我收到错误，指出在函数addLoadMoreCmp中找不到添加函数。 如何解决该问题。 在itemselector中可以使用无限滚动吗？ 谢谢