Ext JS

Ext JS to kolejny framework JavaScript, który powstał do tworzenia interaktywnych aplikacji internetowych z wieloma platformami. Stworzony został przy użyciu takich technik jak: DOM, DHTML i AJAX.

Początkowo powstał w 2007 roku jako dodatkowe rozszerzenia biblioteki YUI. Autorem był Jack Slocum. Warto wspomnieć, że Ext JS zawiera interoperacyjność z Prototype oraz jQuery. Zaczynając od wersji 1.1 framework ten nie zachowuje żadnych zależności od innych zewnętrznych bibliotek w przeciwieństwie czyni je opcjonalnymi. Ext JS śledzi znaną architekturę MVC i MVVM.

Framework Ext JS wyposażony jest w zestaw wielu formantów formularzy, które opierają się o GUI. Wiele z tych elementów sterujących jest w stanie komunikować się z serwerem internetowym za pomocą Ajax. Formularze te służą do użytku w aplikacjach internetowych jako:

• pola numeryczne
• kontrola drzewa
• paski narzędzi
• daty z pop-up date-picker
• kontrola edytora html
• menu w stylu aplikacji pulpitu
• grafiki wektorowe
• listy i kombi
• panele kart
• suwaki
• sterowanie siatką (w trybie do odczytu i do edycji w tym sortowalne dane, przeciągane i blokowane kolumny).

Ext JS zawiera mnóstwo wysokiej wydajności, wstępnie przetestowanych i zintegrowanych elementów interfejsu użytkownika, między innymi sieci, wykresów, kalendarzy. Dodatkowo bogaty zestaw narzędzi i motywów Ext JS pomaga programistom zwiększyć produktywność i przyspieszyć dostarczanie profesjonalnych aplikacji sieciowych. Dostępne są także narzędzia, które pomagają w projektowaniu, opracowywaniu, tworzeniu tematów i debugowaniu aplikacji oraz budowaniu optymalizacji i wdrażaniu. Warto dodać, że framework jest wyposażony w solidny pakiet danych, który oddziela elementy interfejsu od warstwy danych. Wobec tego pakiet danych umożliwia gromadzenie danych po stroni klienta za pomocą wyjątkowo funkcjonalnych modeli oferujących takie funkcje jak filtrowanie oraz sortowanie.

Oprócz tego Ext JS wyposażony jest w elastyczny manager układu, który ułatwia organizację wyświetlanych danych oraz treści na wielu różnych przeglądarkach, różnych rozmiarach ekranu czy na różnych urządzeniach. Pomaga również kontrolować wyświetlanie komponentów nawet dla bardzo złożonych interfejsów użytkownika. Framework udostępnia też elastyczny system konfiguracyjny umożliwiający dostosowanie elementów aplikacji do konkretnej orientacji urządzenia (czyli portretu lub krajobrazu) lub dostępnego rozmiaru okna przeglądarki. Ciekawostką jest, że elementy Ext JS dostępne są dla użytkowników w wielu różnych motywach, zaliczamy do nich: Classic, Triton, Neptune, Material czy Crisp. Dostosowywane są one do odzwierciedlenia konkretnej marki.

Przykładowy kod w Ext JS

Ext JS Przykład #1

  Ext.define('SchoolsApp.model.Student', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    schema: {
      namespace: 'SchoolsApp.model',
      proxy: {
        type:'ajax',
        api: {
   read: '/TestService.svc/students/'
        },
        reader: {
   type:'json',
   rootProperty:'data'
        }
      }
    },
    fields: [
      { name: 'Id', type: 'int' },
      { name: 'firstName', type: 'string' },
      { name: 'lastName', type: 'string' },
      { name: 'birthDate', type: 'date' },
      { name: 'address', type: 'string' },
      { name: 'city', type: 'string' },
      { name: 'state', type: 'string' }
    ]  
  });
  

Ext JS Przykład #2

  Ext.define('SchoolsApp.model.State', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    proxy: {
      type:'ajax',
      api: {
        read: '/TestService.svc/students/'
      },
      reader:{
        type:'json',
        rootProperty:'data'
      },
      writer: {
        allowSingle: false
      }
    },
    fields: [
      { name: 'Id', type: 'int' },
      { name: 'name', type: 'string' }
    ]
  });