我在动态隐藏网格列方面遇到了非常烦人的问题。在我隐藏列(单元格中有长文本)后,网格行的高度会急剧增加。隐藏前
并在隐藏操作后
如您所见,第一行肯定太高了。这种行为的原因可能是我在网格单元格中使用文本换行。
.x-grid-cell-inner { white-space: normal; }
是否有任何有效的方法来制作网格行,而不是在隐藏列(并使用 textwrap )后改变它们的高度?
我以前亲身遇到过这种奇怪的现象。该问题是由 Ext JS 通过将宽度设置为 0px 来“隐藏”列引起的。
我的解决方案是将事件侦听器添加到网格标题,如下所示:
// me is the grid
me.headerCt.on({
columnhide: me.removeWordWrapOnHide,
columnshow: me.addWordWrapOnShow,
scope: me
});
不要使用现有的x-grid-cell-inner
类,而是像这样创建一个新类:
<style type="text/css">
td.grid-cell-wordwrap > div {
white-space: normal; /* may need !important, not sure */
}
</style>
然后这两个函数的实现是这样的:
removeWordWrapOnHide: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap || wordWrapRe.test(column.tdCls)){
column.tdCls = column.tdCls.replace("grid-cell-wordwrap", "");
column.useWordWrap = true; // Flag to check on show
me.view.refresh();
}
},
addWordWrapOnShow: function(headerCt, column){
var me = this,
wordWrapRe = /wordwrap/;
if(column.useWordWrap && !wordWrapRe.test(column.tdCls)){
column.tdCls = "grid-cell-wordwrap " + column.tdCls;
me.view.refresh();
}
}
可能不是最有效的方法,但它可以完成工作。