Using DataItem without DataView

[Noodlese]

I am trying to create a component that builds itself as mapped to a record. I was taking a look at the DataItem component, but it seems like it is coupled to be used with the DataView component. I do not need the functionality of applying a "list" of DataItems to the DataView. I simply just need one DataItem to be mapped to one record.

Is there any way of using DataItem without using DataView? Or do I need to use the both of them while simply feeding the store a single record instead of an array of records.

Thanks!

[mitchellsimoens]

Shouldn't be too hard to build a container that gets text from a record.

[Noodlese]

I am currently implementing this using a DataView / DataItem which only contains one item. This technique allows me to take advantage of the component generation features of the DataView.

If I was to create a container that mapped to a record, would I have to use a template to control the content? It seems like using a template would be quite restrictive in its possibilities (no components for example).

[mitchellsimoens]

No, just build the items based on the record data. Using DataView is not needed.

[Noodlese]

I am new to Sencha Touch and I really appreciate your help. I feel like I am missing something as I don't fully understand your instruction. Is there an example in the docs that describes what you are talking about? Every example that I have found has been either using DataViews or using templates.

Are you referring to programmatically updating the text within the container with record data, and not using pre-built solution to map data.

[mitchellsimoens]

Here is an example:

Ext.define('MyContainer', {
    extend : 'Ext.Container',
    xtype  : 'mycontainer',

    config : {
        record : null,
        items  : true
    },

    applyItems : function(items, collection) {
        var record = this.getRecord();

        items = [
            {
                flex : 1,
                html : record.get('left')
            },
            {
                flex : 1,
                html : record.get('right')
            }
        ];

        return this.callParent([items, collection]);
    }
});

Ext.define('MyModel', {
    extend : 'Ext.data.Model',

    config : {
        fields : ['left', 'right']
    }
});

Ext.application({
    name : 'Test',

    launch : function () {

        Ext.Viewport.setActiveItem({
            xtype  : 'mycontainer',
            layout : {
                type  : 'hbox',
                align : 'stretch'
            },
            record : new MyModel({
                left  : 'foo',
                right : 'bar'
            })
        });

    }
});

[Noodlese]

Thanks! That was greatly helpful!