Custom Component in Dataview

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?

oberbics · Answer 1 · 2016-09-21T15:13:58.873

0

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.

edited Sep 21 '16 at 15:13

answered Sep 21 '16 at 14:20

oberbics

408
4
12

Ahh I actually am using the classic toolkit, which would explain that. Is there a way to do this with the classic version? The docs for View do not have any of these values... – uesports135 Sep 21 '16 at 15:03
I See. Thought you are using modern since you talked about DataView. Mabey that can help with Adaption to ExtJs 6 classic using Ext.view.View http://stackoverflow.com/questions/12597830/render-customize-component-inside-xtemplate – oberbics Sep 21 '16 at 15:13
FYI: Ext.view.View is a dataview... it's been in extjs classic for almost a decade... that's where ST and Modern got it from. – Dawesi Nov 03 '19 at 03:37

score 0 · Answer 2 · answered Nov 05 '19 at 12:52

0

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

answered Nov 05 '19 at 12:52

klodoma

4,181
1
31
42

Custom Component in Dataview

2 Answers2