如何在ExtJs中向面板添加水平滚动条? [英] how to add horizontal scroll bar to a panel In ExtJs?

问题描述

我已经使用ExtJs创建了一个面板，该面板是边框布局视口的中心项.我想在此面板中添加一个水平滚动条.

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.

此面板的编码如下.

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"中.请帮助我.

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

推荐答案

我最近不得不这样做.有动态数量的拖放网格(大于10个)需要并排进入页面.通过底部滚动条水平滚动，鼠标滚轮移动或将记录从一个网格拖到页面的最右侧或左侧(触发水平滚动)，都可以访问这些文件.我使用服务器端代码动态填充网格，但是在ExtJS中实现了水平滚动.

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.

将面板的width:配置选项设置为大于页面宽度，然后使用以下配置选项layout: { type: 'hbox', align: 'stretch' }, defaults: { flex : 1 }达到目的.

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.

我必须在面板上添加一个ExtJS事件处理程序以停止默认的垂直滚动并强制执行水平滚动，因为面板内部的网格也具有垂直滚动条.每当鼠标悬停在鼠标滚轮事件上时，这些事件都会消耗mousewheel事件-如果您不使用面板内的任何其他滚动条，则可能不需要此事件.

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.

这是它的样子:

// 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中向面板添加水平滚动条?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！