ExtJS Grid 改變單元格背景顏色的方法

2021-06-06 09:36:52 字數 920 閱讀 8884

第一種情況:載入資料時改變列的顏色

首先定義乙個樣式如下(這裡以紅色背景為例):

.x-grid-back-red

定義改變顏色的列:

}效果圖如下:

第二種情況:載入資料完成後改變行的顏色

首先要解決的乙個問題是如果判斷資料已經載入完畢,最簡單的方法是給grid的store新增onload事件。

如果你想有條件地改變某行的背景顏色,則還需要遍歷gird的store,這裡有個簡單的方法即store的

each方法。看下面這個例子:

grid.getstore().on('load',function(s,records)else if(r.get('zy')=='本年累計')else if(r.get('zy')=='期初餘額')

girdcount=girdcount+1;

});});

效果圖如下:

第三種情況:使用ext本身的顏色渲染效果

暫時只發現ext已經設計好的一種效果:單雙行背景顏色不同。

很簡單,在grid中配置striperows為true即可!

另外,如果想使用自己定義的行的背景顏色,那就去修改ext-all.css吧,提供幾個:

-----------在ext-all.css修改**如下---------

.x-grid3-row

.x-grid3-row-alt

.x-grid3-row-over

//修改grid某一行樣式 grid.getview().addrowclass(r,css)

//修改grid某一單元格樣式 ext.get(grid.getview().getcell(r,c)).addclass(css) 或 grid.getview().getrow(r).style.backgroundcolor="red"; //css樣式為自定義樣式

Extjs grid 合併單元格

這個方法四個引數分別是 row 合併起始行 col 合併起始列.這兩個引數是為了定位,要從哪個單元格開始合併.type 是要合併行或者列.num 是要合併的數量 監聽load 執行合併單元格 grid.getstore on load function var span function grid,...

Extjs Grid合併單元格

客戶需求需要將grid 中的資料進行合併單元格處理!公司程式用的是extjs3.x 的 底層生成的html 不是標準的table 所以合併單元格只能另闢蹊徑!以下是在網上找的extjs3 和 extjs4 的合併單元方法!解決extjs4.1合併單元格問題 param grid 要合併單元格的gri...

Extjs grid 單元格編輯

實現grid勾選後出現編輯按鈕,通過增加乙個欄位checked來控制 事件如下 selectionchange function thi,selected,eopts deselect function row,record,index,eopts grid中如下 else listeners va...