how to add horizontal scroll bar to a panel In ExtJs?

Question

I have created a panel using ExtJs.This panel is center item of a border layout viewport. I want to add a horizontal scrollbar into this panel.

The coding for this panel is given below.

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

            }]
          });

The coding for the viewport given below.

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

I want to add horizontal scrollbar into "centerpanel". Please help me.

Solution

I had to do this recently. There was a dynamic number of drag-n-drop grids (greater than 10) which needed to go onto a page side-by-side. These were all made accessible by scrolling horizontally with the bottom bar, mouse-wheel motion, or when dragging a record from one grid over to the far right or left side of the page (triggering the horizontal scroll). I used server side code to fill in the grids dynamically, but the horizontal scrolling was achieved in ExtJS.

Setting the panel's width: config option to greater than the width of the page and then using the following config options layout: { type: 'hbox', align: 'stretch' }, defaults: { flex : 1 } did the trick.

I had to add an ExtJS event handler on the panel to stop the default vertical scroll and enforce horizontal scroll because the grids inside my panel also had vertical scroll bars. These would consume the mousewheel event whenever the mouse was over them - it may not be needed if you don't use any other scrollbars inside your panel.

Here is what it looked like:

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