Nested panels not setting width (possibly a bug?)

[Ayame]

Before I post this on the bug forum I wanted to make sure that it's not, so I thought I'd ask here.

I ran into the nested panel scrolling problem and tried the solution (giving the outer panel a layout!) but this does not work if the inner panel has a specific width. The width is ignored and the panel takes up 100% width of the containing box.

I'm using the following code:

 Ext.setup({    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        // Actions


        var ShowMessages = function(){
            var data = [];
            var i=0;
            for(i=0; i<30 ; i++){
                data.push({
                    'message': "Message "+ i
                });
            }
            messages.update(data);
        }


        var messages = new Ext.Panel({
            cls: "message-list",
            title: 'List',
            id: 'messages',
            scroll: 'vertical',
            width: 100,
            tpl: [
                '<tpl for=".">',
                    '<div class="message">{message}</div>',
                '</tpl>'
            ]
        });


        var panel = new Ext.Panel({
            fullscreen: true,
            layout: 'fit',
            items: [messages]
        });


        ShowMessages();


    }
});

And a CSS rule:

 .message-list {background-color: red;}

Am I doing something wrong or is this a bug after all?
I'm using sencha touch 1.1.0

Thanks!

[AndreaCammarata]

Hi Ayame.
Good that you didn't put it in the Bug forum section because that's not a Bug

The problem of your code is that you set the layout type as 'fit' in your container panel, so the inner panel will take all the available space.
Just try to remove this layout configuration, and remember to set even the height of your messages inner panel.

Hope this helps.

[Ayame]

Hi Andrea,

Thanks for your reply!
Unfortunately that's just it. As soon as I remove the layout fit on the outer container, the inner pannel doesn't scroll properly anymore (the content jumps back "up" as soon as the finger is released)
This is a known bug according to this thread: http://www.sencha.com/forum/showthre...lling-corectly but is supposed to be fixed, however in that configuration it's still there.

I really need a nested panel (possibly several) with content getting larger than the box' height thus need stable scrolling. The panel needs to get a fixed width, so I'm a bit in a catch 22 here...

Any suggestions as to how I should go about it then?