Content cut off for card layout

[PJ_]

I have the piece of code below. Unfortunately, when I set layout to "card", which is what I need, the html list content is being cut off instead of scrolling. Do you have any idea what I need to change to make the content scrollable?

Any help very appreciated.

                         dock:"right",
                         layout:'card',
                         width:"50%",
                         style:"background-color:rgb(30,220,220)",
                         scroll : 'vertical',
                         id: "list",
                         items: [{
                            id: "sublist1",
                            html:'<ul><li>Position 1</li><li>Position 2</li><li><a href="" onclick="keywords(); return false;">Position 3</a></li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li><li>Position 1</li><li>Position 2</li><li>Position 3</li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li><li>Position 1</li><li>Position 2</li><li>Position 3</li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li></ul>'
                        },{
                            html: 'Buttons',
                            id: "sublist2"
                        }] 

[hyperionab]

You probably want to put Panels inside your cards. Then in your Panels, you can specify a layout, like a vbox, so Sencha Touch knows how to lay things out.

For example:

		var gameControls = [
			new Ext.Button({
				ui: 'round',
				html: '<img src="images/up-arrow-icon.png"/>',
				padding: 35,
				handler: function() {
                    gameRemoteHandler('up')
                }                
			}),
			new Ext.Container({
				layout: 'hbox',
				items: [
					new Ext.Button({
						ui: 'round',
						html: '<img src="images/left-arrow-icon.png"/>',
						padding: 35,
						handler: function() {
                            gameRemoteHandler('left')
                        }                
					}),
					{padding: 35},
					new Ext.Button({
						ui: 'round',
						html: '<img src="images/right-arrow-icon.png"/>',
						padding: 35,
						handler: function() {
                            gameRemoteHandler('right')
                        }                
					})
				]
			}),
			new Ext.Button({
				ui: 'round',
				html: '<img src="images/down-arrow-icon.png"/>',
				padding: 35,
				handler: function() {
                    gameRemoteHandler('down')
                }                
			}),
			{html: '', padding: 10}, /* just a little spacer */
			new Ext.List({
				itemTpl: '{name}',
				store: store,
				disableSelection: true
			})
		];

		var gameScreen = [
			new Ext.Panel({
				items: gameControls,
				layout: 'vbox'
			})
		];

So in this case the items for my root container is just gameScreen, and gameScreen is a panel with a bunch of components in it. That lets ST know how to layout the whole screen.