DataView vs List with Compoennts

gistfile1.js

/**
 * This must use Sencha Touch 2.1.0 beta 3
 * This shows how similar using components is in DataView and List
 */

Ext.define('MyDataItem', {
    extend : 'Ext.dataview.component.DataItem',
    xtype  : 'mydataitem',

    //<debug>
    requires : [
        'Ext.Button',
        'Ext.layout.HBox'
    ],
    //</debug>

    config : {
        dataMap : {
            getTest : {
                setHtml : 'test'
            }
        },

        test : {
            flex : 1
        },

        btn : {
            text : 'Hi'
        },

        layout : {
            type : 'hbox',
            pack : 'center'
        }
    },

    applyTest : function (config) {
        return Ext.factory(config, Ext.Component, this.getTest());
    },

    updateTest : function (test) {
        if (test) {
            this.add(test);
        }
    },

    applyBtn : function (config) {
        return Ext.factory(config, Ext.Button, this.getBtn());
    },

    updateBtn : function (btn) {
        if (btn) {
            this.add(btn);
        }
    }
});

Ext.define('MyListItem', {
    extend : 'Ext.dataview.component.ListItem',
    xtype  : 'mylistitem',

    //<debug>
    requires : [
        'Ext.Button',
        'Ext.layout.HBox'
    ],
    //</debug>

    config : {
        dataMap : {
            getTest : {
                setHtml : 'test'
            }
        },

        test : {
            flex : 1
        },

        btn : {
            text : 'Hi'
        },

        layout : {
            type : 'hbox',
            pack : 'center'
        }
    },

    applyTest : function (config) {
        return Ext.factory(config, Ext.Component, this.getTest());
    },

    updateTest : function (test) {
        if (test) {
            this.add(test);
        }
    },

    applyBtn : function (config) {
        return Ext.factory(config, Ext.Button, this.getBtn());
    },

    updateBtn : function (btn) {
        if (btn) {
            this.add(btn);
        }
    }
});

Ext.application({
    name : 'Test',

    //<debug>
    requires : [
        'Ext.dataview.List',
        'Ext.data.Store',
        'Ext.layout.HBox'
    ],
    //</debug>

    viewport : {
        layout   : {
            type  : 'hbox',
            align : 'stretch'
        },
        defaults : {
            flex  : 1
        }
    },

    launch : function () {

        Ext.Viewport.add([
            {
                xtype         : 'dataview',
                useComponents : true,
                defaultType   : 'mydataitem',
                store         : {
                    fields : ['test'],
                    data   : [
                        { test : 'One'   },
                        { test : 'Two'   },
                        { test : 'Three' }
                    ]
                }
            },
            {
                xtype         : 'list',
                useComponents : true,
                defaultType   : 'mylistitem',
                store         : {
                    fields : ['test'],
                    data   : [
                        { test : 'One'   },
                        { test : 'Two'   },
                        { test : 'Three' }
                    ]
                }
            }
        ]);

    }
});