DataView won't render when "added" to panel

[crankin]

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:

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'
            }
        ]
    }
});

[chamarts]

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

[crankin]

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:

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