Question

I’ve read a tutorial about creating DataView with custom comonent for each element from Store. It says about mapping fields of record to components in DataItem, but my question is how to define order in which components will be added to DataItem.

For example, I have such DataItem:

Ext.define('demo.view.CottageItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
    xtype: 'listitem',

    config: {
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'start',
        },
        title: {
            flex: 1
        },
        photo: {
            width: '140px',
            height: '140px'
        },

        dataMap: {
            getTitle: {
                setHtml: 'title'
            },
            getPhoto: {
                setSrc: 'photo'
            }
        },
        styleHtmlContent: true
    },

    applyTitle: function(config) {
        return Ext.factory(config, Ext.Label, this.getTitle());
    },

    updateTitle: function(newTitle, oldTitle) {
        if (oldTitle) {
            this.remove(oldTitle);
        }

        if (newTitle) {
            this.add(newTitle);
        }
    },

    applyPhoto: function(config) {
        return Ext.factory(config, Ext.Img, this.getPhoto());
    },

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

        if (newImage) {
            this.add(newImage);
        }
    },
});

It has layout type hbox, so I want photo to be added first and then title. So that title would be to the right of the photo. How can I achieve this?

Another question is, is there a way to add another container inside this DataItem, in which can be inserted my Label and Image?

UPDATE:
Now my layout looks like this:

|Label(title)| |Image(Photo)|

I want it look like this:

|Image(photo)| |Label(title)|

Answer 1

Finally I understood how to solve my problem, here is my code:

Ext.define('demo.view.CottageItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Label', 'Ext.Array', 'Ext.Img'],
    xtype: 'listitem',

    config: {
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'start',
        },
        title: {
            style: {
                'font-weight': 'bold'
            }
        },
        photo: {
            width: '140px',
            height: '140px'
        },
        desc: {},

        dataMap: {
            getTitle: {
                setHtml: 'title'
            },
            getPhoto: {
                setSrc: 'photo'
            },
            getDesc: {
                setHtml: 'desc'
            },
        },
        styleHtmlContent: true,
        items: [
            {
                xtype: 'panel',
                itemId: 'photoContainer',
            },
            {
                xtype: 'panel',
                layout: {
                    type: 'vbox'
                },
                itemId: 'textContainer',
                flex: 1,
            }
        ],
    },

    applyTitle: function(config) {
        return Ext.factory(config, Ext.Label, this.getTitle());
    },

    updateTitle: function(newTitle, oldTitle) {
        if (oldTitle) {
            this.getComponent('textContainer').remove(oldTitle);
        }

        if (newTitle) {
            this.getComponent('textContainer').add(newTitle);
        }
    },

    applyPhoto: function(config) {
        return Ext.factory(config, Ext.Img, this.getPhoto());
    },

    updatePhoto: function(newImage, oldImage) {
        if (oldImage) {
            this.getComponent('photoContainer').remove(oldImage);
        }

        if (newImage) {
            this.getComponent('photoContainer').add(newImage);
        }
    },

    applyDesc: function(config) {
        return Ext.factory(config, Ext.Label, this.getDesc());
    },

    updateDesc: function(newDesc, oldDesc) {
        if (oldDesc) {
            this.getComponent('textContainer').remove(oldDesc);
        }

        if (newDesc) {
            this.getComponent('textContainer').add(newDesc);
        }
    },
});

Instead of adding components to root, I defined two panels (placeholders) inside DataItem. I access them using getComponent method and add my component to desired place. The only problem here is that order of items added to textContainer is undefined, but in my case I got desired order.