DataView won't render when "added" to panel

I'm trying to add a DataView to a Panel and no matter how I try it it won't render. The code is fine if I my dataview.show() and set the "fullscreen" config option to true then it renders the data correctly. But that's not what I want. I need it to render as a nested component.

FYI: showOrderSeats is called from the controller. And it runs fine. The totalSales show's up and like I mentioned if I test it by doing seatList.show() it renders fine so I know its' working it just won't render as a nested component.

Here's the code:

Code:

---

Ext.define('MyApp.view.EditOrder', {
    extend: 'Ext.Panel',
    xtype: 'editorder',
    showOrderSeats: function(orders) {
        var grandTotal = 0.00;
        var seatListPanel = this.getComponent('seat-list-panel');
        seatListPanel.removeAll();
        // Set the title
        if (orders.length > 0) {
            this.getComponent('edit-order-toolbar').setTitle('Order ' + orders[0].order_id);
            grandTotal = orders[0].totals.grand;


            var seatStore = Ext.create('Ext.data.Store', {
                fields: [
                    {name: 'id', type: 'int'},
                    {name: 'seat', type: 'int'},
                    {name: 'seat_order', type: 'auto'}
                ],
                data: orders[0].seats
            });
           
            var seatList = Ext.create('Ext.DataView', {
                xtype: 'dataview',
                //fullscreen: true,
                id: 'seat-list',
                store: seatStore,
                itemTpl: Ext.create('Ext.XTemplate',
                    '<tpl for=".">',
                        '<div class="ov-list-item">',
                            '<div>Seat {seat}</div>',
                            '<tpl for="seat_order">',
                                '<div>({item.quantity}){item.short_name}<span style="float: right">${item.price}<span></div>',
                            '</tpl>',
                        '</div>',
                    '</tpl>'
                )
            });
           
            seatListPanel.add(seatList);
           
        } else {
            this.getComponent('edit-order-toolbar').setTitle('New Order');
           
            seatListPanel.add({
                html: 'Click "Add Seat" to start order.'
            });
           
        }
       
        // Show the order total
        var totalSales = this.getComponent('edit-order-total-sales');
        totalSales.setHtml('<div class="total-sales">Total Sales: <strong>$' + grandTotal + '</strong></div>');
    },
    config: {
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                id: 'edit-order-toolbar'
            },
            {
                docked: 'top',
                xtype: 'toolbar',
                id: 'order-actions-toolbar',
                dockedItems: [
                    {
                        xtype: 'button',
                        text: 'Save',
                        ui: 'action'
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        text: 'Add Seat',
                        ui: 'action'
                    }
                ]
            },
            {
                xtype: 'panel',
                id: 'seat-list-panel'
            },
            {
                docked: 'bottom',
                xtype: 'panel',
                id: 'edit-order-total-sales'
            }
        ]
    }
});

---

I am having the same issue ... looking for some one to answer

Well I'm guessing since DataView is named such it's expected to be used as a VIEW and not a container. So I restructured the code so that my view inherits from DataView instead and then everything seems to work. Here is the new code:

Code:

---

Ext.define('MyAPP.view.EditOrder', {
    extend: 'Ext.DataView',
    xtype: 'editorder',
        config: {
                store: 'Seats',
                itemTpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    '<div class="seat-details">',
                        '<div>Seat {seat}</div>',
                                        '<input type="button" name="remove-seat-{seat}" value="Remove"/>',
                        '<tpl for="seat_order">',
                            '<div>({item.quantity}){item.short_name}<span style="float: right">${item.price}<span></div>',
                        '</tpl>',
                    '</div>',
                '</tpl>'
            ),
                items: [
                        {
                                docked: 'top',
                                xtype: 'toolbar',
                                id: 'edit-order-toolbar',
                                items: [
                                        {
                                                id: 'edit-order-back-button',
                                                ui: 'back',
                                                text: 'Back'
                                        }
                                ]
                        },
                        {
                                docked: 'top',
                                xtype: 'toolbar',
                                id: 'order-actions-toolbar',
                                dockedItems: [
                                        {
                                                xtype: 'button',
                                                text: 'send',
                                                ui: 'action-round',
                                                id: 'send-order-button'
                                        },
                                        {
                                                xtype: 'spacer'
                                        },
                                        {
                                                xtype: 'button',
                                                text: 'Add Seat',
                                                ui: 'action-round',
                                                id: 'add-seat-button'
                                        }
                                ]
                        },                       
                        {
                                docked: 'top',
                                id: 'new-order-instructions',
                                html: 'Click "Add Seat" to start order.'
                        },
                        {
                                docked: 'bottom',
                                xtype: 'panel',
                                id: 'edit-order-total-sales'
                        }
                ]
    }
});

---

Hope this helps someone