Custom Component in Dataview - extjs

Question

I would like to display a custom UI component for each record in a store.
It looks like a DataView is the best way to do this. There are a lot of old links stating how this is possible by using a DataViewItem but I cannot find anything in the current docs (I'm using version 6.0.2). Is this possible to do with extjs6? Here is what I have right now using a template:
var myTpl= new Ext.XTemplate(
'<tpl for=".">',
'<div>My object is too complex to be displayed with simple html<div>',
'</tpl>'
);
Ext.define( 'MyProject.view.main.MyList', {
extend: 'Ext.DataView',
xtype: 'mylist',
requires: [
'MyProject.view.main.MyViewModel'
],
viewModel: {
type: 'myviewmodel'
},
bind: {
store: '{store}'
},
// I don't want to do this. I would rather have something like this:
// itemXType: 'myitem'
itemTpl: myTpl,
} );
I've left out the viewModel implementation because the only thing it does is defines a proxy store. I can add it in if you need it.
Is there another way of accomplishing this? Maybe Something other than a dataview?

Answer 1

It is possible with ExtJS 6.0.2. Just take a look at Touch 2.4 example. Thats an example of Touch 2.4 but it still works in ExtJS 6.0.2 with the modern toolkit. See this Sencha fiddle (I just copied the code from the Touch example there and selected ExtJS 6.0.2 - Modern toolkit). Regarding Docs: Maybe you are looking at the docs of the classic toolkit. There is no Ext.DataView but you could use Ext.view.View instead
Short version:
Use
config: {
defaultType: 'mydataitem',
useComponents: true
}
in your DataView.
Create a custom DataItem which extends
Ext.dataview.component.DataItem
and add there your desired components.

Answer 2

For Version above Ext 6.2 use xtype: 'componentdataview' instead of xtype: 'dataview'.
https://docs.sencha.com/extjs/7.0.0/modern/Ext.dataview.Component.html