accordion and dataview problem

[evgenspb]

Hello, looks like it is not possible to create dataview object insade accordion

Here is example.
Code does work until I set layout=accordion (red code)

Also, it does work if create empty panel in accordion and create dataview inside that panel. (green code)

 Ext.onReady(function() {
            
        Ext.define('Image', {
            extend: 'Ext.data.Model',
            fields: [
                { name:'src', type:'string' },
                { name:'caption', type:'string' }
            ]
        });


        Ext.create('Ext.data.Store', {
            id:'imagesStore',
            model: 'Image',
            data: [
                { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
                { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
                { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
                { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
            ]
        });


        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div style="margin-bottom: 10px;" class="thumb-wrap">',
                  '<img src="{src}" />',
                  '<br/><span>{caption}</span>',
                '</div>',
            '</tpl>'
        );    
        
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [{
                region: 'west',
                collapsible: true,
                title: 'View',
                width: 150,
                split: true,
                layout: 'accordion',
                items:[{
                    items: {
                    xtype:'dataview',
                    store: Ext.data.StoreManager.lookup('imagesStore'),
                    tpl: imageTpl,
                    itemSelector: 'div.thumb-wrap',
                    emptyText: 'No images available'}
                }]

            }, {
                region: 'center',
                xtype: 'tabpanel', // TabPanel itself has no title
                activeTab: 0,      // First tab active by default
                items: {
                    title: 'Default Tab',
                    html: 'The first tab\'s content. Others may be added dynamically'
                }
            }]
        });        
    });

failing test case:

Ext.define('Image', {
    extend : 'Ext.data.Model',
    fields : [
        { name : 'src', type : 'string' },
        { name : 'caption', type : 'string' }
    ]
});

Ext.create('Ext.data.Store', {
    id    : 'imagesStore',
    model : 'Image',
    data  : [
        { src : 'http://www.sencha.com/img/20110215-feat-drawing.png', caption : 'Drawing & Charts' },
        { src : 'http://www.sencha.com/img/20110215-feat-data.png', caption : 'Advanced Data' },
        { src : 'http://www.sencha.com/img/20110215-feat-html5.png', caption : 'Overhauled Theme' },
        { src : 'http://www.sencha.com/img/20110215-feat-perf.png', caption : 'Performance Tuned' }
    ]
});

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
            '<img src="{src}" />',
            '<br/><span>{caption}</span>',
        '</div>',
    '</tpl>'
);

Ext.create('Ext.container.Viewport', {
    layout : 'border',
    items  : [
        {
            region      : 'west',
            collapsible : true,
            title       : 'View',
            width       : 150,
            split       : true,
            layout      : 'accordion',
            items       : [
                {
                    xtype        : 'dataview',
                    store        : Ext.data.StoreManager.lookup('imagesStore'),
                    tpl          : imageTpl,
                    itemSelector : 'div.thumb-wrap',
                    emptyText    : 'No images available'
                }
            ]

        },
        {
            region    : 'center',
            xtype     : 'tabpanel', // TabPanel itself has no title
            activeTab : 0,      // First tab active by default
            items     : {
                title : 'Default Tab',
                html  : 'The first tab\'s content. Others may be added dynamically'
            }
        }
    ]
});

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[evant]

This is not a bug. Items inside an accordion layout need to be panels because they rely on the panel header being rendered (title, tools).

[evgenspb]

It would be nice to include this information in documentation ;-)
Something like

Use only panel with accordion!!!