PDA

View Full Version : Content cut off for card layout



PJ_
3 Jun 2011, 3:47 AM
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
3 Jun 2011, 7:38 AM
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.