extjs Samouczek
Pierwsze kroki z extjs

Uwagi

Wersje

Tworzenie aplikacji Hello World - Via Sencha Cmd

Ten przykład demonstruje tworzenie podstawowej aplikacji w ExtJS przy użyciu Sencha Cmd w celu uruchomienia procesu - ta metoda automatycznie wygeneruje kod i strukturę szkieletu dla projektu.

Otwórz okno konsoli i zmień katalog roboczy na odpowiednią przestrzeń do pracy. W tym samym oknie i katalogu uruchom następującą komendę, aby wygenerować nową aplikację.

> sencha -sdk /path/to/ext-sdk generate app HelloWorld  ./HelloWorld 

Uwaga: Flaga -sdk określa lokalizację katalogu wyodrębnionego z archiwum frameworka.

W ExtJS 6+ Sencha połączył frameworki ExtJS i Touch w jedną bazę kodową, różniącą się odpowiednio terminami klasycznymi i nowoczesnymi . Dla uproszczenia, jeśli nie chcesz atakować urządzeń mobilnych, w poleceniu można określić dodatkową flagę, aby zmniejszyć bałagan w obszarze roboczym.

> sencha -sdk /path/to/ext-sdk generate app -classic HelloWorld ./HelloWorld 

Bez dalszej konfiguracji w pełni funkcjonalna aplikacja demonstracyjna powinna teraz znajdować się w katalogu lokalnym. Teraz zmień katalog roboczy na nowy katalog projektu HelloWorld i uruchom:

> sencha app watch

W ten sposób projekt jest kompilowany przy użyciu domyślnego profilu kompilacji i uruchamiany jest prosty serwer HTTP, który umożliwia wyświetlanie aplikacji lokalnie za pośrednictwem przeglądarki internetowej. Domyślnie na porcie 1841 .

Instalacja i konfiguracja

Typowe użycie ExtJS wykorzystuje platformę do budowania jednostronnych aplikacji Rich (RIA). Najprostszym sposobem na rozpoczęcie jest skorzystanie z narzędzia Sencha Cmd , narzędzia do budowania interfejsu CLI, które obejmuje większość ogólnych problemów w cyklu wdrażania, przede wszystkim:

• zarządzanie pakietami i zależnościami
• kompilacja / pakietowanie i minimalizacja kodu
• zarządzanie strategiami kompilacji dla różnych celów i platform

» Pobierz Sencha Cmd

Drugim krokiem jest pobranie zestawu SDK, ExtJS to produkt komercyjny - aby uzyskać kopię, jeden z:

• zaloguj się do Sencha Wsparcie dla wersji licencji komercyjnej ( strona produktu )
• złożyć wniosek o kopię próbną, która będzie ważna przez 30 dni
• zażądać wersji GPL v3 dostępnej dla projektów typu open source
  (pamiętaj, że przy tej opcji możesz nie mieć dostępu do najnowszej wersji)

Po pobraniu zestawu SDK upewnij się, że archiwum zostało rozpakowane przed kontynuowaniem.

Uwaga: Patrz oficjalna Rozpoczęcie dokumentacji kompleksowego przewodnika po ExtJS projektów.

Po zainstalowaniu Sencha Cmd można sprawdzić jego dostępność, otwierając okno konsoli i uruchamiając:

> sencha help

Mamy teraz narzędzia niezbędne do tworzenia i wdrażania aplikacji ExtJS, zwróć uwagę na lokalizację katalogu, w którym wyodrębniono zestaw SDK, ponieważ będzie to wymagane w dalszych przykładach.

Tworzenie aplikacji Hello World - ręcznie

Zacznijmy używać ExtJS do budowy prostej aplikacji internetowej.

Stworzymy prostą aplikację internetową, która będzie miała tylko jedną fizyczną stronę (aspx / html). Co najmniej każda aplikacja ExtJS będzie zawierać jeden plik HTML i jeden plik JavaScript - zwykle index.html i app.js.

Plik index.html lub strona domyślna będzie zawierać odwołania do kodu CSS i JavaScript ExtJS, wraz z plikiem app.js zawierającym kod aplikacji (w zasadzie punkt początkowy aplikacji internetowej).

Stwórzmy prostą aplikację internetową, która będzie korzystała ze składników biblioteki ExtJS:

Krok 1: Utwórz pustą aplikację internetową

Jak pokazano na zrzucie ekranu, utworzyłem pustą aplikację internetową. Aby to uprościć, możesz użyć dowolnego projektu aplikacji internetowej w wybranym edytorze lub środowisku IDE.

Krok 2: Dodaj domyślną stronę internetową

Jeśli utworzyłeś pustą aplikację internetową, musimy dołączyć stronę internetową, która byłaby stroną początkową naszej aplikacji.

Krok 3: Dodaj odniesienia Ext Js do pliku Default.aspx

Ten krok pokazuje, w jaki sposób korzystamy z biblioteki extJS. Jak pokazano na zrzucie ekranu w pliku Default.aspx, właśnie odniosłem 3 pliki:

• ext-all.js
• ext-all.css
• app.js

Sencha współpracuje z CacheFly, globalną siecią treści, aby zapewnić bezpłatny hosting CDN dla środowiska ExtJS. W tym przykładzie wykorzystałem bibliotekę CDN Ext, jednak moglibyśmy użyć tych samych plików (ext-all.js i ext-all.css) z naszego katalogu projektu lub jako kopie zapasowe na wypadek, gdyby CDN było niedostępne.

Odwołując się do pliku app.js, zostałby załadowany do przeglądarki i byłby punktem wyjścia dla naszej aplikacji.

Oprócz tych plików mamy symbol zastępczy, w którym będzie renderowany interfejs użytkownika. W tym przykładzie mamy div z identyfikatorem „spacja”, którego użyjemy później do renderowania interfejsu użytkownika.

<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 

<link rel="stylesheet" type="text/css" 

href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>

<script src="app/app.js"></script> 

Krok 4: Dodaj folder aplikacji i plik app.js do swojego projektu internetowego

ExtJS zapewnia nam sposób zarządzania kodem we wzorcu MVC. Jak pokazano na zrzucie ekranu, mamy folder kontenera dla naszej aplikacji ExtJS, w tym przypadku „aplikacji”. Ten folder będzie zawierał cały nasz kod aplikacji podzielony na różne foldery, tj. Model, widok, kontroler, sklep itp. Obecnie ma tylko plik app.js.

Krok 5: Napisz swój kod w app.js

App.js jest punktem wyjścia dla naszej aplikacji; dla tego przykładu użyłem minimalnej konfiguracji wymaganej do uruchomienia aplikacji.

Ext.application reprezentuje aplikację ExtJS, która wykonuje kilka czynności. Tworzy zmienną globalną „ SenchaApp ” podaną w konfiguracji nazwy, a wszystkie klasy aplikacji (modele, widoki, kontrolery, sklepy) będą znajdować się w pojedynczej przestrzeni nazw. Uruchomienie to funkcja, która jest wywoływana automatycznie, gdy cała aplikacja jest gotowa (wszystkie klasy są ładowane poprawnie).

W tym przykładzie tworzymy panel z pewną konfiguracją i renderujemy go na symbolu zastępczym, który podaliśmy w pliku Default.aspx.

Ext.application({
    name: 'SenchaApp',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: 'Sencha App',
            width: 300,
            height: 300,
            bodyPadding:10,
            renderTo: 'whitespace',
            html:'Hello World'
        });
    }
});

Zrzut ekranu wyjścia

Po uruchomieniu tej aplikacji internetowej ze stroną Default.aspx jako stroną startową w przeglądarce pojawi się następujące okno.