View Full Version : [CLOSED] Sencha Touch DataItem and DataView.useComponents incompatible with Architect 2.1

24 Sep 2012, 11:51 PM
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 ?

25 Sep 2012, 7:21 AM
Change it via an override.

25 Sep 2012, 7:21 AM
Btw, we have a tutorial/guide coming on how to use the useComponents flag with Architect as many people have been asking.

26 Sep 2012, 1:31 AM
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.

26 Sep 2012, 7:45 AM
(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.

13 Nov 2012, 1:30 AM
Can we have an updateRecord function example?

13 Nov 2012, 6:13 AM
We'll put a new example into the Sencha Architect github repo soon.

For now I'd suggest you look at the navigationview example included with the touch SDK.


Bassanio Kum
18 Nov 2012, 7:22 AM
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 :(

21 Nov 2012, 3:30 AM
when will this work?

26 Nov 2012, 8:00 AM
when will this work?

This works today.

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

30 Nov 2012, 10:42 AM
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 ?