dataMap to DataItem's items

[tf.alves]

Hi,

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

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.

[mitchellsimoens]

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.

[tf.alves]

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.

[chuckoh]

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.

/**
 * 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);
    }
});

[tf.alves]

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.

/**
 * 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!