Extjs прокрутка панели в нужную позицию

#extjs

Вопрос:

Привет, у меня есть панель, и я хочу прокрутить до определенного postiton на этой панели, как мне это сделать

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

Ответ №1:

Задайте для свойства scrollTop тела панели количество пикселей, которое вы хотите прокрутить вниз:

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

1. уже пробовал это, но, похоже, не работает … эта панель является частью панели вкладок, которую я динамически добавляю в tabpanel .. используя метод add

2. Вероятно, вам будет лучше всего опубликовать более подробный пример кода в вашем вопросе. Простое нахождение на панели вкладок не повлияет на возможность установки положения прокрутки. Если вы добавляете панель, не делая ее активной немедленно, то вам может потребоваться сделать что-то вроде установки deferredRender в false на TabPanel, но трудно сказать, в чем проблема, не видя, как вы добавляете панели и как вы пытаетесь установить scrollTop.

Ответ №2:

Другой вариант — использовать здесь функцию scrollTo(),

http://docs.sencha.com/extjs/3.4.0 /#!/api/Ext.Element-метод-scrollTo

например

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

Но функция scrollTo() не выполняет связанную проверку, чтобы убедиться, что прокрутка находится в пределах диапазона прокрутки этого элемента, в то время как функция scroll() выполняет, следовательно, лучше всего использовать функцию scroll().

например

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

1. для чего используется представленное здесь ‘body’?

2. ‘body’ — это тело панели, которую вы хотите прокрутить. Я действительно не понимаю, о чем вы пытаетесь спросить. Можете ли вы уточнить свой вопрос?

Ответ №3:

Учтите, что родительская панель имеет ограниченный размер, например 400px x 400px, а дочерняя панель доступна внутри родительской панели размером 1000px x 1000px. таким образом, прокрутка, выполняемая родительской панелью, тогда код должен выглядеть следующим образом…

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

здесь scrollBy (значение x = 500, значение y = 500,анимация = true), таким образом, дочерняя панель прокручивается по диагонали (практически сначала по горизонтали, затем по вертикали) родительской панелью…

Следующий пример использовался для более глубокого понимания этой концепции… Я использую 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:

Вы можете добавить preserveScrollOnReload свойство config в view config.

 viewConfig: {
        preserveScrollOnReload: true
 }