What is the best way to attach a DataItem class to a DataView using Architect?

[BridgeSense]

After setting useComponents to True and changing the defaultType to an existing DataItem class, Architect throws this error: Uncaught TypeError: Cannot call method 'substring' of undefined

When running the project, this error occurs:
Error: [ERROR][Ext.Container#setDefaultType] Invalid defaultType of: 'channellayout', must be a valid component xtype

Sencha doesn't seem to be recognizing the DataItem class. I would love to see an updated example of implementing a DataItem using Architect.

DataView

{
     xtype: 'dataview',
     defaultType: 'channellayout',
     store: 'MediaStackImporter',
     useComponents: true
}

DataItem

Ext.define('MyApp.view.ChannelLayout', {
    extend: 'Ext.dataview.component.DataItem',
    alias: 'widget.channellayout',


    config: {
        items: [
            {
                xtype: 'container',
                height: '2em',
                id: 'ChannelLabel',
                padding: '0.25em',
                style: 'color: #5a5a5a; font-size: 0.8em; font-weight: bold;'
            },
            {
                xtype: 'container',
                height: '6em',
                id: 'ChannelItems',
                layout: {
                    type: 'vbox'
                }
            }
        ]
    },


    updateRecord: function(record) {
        // Provide an implementation to update this container's child items
        console.log(record.channelsName);
    }


});

[BridgeSense]

I've spent most of the day trying to put together similar example using DataItem and DataView as used in the latest Kiva repository: https://github.com/SenchaArchitect/Kiva

I am still getting the same errors as mentioned above. What is really confusing is that the setup above matches the new Kiva example.

DataItem

Ext.define('Kiva.view.LoansListItem', {
    extend: 'Ext.dataview.component.DataItem',
    alias: 'widget.loanslistitem',


    requires: [
        'Kiva.view.LoansListItemCompletion'
    ],


    config: {
        cls: 'x-list-item',
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'component',
                cls: 'name',
                itemId: 'name'
            },
            {
                xtype: 'component',
                cls: 'use',
                itemId: 'use'
            },
            {
                xtype: 'image',
                docked: 'left',
                itemId: 'avatar'
            },
            {
                xtype: 'loanslistitemcompletion',
                docked: 'right',
                itemId: 'completion'
            }
        ]
    },


    updateRecord: function(record) {
        // Provide an implementation to update this container's child items
        this.down('#name').setHtml(record.get('name'));
        this.down('#use').setHtml(record.get('use'));
        this.down('#avatar').setSrc(record.get('image'));
        this.down('#completion').setPercentFunded(record.get('percent_funded'));
    }


});

DataView

Ext.define('Kiva.view.LoansList', {
    extend: 'Ext.dataview.DataView',
    alias: 'widget.loanslist',


    config: {
        ui: 'loans',
        deselectOnContainerClick: false,
        defaultType: 'loanslistitem',  // <- Matches the alias
        store: 'Loans',
        useComponents: true,
        refreshed: [
            '["[\\\'false\\\']"]'
        ]
    },

...

I see nothing spectacular here, so I'm at a loss why the same errors aren't thrown when loading the Kiva project in Architect?

[BridgeSense]

I'm not sure if this is a bug in Architect, but I just figured out why I was getting the error - and it has nothing to do with the written code. It has everything to do with the order the components are in the Project Inspector. The DataItem has to be above the DataView that references it.

CORRECTION:
It's not the order in the Project Inspector. It's more of a naming convention? I tried to move a new DataItem above the corresponding DataView class and I received the same error again... After placing appending "aa" in front the userClassName to be sure a new file is created, seemed to have fixed the issue. But that isn't consistent for me either.

After making several changes to my project last night, saved them and published them to a local server, I was shocked to log in and find that all the changes were gone - and of course the error is back.

It seems that the whole project is being saved somewhere other than the project directory and the program is not doing a good job with syncing between the two collections.

....
http://www.sencha.com/forum/showthre...t-tab-in-focus.

[Vino999]

I'm getting the same error, changing the classname doesn't help me.
Is there another solution/workaround for this matter?

[ssok]

Hello,
I managed to make it work! The order of creating the DataView/DataViewItem/Store is important.

Here is how I did that:

• Delete everything or restore to a state where your screen works properly
• Create a DataItem first (the position in the project inspector seems not important)
• Fill in the userAlias (to something in lowercase)
• Optional: Customize it (I added a button next to the default MyComponent)

Then

• Create a DataView
• Change the defaulttype to the chosen value
• Choose your store

(Test, you should see nothing since the useComponents is not checked yet)

Finally:

• Cross fingers...
• On your DataView, check useComponents

It should work!


Of course, Architect could be better in handling this error and I think this should be reported as a bug. Any feedback?

[bauss]

Hello,
I managed to make it work! The order of creating the DataView/DataViewItem/Store is important.

Here is how I did that:

• Delete everything or restore to a state where your screen works properly
• Create a DataItem first (the position in the project inspector seems not important)
• Fill in the userAlias (to something in lowercase)
• Optional: Customize it (I added a button next to the default MyComponent)

Then

• Create a DataView
• Change the defaulttype to the chosen value
• Choose your store

(Test, you should see nothing since the useComponents is not checked yet)

Finally:

• Cross fingers...
• On your DataView, check useComponents

It should work!


Of course, Architect could be better in handling this error and I think this should be reported as a bug. Any feedback?

I have now tried to do this and all the things above and I am stuck with this exact issue as well, however I am unable to solve it.

Here is my dataview

{                xtype: 'dataview',
                defaultType: '--mydataviewitem--',
                store: '--mystore--',
                useComponents: true
            }
        ]

I'm not sure if my dataviewitem is necessary to be posted as it contains nothing special and I am sure the alias matches the actual defaultType.

Here is what I have tried:
I have tried to reorder the view with the dataview and the dataviewitem component.
I have tried to delete the view with the dataview and recreate it both before/after creating the dataviewitem.
I have tried to delete the dataview and recreate it both before/after.
I have tried putting the configs in different orders, but I am still unable to get this problem solved.
I have tried renaming the view with the dataview, the dataview and the dataviewitem.