在Extjs grid中列顯示全內容(非多余部分用……顯示)
在工作中碰見了這樣一個問題:在用htmleditor編輯器編寫的內容在grid的列中顯示的時候可以顯示全部內容(這時會將這一列撐起來)而在用textarea編輯的內容則不會顯示完全。
后來知道是因為textarea的底部樣式導致的:.x-grid-cell-inner中的text-overflow ,white-space
在這里簡單說下這兩個樣式:
text-overflow 在Ext的樣式為 clip
text-overflow: clip 不顯示省略標記,直接截取
text-overflow:ellipsis 當對象文本溢出時顯示省略標記
white-space 在Ext的樣式為 nowrap
在這兩個樣式中只修改white-space為normal就可以(如果改底部樣式所有grid的顯示都將改變)
因為在工作中有可能不是將所有的grid的樣式都改為顯示全部內容撐開行高,因此我們要在所在的列中更改樣式
在要顯示的列的renderer事件中更改
renderer: function (v, m, r) {
m.attr = 'style="white-space:normal;word-wrap:break-word;word-break:break-all;"';
return v;
}
好了,就上面的三行代碼就OK啦(O(∩_∩)O~ 說了那么多廢話就三句重點*^_^*)
在m.attr中還可以給所在列添加其他樣式,以個人需要添加
添加word-wrap:break-word;word-break:break-all; 這兩個樣式用於改進瀏覽器兼容問題(在火狐英文和數字不換行) 至此IE,谷歌,火狐都可換行