將滾動條添加到Ext.container.Veiwport的Java面板的左側面板

Question

我正在嘗試向下一頁的標題爲'Foo參數'的左側面板添加一個滾動條。

以下是我的代碼。

Ext.define('FOO.view.FooView', { 
    extend: 'Ext.container.Viewport', 
    alias: 'widget.pnlview', 

    layout: 'fit', 
    renderTo: Ext.getBody(), 

    constructor: function(config) { 
     this.items = [ 
      { 
       xtype: 'panel', 
       title: 'Foo Viewer', 
       frame: true, 
       layout: { 
        type: 'vbox', 
        align: 'stretch', 
        pack: 'start' 
       }, 
       items: [ 
        { 
         xtype: 'panel', 
         frame: true, 
         minHeight: 450, 
         flex: 7, 
         layout: { 
          type: 'hbox', 
          align: 'stretch', 
          pack: 'start' 
         }, 
         autoScroll: true, 
         items: [ 
          { 
           xtype: 'panel', 
           flex: 1, 
           layout: 'accordion', 
           layoutConfig: { 
            titleCollapse: false, 
            activeOnTop: true 
           }, 
           items: [ 
            { 
             xtype: 'pnlform', 
             title: 'Foo Parameters' 
            }, 
            { 
             title: 'Query Menu', 
             xtype: 'querygrid' 
            }, 
     /*       { 
             title: 'Drilldown Filters', 
             xtype: 'filtergrid' 
            }*/ 
           ] 
          }, 
          { 
           xtype: 'panel', 
           flex: 4, 
           layout: 'accordion', 
           layoutConfig: { 
            titleCollapse: false, 
            activeOnTop: true 
           }, 
           items: [ 
            { 
             title: 'Table Goodness', 
             id: 'pnlgrid', 
             xtype: 'pnlgrid' 
            }, 
            { 
             title: 'Graphmaster 3000', 
             xtype: 'panel', 
             frame: true, 
             y_axis: 'net_pnl', 
             layout: 'fit', 
             items: { 
              xtype: 'pnlchart' 
             } 
            } 
           ] 
          } 
         ] 
        }, 
        { 
         xtype: 'statsgrid', 
         region: 'south', 
         height: 54, 
         minWidth: 600 
        } 
       ] 
      } 
     ]; 

     this.callParent(arguments); 
    } 
}); 

我看了一個類似的帖子here;不過，我想知道如何手動設置左側面板的寬度。在左側面板上實現滾動條的最佳方式是什麼？

Answer 1

您可以使用autoScroll：true屬性來應用左側面板的滾動.Autoscroll不適用於視口，它適用於面板。所以滾動，你可以使用像 的xtype： 'pnlform'， 標題： '富參數'， 自動滾屏：真

鏈接，文檔： http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-autoScroll

Answer 2

FIX兒童面板的母面板的高度您嘗試添加滾動條，然後給自動滾屏：真到了那個父面板完蛋了......

Ext.onReady(function() { 
     Ext.create('Ext.panel.Panel', { 
      //title: 'Parent', 
      height: 200, 
      autoScroll: true, 
      width: 700, 
      id: 'Parent', 
      renderTo: Ext.getBody(), 
      items: [{ 
       xtype: 'panel', 
       title: 'Child', 
       height: 1000,     
       items: [{ 
        xtype: 'button', 
        text: 'Please Scroll me....', 
        listeners: { 
         click: { 
          fn: function() { 
           Ext.getCmp('Parent').scrollBy(500, 500, true); 
          } 
         } 
        } 
       }] 

      }] 
     }) 
    }); 

Answer 3

Ext.application({ 
    name : 'Fiddle', 
    launch : function() { 

     Ext.create('Ext.Viewport', { 
      layout: 'fit', 
      renderTo: Ext.getBody(), 
      items: [{ 
        xtype: 'panel', 
        title: 'Foo Viewer', 
        frame: true, 
        layout: { 
         type: 'vbox', 
         align: 'stretch', 
         pack: 'start' 
        }, 
        items: [{ 
          xtype: 'panel', 
          frame: true, 
          minHeight: 450, 
          flex: 7, 
          layout: { 
           type: 'hbox', 
           align: 'stretch', 
           pack: 'start' 
          }, 
          autoScroll: true, 
          items: [{ 
            xtype: 'panel', 
            flex: 1, 
            layout: 'accordion', 
            layoutConfig: { 
             titleCollapse: false, 
             activeOnTop: true 
            }, 
            items: [{ 
              xtype: 'panel', 
              title: 'Foo Parameters', 
              autoScroll: true, 
             items:[{ 
              xtype: 'panel', 
              title: 'Controls panel', 
              height:1000, 
              margin:5 
             }] 
             }, { 
              title: 'Query Menu', 
              xtype: 'panel' 
             }] 
           }, { 
            xtype: 'panel', 
            flex: 4, 
            layout: 'accordion', 
            layoutConfig: { 
             titleCollapse: false, 
             activeOnTop: true 
            }, 
            items: [{ 
              title: 'Table Goodness', 
              id: 'pnlgrid', 
              xtype: 'panel' 
             }, { 
              title: 'Graphmaster 3000', 
              xtype: 'panel', 
              frame: true, 
              y_axis: 'net_pnl', 
              layout: 'fit', 
              items: { 
               xtype: 'panel' 
              } 
             }] 
           }] 
         }, { 
          xtype: 'panel', 
          region: 'south', 
          height: 54, 
          minWidth: 600 
         }] 
       }] 
     }); 

    } 
});