Горизонтальная прокрутка CFGRID

Question

У меня есть CFGRID, который содержит несколько столбцов, сетка превышает размер страницы из-за количества столбцов.

Я искал, как добавить горизонтальную полосу прокрутки к сетке, чтобы сетка могла находиться внутри страницы, но прокручивать столбцы, но я не могу найти рабочий пример или ответ о том, как это сделать ,

Я решил проблему.

Оказывается, вам нужно указать столбец «Высота и ширина», я указал только столбец «Ширина».

Спасибо,

Answer 1

Оказывается, вам нужно указать столбцы «Высота и ширина», я указал только столбец «Ширина».

Answer 2

При определении ширины к сетке, он должен прокручивать для просмотра других столбцов. Это этот пример:

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

вар

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 найти больше примеров.