Results 1 to 6 of 6

Thread: dataMap to DataItem's items

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

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
      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
      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
      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
    115
    Answers
    2
    Vote Rating
    -1
      0  

    Default 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);
        }
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •