I've read a [tutorial](http://docs.sencha.com/touch/2-0/#!/guide/dataview) 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)|