在Extjs grid中列顯示全內容(非多余部分用……顯示)


在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

在Extjs <wbr>grid中列顯示全內容(非多余部分用……顯示)

在這兩個樣式中只修改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,谷歌,火狐都可換行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM