Tworzę aplikację internetową sencha za pomocą sencha touch 2.2.1. W mojej aplikacji mam ekran, który składa się z pojemnika, w którym dodałem wiele paneli. Pojedynczy panel składa się z dwóch paneli, panelu górnego i panelu wewnętrznego.Aplikacje sencha spowalniają renderowanie w wątku UI
Po zainicjowaniu strony, wywołuję api ajax, aby pobrać listę danych dla górnego panelu każdego elementu w kontenerze. i na górnym panelu kliknę, api api dla tego elementu, aby pobrać dane dla panelu wewnętrznego. Po zakończeniu wywołania api przekazuję dane do panelu wewnętrznego i sprawia, że ten panel jest widoczny. Ten kod jest taki sam dla wszystkich elementów w pojemniku na klikniętym górnym panelu.
Na górze znajduje się również przycisk "expandAll", który wywoła api dla wszystkich elementów pętli for jeden po drugim i wyświetla dane dla każdego panelu wewnętrznego. Najpierw wywołuję jeden api, a następnie otrzymuję odpowiedź, którą przechowuję w pamięci i renderuję na ekranie, a następnie wywołuję następne api, jak to dla wszystkich przedmiotów.
getDetailData:function(params){
var detailStore=Ext.getStore('DetailData');
detailStore.load({
callback:function(data,opt,success) {
detailStore.storeDetailData(data);
_this.onShowDetailData(data);
// now call next api from here until all items data fetched and displayed
}
});
}
W tym przypadku pobierania wszystkich danych przedmiotów i renderowania na ui wątku trwa dłużej i aplikacja spowalnia.
Również podczas renderowania danych muszę zastosować filtry w magazynie, aby filtrować dane przed renderowaniem danych za każdym razem.
Chciałem wiedzieć, w jaki sposób należy wykonać tę pracę przetwarzania i renderowania. Ponieważ wywołanie api ajax i pobieranie danych z serwera nie zajmuje więcej czasu, przetwarzanie i renderowanie zajmuje więcej czasu.
Wszelkie suggessions na tym,
dzięki
Ile elementów lub połączeń API w sumie mówimy tutaj? Jak złożone są szablony przedmiotów? – OhmzTech
Minimum 10 i maks. 14 api połączeń, które robimy tutaj. I szablon elementu jest złożoną strukturą, Jeden panel z układem vbox i dwoma panelami w nim jako, 1. Panel (layout = hbox), w którym mamy 5 paneli i dwie listy 2. Panel (layout = hbox) , ponieważ mamy 6 list i dwa panele – nleshjinde
Rozwiązałem problem z renderowaniem. Podobnie jak w przypadku każdego komponentu sencha, sencha tworzy dodatkową strukturę przez siebie. W mojej aplikacji użyłem więcej komponentów sencha ze złożonymi widokami i bardziej wewnętrznymi komponentami. Teraz użyłem pojedynczego panelu i tworzę pojedynczy html zamiast więcej komponentów sencha i bezpośrednio ustawiając ten ostateczny tekst HTML na panel jako setHtml. Tak więc w tym przypadku nadpisujemy strukturę sencha i następuje proste renderowanie. – nleshjinde