Creating a DataView with custom DataItem with Architect

[tcsete]

I am attempting to use Architect 2.1 to implement the 'Dive into DataView' kittens list example, which makes use of a custom DataItem. http://www.sencha.com/blog/dive-into...touch-2-beta-2
I have created a Ext.dataview.DataView with useComponents checked and the defaultType set to my kittenslistitem. KittensListItem extends Ext.dataview.component.DataItem, for which I created an override. In the override the dataMap config, component configs and apply and update functions are all specified.
The app fails to load with 'Cannot read property 'apply' of undefined '. Any help identifying what I've done wrong would be greatly appreciated.

The DataView class:

Ext.define('MyApp.view.KittensList', {
    extend: 'Ext.dataview.DataView',
    alias: 'widget.kittenslist',
    requires: [
        'MyApp.view.KittensListItem'
    ],
    config: {
        defaultType: 'kittenslistitem',
        store: 'Kittens',
        useComponents: true
    }
});

The generated DataItem class:

Ext.define('MyApp.view.KittensListItem', {
    extend: 'Ext.dataview.component.DataItem',
    alias: 'widget.kittenslistitem',
    requires: [
        'MyApp.view.override.KittensListItem'
    ],
    config: {
    },
    updateRecord: function(record) {
        // Provide an implementation to update this container's child items
    }
});

The overrides DataItem class:

Ext.define('MyApp.view.override.KittensListItem', {
    override: 'MyApp.view.KittensListItem',
    requires: ['Ext.Img', 'Ext.slider.Slider'],
   
    config: {
        dataMap: {
            getImage: {
                setSrc: 'image'
            },
            getName: {
                setHtml: 'name'
            },
            getSlider: {
                setValue: 'cuteness'
            }           
        },
        
        image: true,             
        name: { flex: 1 },        
        slider: { flex: 2  },


        layout: {
            type: 'hbox',
            align: 'center'
        } 
    },
        
    applyImage: function(config) {
        return Ext.factory(config, Ext.Img, this.getImage());
    },

    updateImage: function(newImage, oldImage) {
        if (newImage) {
            this.add(newImage);
        }
        if (oldImage) {
            this.remove(oldImage);
        }
    },


    applyName: function(config) {
        return Ext.factory(config, Ext.Component, this.getName());
    },
  
    updateName: function(newName, oldName) {
        if (newName) {
            this.add(newName);
        }


        if (oldName) {
            this.remove(oldName);
        }
    },


    applySlider: function(config) {
        return Ext.factory(config, Ext.slider.Slider, this.getSlider());
    },
    
    updateSlider: function(newSlider, oldSlider) {
        if (newSlider) {
            this.add(newSlider);
        }
        if (oldSlider) {
            this.remove(oldSlider);
        }
    }   


});

[tcsete]

Due to this issue, http://www.sencha.com/forum/showthre...e-throws-error, you cannot add all the custom configs to the override. Architect however will not allow the dataMap config to be added to the generated class.

This worked: I added the image, name & slider configs to the generated class and specified the dataMap and apply and update function in the override.

[mlourdes]

You mention " the image, name & slider configs to the generated class"

but I can not find a way to add members to the custom class with the architect , could you tell me how ?

do you know an example of this all based in the architect configuration?

[tcsete]

Add properties to the custom class using Architect as follows (using KittensListItem class as an example):
- select the Generated Class from the dropdown at the top
- in the Config pane, enter the name of the property you'd like to add in the Filter/Quick Set text box (for example slider) and click the add button next to it
- now you will see Custom Properties and the new property name, click the triple dots next to the property name and choose the type. For the slider, select object.
- for an object type property, hover over the symbol to the right of the property name. It will say Edit, click it and you can now enter the code for the property. For the slider, enter {flex: 2}
- do the same for the name property.
- add the image property as a boolean.

I never did find an example of this type using Architect; however I was successful implementing the Kittens List example with Architect by creating the image, name and slider properties as above and adding the rest of the KittensListItem code in the overriddes class.

[aconran]

Due to this issue, http://www.sencha.com/forum/showthre...e-throws-error, you cannot add all the custom configs to the override. Architect however will not allow the dataMap config to be added to the generated class.

I was not aware of this issue; I will check in with the Touch team to see what the status of it is.

Also, please note that dataMap has been deprecated in 2.1 in favor of overriding updateRecord.
http://www.sencha.com/forum/showthre...l=1#post901415