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网格列标题文字换行不起作用

回答

相关问题