1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    1
    tcsete is on a distinguished road

      0  

    Default Creating a DataView with custom DataItem with Architect

    Creating a DataView with custom DataItem with Architect


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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);
            }
        }   
    
    
    });

  2. #2
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    1
    tcsete is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    14
    Vote Rating
    0
    mlourdes is on a distinguished road

      0  

    Default how do you set members of a custom class

    how do you set members of a custom class


    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?

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    1
    tcsete is on a distinguished road

      1  

    Default


    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.

  5. #5
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,399
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by tcsete View Post
    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
    Aaron Conran
    @aconran
    Sencha Architect Development Team

Thread Participants: 2