Share
Ciao ragazzi, Levi Hackwith qui. Oggi parleremo della versione quattro del framework JavaScript, ExtJS. Copriremo cosa è, come installarlo e poi mostreremo la potenza di ExtJS mettendo insieme una robusta griglia di dati usando alcuni dati di esempio che ho messo insieme.
Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.
Quindi iniziamo esaminando cosa sia in realtà ExtJS. ExtJS, sviluppato da una società chiamata Sencha, è un framework JavaScript appositamente progettato per la creazione di applicazioni web. La principale differenza tra un framework JavaScript come ExtJS e una libreria JavaScript come jQuery è ExtJS è pensata per essere utilizzata per costruire intere applicazioni - tutti gli strumenti necessari sono presenti all'interno del framework - mentre jQuery è progettato per essere inserito in un sito esistente per aggiungere funzionalità.
"La differenza principale tra un framework JavaScript come ExtJS e una libreria JavaScript come jQuery è ExtJS è pensata per essere utilizzata per costruire intere applicazioni - tutti gli strumenti necessari sono presenti all'interno del framework - mentre jQuery è progettato per essere inserito in un sito esistente aggiungere funzionalità? "
Per installare ExtJS, dovremo prima scaricarlo dal sito Web di Sencha. Vai su http://www.sencha.com/products/extjs e fai clic sul pulsante "Download" nell'angolo in alto a destra. In questa pagina, vedrai una sezione intitolata "Lavorare in Open Source?" seguito da un collegamento per scaricare ExtJS 4.0.2a - l'ultima versione. Vai avanti e clicca su quel link e il download inizierà a breve. Ora, noterai che il download è abbastanza grande, oltre 30 megabyte. Questo perché il file zip scaricato non contiene solo i file framework ExtJS, ma tutti gli esempi e la documentazione che troverete sul sito Web di Sencha. Inoltre, contiene anche diverse versioni del framework: una completamente documentata e non compressa per l'utilizzo dello sviluppo e una che è stata ridotta e compressa per l'utilizzo nei sistemi di produzione. Una volta scaricato il file zip, estrarre il suo contenuto e prendere la cartella che crea e caricarlo sul tuo sito web, come ho qui. Si noti che ho rinominato la cartella semplicemente "extjs", tutto in minuscolo. Questo renderà più facile il riferimento in seguito.
Ora che abbiamo consultato alcune informazioni di base e abbiamo caricato il Framework sul nostro sito web, iniziamo a programmare. Ora come puoi vedere dai file di progetto qui a sinistra, ho già impostato una struttura di cartelle di base per la nostra applicazione, oltre a creare una pagina index.html e un file JavaScript script.js vuoto. La pagina HTML è dove inseriremo tutti gli script necessari caricati in precedenza e il file JavaScript è dove inseriremo tutto il nostro codice applicazione.
Iniziamo aprendo il file index.html. Come puoi vedere, ho già impostato una pagina HTML di base utilizzando il doctype HTML5. Ora ho intenzione di parlarvi dei file necessari per creare un'applicazione ExtJS e di come includerli.
La prima cosa che vorremmo includere è il file CSS. Senza questo file, la nostra applicazione non apparirà corretta quando esegue il rendering.
Quindi dobbiamo includere i file JavaScript necessari. Il primo file che includeremo è ext-all-debug; questa è l'intera libreria ExtJS, non compressa. Secondo, vogliamo includere il nostro file script.js. Ricorda che questo è il file in cui verrà inserito tutto il codice dell'applicazione.
Ora che abbiamo incluso tutti i file necessari, iniziamo la codifica. La prima cosa che vogliamo fare è assicurarsi che tutto il codice che scriviamo si accenda dopo che la pagina web ha finito di caricarsi, quindi avvolgeremo tutto il nostro codice in una chiamata alla funzione Ext.onReady. Aggiungi quanto segue al file script.js:
Ext.onReady (function () );
Ora, ci sono due cose che voglio sottolineare su questo pezzo di codice: prima di tutto, stiamo passando un'intera funzione in una chiamata di metodo (onReady). Questo è ciò che viene chiamato un callback: una funzione che viene chiamata non appena viene completata un'altra attività - nel nostro caso, la pagina finisce di caricarsi. In secondo luogo, noterete che ho preceduto questa chiamata di metodo con "Ext" Questo è chiamato spazio dei nomi. Uno spazio dei nomi è un modo per contenere variabili e metodi in contenitori separati al fine di prevenire cose come la collisione di variabili. ExtJS fa molto affidamento sui namespace per funzionare correttamente. Infatti, ogni chiamata di metodo in ExtJS è contenuta in almeno uno spazio dei nomi: Ext. Sarai esposto a esempi più complessi di utilizzo dello spazio dei nomi mentre proseguiamo con questo tutorial.
Ok, ora che abbiamo impostato il nostro metodo onReady, dichiariamo il nostro dataGrid. Aggiorna il tuo file script.js con quanto segue:
Accentsconagua
Ext.onReady (function () Ext.create ('Ext.grid.Panel', );); Qui stiamo dichiarando una nuova istanza, o copia, di una griglia di dati ExtJS passando lo spazio dei nomi completo 'Ext.grid.Panel' al metodo "crea". Ora noterai anche le parentesi vuote che ho passato. In JavaScript, un paio di parentesi vuote indica un oggetto vuoto. In ExtJS, quando crei una griglia di dati (o qualsiasi altro oggetto) usando il metodo "crea", devi passare le impostazioni o - nei termini di ExtJS - la configurazione per quell'oggetto passando un oggetto JavaScript con le proprietà che rappresentano il proprietà della griglia che stiamo creando. Ora, se questo suona un po 'confuso, sarà più sensato quando andrò avanti e configurerò la griglia dei dati. Andiamo avanti e fallo ora:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', ));) Come puoi vedere, abbiamo aggiunto una proprietà chiamata "store" alla nostra griglia di dati e assegnata un'istanza di un nuovo oggetto ad esso - un negozio. In ExtJS, lo scopo di una griglia di dati è quello di visualizzare i dati e che i dati devono provenire da qualche parte: un negozio.
Un negozio è, per la maggior parte, solo una raccolta di documenti. Un esempio più reale di questo potrebbe essere l'app di contatto nel tuo smartphone. La parte dell'app che ti consente di vedere i tuoi contatti è la griglia e la parte dell'app che popola l'elenco di contatti è lo store.
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', campi: [nome: 'id', digitare: 'int ', nome:' first_name ', tipo:' string ', nome:' last_name ', tipo:' string ', nome:' dob ', tipo:' date ', dateFormat:' Ymd ' ]));); Come puoi vedere, abbiamo aggiunto una proprietà chiamata "campi" all'oggetto del nostro negozio. I campi sono come le intestazioni di colonna in un foglio di calcolo. Se ogni riga del foglio di calcolo è un record, ogni colonna o campo nel foglio di calcolo rappresenta una proprietà di quel record. Per il nostro esempio di oggi, creeremo una griglia di dati piena di contatti, quindi ogni record nel negozio avrà: un ID che fornisce semplicemente un identificativo univoco per ogni record, un nome, un cognome e una data di nascita Ora come puoi vedere, per ogni campo abbiamo specificato una proprietà "nome" e una proprietà "tipo". Queste proprietà sono piuttosto semplici: stiamo solo dicendo al nostro negozio che tipo di campo è e come dovrebbe essere chiamato. Ora, quando arrivi al campo "dob" o data di nascita, noterai che abbiamo impostato un tipo di "data" per indicare un campo data - niente di veramente fuori luogo - ma abbiamo anche aggiunto una proprietà 'dateFormat'. Questa proprietà indica al negozio che il campo dob memorizzerà il valore della data nel formato anno, mese, giorno. Questo può sembrare strano ora, ma diventerà piuttosto importante una volta che avremo impostato il resto della griglia.
Ora che abbiamo impostato il nostro negozio e aggiunto alcuni campi, procediamo e lo popoliamo con i dati:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', store: Ext.create ('Ext.data.Store', campi: [nome: 'id', digitare: 'int ', nome:' first_name ', tipo:' string ', nome:' last_name ', tipo:' string ', nome:' dob ', tipo:' date ', dateFormat:' Ymd ' ], data: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id: 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']));); Fondamentalmente, ciò che abbiamo fatto qui è riempire il nostro negozio con dati di esempio usando i campi che abbiamo definito precedentemente come modello. Se guardi da vicino, noterai che i nomi delle proprietà nei dati corrispondono ai nomi dei campi nella proprietà 'fields' del negozio. Questo è chiamato 'mappatura'. Stiamo mappando i dati dalla proprietà data, ai campi associati nella proprietà 'fields' del negozio. Nota anche come abbiamo fatto in modo di rendere i tipi di dati dei dati corrispondenti ai tipi di dati del negozio. Se li confondi, le cose potrebbero non essere caricate correttamente.
Ok, questo è tutto ciò che dobbiamo fare per configurare lo store della griglia, torniamo alla configurazione della griglia stessa. La prossima cosa che vogliamo impostare nella nostra griglia sono le colonne. Questo è esattamente ciò che sembra: stiamo impostando quali colonne verranno visualizzate quando la nostra griglia verrà caricata.
Ext.onReady (function () Ext.create ('Ext.grid.Panel', width: '30% ', store: Ext.create (' Ext.data.Store ', fields: [name:' id ', digitare:' int ', nome:' first_name ', digitare:' string ', nome:' last_name ', digitare:' string ', nome:' dob ', digitare:' date ' , dateFormat: 'Ymd'], data: ['id': 1, 'first_name': 'John', 'last_name': 'Smith', 'dob': '1950-03-04', id : 2, 'first_name': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24']), colonne: [header: 'ID', dataIndex: 'id' , header: 'First Name', dataIndex: 'first_name', header: 'Last Name', dataIndex: 'last_name', header: 'Date of Birth', dataIndex: 'dob', formato: ' m / d / Y ', xtype:' datecolumn ']);); Proprio come abbiamo fatto prima, abbiamo dichiarato la proprietà - "colonne" - e passati in una serie di oggetti, ogni oggetto che rappresenta una singola colonna nella griglia. Si noti come ciascuna colonna contenga almeno due proprietà: "intestazione" e "dataIndex". L'intestazione specifica ciò che viene visualizzato come intestazione della colonna nella griglia (ciò che l'utente vedrà); dataIndex associa tale colonna a un campo particolare nel negozio. E questo è tutto! Questo è tutto ciò che devi fare per costruire una griglia di dati.
Prima di poter dire che abbiamo finito, tuttavia, dobbiamo rendere la griglia sullo schermo. Per fare ciò, memorizziamo la nostra griglia in una variabile che possiamo riutilizzare in seguito:
? var grid = Ext.create ('Ext.grid.Panel', ? Tutto quello che stiamo dicendo è "Grid, render al corpo del documento HTML" - Piuttosto semplice. Vai avanti e aggiorna il nostro file index.html e guarda come abbiamo fatto. Come puoi vedere, in meno di 30 minuti abbiamo creato una robusta griglia di dati che ha tutte queste caratteristiche: possiamo mostrare e nascondere le colonne, possiamo ordinare i dati e possiamo riorganizzare le colonne. Questo è il potere di ExtJS!
In Review, abbiamo discusso di ciò che ExtJS è, la differenza tra una libreria e un framework, come scaricare e installare ExtJS, e abbiamo discusso su come definire e configurare un oggetto ExtJS - in questo caso una griglia di dati.
Se desideri saperne di più su ExtJS e leggi la documentazione, ti suggerisco caldamente di andare su sencha.com sito Web e guarda i loro documenti API per ExtJS 4. Qui troverai tutte le informazioni necessarie per iniziare a sviluppare le tue applicazioni. Se rimani bloccato, puoi dare un'occhiata ai forum di sencha.com e chiedere aiuto o qualsiasi altro sito di programmazione che abbia una bacheca.
