Advance List Layout

[JeaffreyGilbert]

Design:

list.jpg

Requirements:
- It has docked top toolbar, and docked top other panel (will use it as search panel)
- List A, as selected list
- List B, as unselected list
- Gradient grey bar is a header of each list
- Except toolbar and search panel are scrollable.
- Clicking green button moves selected row to list A
- Clicking red button moves selected row to list B
- List B must anchor to bottom (fill the rest area)

What I'd like to ask is how to layout both list A and B? I'm lost, please help. Thanks.

var list1 = new Ext.List({
    fullscreen: ??,
    layout: ??
});

var list2 = new Ext.List({
    fullscreen: ??,
    layout: ??
});

var pnlList = new Ext.Panel({
    fullscreen: ??,
    layout: ??,
    items:[list1, list2]
});

new Ext.Application({
    launch: function() {
        new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            dockedItems: [toolbar, pnlSearch],
            items: [pnlList]
        });
    }
});

[AndreaCammarata]

Hi Jeaffrey.
To set your application layout as you request, you can simply code it in the following way:

var list1 = new Ext.List({
    flex: 1
 });

var list2 = new Ext.List({
    flex: 2
});
            
var viewport = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
     },
     dockedItems: [toolbar, pnlSearch],
     items: [list1, list2]
});

Setting the viewport layout type to 'vbox' you are asking to arranges items vertically down the Panel, and, setting the layout align to 'stretch' you want that the list will cover all the available width of the container viewport.

The Lists 'flex' properties will allow you the specify the height ratio that each list have to cover of the available container viewport height.

To see more information about VBoxLayout, take a look at it's official doc.
http://dev.sencha.com/deploy/touch/d...out.VBoxLayout

PS: Remember to set your list templates and stores.

Hope this helps.

[JeaffreyGilbert]

@andreacammarata
Thanks! It works but it's little bit different with the design. Can we make only one scroller? I think the list1's height should be dynamic and if we scroll down, it will scroll both the list1 and list2.

[AndreaCammarata]

@andreacammarata
Thanks! It works but it's little bit different with the design. Can we make only one scroller? I think the list1's height should be dynamic and if we scroll down, it will scroll both the list1 and list2.

Sure!
Just add a listener to your first list like follows

list1.scroller.on('scroll', syncScrollers);

then define your "syncScrollers" function in the same scope of your list components that will handle the two list scrolling sync.
(For istance)

var syncScrollers = function(scroller, offsets){
    list2.scroller.scrollTo(offsets);
}

As you can see that's pretty simple

Hope this helps.

[JeaffreyGilbert]

Sorry, still doesn't meet the requirement..

Left is yours, the right image is what I mean:

list2.jpg

[AndreaCammarata]

Wait...just think about it:
If you have only one scroller to scroll both list, what happens if your second list have more items then the first one? You would be never able to see all the second list items.
Don't you agree?

[JeaffreyGilbert]

On page load, the list1 is empty (also hide its gray header) , we only see list2. We add one by one from list2 to list1 (first adding, show gray header), so list1 will push list2 down. List2 may be unseen and we have to scroll down to see list2. So does if we remove item from list1 one by one, list2 will move up.

[JeaffreyGilbert]

Aah.. am I talking about the way grouped list is working?? I don't know if I need only one list actually.

Please advice.

[AndreaCammarata]

Jeaffrey,
why don't you use a single grouped list?
You could add to your Store Model a new field called, for istance, "selected".
Then in your list template config, you can set a different template for selected / deselected items, and, the last thing, you will handle the items disclose / tap event to check if the selected item is selected or not, update the "selected" field on that item and that's all.

I think that would be a better solution.
However, it's not good to have a single scroller for two list, it doesn't have too much sense

Hope this helps.

[hugesuccess]

I would like to add multiple lists, stacked on top of each other. I want my mobile app to look like {huffington post, espn, la times, etx.}. Ideally it would have one list with fancy pictures, then directly under it would have another list with text links. They should all scroll as one. So you would see list one {nice big images or something cool, ie: featured content}, then scroll down to list two{text links, ie: navigation}, then list 3 etx. They all have different models, so using the same list seems creepster. Is this at all possible?