CFGRID水平滾動

Question

我有一個包含多列的CFGRID，網格由於列的數量而超過頁面大小。

我一直在尋找如何添加一個水平滾動條到網格，所以網格可以在頁面內，但滾動通過列，但我無法找到一個工作的例子或如何做到這一點的答案。

我已經解決了這個問題。

事實證明，您需要指定「高度」和「寬度」列，我只指定了「寬度」列。

感謝，

Answer 1

事實證明，您需要指定高度和寬度列，我只指定了寬度列。

Answer 2

如果你定義的寬度到您的網格，它應該滾動查看其它列。這這個例子：

http://jsfiddle.net/YRraU/2/

VAR

grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     stateful: true, 
     stateId: 'stateGrid', 
     columns: [ 
      { 
       text  : 'Company', 
       flex  : 1, 
       sortable : false, 
       dataIndex: 'company', 
       width : 100 
      }, 
      { 
       text  : 'Price', 
       width : 75, 
       sortable : true, 
       renderer : 'usMoney', 
       dataIndex: 'price' 
      }, 
      { 
       text  : 'Change', 
       width : 75, 
       sortable : true, 
       renderer : change, 
       dataIndex: 'change' 
      }, 
      { 
       text  : '% Change', 
       width : 75, 
       sortable : true, 
       renderer : pctChange, 
       dataIndex: 'pctChange' 
      }, 
      { 
       text  : 'Last Updated', 
       width : 85, 
       sortable : true, 
       renderer : Ext.util.Format.dateRenderer('m/d/Y'), 
       dataIndex: 'lastChange' 
      }, 
      { 
       xtype: 'actioncolumn', 
       width: 50, 
       items: [{ 
        icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config 
        tooltip: 'Sell stock', 
        handler: function(grid, rowIndex, colIndex) { 
         var rec = store.getAt(rowIndex); 
         alert("Sell " + rec.get('company')); 
        } 
       }, { 
        getClass: function(v, meta, rec) {   // Or return a class from a function 
         if (rec.get('change') < 0) { 
          this.items[1].tooltip = 'Hold stock'; 
          return 'alert-col'; 
         } else { 
          this.items[1].tooltip = 'Buy stock'; 
          return 'buy-col'; 
         } 
        }, 
        handler: function(grid, rowIndex, colIndex) { 
         var rec = store.getAt(rowIndex); 
         alert((rec.get('change') < 0 ? "Hold " : "Buy ") + rec.get('company')); 
        } 
       }] 
      } 
     ], 
     height: 350, 
     width: 300, // 30 pixel width defined here 
     title: 'Array Grid', 
     renderTo: 'grid', 
     viewConfig: { 
      stripeRows: true 
     }, 
     listeners: { 
      viewready: function(){ 
       var c = this.columns[5]; 
       var p = c.getPosition(); 

       this.scrollByDeltaX(p[0]); 
      } 
     } 
    }); 
}); 

您也可以搜索ExtJS的電網水平scrol，而不是CFGRID找到更多的例子。