1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    32
    Answers
    2
    Vote Rating
    0
    Ayame is on a distinguished road

      0  

    Question Unanswered: Nested panels not setting width (possibly a bug?)

    Unanswered: Nested panels not setting width (possibly a bug?)


    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:

    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:
    Code:
     .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!

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Answers
    148
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    32
    Answers
    2
    Vote Rating
    0
    Ayame is on a distinguished road

      0  

    Question


    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?

Thread Participants: 1

Tags for this Thread