PDA

View Full Version : panel scrolling question



jochem kuun
16 Feb 2011, 1:31 AM
Hi,

I was wondering: in order for a panel to scroll vertically, does it need a fixed height?
I've got the following code:


/*global Ext, Plango */
Plango.views.PlanningMain = Ext.extend(Ext.Panel,{
cls: "planning-main",
id: "planning-main",
ui: 'dark',
items: [
{
dockedItems: [{
xtype: "toolbar",
ui: 'dark',
defaults: {
iconMask: true
},
title: 'Planning',
items: [...]
},
{
xtype: 'toolbar',
ui: 'dark',
defaults: {
iconMask: true
},
items: [...]
}],
items: {
xtype: 'panel',
id: 'planning-content',
title: 'planning content',
style: 'background-color: green;',
items: [{
xtype: 'panel',
title: 'hours',
style: 'background-color: red;',
scroll: 'vertical',
height: 650,
html: '<div style="height: 60px; border-bottom: 1px solid black;">7:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">8:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">9:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">10:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">11:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">12:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">13:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">14:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">15:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">16:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">17:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">18:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">19:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">20:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">21:00</div>' +
'<div style="height: 60px; border-bottom: 1px solid black;">22:00</div>' +
'<div style="height: 60px;">23:00</div>'
}],
dockedItems: [{
xtype: 'panel',
title: 'date',
html: '<div style="text-align: center;"><h1 style="font-size: 4em;">31</h1><p>Maandag 31 januari</p></div>',
dock: 'left'
}]
}
},
{
title: 'weekview',
html: 'weekview'
},
{
title: 'dayview',
html: 'dayview'
}
]
});

The panel with id planning-content has a fixed height of 650 px. Because the height of the device can change, i really like this to be dynamic. But if i remove the fixed height, the content isn't scrollable anymore. Well, thats not true. It can scroll, but the content always returns to top. So I can view the content at the bottom of the panel but when i release my finger the content scrolls back again, and the bottom content isnt visible anymore.

What am i doin wrong? I've tried applying a fit layout to the planning-content panel, but to no effect. Also, setting the height to autoHeight does not work.

I really hope someone can help.

Thanks in advance.

ninoguba
17 Feb 2011, 2:58 PM
Same here. Please post if you find a solution. Thanks

ninoguba
17 Feb 2011, 3:25 PM
Found the solution. Basically you need to specify layout: 'fit' on the panel containing your scrollable list.

jochem kuun
18 Feb 2011, 12:10 AM
Thanks for your reply. I could have sworn that i've allready tried that. But it works, so thank you.

FYI: I solved the problem by using the code below (ugly hack):


afterRender: function() {
// Set the height of the panel to equal the height of the sidebar.
// Otherwise content is not scrollable
var height = Ext.getCmp('planning-sidebar').getHeight();
this.setHeight(height);

salon software stephen
18 Feb 2011, 11:35 AM
Thanks, the layout: "fit", worked for us too.

Originally we didn't think it was working, but we were activating the panel before we updated the data in it. As soon as we swapped it around so we update the date in the panel first then activate it the layout: 'fit' started working.


clients.setActiveItem(1);

client_detail.update
({
name: this_client_name,
home_ph: this_home_ph,
mobile_ph: this_mobile_ph,
work_ph: this_work_ph,
email: this_email,
address_1: this_address_1,
address_2: this_address_2,
city: this_city,
province: this_province,
postal: this_postal,
country: this_country
});