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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi