Extjs scrolling a panel to a position

问题

Hi i have a panel and i want to scroll to a particular postiton in that panel how do i do it

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

回答1:

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

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

回答2:

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

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

e.g.

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

But scrollTo() function does not bound check to make sure the scroll is within this element's scrollable range whereas the scroll() function does, hence it is best to use the scroll() function.

e.g.

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

回答3:

Consider Parent panel have limited size like 400px x 400px and the Child panel available inside the Parent panel which size of 1000px x 1000px. so scrolling done by Parent panel then the code should like as follows...

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

here scrollBy(x-value=500,y-value=500,animation=true) so child panel scrolled diagonally(practcally first horizontally then vertically) by Parent panel...

The following example used to understand more about 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);
                            }
                        }
                    }
                }]

            }]
        })
    });

回答4:

You can add preserveScrollOnReload config property in view config.

viewConfig: {
        preserveScrollOnReload: true
 }

来源：https://stackoverflow.com/questions/5959975/extjs-scrolling-a-panel-to-a-position

标签

extjs