我在dataview中有一些复杂的布局,有一些嵌套的组件。
问题是,其中一个组件 - 水平列表 - 如果内部项目超出容器(即向右滚动点?),则不能正确地水平滚动。
如下所示,我有一个可重复使用的模块,通过我使用的自定义xtype称为“classbar”(顶部的按钮,用于过滤数据视图项)。这是无法正确滚动的组件;它总是“快照”回到起始位置。
此处的截屏视频:http://screencast.com/t/HltnY41b
您可以看到,当我切换到“出勤”视图时,类栏会按预期水平滚动。我相信这是因为这个视图的主要容器是'Ext.Container',其中有问题的视图是'Ext.dataview.List'。我需要dataview,因为它使用了pullrefresh和listpaging插件(在xtype:Container上不可用)
任何建议表示赞赏。
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);
}
});