1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    larryan is on a distinguished road

      0  

    Default Unanswered: scrollIntoView hehavior

    Unanswered: scrollIntoView hehavior


    scrollIntoView has difference behaviors between Firefox and Chrome. Firefox looks good but for Chrome, sometimes it not just move the item to the view it also move the whole page up a little bit. If you have top menu on the page, it will be cut in half. Im using scrollIntoView in a container which set autoScroll to true. ScrollIntoView suppose only scrolls the contants in the container to the view but problem is that the contant is already in the view it still be moved up again and the whole page is also moved up a little bit. This is only for Chrome, Firefox is working fine. Any suggestions? Thanks. Larry

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,204
    Answers
    3516
    Vote Rating
    856
    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


    My test is very simple but something like this works for me:

    Code:
    new Ext.panel.Panel({
        renderTo    : document.body,
        height      : 200,
        width       : 400,
        autoScroll  : true,
        html        : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus nunc vel felis pellentesque a vestibulum arcu aliquam. Morbi sit amet lectus a tortor posuere interdum ut id turpis. Praesent tincidunt pellentesque egestas. Nam eget libero turpis. Maecenas quis diam eu diam imperdiet ultricies. Duis nec libero sit amet mi ultrices commodo. Curabitur lorem leo, sagittis eu consequat ac, blandit et leo. Integer non sodales enim. Aliquam ultricies varius risus at vestibulum. Ut molestie, dolor nec aliquam euismod, urna justo cursus purus, a sagittis ante velit eget velit. Aliquam erat volutpat.<br><br>Proin consectetur venenatis vulputate. Suspendisse nisi lacus, porta ut laoreet ut, suscipit ut odio. Vivamus vitae elit nec diam bibendum eleifend. Nulla facilisis velit sit amet enim euismod at condimentum odio porttitor. Nulla cursus ipsum vel nisl laoreet lacinia. Cras sit amet nibh eu magna eleifend malesuada eget et lectus. Morbi sed dolor adipiscing libero dapibus imperdiet in eu justo. Integer condimentum rutrum nunc eu pretium. Sed dolor velit, adipiscing non venenatis sed, porta quis elit. Suspendisse vitae pellentesque ligula. Nulla quis arcu ac felis porta dictum.<br><br>Donec eu ligula at mauris laoreet sagittis. Donec sed odio diam. Fusce in dolor turpis. Quisque elementum accumsan elit vitae eleifend. In mollis blandit augue, venenatis sagittis urna tincidunt vitae. Proin porttitor iaculis nulla in egestas. Ut ac quam sit amet orci mattis egestas. Nulla nec ligula nec leo semper ultrices at vel purus. Integer eget nisl nunc. Donec eget nisi lacus, vitae venenatis tortor. Proin turpis tortor, feugiat a porta vitae, viverra vitae urna. Integer molestie, sem vitae facilisis eleifend, eros tellus luctus nulla, in ultricies velit risus at sem. Quisque interdum consequat neque, ac tempor elit porta eu.<br><br>Aenean lacinia, ligula quis vulputate pharetra, elit enim porttitor felis, quis tristique enim sapien eu erat. Vestibulum venenatis luctus tincidunt. Morbi in justo ut diam mollis congue. Nullam placerat eros non tellus lobortis vehicula a eget lorem. Donec ac ligula est, quis lobortis erat. Maecenas non massa at libero fermentum interdum. Vestibulum tincidunt metus et lorem aliquam vehicula. Proin sem dolor, feugiat eget elementum eu, laoreet eu dolor. Proin at massa felis, nec ullamcorper dolor. Integer vitae turpis arcu, ac consectetur urna. Nunc venenatis fringilla lobortis. Suspendisse et magna a eros gravida dignissim. Sed consequat pellentesque mi feugiat eleifend.<br><br><div id="test">Nam rutrum placerat nibh, at bibendum nisi viverra vel. Nulla facilisi. Fusce sed urna in eros adipiscing scelerisque. Nulla eu dignissim turpis. Donec non enim libero. Cras vel justo a tortor facilisis ullamcorper. Etiam vehicula, turpis vel placerat ultrices, purus augue porttitor lacus, non rutrum metus sem non nisl. Nulla elementum arcu quis risus pulvinar pharetra. Donec ullamcorper rutrum bibendum. Suspendisse bibendum mollis elit ullamcorper mollis. Suspendisse potenti. Nam dictum fermentum tortor, a hendrerit neque feugiat nec. Praesent quis lectus nunc, sed euismod lorem. Aenean felis mi, auctor sit amet blandit ut, pharetra et libero. Quisque tempor vestibulum ipsum.</div>',
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'bottom',
                items : [
                    {
                        xtype   : 'button',
                        text    : 'Scroll',
                        handler : function (btn) {
                            var panel = btn.up('panel'),
                                div   = Ext.get('test');
    
                            div.scrollIntoView(panel.body);
                        }
                    }
                ]
            }
        ]
    });
    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.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    larryan is on a distinguished road

      0  

    Default scrollIntoView hehavior

    scrollIntoView hehavior


    mitchellsimoens,
    Thank you for your help.
    My situation is more complicated. I don't know if I can explain clearly.
    First, I created a panel:
    Ext.define('LP.view.UnderwritingNotes', {
    extend: 'Ext.panel.Panel',
    .......
    initComponent: function () {
    var me = this;
    .......
    Ext.apply(this, {
    items: [{
    xtype: 'container',
    layout: 'anchor',
    cls: 'button-container',
    autoScroll: true,
    items: [
    toolbar,
    optionsBar,
    {
    xtype: 'baseform',
    alias: 'widget.underwritingnotesform',
    layout: 'anchor',
    padding: '0 5 0 5',
    plain: true,
    items: [
    ]
    }]
    }]
    });
    this.callParent(arguments);


    },
    Then, the all items in baseform are generated dynamically based on data.
    My data structure is like categories. Each category has title info and multiple notes. I use two loops to generate form items. In the outer loop I create containers for each category. In the inner loop I create models for my data, stores to get the models added in and note panels to display data. In each note panel I create a note searchable component that extend ''Ext.DataView" which hold my data store. The note panel is what Im using for scroolIntoView.
    I have a search method in my note searchable component, user use it to find out a specific contant in a specific note panel and the method return this note panel . My controller will get this note panel and scroll it to the view The coding like this:
    notePanel.container.dom.scrollIntoView('lp-note-createdLabel');

    I know there is too many layers: Panel-->Container-->form-->Container(my category)-->Container(my note panel)-->DataView(my searchable component).
    Sorry if not so clearly.

Thread Participants: 1