對grid元件的操作示例1

2021-04-30 16:45:53 字數 1245 閱讀 2204

怎麼樣?是不是效果大不同了。你不會認為很難吧,嗯,確實,如果你對html和css完全搞不明白的話,勸你還是先去學學吧,對自己有信心的往下看。

var cm = new ext.grid.columnmodel([

, else

}},,

]);

別被嚇到,這麼一大段其實就是判斷是男是女,然後配上顏色。你要是覺得亂,也可以這麼做。

function render***(value)  else 

}var cm = new ext.grid.columnmodel([,,

,]);

實際上這個renderer屬性至關重要,它的值是乙個function,哦,你說不知道js裡function可以這麼用?那麼恭喜你,現在你知道了。

renderer會傳遞個引數進去,咱們grid裡看到的,是這個函式的返回值,怎麼樣,神奇吧?

同志們,你們也應該看到了,返回html就可以,是html啊,html裡有的東西,你返回什麼就顯示什麼,顏色,鏈結,,按鈕,只要你願意,整個網頁都可以返回回去。還有什麼做不到的?哦,你不會html,那沒轍,回去學吧。

咱們先來個。

function render***(value)  else 

}

是不是太簡單了,下面咱們來玩點兒高階的。

function renderdescn(value, cellmeta, record, rowindex, columnindex, store)
來看看我們可以在render裡用到多少引數:

value是當前單元格的值

cellmeta裡儲存的是cellid單元格id,id不知道是幹啥的,似乎是列號,css是這個單元格的css樣式。

record是這行的所有資料,你想要什麼,record.data["id"]這樣就獲得了。

rowindex是行號,不是從頭往下數的意思,而是計算了分頁以後的結果。

columnindex列號太簡單了。

store,這個厲害,實際上這個是你構造**時候傳遞的ds,也就是說**裡所有的資料,你都可以隨便呼叫,唉,太厲害了。

有個同學就問啦:ext render的引數,是如何得到的呢。因為你講的那些都是ext自己內部的。它是如何把這些引數傳遞給render的呢?

這個問題其實比較簡單,只是你們想複雜了。既然是函式,就肯定有呼叫它的地方,你找到gridview.js在裡邊搜尋一下renderer,就會看到呼叫render的地方,這些引數都是在這裡傳進去的。

好,看看效果吧。

Grid 「操作」列的plugin

儘管ext的常用設計是把對grid記錄的操作放在tbar或者bbar上,當總有人的需求與這個不一樣。希望在每一條記錄的後面,新增一列 操作 對記錄進行管理 修改 刪除等 於是,在參考了checkbox 的plugin以後,就可以完成上面的任務了。外掛程式的 grid3 operate col 的cs...

ExtJs 的學習歷程 Grid篇 1

一直在找乙個功能強大的grid,能夠滿足我在工作中的大部分需求。自從認識ext grid後,我就被深深住了,這不就是我要找的東西嗎?看了它的例子,就想著手用一下.但是,真正要將此控制項用到工作中,還需要做許多處理,於是我把工作分成幾個階段.1.grid顯示 2.grid編輯 3.grid的綜合應用 ...

ExtJS5 1學習筆記 Grid元件的基本用法

ext中的grid元件是乙個非常有用的元件,它類似於html中的 但是功能比普通的 多得多,如下圖所示 下面記錄grid元件的基本用法 上面的 在瀏覽器中訪問的效果如下圖 自定義渲染函式 自定義渲染函式可以實現對列的表現形式做不同的處理,如給性別列中male顯示為男,female顯示為女,且用不同的...