パネルに水平スクロールバーを追加する方法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 
    ] 
}); 

"centerpanel"に水平スクロールバーを追加します。私を助けてください。

Answer 1

私は最近これを行う必要がありました。ページ上に並んで移動する必要のあるドラッグ＆ドロップのグリッド（10以上）の動的な数がありました。これらはすべて、ボトムバー、マウスホイールの動き、または1つのグリッドからページの右端または左端までドラッグして（水平スクロールをトリガーにして）、水平にスクロールすることでアクセス可能になりました。グリッドを動的に埋め込むためにサーバーサイドコードを使用しましたが、水平スクロールは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)); 
     } 
    } 
} 

：ここ

は、それがどのように見えるかです