1. #1
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    654
    Vote Rating
    26
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default DataView with horizontal scroll and ListPaging plugin like

    DataView with horizontal scroll and ListPaging plugin like


    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.
    Last edited by vadimv; 20 Feb 2013 at 8:03 AM. Reason: removed img

  2. #2
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    654
    Vote Rating
    26
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    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.
    Code:
    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;
        }
    });

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    11
    Vote Rating
    0
    archeons is on a distinguished road

      0  

    Default


    Hi,

    I am facing the same issue with you, hence after several searches, I found this:
    Code:
    /**
     * Implementation for infinite scrolling on DataView.
     * It extends Ext.Plugin.ListPaging and adapt it to a DataView.
     * 
     * @author Gian Luca Dalla Torre <gianluca@gestionaleauto.com>
     * 
     * For instruction on how to use it, please refer to the ListPaging plugin source.
     */
    Ext.define('Ext.plugin.DataViewPaging', {
        extend: 'Ext.plugin.ListPaging',
        alias: 'plugin.dataviewpaging',
        
        config:{
            /**
             * @cfg {Object} loadMoreCmp
             * @private
             */
            loadMoreCmp: {
                xtype: 'component',
                baseCls: Ext.baseCSSPrefix + 'list-paging',
                hidden: true
            }        
        },
        
        /**
         * @private
         */
        onStoreLoad: function(store) {
            var loadCmp  = this.getLoadMoreCmp(),
                template = this.getLoadTpl(),
                message  = this.storeFullyLoaded() ? this.getNoMoreRecordsText() : this.getLoadMoreText(),
                container =  this.getList().container;
    
    
            if (store.getCount()) {
                //container.add(loadCmp);
                loadCmp.show();
            }
            this.setLoading(false);
    
    
            //if we've reached the end of the data set, switch to the noMoreRecordsText
            loadCmp.setHtml(template.apply({
                cssPrefix: Ext.baseCSSPrefix,
                message: message
            }));
        }    
    });
    , the only issue now it sometimes work and load more sometimes doesn't probably because it is not a list

  4. #4
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    654
    Vote Rating
    26
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    I've built my own. If you read better this thread is about a ListPaging plugin like in an horizontal Dataview, what you find won't work, can work only in a vertical Dataview.

Thread Participants: 1