Dataview will not scroll horizontally if using components as dataitems

[ChrisWalker]

If I set the dataview to use inline wrap = false, the items will do as the documentation states for the dataview's inline config option (2.1.1 docs) if I use theitemTpl config option:
"When set to true the items within the DataView will have their display set to inline-block and be arranged horizontally. By default the items will wrap to the width of the DataView. Passing an object with { wrap: false } will turn off this wrapping behavior and overflowed items will need to be scrolled to horizontally."

{
  xtype: 'dataview',
  flex: 1,
  defaultType: 'MonitorItem_Tablet',
  scrollable: 'horizontal',
  deferEmptyText: false,
  inline: {
    wrap: false
  },
   itemTpl: [
      '<div>{name}</div>'
   ],
  store: 'goodMonitorStore',
  useComponents: false

SenchaArchitect2.PNG

The overflowed monitors can be seen by scrolling horizontally.

However if I switch this dataview to use components it appears to wrap the items:

{ xtype: 'dataview',
 flex: 1,
defaultType: 'MonitorItem_Tablet',
scrollable: 'horizontal',
deferEmptyText: false,
inline: {
   wrap: false
},
itemTpl: [
    '<div>{name}</div>'
],
store: 'goodMonitorStore',
useComponents: true
},

SenchaArchitect1.PNG

[mitchellsimoens]

I'm going to open a bug. Here is a pretty good test case that shows this issue:

Ext.define('MyApp.view.DataItem', {
    extend : 'Ext.dataview.component.DataItem',
    xtype  : 'myapp-dataitem',

    config : {
        text    : {
            cls  : 'text-item'
        },
        dataMap : {
            getText : {
                setHtml : 'text'
            }
        }
    },

    applyText : function(text) {
        return Ext.factory(text, Ext.Component, this.getText());
    },

    updateText : function(text) {
        if (text) {
            this.add(text);
        }
    }
});

Ext.application({
    name : 'MyApp',

    viewport : {
        layout : {
            type  : 'vbox',
            align : 'stretch'
        }
    },

    launch : function () {

        Ext.Viewport.add([
            {
                xtype      : 'dataview',
                flex       : 1,
                inline     : {
                    wrap : false
                },
                scrollable : 'horizontal',
                itemTpl    : '<div class="text-item">{text}</div>',
                store      : {
                    fields : ['text'],
                    data   : [
                        { text : 'One'   },
                        { text : 'Two'   },
                        { text : 'Three' },
                        { text : 'Four'  },
                        { text : 'Five'  },
                        { text : 'Six'   },
                        { text : 'Seven' },
                        { text : 'Eight' },
                        { text : 'Nine'  },
                        { text : 'Ten'   }
                    ]
                },
                items      : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top',
                        title  : 'Using itemTpl (correct behavior)'
                    }
                ]
            },
            {
                xtype         : 'dataview',
                flex          : 1,
                defaultType   : 'myapp-dataitem',
                scrollable    : 'horizontal',
                useComponents : true,
                inline        : {
                    wrap : false
                },
                store         : {
                    fields : ['text'],
                    data   : [
                        { text : 'One'   },
                        { text : 'Two'   },
                        { text : 'Three' },
                        { text : 'Four'  },
                        { text : 'Five'  },
                        { text : 'Six'   },
                        { text : 'Seven' },
                        { text : 'Eight' },
                        { text : 'Nine'  },
                        { text : 'Ten'   }
                    ]
                },
                items         : [
                    {
                        xtype  : 'toolbar',
                        docked : 'top',
                        title  : 'Using Components (incorrect behavior'
                    }
                ]
            }
        ]);

    }
});

CSS:

.text-item {
    width  : 200px;
    height : 200px;
    border : 1px solid #000;
    margin : 1em;
}

[ChrisWalker]

Thanks Mitchell.
Is there a way to track this bug? I can open a support ticket if that would help.

[mitchellsimoens]

It's actually better to track on the forums. As you can see at the top you have the status [OPEN], the bug number. When it gets resolved, it should also send a PM.

[Jamie Avins]

2 Things to make this work:

1) Set the width to null on your dataItem (defaults to 100%)

2) Add this CSS in (this will be in the next release):

.x-dataview-nowrap {
    .x-container.x-dataview {
        white-space: nowrap !important;
    }
}

[ChrisWalker]

Thanks- that did it!