Sencha Touch DataItem and DataView.useComponents incompatible with Architect 2.1

[Frewland]

I created a trivial ST2 app in Architect 2.1 using one DataView with useComponents : true


Ext.define('MyApp.view.MyDataView', {
extend: 'Ext.dataview.DataView',


config: {
defaultType: 'mydataitem',
store: 'MyDirectStore',
useComponents: true,
itemConfig: {
xtype: 'mydataitem'
}
}


});


and linked it to a trivial DataItem


Ext.define('MyApp.view.MyDataItem', {
extend: 'Ext.dataview.component.DataItem'


config: {
padding: 10,
layout: {
type: 'hbox'
},
items: [
{
xtype: 'component',
flex: 1,
html: 'here'
}
]
},


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


});


But I can only get this to work if I hand edit MyDataItem and put this line


xtype: 'mydataitem',


in front of the config. Otherwise when I run it I get the error

Uncaught Error: [ERROR][Ext.Container#setDefaultType] Invalid defaultType of: 'mydataitem', must be a valid component xtype

Sencha Architect 2.1 won't let me put the xtype in. If I try it says

A custom config cannot override a reserved config...

However, if I hand edit the xtype property into MyDataItem, Sencha Architect removes whenever I save the project.

What should I do ?

[aconran]

Change it via an override.

[aconran]

Btw, we have a tutorial/guide coming on how to use the useComponents flag with Architect as many people have been asking.

[Frewland]

After reading tcsete's reply to this post http://www.sencha.com/forum/showthread.php?241618-Creating-a-DataView-with-custom-DataItem-with-Architect&highlight=architect+dataitem+datamap , I spent some time trying to use overrides but with no success. Eventually I hit on using

alias: 'widget.mydataitem', instead of xtype even though xtype is what is used in the non-Architect DataItem examples e.g. http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2.

The DataView now connects to mydataitem.

I couldn't get the dataMap to work via the override either, so instead I do everything through the


updateRecord: function(record)

i.e. get values from record.data and use them to update the html in mydataitem's components.

(Maybe I'm missing something but the dataMap feature seems over-engineered ?)

It works now, but some up to date documentation and examples would be very welcome.

[aconran]

(Maybe I'm missing something but the dataMap feature seems over-engineered ?)


In short, yes. In 2.2 the dataMap configuration is being deprecated in favor of people writing the code to do what they want in the updateRecord method.

[paranella]

Can we have an updateRecord function example?
Thanks

[aconran]

We'll put a new example into the Sencha Architect github repo soon.
https://github.com/SenchaArchitect

For now I'd suggest you look at the navigationview example included with the touch SDK.
http://docs.sencha.com/touch/2-1/touch-build/examples/navigationview/index.html

view/contact/Show.js

[Bassanio Kum]

How soon the example could be? I'm stucked here:((

I meant how to use DataView.useComponent = true

I am loosing patience for not making it working and thinking if I should quit from the Architect I paid for to a standard code editor :(

[zlog]

when will this work?

[aconran]

when will this work?

This works today.

We have it in the pipeline to create an example with an associated tutorial.

[zlog]

Ok, tnx. I've seen that it works. For the future tutorial if you want an test-example I can suggest one, like the following one:

- a Ext.dataview.component.DataItem that will show like a grouped list and items from one group will have a {text} and a checkboxfield to the right with the possibility to toggle it on/off and the second group an action button let's say :)

What do you say ?