Grid的单元格对数据显示都是采用省略的办法来处理的,即内容长度超过单元格长度时自动隐藏超过的部分并使用省略号...来显示,这样虽然也很好,但有时我们可能还是希望它能完全的显示出来,即采用换行显示。
最简单的办法莫过于直接修改ext-all.css,但俺一般不像侵入ext的源文件,那就自己用别的方法实现吧。
方法其实也很简单,判断该grid是否需要换行显示。如果是则加上这段代码:
grid.store.on('load', function() {
grid.El.select("table[class=x-grid3-row-table]").each(function(x) {
x.addClass('x-grid3-cell-text-visible');
});
});
grid.El.select("table[class=x-grid3-row-table]").each(function(x) {
x.addClass('x-grid3-cell-text-visible');
});
});
CSS文件内容:
.x-grid3-cell-text-visible .x-grid3-cell-inner{overflow:visible;padding:3px 3px 3px 5px;white-space:normal;}
ExtJS Grid 单元格换行
本文介绍如何在ExtJS Grid中实现单元格内容的自动换行显示,而不是默认的省略部分内容。通过监听Grid的数据加载事件,并对单元格进行特定的样式设置,可以确保所有数据都能完整展示。
1418

被折叠的 条评论
为什么被折叠?



