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：跨浏览器自定义滚动条。