ExtJS 4 GridView - Jak zdobyć Td lub Div komórki?

Question

W GridPanel, wszyscy wiemy, że możemy określić renderer w konfiguracji kolumny, aby dostosować komórkę. Teraz jest ten specjalny przypadek, w którym potrzebuję zbudować dostosowany wizualny pasek postępu (płótno), który ma być wciągnięty do komórki, moje pytanie brzmi: jak uzyskać el komórki?

W zwrotnego renderer, dostępne wartości są value, metadata, record, rowIndex, columnIndex, store i view. Próbowałem view.getNode lub view.getCell bez powodzenia.

Z góry dziękuję!

/Lionel

EDIT

Po kilku dalszych wykopalisk, uświadomiłem sobie moje węzły są w rzeczywistości nie jest gotowy do czasu renderujący jest wywoływana, to znaczy, że view.getNode i view.getCell jest w rzeczywistości pracuje , ale opóźnione (cały czas zwraca wartość zerową)

Obejście polega na użyciu setTimeout i renderuje elementy po tym, jak węzły są gotowe. Z pewnością nie jest to najlepszy sposób postępowania w tej sprawie. Wszelkie sugestie są mile widziane w każdym razie :)

/Lionel

Answer 1

Okazuje się, że odpowiedź na to pytanie jest użycie setTimeout symulować pewne opóźnienia więc węzły mogą być dodane poprawnie po pewnym opóźnieniem.

To mój 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); 
}; 

brzydki, ale działa. Jeśli nie ma innych odpowiedzi, przyjmuję to jako poprawną odpowiedź w ciągu najbliższych dwóch dni.

Cheers

/Lionel

Answer 2

mam lekko schludniejszy rozwiązania, unikając potrzebę setTimeout wezwanie.

Zasadniczo mój renderer dodaje class do komórki, który chcę w zawartość niestandardową, a potem użyć kombinacji listeners do renderowania niestandardowej zawartości do tej komórki po siatka jest obecny na stronie.

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

Na siatce dodam afterrender słuchacza, który z kolei dodaje się refresh słuchacza do GridView. Chciałbym użyć viewready lub jakiegoś innego zdarzenia, ale to nie działa w wersji ext, której używam, 4.0.2a.

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

W refresh funkcji Następnie pętli wszystkich rejestrów oraz czyni się zawartość w komórce. Coś takiego jak poniższe, które po prostu dodaje pojemnik ext do komórki, powinno działać jako podstawa.