rel="file-list" href="file:///c:%5cdocume%7e1%5cadmini%7e1%5clocals%7e1%5ctemp%5cmsohtml1%5c01%5cclip_filelist.xml"> rel="edit-time-data" href="file:///c:%5cdocume%7e1%5cadmini%7e1%5clocals%7e1%5ctemp%5cmsohtml1%5c01%5cclip_editdata.mso">有時候,需要在
grid
中顯示乙個鏈結,或根據數字的大小顯示不同的顏色,又或者使用固定格式顯示記錄編號等,這就需要自定義單元格的顯示格式。在
ext的
grid
可以很容易的實現自定義單元格的顯示格式。在定義
grid
的columnmodel
的時候,在需要自定義顯示格式的列中加入引數
renderer
,該引數指向乙個函式,在顯示時會以函式返回的資料作為顯示資料,例如最簡單的就是定義日期的顯示格式:
引數renderer
指向的是乙個函式,在函式中傳入該單元格的值,函式執行後返回要顯示的資料。
下面通過例子來演示一下常用的自定義格式:
事件:
例子的執行結果如下圖
例子中,第
1列演示了以固定長度為
5位,不足5位以
0補齊的格式的數字:
function leftpad(val)
該函式使用
ext字串
leftpad
方法補0
,然後將轉換後的值返回。 第
2 function linker(val)
return val; }
第2列的資料使用了
json
格式的資料,如「
」,標籤
text
內的值是單元格顯示的資料,而標籤
url的值是鏈結位址。在函式中先判斷原始值是否為物件,如果是則使用
text
和url
組合乙個
html
標記並返回。在
html
標記中定義了兩個樣式,其目的是讓
html
標記顯示時能填滿單元格,這樣當滑鼠移動到該單元格空白處時,也能顯示提示資訊。提示資訊由
html
標記的title
屬性實現。 第
3列則演示了根據數值的大小使用不同顏色作為顯示文字的顏色,該單元格中負數顯示為紅色,
0為黑色,正數為綠色:
function num(val)else if(val < 0)
return val; }
函式中控制顏色的顯示是通過
html
標記span
的樣式實現的。 第
4列很簡單,使用了
ext的日期格式函式控制日期的顯示格式。在這裡要特別注意的是日期的值格式與
store
欄位中定義的格式一定要相同,不然
grid
會顯示為空白值。例如例子中的日期值為「
2008-01-01 12:01:01」
,則定義日期的格式必須為「y-m-d h:i:s」。
第5列演示了如何在單元格中顯示小:
function icon(val)
函式將包含檔名的原始值轉換為
html
標記img
,就可實現在單元格內顯示了。 第
6列演示了通過
ext的
quicktip
function qtips(val)
要在html
標記中使用
quicktip
顯示提示,只要在標記中加入乙個屬性
qtip
就行了。在函式中可以看到將乙個
img標記作為了
qtip
的顯示內容。不過,別忘了在
onready
函式中對
quicktip
進行初始化。標記
span
也定義了兩個樣式,其作用與第
2列的一樣。該列的提示顯示結果請看如下圖
第7列使用了
html
標記的title
屬性來顯示提示,與第
2列的方法是一樣的,只是該列使用了
span
標記。
本節只是簡單的演示了幾種自定義顯示格式的單元格,只要靈活使用
html
標記,還可以實現更多的自定義格式
《Ext詳解與實踐》節選 自定義單元格的顯示格式
有時候,需要在 grid 中顯示乙個鏈結,或根據數字的大小顯示不同的顏色,又或者使用固定格式顯示記錄編號等,這就需要自定義單元格的顯示格式。在 ext的 grid 可以很容易的實現自定義單元格的顯示格式。在定義 grid 的columnmodel 的時候,在需要自定義顯示格式的列中加入引數 rend...
Ext實戰》節選 自定義單元格的顯示格式
有時候,需要在 grid 中顯示乙個鏈結,或根據數字的大小顯示不同的顏色,又或者使用固定格式顯示記錄編號等,這就需要自定義單元格的顯示格式。在 ext的 grid 可以很容易的實現自定義單元格的顯示格式。在定義 grid 的columnmodel 的時候,在需要自定義顯示格式的列中加入引數 rend...
《Ext詳解與實踐》節選 檔案上傳
ext沒提供上傳元件?很多人都會有這疑問。其實ext.form.textfield就是ext的上傳元件的,只要將其配置引數inputtype設定為 file 就行了。上傳檔案除了檔案輸入框,還有乙個重要的設定,就是需要將form的enctype屬性設定為 multipart form data 這個...