业务系统提出需求,想要给extjs表格的表头添加可配置换行的属性,遂去查询extjs的在线api,希望能从api中找出换行的配置属性,无奈在线api打不开(ps:extjs在线api经常打不开),所以只能自己找解决方案。下面就是我自己的解决方案,如有不当,多多指点。
思路就是删除掉extjs自带的换行样式(这里是逼不得已才去删除extjs自带的样式,不然会发现extjs自带的样式会一直覆盖掉自己添加的样式),然后自己根据配置加上去。下面的config就是表格的配置属性。
extjs自带样式删除的部分请根据表头检查元素中white-space:nowrap;
css代码:
/* 换行表头 */
.x-column-header-text-normal {
white-space:normal;
}
/* 不换行表头 */
.x-column-header-text-nowrap {
white-space:nowrap;
}
js代码:
// 兼容IE8不支持Array.isArray方法
if (!Array.isArray) {
// 添加isArray原型方法
Array.isArray = function(arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
// 判断是否已经配置了额外样式,如果已经配置了额外样式,则使用数组方式
if(config && config.cls) {
// 样式数组
var clsArr = [];
// 判断传递过来cls是否是数组
if(Array.isArray(config.cls)) {
clsArr = config.cls;
}else {
clsArr.push(config.cls);
}
// 判断配置,如果配置headerConfig中columnCls为normal则换行,否则不换行
if(config.headerConfig && config.headerConfig.columnCls == "normal") {
clsArr.push("x-column-header-text-normal");
}else {
clsArr.push("x-column-header-text-nowrap");
}
config.cls = clsArr;
// 判断是否配置normal
}else if (config && config.headerConfig && config.headerConfig.columnCls == "normal") {
config.cls = "x-column-header-text-normal";
// 没有任何配置的情况下默认不换行
}else {
config.cls = "x-column-header-text-nowrap";
}
上面的config是grid的配置,对传过来的config进行处理后再通过Ext.create('Ext.grid.Panel', config);创建表格即可。
不换行效果:
配置代码:
// 我这里只粘部分代码,其他配置自行补充
var config = {
itemId: 'sysParamGrid', // 唯一标识
headerConfig: {
headerJson: headerJson, // 表头json
columnAutoWidth: false, // 不自适应宽度
columnCls: 'nowrap' // 配置不换行,此行可以省略,默认便是不换行
}
}
效果图:
换行效果:
// 我这里只粘部分代码,其他配置自行补充
var config = {
itemId: 'sysParamGrid', // 唯一标识
headerConfig: {
headerJson: headerJson, // 表头json
columnAutoWidth: false, // 不自适应宽度
columnCls: 'normal' // 配置换行
}
}