extjsグリッドカラムヘッダワードラップが機能しない

Question

私のextjs6グリッドには、スペースに収まらないカラムヘッダがあります。列見出しのみで単語の折り返しを行うにはどうすればよいですか？これは私が試したものであり、動作していないものです。

      xtype: 'grid', 
         title: 'Daily Performance', 
         itemId: 'performanceAccountDailyGridID', 
         bind: { 
          store: '{myDailyPerformanceAccountStore}' 
         },        
         margin: '10px 0px 10px 0px', 
         ui: 'featuredpanel-framed', 
         cls: 'custom-gridPerformance', 
         height: 400, 
         width: 800, 
         columns: [ 
          { 
           header: 'Filedate', 
           dataIndex: 'filedate', 
           flex: 1 
          }, 

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
white-space: normal; 
} 

Answer 1

あなたCSSセレクタがwhite-space: normalが十分で与え列ヘッダーtext.Justが含ま.x-column-header-textまでネストされなければならないCSS。 だからあなたのCSSは次のようになります。

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
    white-space: normal; 
} 

実施例：

var store = Ext.create('Ext.data.Store', { 
 
    fields: ['name', 'email', 'region'], 
 
    data: [{ 
 
     name: 'xyz', 
 
     email: 'xyz@xyz.com', 
 
     region: 'Arizona' 
 
    }, { 
 
     name: 'xyz', 
 
     email: 'xyz@xyz.com', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: 'xyz@xyz.com', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: 'xyz@xyz.com', 
 
     region: 'Alabama' 
 
    }] 
 
}); 
 

 
Ext.create('Ext.grid.Panel', { 
 
    store: store, 
 
    width: 400, 
 
     cls: 'custom-gridPerformance', 
 
    renderTo: Ext.getBody(), 
 
    
 
    columns: [{ 
 
     text: 'Name of zoro of life style', 
 
     dataIndex: 'name', 
 

 
    }, { 
 
     text: 'Email', 
 
     dataIndex: 'email', 
 
     flex: 1, 
 

 
    }, { 
 
     text: 'State', 
 
     dataIndex: 'region', 
 
     
 
    }], 
 
    
 

 
});

.custom-gridPerformance .x-column-header-inner .x-column-header-text { 
 
    white-space: normal; 
 
}

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"><!-- framework javascript --><script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>