L’invention d’Internet a été l’un des événements les plus influents de l’histoire de l’humanité. Il n’y a pratiquement aucun aspect de notre civilisation que le Web n’ait affecté d’une manière ou d’une autre. Compte tenu de son effet massif sur la façon dont nous vivons nos vies, il n’est guère surprenant que les technologies qui ont contribué à intégrer Internet dans le courant dominant soient importantes en elles-mêmes. Bien que la liste comprenne de nombreuses technologies, le véritable fondement de l’Internet d’aujourd’hui réside dans les langages qui le rendent possible : HTML, CSS et JavaScript.
HTML traite de la structure des sites Web et de leur interaction avec d’autres parties du Web. CSS tourne autour de l’esthétique des sites Web. Cependant, JavaScript rend possibles les principales fonctionnalités du Web. Il pilote les principales capacités du Web et contrôle sa conception et son flux de travail.
Essentiellement, vous pouvez utiliser des frameworks JavaScript pour écrire le comportement d’un site Web ainsi que son style et ses éléments visuels.
Les grilles JavaScript sont l’un des exemples les plus courants de la façon dont JavaScript permet aux développeurs de créer des fonctionnalités uniques dans un site Web. À l’aide de grilles et de la syntaxe familière de JavaScript, les développeurs peuvent afficher les données de manière claire et concise. Parce que la grille est si indispensable, tous les frameworks robustes, comme Sencha ExtJS, offrent une interface intuitive pour les créer.
Dans cet article, nous examinerons comment les grilles JS ont évolué au fil des ans et nous donnerons une idée de la façon dont les utilisateurs d’Ext JS exploitent cet outil.
Comment les grilles ont-elles évolué au cours de l’histoire de JS ?
La grille JavaScript est née d’un besoin de gérer et d’afficher plus efficacement les données dans des tableaux sur des sites Web. Avant son introduction, la plupart des solutions nécessitaient une programmation de feuilles de style CSS complexe et étendue. Inutile de dire que cela est vite devenu fastidieux.
En plus d’être complexe à écrire, le taux d’échec sur les sites CSS était élevé. Des sites Web entiers tomberaient en panne sous la charge d’afficher de grandes quantités de données. Avec JS Grids, cependant, les développeurs pouvaient simplement charger des données dans un tableau et les montrer à l’utilisateur final.
Au fil des ans, les grilles JS sont devenues bien plus que de simples conteneurs pour les tableaux de données. Les grilles prennent désormais en charge des capacités avancées de gestion et de traitement des données. Les grilles les plus récentes prennent généralement en charge les fonctionnalités des tableurs populaires, tels que Microsoft Excel. Ces capacités incluent le filtrage des données, la liaison de données et l’agrégation de lignes et de lignes de données – et ce n’est que la pointe de l’iceberg. Le développement des grilles JS reflète étroitement la propre croissance de JavaScript car cela papier blanc discute.
Une grille JS populaire est le plugin TypeScript Grille.js. Bien qu’il soit de taille économique (seulement 12 Ko avec tous les plugins !), il contient beaucoup de puissance de traitement. Il arbore un pipeline interne avec une mise en cache optimisée et un large support dans tous les frameworks comme Rue ou Angular.js. Plus important encore, cela ne vous enferme pas dans un fournisseur en particulier. En plus de ses nombreux avantages, il est également libre d’utilisation et s’intègre étroitement avec d’autres composants grâce à son architecture Flux.
Les grilles JS ont parcouru un long chemin depuis leurs origines en tant que fonctionnalités rares et complexes jusqu’à leur état actuel en tant que plugin open source gratuit. Avec une communauté de développeurs dédiée travaillant à améliorer continuellement ses capacités de traitement, la grille JS devient plus robuste chaque année.
Comment ExtJS offre-t-il un support pour les grilles JS ?
Ce n’est pas un choc qu’un puissant framework JS comme Sencha ExtJS offre un moyen simple d’intégrer des grilles JS dans votre application. Vous pouvez facilement utiliser l’interface Ext.grid.Panel pour intégrer les grilles JS et le traitement des données dans vos applications. Les développeurs considèrent largement Sencha ExtJS comme interface JS Grid préférée.
Voyons comment cela fonctionne. UNE Panneau L’instance prend les données stockées sous forme de collections d’enregistrements dans une instance Ext.data.Store. Pour commencer à créer votre propre Ext.grid.Panel, vous devez stocker vos données à l’aide de Ext.data.Store. Vous spécifiez ensuite le schéma des données à l’aide de Ext.data.Model. Par exemple, voici un exemple de modèle de données d’une table.
Ext.define(‘Pays’, {
étendre: ‘Ext.data.Model’,
des champs: [ ‘name’, ‘capital’, ‘currency’ ]
});
Une fois le modèle créé, le chargement des données dans une instance Ext.data.Store ne nécessite que quelques instructions.
var countryStore = Ext.create(‘Ext.data.Store’, {
modèle : ‘Pays’,
Les données: [
{ name: ‘USA’, capital: ‘Washington D.C.’, currency: ‘US Dollar’ },
{ name: ‘Japan’, capital: ‘Tokyo’, currency: ‘Japanese Yen’ },
{ name: ‘Australia’, capital: ‘Canberra’, currency: ‘Australian Dollar’},
{ name: ‘Germany’, capital: ‘Berlin’, currency: ‘Euro’ },
]
});
Maintenant que votre modèle de données et vos enregistrements de données sont verrouillés et prêts, il est temps de définir votre grille et ses propriétés. Avec l’instruction suivante, vous pouvez préparer votre grille pour le rendu.
Ext.create(‘Ext.grid.Panel’, {
renderTo : document.body,
magasin: countryStore,
largeur : 400,
hauteur: 200,
titre : ‘Pays’,
Colonnes: [
{
text: ‘Name’,
width: 100,
sortable: false,
hideable: false,
dataIndex: ‘name’
},
{
text: ‘Capital’,
width: 150,
hideable: false,
dataIndex: ‘capital’
},
{
text: ‘Currency’,
hideable: false,
dataIndex: ‘currency’
}
]
});
Juste comme ça, vous avez terminé! Vous disposez maintenant d’une grille de données navigable avec des colonnes rendues selon vos spécifications. Bien que cet exemple fonctionne principalement avec des données textuelles, vous pouvez facilement stocker tous les types de données tels que les adresses e-mail ou les numéros de téléphone.
Sencha ExtJS simplifie la complexité du travail avec les grilles JS. Il fournit des méthodes adaptables qui mettent toute sa puissance de traitement à portée de main. Par exemple, vous pouvez rendre les cellules d’une colonne particulière modifiables en spécifiant l’attribut editor lorsque vous définissez la colonne. Vous pouvez également contrôler ce que taper de données que l’éditeur autorise dans la cellule. De même, l’édition d’une ligne entière est également possible avec Ext.grid.plugin.RowEditing.
Quels sont quelques exemples de grilles JS avancées via ExtJS ?
Compte tenu de l’importance des données aujourd’hui, les créateurs de framework ont réalisé que les utilisateurs auraient besoin de l’interface JS Grid pour de nombreux cas d’utilisation différents. En plus d’afficher du texte simple ou des données numériques, les développeurs ont besoin d’une représentation plus complexe. C’est pourquoi les nouvelles versions de Sencha ExtJS étendent son implémentation JS Grid avec un large éventail de nouvelles fonctionnalités.
Jetons un coup d’oeil maintenant.
Widgets et composants dans les cellules de grille
Avec les récentes mises à jour d’ExtJS, vous pouvez afficher bien plus que des données ordinaires dans des grilles. Vous pouvez maintenant configurer vos propres widgets et les inclure dans les cellules. Ces widgets peuvent également inclure différents types de graphiques ou de curseurs pour élargir ou réduire la quantité de cellules de données agrégées.
Avec nos nouveaux widgets, les utilisateurs d’ExtJS peuvent facilement répondre à leurs besoins de visualisation de données. Par exemple, vous pouvez facilement placer des grilles et des tableaux de bord les uns à côté des autres. Grâce au haut niveau de familiarité et de contrôle offert par JavaScript, vous n’avez pas besoin d’outils de BI compliqués pour une analyse rapide des données.
Exportation de données externes dans ExtJS
Comme vous le savez, il existe sur le marché des outils d’analyse et de test de données autonomes. Si vous le souhaitez, vous pouvez effectuer une analyse plus complexe dans ces outils et apporter les données et les visualisations nettoyées sur le Web avec ExtJS. Grâce au package ExtJS Exporter, vous pouvez utiliser son flux de travail concis pour simplifier le transfert de données et l’importation et l’exportation depuis ExtJS.
Pour commencer dans ExtJS, importez simplement le package Exporter. Ensuite, vous pouvez spécifier comment vous souhaitez exporter vos données. Vous pouvez également utiliser Exporter pour manipuler des fichiers ou contrôler chaque aspect de votre importation ou exportation de données.
Les grilles JS sont largement utilisées aujourd’hui et via l’implémentation simple mais puissante du framework Sencha ExtJS. De plus en plus de développeurs s’habituent aux grilles JS.
Prêt à commencer avec Sencha Ext JS ? Rendez-vous sur Sencha Ext JS et créez vos propres applications avec Sencha maintenant.
Cet article vous a été présenté par l’équipe de Sencha.
Image en vedette : Gabriel Heinzer, Unsplash.