1

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);
    }
});
jakeforaker
  • 1,622
  • 1
  • 20
  • 34

0 Answers0