Share
Salut les gars, Levi Hackwith ici. Aujourd'hui, nous allons discuter de la quatrième version du framework JavaScript, ExtJS. Nous allons couvrir ce que c'est, comment l'installer, puis nous allons montrer la puissance d'ExtJS en constituant une grille de données robuste utilisant des exemples de données que j'ai rassemblés..
Ce tutoriel comprend un screencast disponible pour les membres Tuts + Premium.
Commençons donc par examiner ce qu’est réellement ExtJS. ExtJS, développé par une société appelée Sencha, est un framework JavaScript spécialement conçu pour la construction d'applications Web. La principale différence entre un framework JavaScript tel qu'ExtJS et une bibliothèque JavaScript telle que jQuery est ExtJS est destiné à être utilisé pour créer des applications entières - tous les outils dont vous avez besoin se trouvent dans le framework -, tandis que jQuery est conçu pour être placé dans un site existant. ajouter des fonctionnalités.
"La principale différence entre un framework JavaScript tel qu'ExtJS et une bibliothèque JavaScript telle que jQuery est ExtJS est destiné à être utilisé pour créer des applications entières - tous les outils dont vous avez besoin se trouvent dans le framework - tandis que jQuery est conçu pour être placé dans un site existant ajouter des fonctionnalités? "
Pour installer ExtJS, vous devez d’abord le télécharger sur le site Web de Sencha. Rendez-vous sur http://www.sencha.com/products/extjs et cliquez sur le bouton "Télécharger" dans le coin supérieur droit. Sur cette page, vous verrez une section intitulée "Travailler en Open Source?" suivi d'un lien pour télécharger ExtJS 4.0.2a - la dernière version. Allez-y et cliquez sur ce lien et le téléchargement commencera sous peu. Maintenant, vous remarquerez que le téléchargement est assez volumineux, plus de 30 mégaoctets. En effet, le fichier zip que vous avez téléchargé contient non seulement les fichiers de la structure ExtJS, mais également tous les exemples et la documentation que vous trouverez également sur le site Web de Sencha. En outre, il contient également plusieurs versions du framework: une version entièrement documentée et décompressée à des fins de développement et une version réduite et compressée pour une utilisation sur les systèmes de production. Une fois le fichier zip téléchargé, extrayez son contenu, prenez le dossier qu'il crée et chargez-le sur votre site Web, comme je l'ai fait ici. Remarquez que j'ai renommé le dossier simplement "extjs" - en minuscule. Cela facilitera la référence ultérieure.
Maintenant que nous avons passé en revue certaines informations de base et que le cadre a été téléchargé sur notre site Web, commençons à coder. Comme vous pouvez le constater à partir des fichiers de projet situés à gauche, j'ai déjà défini une structure de dossiers de base pour notre application, ainsi que créé une page index.html et un fichier JavaScript vierge script.js. La page HTML est l'endroit où nous allons inclure tous les scripts nécessaires que nous avons téléchargés précédemment et le fichier JavaScript est l'endroit où nous allons mettre tout notre code d'application..
Commençons par ouvrir le fichier index.html. Comme vous pouvez le constater, j'ai déjà configuré une page HTML de base à l'aide du doctype HTML5. Maintenant, je vais vous parler des fichiers nécessaires pour créer une application ExtJS, ainsi que de la façon de les inclure..
La première chose à inclure est le fichier CSS. Sans ce fichier, notre application ne se présentera pas correctement lors du rendu..
Ensuite, nous devons inclure les fichiers JavaScript nécessaires. Le premier fichier que nous allons inclure est ext-all-debug; c'est la bibliothèque entière ExtJS, non compressée. Deuxièmement, nous voulons inclure notre fichier script.js. Rappelez-vous que c’est le fichier dans lequel tout notre code d’application va aller..
Maintenant que nous avons inclus tous les fichiers nécessaires, commençons le codage. La première chose à faire est de s’assurer que tout le code que nous écrivons est activé une fois le chargement de la page Web terminé. Nous allons donc envelopper tout notre code dans un appel à la fonction Ext.onReady. Ajoutez ce qui suit au fichier script.js:
Ext.onReady (function () );
Maintenant, il y a deux choses que je veux souligner à propos de cette partie de code: premièrement, nous passons une fonction entière dans un appel de méthode (onReady). C'est ce qu'on appelle un rappel: une fonction qui est appelée dès qu'une autre tâche est terminée - dans notre cas, le chargement de la page est terminé. Deuxièmement, vous remarquerez que j'ai préfacé cet appel de méthode avec "Ext". Cela s'appelle un espace de noms. Un espace de noms est un moyen de contenir des variables et des méthodes dans des conteneurs distincts afin d'éviter des problèmes tels que la collision de variables. ExtJS s'appuie fortement sur les espaces de noms pour fonctionner correctement. En fait, chaque appel de méthode dans ExtJS est contenu dans au moins un espace de nom: Ext. Vous serez exposé à des exemples plus complexes d'utilisation des espaces de noms au fur et à mesure de la progression de ce tutoriel.
Ok, maintenant que nous avons configuré notre méthode onReady, déclarons notre dataGrid. Mettez à jour votre fichier script.js avec les éléments suivants:
Accentsconagua
Ext.onReady (function () Ext.create ('Ext.grid.Panel', );); Nous déclarons ici une nouvelle instance ou copie d'une grille de données ExtJS en transmettant l'espace de noms complet 'Ext.grid.Panel' à la méthode "create". A présent, vous remarquerez également les accolades vides que j'ai transmises. En JavaScript, une paire d'accolades vides signifie un objet vide. Dans ExtJS, lorsque vous créez une grille de données (ou tout autre objet) à l'aide de la méthode "create", vous devez transmettre les paramètres ou - en termes ExtJS - la configuration de cet objet en transmettant un objet JavaScript avec des propriétés représentant le propriétés de la grille que nous créons. Maintenant, si cela semble un peu déroutant, cela aura plus de sens à mesure que je configurerai la grille de données. Allons-y et faisons ça maintenant:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', magasin: Ext.create ('Ext.data.Store', ));) Comme vous pouvez le constater, nous avons ajouté une propriété appelée "magasin" à notre grille de données et nous lui avons attribué une instance d'un nouvel objet, un magasin. Dans ExtJS, le but d’une grille de données est d’afficher des données, et ces données doivent provenir de quelque part: un magasin.
Un magasin est, pour la plupart, juste une collection de disques. L'application de contact de votre smartphone pourrait être un exemple plus réaliste. La partie de l'application qui vous permet de voir vos contacts est la grille et la partie de l'application qui remplit cette liste de contacts est le magasin..
Ext.onReady (function () Ext.create ('Ext.grid.Panel', magasin: Ext.create ('Ext.data.Store', fichier: ext.data.Store ', fichier: nom:' id ', type:' int ' ', name:' first_name ', tapez:' chaîne ', name:' last_name ', tapez:' string ', name:' dob ', tapez:' date ', dateFormat:' Ymd ' ]));); Comme vous pouvez le constater, nous avons ajouté une propriété appelée "champs" à notre objet magasin. Les champs ressemblent aux en-têtes de colonne d'une feuille de calcul. Si chaque ligne de la feuille de calcul correspond à un enregistrement, chaque colonne - ou champ - de la feuille de calcul représente une propriété de cet enregistrement. Pour notre exemple d’aujourd’hui, nous allons créer une grille de données remplie de contacts. Ainsi, chaque enregistrement du magasin aura: un ID fournissant simplement un identifiant unique pour chaque enregistrement, un prénom, un nom de famille et une date de naissance. Comme vous pouvez le constater, pour chaque champ, nous avons spécifié une propriété 'name' et une propriété 'type'. Ces propriétés sont assez simples: nous disons simplement à notre magasin de quel type de champ il s’agit et comment il doit s’appeler. Maintenant, quand vous arrivez au champ dob - ou date de naissance -, vous remarquerez que nous avons défini un type de "date" pour indiquer un champ de date - rien de vraiment déplacé - mais nous avons également ajouté une propriété 'dateFormat'. Cette propriété indique au magasin que le champ dob stockera sa valeur de date au format année, mois et jour. Cela peut sembler étrange maintenant, mais cela deviendra assez important une fois que nous aurons commencé à installer le reste de la grille..
Maintenant que nous avons configuré notre magasin et ajouté quelques champs, allons-y et complétons-le avec des données:
Ext.onReady (function () Ext.create ('Ext.grid.Panel', magasin: Ext.create ('Ext.data.Store', fichier: ext.data.Store ', fichier: nom:' id ', type:' int ' ', name:' first_name ', tapez:' chaîne ', name:' last_name ', tapez:' string ', name:' dob ', tapez:' date ', dateFormat:' Ymd ' ], data: ['id': 1, 'prénom_nom': 'Jean', 'dernier_nom': 'Smith', 'dob': '1950-03-04', id: 2, 'prénom_nom': 'Jane', 'last_name': 'Doe', 'dob': '1960-07-24'););); Ce que nous avons fait ici consiste essentiellement à remplir notre magasin avec des exemples de données en utilisant les champs définis précédemment comme modèle. Si vous regardez de plus près, vous remarquerez que les noms de propriété dans les données correspondent aux noms de champ dans la propriété 'fields' du magasin. Ceci est appelé "cartographie". Nous mappons les données de la propriété data vers les champs associés dans la propriété 'fields' du magasin. Notez également que nous avons veillé à ce que les types de données des données correspondent aux types de données du magasin. Si vous les confondez, les choses risquent de ne pas se charger correctement.
Ok, c'est tout ce dont nous avons besoin pour configurer le magasin de la grille, revenons à la configuration de la grille elle-même. La prochaine chose que nous voulons mettre en place dans notre grille sont les colonnes. C’est exactement ce que cela ressemble: nous allons définir quelles colonnes seront affichées lorsque notre grille sera chargée..
Ext.onReady (function () Ext.create ('Ext.grid.Panel', width: '30% ', store: Ext.create (' Ext.data.Store ', champs: [name:' id ', type:' int ', nom:' prénom ', type:' chaîne ', nom:' dernier ', type:' chaîne ', nom:' dob ', type:' date ' , dateFormat: 'Ymd'], données: ['id': 1, 'prénom_nom': 'John', 'dernier_nom': 'Smith', 'dob': '1950-03-04', id : 2, 'first_name': 'Jane', 'Last_name': 'Doe', 'dob': '1960-07-24']), colonnes: [en-tête: 'ID', dataIndex: 'id' , en-tête: 'Prénom', dataIndex: 'prénom_', en-tête: 'Nom de famille', dataIndex: 'nom_dernier', header: 'Date de naissance', dataIndex: 'dob', format: ' m / d / Y ', type:' colonne de données ']);); Comme nous l'avons fait précédemment, nous avons déclaré la propriété - "columns" - et passé un tableau d'objets, chaque objet représentant une seule colonne dans la grille. Notez que chaque colonne contient au moins deux propriétés: 'en-tête' et 'dataIndex'. En-tête spécifie ce qui sera affiché comme en-tête de colonne dans la grille (ce que l'utilisateur verra); dataIndex mappe cette colonne sur un champ particulier du magasin. Et c'est tout! C'est tout ce que vous devez faire pour construire une grille de données.
Avant de pouvoir dire que nous avons complètement terminé, nous devons toutefois afficher la grille à l'écran. Pour ce faire, stockons notre grille dans une variable que nous pourrons réutiliser plus tard:
? var grid = Ext.create ('Ext.grid.Panel', ? Tout ce que nous disons ici est "Grille, restituer au corps du document HTML" - assez simple. Allez-y, actualisez notre fichier index.html et voyez comment nous en sommes parvenus. Comme vous pouvez le constater, en moins de 30 minutes, nous avons créé une grille de données robuste dotée de toutes ces fonctionnalités: nous pouvons afficher et masquer des colonnes, trier les données et réorganiser les colonnes. C'est le pouvoir d'ExtJS!
Dans Review, nous avons expliqué ExtJS, la différence entre une bibliothèque et un framework, comment télécharger et installer ExtJS, et comment définir et configurer un objet ExtJS - dans ce cas une grille de données..
Si vous souhaitez en savoir plus sur ExtJS et lire la documentation, je vous suggère fortement de vous rendre sur le site sencha.com. site Web et consultez la documentation de leur API pour ExtJS 4. Vous trouverez ici toutes les informations dont vous avez besoin pour commencer à développer vos propres applications. Si vous êtes bloqué, vous pouvez consulter les forums de sencha.com et leur demander de l’aide, ou tout autre site de programmation doté d’un forum..
