PDA

View Full Version : DataView with horizontal scroll and ListPaging plugin like



vadimv
20 Feb 2013, 1:42 AM
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
20 Feb 2013, 7:54 AM
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;
}
});

archeons
28 May 2013, 12:20 AM
Hi,

I am facing the same issue with you, hence after several searches, I found this:

/**
* Implementation for infinite scrolling on DataView.
* It extends Ext.Plugin.ListPaging and adapt it to a DataView.
*
* @author Gian Luca Dalla Torre <[email protected]>
*
* 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

vadimv
28 May 2013, 7:42 AM
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.