1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    0
    lsadiki is on a distinguished road

      0  

    Default Unanswered: Vertical scrolling panel bounces always back

    Unanswered: Vertical scrolling panel bounces always back


    Hi

    I have a Ext.dataview.List and on top of this view i have dockt a panel with servel items inside which should scroll horizontal.
    The panel scrolls but bounces always back to the start position.
    What am idoing wrong?


    Here is the item that is docked on top
    Code:
                       {
                            height: 75,
                            docked: 'top',
                            xtype: 'panel',
                            cls: 'propertyList',
                            scrollable: {
                                direction: 'horizontal',
                                directionLock: true
                            },
                            layout: 'hbox',
                            items: [
                                {
                                    xtype: 'button',
                                    iconCls: 'add',
                                    iconAlign: 'top',
                                    ui: 'action'
                                },
                                {
                                    xtype: 'button',
                                    iconCls: 'locate',
                                    iconAlign: 'top',
                                    text: 'Location'
                                },
                            ]
                        }
    Thank you for help.

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default Check containers dimensions

    Check containers dimensions


    I have seen this problem when parent container has some height/width values and those are less than inside scrollable container's width+padding+margin etc. Try increasing height and/or width and check if it fix your issue.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Answers
    2
    Vote Rating
    1
    AdityaRaja is on a distinguished road

      0  

    Default


    I don't think it's possible to do what you're trying to do with panels.

    You might have to change your component type to list and then use the statement, "inline: {wrap : false}" to make the list horizontal.

    Here's an example I found which might be able to help you:

    http://www.senchafiddle.com/#X7sxo#6nTmG

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Since the panel has scrollable with a horizontal direction, that component needs to have a width either via the width config on the component or via a layout from it's parent component.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    0
    lsadiki is on a distinguished road

      0  

    Default does not work

    does not work


    Quote Originally Posted by AdityaRaja View Post
    I don't think it's possible to do what you're trying to do with panels.

    You might have to change your component type to list and then use the statement, "inline: {wrap : false}" to make the list horizontal.

    Here's an example I found which might be able to help you:

    http://www.senchafiddle.com/#X7sxo#6nTmG
    What i want is a list of buttons and not a list of imiages.

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    0
    lsadiki is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Since the panel has scrollable with a horizontal direction, that component needs to have a width either via the width config on the component or via a layout from it's parent component.
    I've tried and that does not work for me, could you please add some code examples.
    thank you so much

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    15
    Answers
    2
    Vote Rating
    1
    AdityaRaja is on a distinguished road

      0  

    Default


    In the example, the images were rendered by using the html image tag (<img src="">), just replace it with the button tag.

    This will work but it won't have any of the default Sencha Touch button styling. I'll see if I can come up with a better solution.

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    0
    lsadiki is on a distinguished road

      0  

    Default


    Quote Originally Posted by AdityaRaja View Post

    This will work but it won't have any of the default Sencha Touch button styling. I'll see if I can come up with a better solution.
    That is the big problem. It would be much easier to do it with the normal sencha button styles.

    thank you for helping