Hiển thị hình ảnh tùy chỉnh trong các tùy chọn cấu hình 'công cụ' của ext.grid.panel

Question

Tôi chỉ mới một tháng tuổi với extjs và vẫn đang thử nghiệm. Câu hỏi của tôi là: Tôi có một bảng điều khiển lưới và trong đó các tùy chọn cấu hình 'công cụ'. Tôi đang sử dụng tính năng này để bật/tắt biến Ext.grid.feature.Grouping. 2 hàm xử lý có logic để vô hiệu hóa/kích hoạt 2 khung nhìn bằng cách nhấp vào các nút 'chéo' xuất hiện ở bên phải của tiêu đề. Logic là tốt. Tuy nhiên, tôi muốn hiển thị tập hợp các hình ảnh tùy chỉnh của tôi thay cho các nút 'gạch chéo'. Điều này có thể được thực hiện? Nếu có, làm thế nào? Tôi có cần phải thực hiện một số thay đổi trong mã css cho điều đó không?

Tôi đã xem xét tài liệu và cũng đã thực hiện tìm kiếm tốt nhưng dường như không có gì để trả lời câu hỏi của tôi.

Answer 1

Chỉ định một cấu hình tùy chỉnh type trên công cụ của bạn:

Ext.create('Ext.grid.Panel', { 
    ... 
    tools: [ 
     { 
     type: 'enable-grouping', 
     handler: function() { 
      ... 
     } 
     }, 
     { 
     type: 'disable-grouping', 
     handler: function() { 
      ... 
     } 
     } 
    ] 
}); 

Sau đó xác định các lớp học sau đây trong một stylesheet để tạo kiểu công cụ mới của bạn:

.x-tool-enable-grouping { 
    background-image: url('path/to/tool/image/enable-grouping.png'); 
} 

.x-tool-disable-grouping { 
    background-image: url('path/to/tool/image/disable-grouping.png'); 
} 

Kích thước của một hình ảnh cụ nên 15 x 15 px