Sencha Touch嵌套水平数据视图:无法滚动

时间:2014-08-29 17:34:57

标签: javascript css cordova extjs sencha-touch

我在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);
    }
});

0 个答案:

没有答案