Ext學習筆記——grid表格渲染自定義樣式
阿新 • • 發佈:2019-01-29
HTML中我們通過css直接更改樣式,同理Ext通過renderer就可以更改HTML顯示的樣式。如下:
更改名稱列:{header:"狀態", dataIndex:"status", renderer:function(value){ if(value=="可用"){ return "<span style='color:green, font-weight:bold'>可用</span>"; }else{ return "<span style='color:red, font-weight:bold'>禁用</span>"; } }
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
cell.style="background-color:";
return data;
}
在列中應用:{header:'名稱', dataIndex:'name', renderer:renderMotif}
解釋一下,函式renderMotif傳入的值中,data:列表的值,
cell:列表相關屬性,主要有css和id,
record:資料物件,如果我們想獲取其他列的值,可通過record.data["id"]的方式得到,
rowIndex:行號,當前頁中所記錄的順序,
columnsIndex:列號,
store:構造表格時傳遞的ds。
在columns中插入new Ext.grid.Rownumberer(),可自動顯示列行號。
表格加入複選框程式碼如下:
var sm = new Ext.grid.selection.CheckboxModel({checkOnly:true}); //只允許使用者通過複選框選中
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
columns:columns,
selModel:sm,
stripeRows:true,
loadMask:true,
forceFit:true
})