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

Question

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

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

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
     ]
 });

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

Answer 1

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

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

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

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

// 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));
        }
    }
}