Défilement horizontal CFGRID

Question

J'ai un CFGRID qui contient plusieurs colonnes, la grille dépasse la taille de la page en raison de la quantité de colonnes. Je cherchais à ajouter une barre de défilement horizontale à la grille afin que la grille puisse se trouver dans la page mais faire défiler les colonnes, mais je ne trouve pas d'exemple ou de réponse sur la façon de le faire .

J'ai résolu le problème.

Il s'avère que vous devez spécifier à la fois la colonne Hauteur et Largeur, j'ai seulement spécifié la colonne Largeur.

Merci,

Answer 1

Il s'avère que vous devez spécifier à la fois la colonne Hauteur et Largeur, j'ai seulement spécifié la colonne Largeur.

Answer 2

Si vous définissez une largeur sur votre réseau, doit défiler pour afficher les autres colonnes. Ce cet exemple:

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

Vous pouvez également effectuer une recherche sur la grille de ExtJS scrol horizontale, plutôt que CFGRID trouver d'autres exemples.