自定義Extjs中Grid單元格的顯示格式

2022-05-05 12:57:08 字數 2533 閱讀 8917

有時候,需要在grid中顯示乙個鏈結,或根據數字的大小顯示不同的顏色,又或者使用固定格式顯示記錄編號等,這就需要自定義單元格的顯示格式。在 ext的grid可以很容易的實現自定義單元格的顯示格式。在定義grid的columnmodel的時候,在需要自定義顯示格式的列中加入引數 renderer,該引數指向乙個函式,在顯示時會以函式返回的資料作為顯示資料,例如最簡單的就是定義日期的顯示格式:

引數renderer指向的是乙個函式,在函式中傳入該單元格的值,函式執行後返回要顯示的資料。

下面通過例子來演示一下常用的自定義格式:

"-//w3c//dtd html 4.01//en"

"">   

'true'

>    

"padding-left:20px;"

>   

"panel1"

>

事件:

在示例中:

第1列演示了以固定長度為5位,不足5位以0補齊的格式的數字,該函式使用ext字串leftpad方法補0,然後將轉換後的值返回。

第2列演示了如何在單元格中顯示鏈結,第 2列的資料使用了json格式的資料,如「」,標籤text內的值是單元格顯示的資料,而標籤url的值是鏈結位址。在函式中先判斷原始值是否為物件,如果是則使用text和url組合乙個html標記並返回。在html標記中定義了兩個樣式,其目的是讓html標記顯示時能填滿單元格,這樣當滑鼠移動到該單元格空白處時,也能顯示提示資訊。提示資訊由html標記的title屬性實現。

第3列則演示了根據數值的大小使用不同顏色作為顯示文字的顏色,該單元格中負數顯示為紅色,0為黑色,正數為綠色,函式中控制顏色的顯示是通過html標記span的樣式實現的。

第4列很簡單,使用了ext的日期格式函式控制日期的顯示格式。在這裡要特別注意的是日期的值格式與store 欄位中定義的格式一定要相同,不然grid會顯示為空白值。例如例子中的日期值為「2010-01-01 12:01:01」,則定義日期的格式必須為「y-m-d h:i:s」。

第5列演示了如何在單元格中顯示小,函式將包含檔名的原始值轉換為html標記img,就可實現在單元格內顯示了。

第6列演示了通過ext的quicktip顯示提示,要在html標記中使用quicktip顯示提示,只要在標記中加入乙個屬性qtip就行了。在函式中可以看到將乙個img標記作為了qtip的顯示內容。不過,別忘了在onready函式中對quicktip進行初始化。標記span也定義了兩個樣式,其作用與第2列的一樣。

第7列使用了html標記的title屬性來顯示提示,與第2列的方法是一樣的,只是該列使用了span標記。

有時候,需要在grid中顯示乙個鏈結,或根據數字的大小顯示不同的顏色,又或者使用固定格式顯示記錄編號等,這就需要自定義單元格的顯示格式。在 ext的grid可以很容易的實現自定義單元格的顯示格式。在定義grid的columnmodel的時候,在需要自定義顯示格式的列中加入引數 renderer,該引數指向乙個函式,在顯示時會以函式返回的資料作為顯示資料,例如最簡單的就是定義日期的顯示格式:

引數renderer指向的是乙個函式,在函式中傳入該單元格的值,函式執行後返回要顯示的資料。

下面通過例子來演示一下常用的自定義格式:

"-//w3c//dtd html 4.01//en"

"">   

'true'

>    

"padding-left:20px;"

>   

"panel1"

>

事件:

在示例中:

第1列演示了以固定長度為5位,不足5位以0補齊的格式的數字,該函式使用ext字串leftpad方法補0,然後將轉換後的值返回。

第2列演示了如何在單元格中顯示鏈結,第 2列的資料使用了json格式的資料,如「」,標籤text內的值是單元格顯示的資料,而標籤url的值是鏈結位址。在函式中先判斷原始值是否為物件,如果是則使用text和url組合乙個html標記並返回。在html標記中定義了兩個樣式,其目的是讓html標記顯示時能填滿單元格,這樣當滑鼠移動到該單元格空白處時,也能顯示提示資訊。提示資訊由html標記的title屬性實現。

第3列則演示了根據數值的大小使用不同顏色作為顯示文字的顏色,該單元格中負數顯示為紅色,0為黑色,正數為綠色,函式中控制顏色的顯示是通過html標記span的樣式實現的。

第4列很簡單,使用了ext的日期格式函式控制日期的顯示格式。在這裡要特別注意的是日期的值格式與store 欄位中定義的格式一定要相同,不然grid會顯示為空白值。例如例子中的日期值為「2010-01-01 12:01:01」,則定義日期的格式必須為「y-m-d h:i:s」。

第5列演示了如何在單元格中顯示小,函式將包含檔名的原始值轉換為html標記img,就可實現在單元格內顯示了。

第6列演示了通過ext的quicktip顯示提示,要在html標記中使用quicktip顯示提示,只要在標記中加入乙個屬性qtip就行了。在函式中可以看到將乙個img標記作為了qtip的顯示內容。不過,別忘了在onready函式中對quicktip進行初始化。標記span也定義了兩個樣式,其作用與第2列的一樣。

第7列使用了html標記的title屬性來顯示提示,與第2列的方法是一樣的,只是該列使用了span標記。

Extjs中自定義事件

ext中所謂的響應事件,響應的主要是元件中已經定義的事件 通過看api各元件的events可以找到 主要作用就是利用on呼叫各元件的事件處理函式,然後在函式中作使用者想要的操作 ext也可以自定義事件,定義過程參考ext.util.observable 這種形式定義div的話,按鈕2會在按鈕1上面,...

ExtJS 自定義元件

用一段時間ext,覺得自定義元件還是很有必要 1 不改變ext的編碼風格 2 易於重複利用 擴充套件可能是基於官方控制項的擴充套件也可能是基於官方基礎元件擴充套件,第一種比較常用,第二種我都去網上download。第一種擴充套件 extend object subclass,object super...

Extjs自定義樣式

extjs改變樣式的方法分為兩種,一種是把元素放在div裡面,然後通過class來修改樣式 一種是通過ext自帶的標籤修改樣式,比如cls,basecls,bodycls 等等。自定義樣式以後extjs的按鈕在谷歌,火狐上會有乙個陰影,但是在ie上面表現良好,在屬性裡面設定frame false.i...