《Ext詳解與實踐》節選 自定義單元格的顯示格式

2021-04-19 23:57:25 字數 2437 閱讀 4494

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 這個...