как добавить горизонтальную полосу прокрутки на панель в ExtJs?

Я создал панель с помощью ExtJs. Эта панель является центральным элементом окна просмотра макета границы. Я хочу добавить горизонтальную полосу прокрутки на эту панель.

Код для этой панели приведен ниже.

var centerpanel = Ext.create('Ext.panel.Panel', {
          region: 'center', 
          autoScroll: true,
          name: 'mainpanel',
          id: 'mainpanel',
          items: [{
              contentEl: 'center1'         

            }]
          });

Код для области просмотра приведен ниже.

var viewport = Ext.create('Ext.Viewport', {
 id: 'border-example',
 layout: 'border',
 items: [
         {

         region: 'south',
         split: true,
         height: 120,
         minSize: 100,
         maxSize: 200,
         collapsible: true,
         collapsed: true,
         title: 'Notice',
         margins: '2 2 2 2'
     }, {

         region: 'west',
         id: 'west-panel', 
         title: ' Menu',
         width: 150,
         collapsible: true,
         animCollapse: true,
         margins: '0 0 0 5',
         items: [{menu1},{menu2}]
      },

      centerpanel
     ]
 });

Я хочу добавить горизонтальную полосу прокрутки в «центральную панель». Пожалуйста помогите.


panel horizontal-scrolling
person Biswajit Sarkar SIPL    schedule 07.12.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне пришлось сделать это недавно. Было динамическое количество сеток перетаскивания (более 10), которые должны были идти на страницу бок о бок. Все они были доступны при горизонтальной прокрутке с помощью нижней панели, движении колесика мыши или при перетаскивании записи из одной сетки в крайнюю правую или левую сторону страницы (запуск горизонтальной прокрутки). Я использовал серверный код для динамического заполнения сеток, но горизонтальная прокрутка была достигнута в ExtJS.

Установка параметра конфигурации width: панели на значение, превышающее ширину страницы, а затем использование следующих параметров конфигурации layout: { type: 'hbox', align: 'stretch' }, defaults: { flex : 1 } сделали свое дело.

Мне пришлось добавить обработчик событий ExtJS на панель, чтобы остановить вертикальную прокрутку по умолчанию и обеспечить горизонтальную прокрутку, потому что сетки внутри моей панели также имели вертикальные полосы прокрутки. Они будут потреблять событие колесика мыши всякий раз, когда мышь находится над ними - это может не понадобиться, если вы не используете какие-либо другие полосы прокрутки внутри своей панели.

Вот как это выглядело:

// PANEL TO HOUSE THE GRIDS

    var displayPanel = Ext.create('Ext.Panel', {
        id: 'displayPanel',
        width: (/*server-side code here dynamically fills in total width based on number of grids...*/),
        height: 200,
        layout: {
            type: 'hbox',
            align: 'stretch',
            padding: 5
        },
        renderTo: 'panel',
        defaults: { flex : 1 }, //auto stretch
        items: [/*server-side code here fills in the grids dynamically...*/>]
    });    

// HORIZONTAL SCROLL EVENT (ENFORCES HORIZONTAL SCROLL FOR MOUSEWHEEL)

displayPanel.body.on('mousewheel', function(e){

    e.preventDefault();
    movement = e.getWheelDeltas();
        var body = Ext.getBody();

        if (movement.y < 0)
        {
            body.scrollTo('left', (body.getScroll().left + 150));
        }
        else
        {
            body.scrollTo('left', (body.getScroll().left - 150));
        }

});

// HORIZONTAL SCROLL WHEN RECORD IS DRAGGED FROM A GRID TO LEFT OR RIGHT SIDE OF SCREEN

function dragScroll(gridView){

    if (dragging == true) {

        var body = Ext.getBody();
        var elRight = gridView.getEl().getRight();
        var winRight = (body.getViewSize().width + body.getScroll().left);
        var elLeft = gridView.getEl().getLeft();
        var winLeft = body.getScroll().left

        if (elRight > winRight - 10)
        {
            body.scrollTo('left', ((elRight - winRight) + winLeft + 40));
        }
        if (elLeft < winLeft + 10)
        {
            body.scrollTo('left', (elLeft - 40));
        }
    }
}
person egerardus    schedule 27.12.2011