当前位置: 代码迷 >> Web前端 >> Ext 报表列头和内容折行
  详细解决方案

Ext 报表列头和内容折行

热度:101   发布时间:2012-10-24 14:15:58.0
Ext 表格列头和内容折行
Ext表格列头折行。
/** add by XDY 表头折行 覆盖ext-all.css中相关内容*/
.x-grid3-cell-inner, .x-grid3-hd-inner{
	overflow:hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
    padding:3px 3px 3px 5px;
}
/** add by XDY 表头折行 覆盖ext-all.css中相关内容*/
.x-grid3-hd-inner {
    position:relative;
	cursor:inherit;
	padding:4px 3px 4px 5px;
	white-space:normal !important;
}


Ext表格内容折行。
/** add by XDY 表格内容折行 覆盖ext-all.css中相关内容*/
.x-grid3-cell-inner, .x-grid3-hd-inner{

	overflow:hidden;

	-o-text-overflow: ellipsis;

	text-overflow: ellipsis;

    padding:3px 3px 3px 5px;

    white-space: nowrap;
    /** 内容过长折行 */
    white-space:normal !important;
}


上面两个处理方法,是强制性折行,但是用户有需要根据用户的参数设置来决定是否需要折行。以内容折行为例
//add by XDY 表格内容过长,折行显示。修改ext-all.css的样式
	if (gridProperty.ContentWrap)
		Ext.util.CSS.updateRule('.x-grid3-cell-inner','white-space','normal');

其中 gridProperty.ContentWrap 是我定义的属性,大家根据需要传入这个参数即可。
  相关解决方案