Ext.js - pytania i odpowiedzi

Ext JS oznacza rozszerzony JavaScript. Jest to framework JavaScript do tworzenia zaawansowanych aplikacji internetowych opartych na interfejsie użytkownika.

Jest to produkt Sencha, który jest rozszerzeniem YUI (interfejs użytkownika Yahoo).

Oto główne pliki, które należy umieścić na stronie HTML, aby uruchomić kod Ext JS -

• Ext-all.js
• Ext-all.css

• Konfigurowalne widżety interfejsu użytkownika z kolekcją bogatych interfejsów użytkownika, takich jak siatki, siatki przestawne, formularze, wykresy, drzewa.
• Zgodność kodu nowych wersji ze starszą.
• Elastyczny menedżer układu pomaga organizować wyświetlanie danych i treści w wielu przeglądarkach, urządzeniach i rozmiarach ekranu.
• Pakiet danych Advance oddziela widżety interfejsu użytkownika od warstwy danych. Pakiet danych umożliwia gromadzenie danych po stronie klienta przy użyciu wysoce funkcjonalnych modeli, które umożliwiają takie funkcje, jak sortowanie i filtrowanie.
• Jest niezależny od protokołu i może uzyskiwać dostęp do danych z dowolnego źródła zaplecza.
• Konfigurowalne motywy Widżety Ext JS są dostępne w wielu gotowych motywach, które są spójne na różnych platformach.

• Usprawnia tworzenie aplikacji na różne platformy na komputerach stacjonarnych, tabletach i smartfonach - zarówno w przypadku nowoczesnych, jak i starszych przeglądarek.

• Zwiększa produktywność zespołów programistycznych poprzez integrację ze środowiskami programistycznymi przedsiębiorstwa za pośrednictwem wtyczek IDE.

• Zmniejsza koszty tworzenia aplikacji internetowych.

• Umożliwia zespołom tworzenie aplikacji z atrakcyjnym interfejsem użytkownika.

• Posiada zestaw widżetów, dzięki którym interfejs użytkownika jest potężny i łatwy.

• Jest zgodny z architekturą MVC, więc kod jest bardzo czytelny.

• Biblioteka ma duży rozmiar i wynosi około 500 KB, co powoduje wydłużenie czasu ładowania początkowego i spowolnienie aplikacji.

• HTML jest pełen tagów <DIV>, co czyni go złożonym i trudnym do debugowania.

• Zgodnie z ogólną polityką licencji publicznych jest bezpłatny dla aplikacji typu open source, ale płatny dla zastosowań komercyjnych.

• Czasami ładowanie nawet prostych rzeczy wymaga kilku wierszy kodu, co jest prostsze w zwykłym html lub Jquery.

• Potrzebujesz dość doświadczonego programisty do tworzenia aplikacji Ext JS.

Ext JS obsługuje kompatybilność z różnymi przeglądarkami, obsługuje wszystkie główne przeglądarki jako -

• IE 6 i nowsze
• Firefox 3.6 i nowsze
• Chrome10 i nowsze
• Safari 4 i nowsze
• Opera 11 i nowsze

Ext JS 4+ obsługuje architekturę MVC (kontroler widoku modelu). Od Ext JS 5 zaczął również obsługiwać MVVM (Model View Viewmodel).

Ext JS 6 to najnowsza wersja Ext JS, która ma dużą zaletę, że może być używana zarówno do aplikacji stacjonarnych, jak i mobilnych. Zasadniczo jest to połączenie Ext JS (aplikacje desktopowe) i Sencha touch (aplikacja mobilna).

Ext JS to framework JavaScript, więc aby zacząć go używać, powinieneś mieć wcześniejszą wiedzę na temat HTML i JS (nie na poziomie eksperta, ale powinieneś mieć podstawową wiedzę). Potem trzeba zrozumieć podstawy, więc daj im czas i ucz się stopniowo.

Oba frameworki są zupełnie inne, możemy porównać Ext JS i jQuery UI, ponieważ Ext ​​JS jest pełnoprawnym frameworkiem bogatym w interfejs użytkownika. Ale nadal Ext JS ma znacznie więcej komponentów niż interfejs użytkownika jQuery.

Ext JS 1.1

Pierwsza wersja Ext JS została opracowana przez Jacka Slocuma w 2006 roku. Był to zestaw klas narzędziowych będący rozszerzeniem YUI. Nazwał bibliotekę YUI-ext.

Ext JS 2.0

Ext JS wersja 2.0 została wydana w 2007 roku. Ta wersja miała nową dokumentację API dla aplikacji desktopowej z ograniczonymi funkcjami. Ta wersja nie miała wstecznej kompatybilności z poprzednią wersją Ext JS.

Ext JS 3.0

Ext JS wersja 3.0 została wydana w 2009 roku. W tej wersji dodano nowe funkcje, takie jak widok wykresów i listy, ale kosztem szybkości. Miał wstecznie kompatybilny z wersją 2.0.

Ext JS 4.0

Po wydaniu Ext JS 3 twórcy Ext JS stanęli przed dużym wyzwaniem, jakim było zwiększenie szybkości. Ext JS w wersji 4.0 został wydany w 2011 roku. Miał kompletnie zmienioną strukturę, a następnie architekturę MVC i szybką aplikację.

Ext JS 5.0

Ext JS w wersji 5.0 został wydany w 2014 roku. Główną zmianą w tym wydaniu była zmiana architektury MVC na architekturę MVVM. Obejmuje możliwość tworzenia aplikacji komputerowych na urządzeniach z obsługą dotykową, dwukierunkowe wiązanie danych, responsywne układy i wiele innych funkcji.

Ext JS 6.0

Ext JS 6 łączy framework Ext JS (dla aplikacji komputerowej) i sencha touch (dla aplikacji mobilnej).

Ext JS ma różne komponenty interfejsu użytkownika, niektóre z najczęściej używanych komponentów to -

• Grid
• Form
• Skrzynka pocztowa
• Pasek postępu
• Wskazówka narzędzia
• Window
• Edytor HTML
• Charts

xType definiuje typ komponentu Ext JS UI, który jest określany podczas renderowania komponentu. Np. Pole tekstowe, numeryczne, przycisk itp.

To jest typ walidacji, który można łatwo dostosować. Niewiele vType dostarczonych przez Ext JS to -

alphanumText - Zwraca fałsz, jeśli wprowadzony tekst ma inny symbol niż alfabet lub wartość liczbowa.

emailText - Zwraca wartość false, jeśli tekst nie jest prawidłowym adresem e-mail.

Tak Ext JS można zintegrować z Ajax. Realizacja jako: załóżmy, że na jakimś polu tekstowym po rozmyciu musi zweryfikować dane z serwera, abyśmy mogli wywołać Ajax onblur / onchange do identyfikatora pola tekstowego, aby sprawdzić, czy dane wprowadzone w polu tekstowym są obecne na serwerze / bazie danych .

Tak Ext JS można zintegrować z innymi frameworkami po stronie serwera, takimi jak Java, .net, Ruby on rails, PHP, ColdFusion itp.

Ext JS można zaimplementować w dowolnym popularnym zintegrowanym środowisku programistycznym (IDE), takim jak Eclipse, Aptana, Sublime, Webstrom itp.

Oto kilka sposobów na dostęp do elementów DOM w Ext JS -

• Ext.get()
• Ext.getElementById()
• Ext.fly()
• Ext.select()

Architektura MVVM to Model View Viewmodel. W architekturze MVVM kontroler MVC został zastąpiony przez ViewModel.

ViewModel- Zasadniczo leczy zmiany między widokiem a modelem. Wiąże dane z modelu do widoku. Jednocześnie nie ma bezpośredniej interakcji z widokiem, ma jedynie wiedzę o modelu.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () to pierwsza metoda, która jest wywoływana, gdy DOM jest w pełni załadowany, dzięki czemu każdy element, do którego chcesz się odwołać, będzie dostępny po uruchomieniu skryptu.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Różne rodzaje pól ostrzegawczych w Ext JS to -

• Ext.MessageBox.alert();
• Ext.MessageBox.confirm();
• Ext.MessageBox.wait();
• Ext.MessageBox.promt();
• Ext.MessageBox.show();

Klasy bazowe dla Store to Ext.data.Store

Model to Ext.data.Model

Dla kontrolera jest Ext.app.controller

Oto różne sposoby obsługi zdarzeń -

• Korzystanie z detektorów
• Dołączanie wydarzeń później
• Korzystanie ze zdarzeń niestandardowych

Store.getCount() - Dla rekordów w pamięci podręcznej

Store.getTotalCount() - Całkowita liczba rekordów w bazie danych.

Metoda Store.getModifiedRecords () służy do pobierania zmodyfikowanych rekordów.

Store.commitChanges (), aby zaktualizować zmiany sklepu.

Jeśli mamy grid Id: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Jeśli mamy identyfikator sklepu: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

• Klasa podstawowa dla Grid - Ext.grid.GridPanel
• Formularz - Ext.form.Panel
• Dla panelu - Ext.panel.Panel
• Wykres - Ext.chart.Chart
• Dla drzewa - Ext. Drzewo.Panel

Różne typy układów to -

• Absolute
• Accordion
• Anchor
• Border
• Auto
• hBox
• vBox
• Card(TabPanel)
• Card(Wizard)
• Column
• Fit
• Table

Można to zrobić za pomocą pagingToolbar () jako -

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Loadmask służy do zapobiegania wszelkim innym operacjom, wyświetlając użytkownikowi ładowanie (lub komunikat niestandardowy), dopóki dane nie zostaną wyrenderowane do siatki. Loadmask: prawda; jest właściwością pokazującą loadmask podczas renderowania danych do siatki.

Renderer jest używany, gdy chcemy manipulować danymi, które otrzymujemy ze sklepu, aby pokazać zmanipulowane dane w oparciu o pewne kryteria. Jest to właściwość kolumny, której można użyć jako -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Ukryty: prawda;

Sortowalne: prawda; co jest domyślnie prawdziwe.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 posiada pakiet narzędzi, z którym może zawierać elementy wizualne obu frameworków (Ext JS i Sencha Touch).

Można go dodać jako -

'toolkit': 'classic', // lub 'modern'

Jeśli zestaw narzędzi jest klasyczny, zawiera strukturę aplikacji komputerowej Ext JS.

A jeśli zestaw narzędzi jest nowoczesny, to zawiera szkielet aplikacji mobilnej sencha touch.