Sencha Touch DataView inside of Ext.Menu

Question

I have a DataView that lists a bunch of component.DataItems. While I have no problem displaying this list of items in a NavigationView, I can't seem to display them inside of an Ext.Menu

Ext.define('AIN.view.MyDataView', {
extend: 'Ext.dataview.DataView',
xtype: 'channellist',
config: {
    defaultType: 'mylistitem',
    useComponents: true
},
});

This is the menu that I need to display the DataItems

Ext.define('AIN.view.SlideNavigation', {
requires: ['Ext.Menu'],
singleton: true,
constructor: function(config) {
    this.initConfig(config);
},
layout : 'fit',
width  : 250,
setMenu: function() {
    Ext.Viewport.setMenu(this.createMenu('left'), {
        side: 'left',
        reveal: true
    });

    Ext.Viewport.setMenu(this.createMenu('right'), {
        side: 'right',
        reveal: true
    });
},

createMenu: function(side) {

    var items = [
        //Components need to be displayed here (I think)
        {
            xtype: 'button',
            text: 'Latest News',
            iconCls: 'star',
            scope: this,
            handler: function() {
                 AIN.container.setActiveItem(0);
                 Ext.Viewport.hideMenu(side);
            }
        },
    ];

    var className = 'Ext.Menu';

    return Ext.create(className, {


        items: items
    });
}
});

Thank you for reading.

EvWill EvWill · Accepted Answer · 2014-03-07T16:19:12

Well, it was a pretty simple fix, I couldn't have both that button item and the list inside of var items. If the button is in there then the list didn't show up. So the fix was removing this code.

    {
        xtype: 'button',
        text: 'Latest News',
        iconCls: 'star',
        scope: this,
        handler: function() {
             AIN.container.setActiveItem(0);
             Ext.Viewport.hideMenu(side);
        }
    },

and adding this code instead

    {
        xclass: 'AIN.view.MyDataView',
        store: 'TestStore'
    }

Sencha Touch DataView inside of Ext.Menu

1 Answers