1. 程式人生 > >grid中實現換行

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,谷歌,火狐都可換行