extjs 4

Question

Slim Scroll Bars我正在開發一個extjs 4 mvc中的應用程序。我有一個滾動條的問題。我的extjs組件中沒有一個呈現細長的滾動條。所有組件僅呈現難看的瀏覽器滾動條。

Ext.define('Complaints.view.ComplaintGrid',{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.complaintgrid', 
    id: 'complaintGrid', 
    cls: 'custom-complaint-grid', 
    store: 'Complaints', 

    columns : 
    [ 
     {header: 'Date', dataIndex: 'Date', width: 200}, 
     {header: 'Data 1', dataIndex: 'data1', width: 200}, 
     {header: 'Data 2', dataIndex: 'data2', flex: 1}, 
     {header: 'Complaint', dataIndex: 'Complaint', width: 150},    
    ] 
}) 

這是網格面板，我有我的應用程序之一的代碼。這有兩個問題。

1. 垂直滾動條心不是苗條滾動
2. 一個不必要的水平滾動條將出現

我有適合的容器內該網格。下面的代碼。

Ext.define('Complaints.view.CenterPanel',{ 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.centerpanel', 
    cls: 'custom-complaint-grid', 
    id: 'centerPan', 
    bodyStyle: "padding-left: 20px; padding-top: 10px; padding-right: 15px; background-color:#fff", 
    layout: 'card', 
    requires: [   
     'Complaints.view.ComplaintGrid', 
     'Complaints.view.ComplaintChart' 
    ], 
    initComponent: function(){  
     this.tbar = [{height: 50},'->', 
      { 
        xtype: 'component', 
        cls: 'topDockTwoBtn', 
        width: 107, 
        height: 40 
      },  
      { 
        xtype: 'component', 
        cls: 'topDockSixtyBtn', 
        width: 103, 
        height: 40,      
      }, 
      { 
        xtype: 'component', 
        cls: 'topDockOneBtn', 
        width: 105, 
        height: 40 
      }, 
      { 
        xtype: 'component', 
        cls: 'topDockSrchBtn', 
        width: 72, 
        height: 40 
      } 
     ]; 

     this.items = [ 
      { 
       xtype: 'complaintgrid' 
      }, 
      { 
       xtype: 'complaintchart' 
      } 
     ]; 

     this.bbar = [{height: 50},'->', 
      { 
       xtype: 'image', 
       cls: 'btmDockChrtBtn', 
       id: 'chartbutton', 
       width: 53, 
       height: 40, 
       listeners: { 
        el: { 
         click: function() { 
          console.log('click reg'); 
          Ext.getCmp('centerPan').getLayout().setActiveItem(1); 
Ext.getCmp('centerPan').doLayout(); 
          Ext.getCmp('chartbutton').addClass('btmDockChrtBtn-active'); 
          Ext.getCmp('gridbutton').removeCls('btmDockGrdBtn-active'); 
         } 
        } 
       } 
      }, 
      { 
       xtype: 'component', 
       cls: 'btmDockGrdBtn', 
       width: 58, 
       height: 40, 
       id: 'gridbutton', 
       listeners: { 
        el: { 
         click: function() { 
          console.log('click reg'); 
          Ext.getCmp('centerPan').getLayout().setActiveItem(0); 
Ext.getCmp('centerPan').doLayout(); 
          Ext.getCmp('gridbutton').addClass('btmDockGrdBtn-active'); 
          Ext.getCmp('chartbutton').removeCls('btmDockChrtBtn-active');      
         } 
        } 
       } 
      }     
     ];        
     this.callParent(); 
    } 
}) 

我也有與CSS發揮各地，並覆蓋部分網格面板的類來使它看起來像我多麼希望它是。任何想法爲什麼我得到一個水平滾動條，並沒有得到一個苗條的垂直。

Answer 1

您必須使用jScrollPane或fleXcroll：跨瀏覽器自定義滾動條。