DataView with horizontal scroll and ListPaging plugin like

[vadimv]

I adjusted the ListPaging plugin to work with a DataView with horizontal scroll. It works nice but would like to add the load indicator too, which should be shown at right next to last element, currently is docked to right. I've tried to get some inspirations from Ext.List and its plugin but things get complicated.

Of course easy to use what I have now with store's load mask, but is not so nice as it masks the dataview and blocks any interaction with it during the store.load

I've seen a loot of threads on this forum asking for horizontal scrolling and ListPaging like plugin for a DataView but neither actually propose a solution or an workaround.

Would be great to know what would be the easiest way, or some thoughts about how to accomplish such feature.

Knowing that version 2.2 will be released in near future, hope, would be nice to know if within this release will be some support for such feature.

[vadimv]

I've tuned the system without loading indicator, works ok, even if sometimes it feels a little freeze because of store load, maybe ST guys can give me some suggestion on how to optimise it.

Ext.define('Ux.plugin.DataViewPaging', {
    alias: 'plugin.dataviewpaging',
    config: {

        dataview: null,

        scroller: null
    },


    /**
     * @private
     * Sets up all of the references the plugin needs
     */
    init: function(dataview) {
        var me = this,
            scroller = dataview.getScrollable().getScroller(),
            store    = dataview.getStore();


        me.setDataview(dataview);
        me.setScroller(scroller);


        me.getDataview().setScrollToTopOnRefresh(false);


        scroller.on({
            scroll: me.onScroll,
            scope: me
        });
    },


    onScroll: function(scroller, x, y) {
        if (!this.getDataview().getStore().isLoading() && x > scroller.maxPosition.x/2) {
            this.loadNextPage();
        }
    },


    loadNextPage: function() {
        if (!this.storeFullyLoaded()) {
            this.getDataview().getStore().nextPage({ addRecords: true });
        }
    },


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


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