Có vẻ như nó phải đơn giản như vậy, nhưng tôi chỉ đơn giản là không thể làm được điều này (tôi thậm chí không cần nó thực hiện động). Ví dụ: giả sử tôi có thiết lập lưới 2 cột đơn giản như vậy:Làm cách nào để áp dụng màu nền (hoặc lớp css tùy chỉnh) cho cột trong lưới - ExtJs 4?
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
Thuộc tính cls: 'red' chỉ tác dụng tiêu đề chứ không phải cột thực tế. Tôi đã thấy ở nơi khác mà tôi nên sử dụng một trình kết xuất tùy chỉnh (có thể), nhưng nếu tôi thử một cái gì đó như:
{header: 'USER', dataIndex: 'firstName', width:70,
renderer: function(value) {
this.addCls('red');
return value;
}
}
Tôi vẫn nhận được nền trắng nhàm chán. Tôi cũng đã thấy mọi người sử dụng định nghĩa hàm renderer như sau: function(value, metadata, record, rowIndex, colIndex, store), nhưng khi tôi sử dụng alert() để kiểm tra tham số đầu vào, tôi nhận được undefined cho mọi thứ ngoại trừ value, điều này khiến tôi tin rằng điều này chỉ hợp lệ cho các phiên bản trước ExtJs 4.
Tôi cũng đã thử trả về một cái gì đó như '<span class="red">' + value + '</span>' trong hàm renderer của tôi, nhưng điều này chỉ đánh dấu văn bản, thay vì thay đổi toàn bộ nền của cột.
Tôi không muốn ghi đè lên các lớp Ext css mặc định vì tôi muốn áp dụng màu nền cho một lưới cụ thể trong ứng dụng chứ không phải tất cả chúng.
Hơn nữa, tất cả các cột của lưới đang đề cập có thể có các màu khác nhau (lưu ý rằng trong ví dụ tôi chỉ thêm lớp vào cột đầu tiên).
Giả sử rằng red được định nghĩa là .red {background:#FF0000;} trong tệp css của tôi.
Tính năng này hoạt động tốt cho ExtJS 4. – cjauvin