Hybrid View

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
    crankin is on a distinguished road

      0  

    Default Unanswered: DataView won't render when "added" to panel

    Unanswered: 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'
                }
            ]
        }
    });
    Last edited by crankin; 4 Jan 2012 at 1:40 PM. Reason: wrap code

  2. #2
    Sencha User
    Join Date
    Aug 2010
    Posts
    12
    Vote Rating
    -1
    chamarts is an unknown quantity at this point

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    16
    Vote Rating
    0
    crankin is on a distinguished road

      0  

    Default Solved

    Solved


    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

Thread Participants: 1