ExtJS 4 GridView - Cách lấy td hoặc div của ô?

Question

Trong GridPanel, chúng ta đều biết rằng chúng ta có thể chỉ định renderer trong cấu hình cột để có ô tùy chỉnh. Bây giờ có trường hợp đặc biệt này mà tôi cần phải xây dựng một thanh tiến trình trực quan (canvas) tùy chỉnh được vẽ vào một ô, câu hỏi của tôi là cách lấy số el của ô?

Trong callback renderer, giá trị có sẵn là value, metadata, record, rowIndex, columnIndex, store, và view. Tôi đã thử view.getNode hoặc view.getCell mà không có may mắn.

Cảm ơn bạn trước!

/Lionel

EDIT

Sau khi một số đào phá hơn nữa, tôi nhận ra các nút của tôi là trên thực tế chưa sẵn sàng vào thời điểm các renderer được gọi, có nghĩa là, view.getNode và view.getCell là trong thực tế làm việc , nhưng bị trì hoãn (nó trả về null mọi lúc)

Cách giải quyết là sử dụng setTimeout và hiển thị các phần tử sau khi các nút sẵn sàng. Đây chắc chắn không phải là cách tốt nhất để giải quyết vụ án. Bất cứ đề nghị được hoan nghênh anyway :)

/Lionel

Answer 1

Hóa ra rằng câu trả lời cho câu hỏi này là sử dụng setTimeout để mô phỏng một số chậm trễ nên các nút có thể được thêm vào một cách chính xác sau khi một số chậm trễ.

Đây là tôi renderer

renderer = function (v, meta, rec, r, c, store, view) { 

    setTimeout(function() { 
     var row = view.getNode(rec); 

     //Capturing the el (I need the div to do the trick) 
     var el = Ext.fly(Ext.fly(row).query('.x-grid-cell')[c]).down('div'); 

     //All other codes to build the progress bar 
    }, 50); 
}; 

Xấu xí, nhưng nó hoạt động. Nếu không có câu trả lời nào khác, tôi sẽ chấp nhận nó như một câu trả lời hợp lệ trong hai ngày tới.

Cheers

/Lionel

Answer 2

tôi có một giải pháp nhẹ gọn gàng, tránh sự cần thiết cho một cuộc gọi setTimeout.

Về cơ bản, renderer thêm ô class vào ô mà tôi muốn nội dung tùy chỉnh, sau đó tôi sử dụng kết hợp listeners để hiển thị nội dung tùy chỉnh cho ô đó sau khi lưới hiển thị trên trang.

renderer: function (value, metaData, record) { 
    metaData.tdCls = metaData.tdCls + ' customContentCell'; 
    return ''; 
} 

Trên lưới tôi thêm một người biết lắng nghe afterrender mà lần lượt cho biết thêm một người biết lắng nghe refresh để GridView. Tôi đã có thể thích sử dụng viewready hoặc một số sự kiện khác nhưng điều đó không xuất hiện để làm việc trong phiên bản của ext tôi đang sử dụng, 4.0.2a.

listeners: { 
    afterrender: function (grid) { 
     var view = this.getView(); 
     if (view) 
      view.on('refresh', gridRenderCustomContent, this); 
    } 
} 

Trong đó, chức năng refresh Sau đó, tôi lặp qua tất cả các bản ghi và hiển thị nội dung trong ô. Một cái gì đó như sau, mà chỉ đơn giản là thêm một container ext vào tế bào, nên làm việc như một cơ sở.