CFGRID 가로 스크롤

Question

여러 열이 포함 된 CFGRID가 있는데 그리드는 열의 양 때문에 페이지 크기를 초과합니다.

그리드가 페이지 내에 있지만 열을 스크롤 할 수 있도록 가로 스크롤 막대를 그리드에 추가하는 방법을 찾아 보았습니다. 그러나 이것을 수행하는 방법에 대한 답변이나 예제를 찾을 수 없습니다 .

나는이 문제를 해결했다.

높이와 너비 열을 모두 지정해야하며 너비 열만 지정해야합니다.

감사합니다,

Answer 1

Height와 Width 열을 모두 지정해야하며 Width 열만 지정해야합니다.

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]); 
      } 
     } 
    }); 
}); 

또한 cfgrid를 더 많은 예제를 찾을하기보다는, extjs라는 그리드 수평 scrol에 검색 할 수 있습니다.