Geek asks and answers

Extjs scrolls the panel to the position

Hi, I have a panel and I want to scroll to a specific column in this panel, how do I do this

var tabs= new Ext.Panel({
    id:id,      
    title:text,
    autoScroll:true,
    iconCls:'windowIcon',
    closable:true,
    closeAction:'hide'
});
+3
source share
4 answers

Set the scrollTop property of the panel body for the number of pixels you want to scroll down:

// Scroll the body down by 100 pixels.
tabs.body.dom.scrollTop = 100;
+5
source

Another option is to use the scrollTo () function here,

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Element-method-scrollTo

eg.

Ext.getCmp('graph_panel').body.scrollTo('left',250);  
Ext.getCmp('graph_panel').body.scrollTo('top',200);

But the scrollTo () function does not bind the check to make sure that the scroll is inside this scroll range of the element, while the scroll () function does this, so it’s better to use the scroll () function.

eg.

Ext.getCmp('graph_panel').body.scroll('left',300);
Ext.getCmp('graph_panel').body.scroll('bottom',300);
+3
source

, 400px x 400px, Child, Parent 1000px x 1000px. , :

Ext.getCmp('id_of_Parent_panel').scrollBy(500, 500, true);

here scrollBy (x-value = 500, y-value = 500, animation = true), so the child panel scrolls diagonally (usually first horizontally and then vertically) using the parent panel ...

The following example is used to understand this concept ... I am using ExtJs 4.2.1

Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {            
            title:'Parent',
            height: 200,
            autoScroll: true,
            width: 700,
            id:'Parent',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Child',
                height: 1000,
                width: 1000,              
                items:[{
                    xtype: 'button',
                    text: 'Please Scroll me....',
                    listeners: {
                        click: {
                            fn: function () {
                                Ext.getCmp('Parent').scrollBy(500, 500, true);
                            }
                        }
                    }
                }]

            }]
        })
    });
0
source

You can add the preserveScrollOnReloadconfig property to the view configuration.

viewConfig: {
        preserveScrollOnReload: true
 }
0
source

More articles:


All Articles