Wie skalieren Spalten Spaltenkopf in Extjs?

Question

Ich habe dieses Raster, das Header in vertikaler Position (Telefonkopf) hat, und wenn ich versuche, die Breite des Kopfes 50px, um die Größe ich nicht manuell siehe Kopftext mehr (aber wenn ich ziehe die Kopfzeile nach links. Ich kann den Kopfzeilen-Text sehen), also lautet meine Frage: Wie kann ich den Kopfzeilen-Text immer anzeigen, nachdem die Kopfzeilengröße auf eine kleinere Größe gesetzt wurde?

Bitte nehmen Sie sich einen Blick auf diese Codezeile:

{ text: 'Phone' dataIndex: 'phone', cls: 'grid-header-phone' } 

Jetzt bin ich einfach eine geringere Breite, um es wie folgt ergänzt:

{ text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' } 

Hier ist ein funktionierendes Beispiel: FIDDLE

Hier ist der Code, den ich verwende:

Ext.application({ 
name : 'Fiddle', 

launch : function() { 
    var store = Ext.create('Ext.data.Store', { 
     fields:['name', 'email', 'phone'], 
     data:{'items':[ 
      { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, 
      { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, 
      { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244" }, 
      { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } 
     ]}, 
     proxy: { 
      type: 'memory', 
      reader: { 
       type: 'json', 
       rootProperty: 'items' 
      } 
     } 
    }); 

    Ext.create('Ext.grid.Panel', { 
     title: 'Simpsons', 
     store: store, 
     columns: [ 
      { text: 'Name', dataIndex: 'name' }, 
      { text: 'Email', dataIndex: 'email', flex: 1 }, 
      { text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' } 
     ], 
     height: 200, 
     width: 400, 
     renderTo: Ext.getBody() 
    }); 
    } 
}); 

und hier ist der CSS-Code:

.grid-header-phone .x-column-header-text { 
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg); 
-o-transform: rotate(90deg); 
-ms-transform: rotate(90deg); 
transform: rotate(90deg); 

/* transform doesn't work on inline elements */ 
display: inline-block; 

/* need to hard code a height for this to work */ 
/* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */ 
height: 40px; 
} 

.x-ie8 .grid-header-phone .x-column-header-text { 
/* IE8 doesn't have css transform */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
} 

Answer 1

Verwendung display: inline-flex statt Inline-Block.