解决Ext5.1表格表头换行问题

      业务系统提出需求，想要给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' // 配置换行
    }
}