如何在 ExtJs 中的面板中添加水平滚动条？答案

【问题标题】：how to add horizontal scroll bar to a panel In ExtJs?如何在 ExtJs 中的面板中添加水平滚动条？
【发布时间】：2011-12-07 11:55:48
【问题描述】：

我使用 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

【解决方案1】：

我最近不得不这样做。有一个动态数量的拖放网格（大于 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));
        }
    }
}

【讨论】：