extjs Tutorial
Iniziare con extjs

Osservazioni

Versioni

Creazione di un'applicazione Hello World - Via Sencha Cmd

Questo esempio dimostra come creare un'applicazione di base in ExtJS usando Sencha Cmd per eseguire il bootstrap del processo: questo metodo genererà automaticamente del codice e una struttura a scheletro per il progetto.

Aprire una finestra della console e modificare la directory di lavoro in uno spazio appropriato in cui lavorare. Nella stessa finestra e directory, eseguire il seguente comando per generare una nuova applicazione.

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

Nota: il flag -sdk specifica la posizione della directory estratta dall'archivio framework.

In ExtJS 6+ Sencha ha unito i framework ExtJS e Touch in un singolo codebase, differenziato rispettivamente dai termini classico e moderno . Per semplicità, se non si desidera scegliere come target i dispositivi mobili, è possibile specificare un ulteriore flag nel comando per ridurre l'ingombro nell'area di lavoro.

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

Senza alcuna ulteriore configurazione, un'applicazione demo completamente funzionale dovrebbe ora risiedere nella directory locale. Ora cambia la directory di lavoro nella nuova directory del progetto HelloWorld ed esegui:

> sencha app watch

In questo modo, il progetto viene compilato utilizzando il profilo di build predefinito e viene avviato un semplice server HTTP che consente la visualizzazione dell'applicazione localmente tramite un browser web. Di default sulla porta 1841 .

Installazione e configurazione

L'uso tipico di ExtJS sfrutta il framework per creare applicazioni rich (RIA) a pagina singola. Il modo più semplice per iniziare è utilizzare Sencha Cmd , uno strumento di compilazione CLI che copre la maggior parte delle preoccupazioni generali in un ciclo di vita dell'implementazione, principalmente:

• gestione dei pacchetti e delle dipendenze
• compilazione del codice / bundling e minification
• gestione di strategie di costruzione per diversi target e piattaforme

» Scarica Sencha Cmd

Il secondo passo è scaricare l'SDK, ExtJS è un prodotto commerciale - per ottenerne una copia, una:

• accedi a Sencha Supporto per la versione delle licenze commerciali ( pagina prodotto )
• richiedere una copia di valutazione valida per 30 giorni
• richiedere la versione GPL v3 disponibile per progetti open-source
  (nota che potresti non essere in grado di accedere alla versione più recente con questa opzione)

Dopo aver scaricato l'SDK assicurarsi che l'archivio sia estratto prima di procedere.

Nota : consultare la documentazione ufficiale introduttiva per una guida completa ai progetti ExtJS.

Dopo aver installato Sencha Cmd, è possibile verificare la disponibilità aprendo una finestra della console ed eseguendo:

> sencha help

Ora disponiamo degli strumenti necessari per creare e distribuire applicazioni ExtJS, prendere nota della posizione della directory in cui è stato estratto l'SDK poiché ciò sarà richiesto in ulteriori esempi.

Creazione di un'applicazione Hello World - Manualmente

Iniziamo ad usare ExtJS per costruire una semplice applicazione web.

Creeremo una semplice applicazione web che avrà solo una pagina fisica (aspx / html). Come minimo, ogni applicazione ExtJS conterrà un file HTML e un file JavaScript, in genere index.html e app.js.

Il file index.html o la tua pagina predefinita includerà i riferimenti al codice CSS e JavaScript di ExtJS, insieme al tuo file app.js contenente il codice per la tua applicazione (fondamentalmente il punto di partenza della tua applicazione web).

Creiamo una semplice applicazione web che utilizzerà i componenti della libreria ExtJS:

Passaggio 1: creare un'applicazione Web vuota

Come mostrato nello screenshot, ho creato un'applicazione web vuota. Per semplificare, puoi utilizzare qualsiasi progetto di applicazione web nell'editor o IDE di tua scelta.

Passaggio 2: aggiungere una pagina Web predefinita

Se hai creato un'applicazione web vuota, dobbiamo includere una pagina web che sarebbe la pagina iniziale della nostra applicazione.

Passaggio 3: aggiungere riferimenti Ext Js a Default.aspx

Questo passaggio mostra come utilizziamo la libreria extJS. Come mostrato nello screenshot in Default.aspx, ho appena chiamato 3 file:

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

Sencha ha collaborato con CacheFly, una rete di contenuti globale, per fornire hosting CDN gratuito per il framework ExtJS. In questo esempio ho usato la libreria CDN di Ext, tuttavia potremmo usare gli stessi file (ext-all.js ed ext-all.css) dalla nostra directory del progetto o come backup nel caso in cui il CDN non fosse disponibile.

Facendo riferimento a app.js, verrebbe caricato nel browser e sarebbe il punto di partenza per la nostra applicazione.

Oltre a questi file, abbiamo un segnaposto in cui verrà resa l'interfaccia utente. In questo esempio, abbiamo un div con id "spazio bianco" che useremo in seguito per rendere l'interfaccia utente.

<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> 

Passaggio 4: aggiungi cartella app e app.js nel tuo progetto web

ExtJS ci fornisce un modo per gestire il codice in un pattern MVC. Come mostrato nello screenshot, abbiamo una cartella contenitore per la nostra applicazione ExtJS, in questo caso 'app'. Questa cartella conterrà tutto il codice dell'applicazione diviso in varie cartelle, ad esempio, modello, vista, controller, archivio, ecc. Attualmente, ha solo il file app.js.

Passaggio 5: scrivi il tuo codice in app.js

App.js è il punto di partenza della nostra applicazione; per questo esempio ho appena usato la configurazione minima richiesta per avviare l'applicazione.

Ext.application rappresenta un'applicazione ExtJS che fa diverse cose. Crea una variabile globale ' SenchaApp ' fornita nella configurazione del nome e tutte le classi dell'applicazione (modelli, viste, controllori, negozi) risiederanno nello spazio dei nomi singolo. Launch è una funzione che viene chiamata automaticamente quando tutta l'applicazione è pronta (tutte le classi sono state caricate correttamente).

In questo esempio, stiamo creando un pannello con qualche configurazione e lo rendiamo sul segnaposto che abbiamo fornito nel file 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'
        });
    }
});

Schermata di output

Quando si esegue questa applicazione Web con Default.aspx come pagina di avvio, nel browser verrà visualizzata la seguente finestra.