1. #1
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
    tf.alves is on a distinguished road

      0  

    Default Unanswered: dataMap to DataItem's items

    Unanswered: dataMap to DataItem's items


    Hi,

    I'm trying to set a data item with items within. This is my code so far:

    Code:
    Ext.define('ON.component.ListItem', {
        extend: 'Ext.dataview.component.DataItem',
        xtype: 'listitem',
        config: {
            listItem: true,
        
            cls: 'item',
            
            defaults: {
                xtype: 'container',
                layout: {type: 'hbox'}
            },
            
            items:[
                {
                    defaults: {
                        layout: {type: 'vbox'}
                    },
                    items: [
                        {
                            flex: 1,
                            html: 'flexBox',
                            layout: {type: 'hbox'}
                        },
                        {
                            width: 100,
                            html: 'fixedBox',
                            layout: {type: 'hbox'}
                        }
                    ]
                },
                {
                    html: 'vbox2',
                    cls: 'item-disclosure',
                    hidden:true,
                    layout: {type: 'vbox'}
                }
             
            ],
            
            layout: {
                type: 'vbox'
            }
        }
    });
    Now I wanted to pass data to the inner items. This is, I want to replace the html of the multiple components I have inside my list item with my store results. How can I do that? I haven't found a dataMap example so far that explains how to do that with the items inside the dataItem.
    For a simple DataItem (without inner items) I know I can just simply set the name of the field with setHtml inside the dataMap.
    Should I just give up using the 'items:[]' and define the inner items directly in the config of the DataItem as explained in http://www.sencha.com/blog/dive-into...ouch-2-beta-2/ ? But if I do this, how can I arrange the items so it reproduces the same layout that I have in the code pasted above?

    Thanks.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The issue is you aren't really using DataItem as it was intended. It's intended to use dataMap. However you could try building the items array in the applyItems method and see if you can get the record data for that item.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
    tf.alves is on a distinguished road

      0  

    Default


    What do you mean? I know I can map the record data into the dataitem through the dataMap, but, as you can see I also need to pass some of that record data into the items inside the dataitem config, like the inner hboxes. That's the part I'd like to know if it is possible to achieve through the dataMap or if I have to map it some other way.

  4. #4
    Sencha User chuckoh's Avatar
    Join Date
    Jan 2012
    Location
    Seoul, Korea
    Posts
    16
    Answers
    1
    Vote Rating
    0
    chuckoh is on a distinguished road

      0  

    Default


    I confronted a similar situation. And, I've ended up writing the following quirky solution by using updateRecord(). I know it's not what you want but, it worked for me. Hope this helps.

    Code:
    /**
     * comment item
     */
    
    
    Ext.define('App.view.CommentItem', {
        extend: 'Ext.dataview.component.DataItem',
        requires: ['Ext.Img', 'Ext.Button'],
        xtype: 'comment-item',
    
    
        config: {
            cls: 'comment-item',
            dataMap: {
                getUser: {
                    setHtml: 'user_nick'
                },
                getComment: {
                    setHtml: 'comment'
                },
                getTitle: {
                    setHtml : 'received_title'
                },
                getImage: {
                    setSrc: 'face_img'
                }
            },
            user: {
                cls: 'user'
            },
            comment: {
                cls: 'comment'
            },
            title: {
                cls: 'title'
            },
            image: {
                docked: 'left',
                xtype: 'img',
                cls: 'img'
            },
            button: {
                docked: 'right',
                xtype: 'button',
                cls: 'button button-spam',
                ui: 'normal',
                text: 'Button',
                align: 'middle'
            },
            layout: {
                type: 'vbox'
            }
        },
        applyUser: function(config) {
            return Ext.factory(config, Ext.Component, this.getUser());
        },
        updateUser: function(newUser, oldUser) {
            if (newUser) { this.add(newUser); }
            if (oldUser) { this.remove(oldUser); }
        },
        applyComment: function(config) {
            return Ext.factory(config, Ext.Component, this.getComment());
        },
        updateComment: function(newComment, oldComment) {
            if (newComment) { this.add(newComment); }
            if (oldComment) { this.remove(oldComment); }
        },
        applyTitle: function(config) {
            return Ext.factory(config, Ext.Component, this.getTitle());
        },
        updateTitle: function(newTitle, oldTitle) {
            if (newTitle) { this.add(newTitle); }
            if (oldTitle) { this.remove(oldTitle); }
        },
        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); }
        },
        applyButton: function(config) {
            return Ext.factory(config, Ext.Button, this.getButton());
        },
        updateButton: function(newButton, oldButton) {
            if (newButton) { this.add(newButton); }
            if (oldButton) { this.remove(oldButton); }
        },
    
    
        updateRecord: function(record) {
            this.callParent(arguments);
    
    
            var nameR = record.get('user_nick');
            var timeR = record.get('datetime');
            var user = this.getUser();
            user.setHtml(nameR+' <span>('+timeR+')</span>');
    
    
            var descrR = record.get('domain_descr');
            var titleR = record.get('received_title');
            var title = this.getTitle();
            title.setHtml('['+descrR+'] '+titleR);
        }
    });

  5. #5
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
    tf.alves is on a distinguished road

      0  

    Default


    Quote Originally Posted by chuckoh View Post
    I confronted a similar situation. And, I've ended up writing the following quirky solution by using updateRecord(). I know it's not what you want but, it worked for me. Hope this helps.

    Code:
    /**
     * comment item
     */
    
    
    Ext.define('App.view.CommentItem', {
        extend: 'Ext.dataview.component.DataItem',
        requires: ['Ext.Img', 'Ext.Button'],
        xtype: 'comment-item',
    
    
        config: {
            cls: 'comment-item',
            dataMap: {
                getUser: {
                    setHtml: 'user_nick'
                },
                getComment: {
                    setHtml: 'comment'
                },
                getTitle: {
                    setHtml : 'received_title'
                },
                getImage: {
                    setSrc: 'face_img'
                }
            },
            user: {
                cls: 'user'
            },
            comment: {
                cls: 'comment'
            },
            title: {
                cls: 'title'
            },
            image: {
                docked: 'left',
                xtype: 'img',
                cls: 'img'
            },
            button: {
                docked: 'right',
                xtype: 'button',
                cls: 'button button-spam',
                ui: 'normal',
                text: 'Button',
                align: 'middle'
            },
            layout: {
                type: 'vbox'
            }
        },
        applyUser: function(config) {
            return Ext.factory(config, Ext.Component, this.getUser());
        },
        updateUser: function(newUser, oldUser) {
            if (newUser) { this.add(newUser); }
            if (oldUser) { this.remove(oldUser); }
        },
        applyComment: function(config) {
            return Ext.factory(config, Ext.Component, this.getComment());
        },
        updateComment: function(newComment, oldComment) {
            if (newComment) { this.add(newComment); }
            if (oldComment) { this.remove(oldComment); }
        },
        applyTitle: function(config) {
            return Ext.factory(config, Ext.Component, this.getTitle());
        },
        updateTitle: function(newTitle, oldTitle) {
            if (newTitle) { this.add(newTitle); }
            if (oldTitle) { this.remove(oldTitle); }
        },
        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); }
        },
        applyButton: function(config) {
            return Ext.factory(config, Ext.Button, this.getButton());
        },
        updateButton: function(newButton, oldButton) {
            if (newButton) { this.add(newButton); }
            if (oldButton) { this.remove(oldButton); }
        },
    
    
        updateRecord: function(record) {
            this.callParent(arguments);
    
    
            var nameR = record.get('user_nick');
            var timeR = record.get('datetime');
            var user = this.getUser();
            user.setHtml(nameR+' <span>('+timeR+')</span>');
    
    
            var descrR = record.get('domain_descr');
            var titleR = record.get('received_title');
            var title = this.getTitle();
            title.setHtml('['+descrR+'] '+titleR);
        }
    });
    My problem is accessing the items inside the main dataItem. And I don't see you can't you update your records directly using the dataMap, as your items are all in the dataItem root config!

  6. #6
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    108
    Answers
    2
    Vote Rating
    0
    =NR= has a little shameless behaviour in the past

      0  

    Default Clever!!

    Clever!!


    Clever idea!!

    really something to think of calling the updateRecord event.
    I'm not aware there is such a thing.

    With that we can pass down the data from the model into the items specified in config.

    In case of the thread started mentioned, you need to create the items in your config one by one and have a way to identify it. chuckoh example is really good and works for me.

    Quote Originally Posted by chuckoh View Post
    I confronted a similar situation. And, I've ended up writing the following quirky solution by using updateRecord(). I know it's not what you want but, it worked for me. Hope this helps.

    Code:
    /**
     * comment item
     */
    
    
    Ext.define('App.view.CommentItem', {
        extend: 'Ext.dataview.component.DataItem',
        requires: ['Ext.Img', 'Ext.Button'],
        xtype: 'comment-item',
    
    
        config: {
            cls: 'comment-item',
            dataMap: {
                getUser: {
                    setHtml: 'user_nick'
                },
                getComment: {
                    setHtml: 'comment'
                },
                getTitle: {
                    setHtml : 'received_title'
                },
                getImage: {
                    setSrc: 'face_img'
                }
            },
            user: {
                cls: 'user'
            },
            comment: {
                cls: 'comment'
            },
            title: {
                cls: 'title'
            },
            image: {
                docked: 'left',
                xtype: 'img',
                cls: 'img'
            },
            button: {
                docked: 'right',
                xtype: 'button',
                cls: 'button button-spam',
                ui: 'normal',
                text: 'Button',
                align: 'middle'
            },
            layout: {
                type: 'vbox'
            }
        },
        applyUser: function(config) {
            return Ext.factory(config, Ext.Component, this.getUser());
        },
        updateUser: function(newUser, oldUser) {
            if (newUser) { this.add(newUser); }
            if (oldUser) { this.remove(oldUser); }
        },
        applyComment: function(config) {
            return Ext.factory(config, Ext.Component, this.getComment());
        },
        updateComment: function(newComment, oldComment) {
            if (newComment) { this.add(newComment); }
            if (oldComment) { this.remove(oldComment); }
        },
        applyTitle: function(config) {
            return Ext.factory(config, Ext.Component, this.getTitle());
        },
        updateTitle: function(newTitle, oldTitle) {
            if (newTitle) { this.add(newTitle); }
            if (oldTitle) { this.remove(oldTitle); }
        },
        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); }
        },
        applyButton: function(config) {
            return Ext.factory(config, Ext.Button, this.getButton());
        },
        updateButton: function(newButton, oldButton) {
            if (newButton) { this.add(newButton); }
            if (oldButton) { this.remove(oldButton); }
        },
    
    
        updateRecord: function(record) {
            this.callParent(arguments);
    
    
            var nameR = record.get('user_nick');
            var timeR = record.get('datetime');
            var user = this.getUser();
            user.setHtml(nameR+' <span>('+timeR+')</span>');
    
    
            var descrR = record.get('domain_descr');
            var titleR = record.get('received_title');
            var title = this.getTitle();
            title.setHtml('['+descrR+'] '+titleR);
        }
    });