View Full Version : Adding static panel and list on the same card

18 Jul 2010, 9:40 AM

Is it possible to combine a static panel and a list on the same card. This is to display static master information above a list of detail info. I would like the static info at the top to scroll with the detail list.

Could this be done?

18 Jul 2010, 1:00 PM
You may be able to get the information you need by checking out the Carousel example. There are two fields on that example. One which moves horizontally and one which moves vertically. By seeing how they are set up and called, you may be able to figure out how to do what you need to do.


18 Jul 2010, 1:21 PM

I thought about using the carousel as in the example with one panel in the top carousel, but I would like to use the list UI for the detail records. I think I will go with displaying the header info as the first list entry - then use conditional code in the template to format this differently from the other list items. The tap handler can then either ignore the tap on the header entry, or go to a separate detail card for the header.


18 Jul 2010, 2:30 PM
Not quite what I meant when I said study the carousel example. I meant, see how they handle two items.

1. create your first field. Say the 'Main_Info' element.
2. create your list view. Let's be creative and call it 'Complete_List' element.

At the end of the carousel it calls carousel1 and carousel2. You would call Main_Info and Complete_List.

I can't give you an example, as my head has already damaged the wall with my own work, but I think a bit of trial and error to see how that suggestion would work to get two regions of the same viewport working might point you in the right direction.

'scuse me. I need more advil, and have to find a softer wall.

18 Jul 2010, 4:00 PM
You can nest containers, so you can easily do something like:

icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
items: [{
flex: 1,
html: 'Foo'
flex: 1,
html: 'Bar'

19 Jul 2010, 7:27 AM
I was working on trying to get the same type content with master info at the top with a set of links below. but I wanted the list to show up after the dynamic height of the top content. I still can't figure out how to get that to work. BUT...

I've achieved something similar to what you are talking about.

Do what @evant suggests but set the main panel 'scroll: false' and then set the first item to 'scroll: true'.

I'm not sure exactly how flex is handled but I ended up having to take the flex off of the second item.

Hope that helps!