I have a somewhat complex layout inside of dataview, with some nested components.
The problem is, one of the components - a horizontal list - does not properly scroll horizontally if the inner items extend beyond the container (thats the point of scrolling right?).
As seen below, I have a re-usable module via custom xtype that I use called the 'classbar' (buttons on top that filter the dataview items). This is the component that does not scroll correctly; it always "snaps" back to starting position.
Screencast here: http://screencast.com/t/HltnY41b
You can see that when I switch to the "Attendance" view, the classbar scrolls horizontally as expected. I believe this is because the main container of this view is a 'Ext.Container', where as the view in question is a 'Ext.dataview.List.' I need the dataview because it utilizes pullrefresh and listpaging plugins (not available on a xtype:Container)
Any advice is appreciated.
Ext.define('App.view.feed.Feed', {
extend: 'Ext.dataview.List',
xtype: 'Feed',
alias: 'widget.feedlist',
requires:[
'Ext.plugin.PullRefresh',
'Ext.plugin.ListPaging',
'Ext.ux.classbar.Classbar'
],
config: {
scrollable:{
directionLock: true
},
plugins: [{
xclass: 'Ext.plugin.PullRefresh'
},{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
}],
cls: 'feedlist',
items:[{
cls: 'feedbar',
scrollDock: 'top',
xtype: 'container',
items:[
{
/*
the problem is here
*/
xtype: 'classbar',
cls:'feedClassbar'
},
{
xtype: 'panel',
html:'Feed',
cls: 'feedTitle'
}
]
}]
},
initialize: function(){
var me = this;
var store = Ext.getStore('FeedStore');
me.callParent(arguments);
me.setStore(store);
var tpl = new Ext.XTemplate(
'<tpl for=".">'+
'<div class="feed-item-box" >'+
'<div class="content">' +
'<h4>{content:ellipsis(50)} {summary}</h4>' +
'</div>' +
'<div class="due"> ' +
' <h4>{[this.dueInfo(values.expiresdate)]}</h4>' +
'</div>' +
'</div>'+
'</tpl>',{
dueInfo: function(date){
var origDate = moment(date).format("MMM Do");
var today = moment().format("MMM Do");
if (today.match(origDate)){
return "Today"
} else{
return origDate
}
}
});
me.setItemTpl(tpl);
}
});