extjs網格列標題文字換行不起作用

在我的extjs6網格中，列標題不符合空格。如何僅在列標題中進行單詞換行？這是我所嘗試過的，並沒有工作。extjs網格列標題文字換行不起作用

      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 
          },

CSS

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

來源

2017-04-20 solarissf

'.custom-gridPerformance X-列標題{'永遠不會匹配任何內容，是一個錯字？ –

不是錯別字。只是不確定用於編輯標題的正確格式。它應該是什麼？ – solarissf

因爲'x-column-header'沒有用'.'作爲前綴，所以它與類名不匹配，它會嘗試匹配標籤名爲的標籤 –

你CSS選擇器應該被嵌套直到.x-column-header-text其中包含列標題text.Just給white-space: normal就足夠了。所以你的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: '[email protected]', 
 
     region: 'Arizona' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     region: 'Alaska' 
 
    }, { 
 
     name: 'xyz', 
 
     email: '[email protected]', 
 
     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>

來源

2017-04-21 08:27:44

非常奇怪，我看到你的代碼片段在我運行代碼片段時工作正常，但是當我放入代碼時仍然無法工作。我改變了我的帖子和我的代碼來反映你的CSS，但仍然沒有。 – solarissf

你使用的是什麼版本和主題？ –

extjs6我相信，和「工具箱」：「經典」， /** *此應用程序的主題的名稱。 */ 「theme」：「myCustomTheme」， //「theme」：「theme-triton」， – solarissf

extjs網格列標題文字換行不起作用

回答

相關問題