Question

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

我想在“centerpanel”中添加水平滚动条。请帮帮我。

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

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

1 个答案: