Best way to design a shopping cart (with multiple components)

[pepperseb]

Hello,

I searched over the forum but couldn't find what I'm looking for.

I would like to create a shopping cart with two blocks (see the attached file):

1. A list of products with
   1. Some information (thumbnail, name, ..) about the product on the left
   2. A selectfield, under the product name, to select a quantity
   3. More information about the product on the right (prices, ...)
   4. A delete icon, to remove the product from the list
2. A recap with total price and shipping cost

My question is that I don't know how to start/organize my view, I mean, which components I should use. Dataview? Iterate through the product store to create a container with selectfield, button, ... ?

Any help would be greatly appreciated.

sencha.PNG

[mitchellsimoens]

I would use a Container with a dataview and a container as it's items and each item has a height of 50%.

[pepperseb]

Do I have to set a flex value for both container?

I would like to stretch the products list depending on how many products are displayed. Thus the second container would be automatically placed below my list.

[pepperseb]

I solved it thanks to this thread: http://www.sencha.com/forum/showthre...st-in-fieldset

Ext.define('App.view.order.basket.Main', {    
extend: 'Ext.Container',
    xtype: 'basket',
    
    requires: [
        'SF.view.order.basket.Articles',
        'SF.view.order.basket.Summary'
    ],
    
    config: {
        layout: 'vbox',
        
        items: [
            {
                xtype: 'basket-articleslist',
                scrollable: false
            },
            {
                xtype: 'basket-summary'                
            }
        ]
    } 
});

Scrollable did the trick.

Hope this helps