Results 1 to 5 of 5

Thread: panel scrolling question

  1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    21
    Vote Rating
    0
      0  

    Default panel scrolling question

    Hi,

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

    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.

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    1
      0  

    Default

    Same here. Please post if you find a solution. Thanks

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    1
      0  

    Default

    Found the solution. Basically you need to specify layout: 'fit' on the panel containing your scrollable list.

  4. #4
    Sencha User
    Join Date
    Jan 2011
    Posts
    21
    Vote Rating
    0
      0  

    Lightbulb

    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):

    Code:
    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);

  5. #5

    Default

    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.

    Code:
           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
                             });

Similar Threads

  1. vertical scrolling content within carousel & css question
    By Chromatik in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 26 Jul 2010, 1:35 PM
  2. Question on LiveGrid scrolling
    By cdeguzman in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 16 Apr 2009, 5:06 AM
  3. Replies: 0
    Last Post: 8 May 2008, 9:35 AM
  4. Adding too many panel to a Scrolling Tabpanel. The scrolling icon disappear
    By tomchen1000 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Mar 2008, 4:26 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •