Comment construire React 16 applications Web avec la grille Sencha

Gérer et afficher efficacement les grands ensembles de données dans les applications React 16 avec Sencha Extreact Grid, profitant de fonctionnalités intégrées telles que le tri, le filtrage et l'édition, sans avoir besoin de nombreuses opérations DOM.

Points clés:

• Gérer et afficher efficacement les grands ensembles de données dans les applications React 16 avec Sencha Extreact Grid, exploitez des fonctionnalités intégrées telles que le tri, le filtrage et l'édition, sans avoir besoin de nombreuses opérations DOM.
• Simplifiez le processus de développement avec le package NPM Extrect et le générateur d'applications Extrect.
• Améliorez l'interface utilisateur en intégrant des composants interactifs tels que les boutons et les diagrammes de ligne d'éclat directement dans les cellules de la grille, offrant une expérience utilisateur dynamique et réactive.
• Utilisez le plug-in Exportateur de grille pour activer la fonction d'exportation de données avec juste une petite quantité de code, permettant aux utilisateurs d'exporter des données directement à partir de la grille vers le format Excel ou CSV.
• Utilisez des plugins conditionnels et des fonctionnalités de conception réactives pour optimiser les applications pour les plates-formes de bureau et mobiles afin d'assurer une expérience utilisateur multiplateforme transparente.

Cet article a été initialement publié dans Sencha. Merci de soutenir les partenaires qui ont rendu le point de point possible.

React 16 est la première version React construite sur la nouvelle architecture de base de React (nommé "fibre". React 16 est fondamentalement conçu pour prendre en charge le rendu asynchrone, ce qui permet de traiter les grands arbres de composants sans bloquer le fil d'exécution principal. Il prend en charge de nombreuses fonctionnalités clés telles que la capture d'exceptions avec des limites d'erreur, le renvoi de plusieurs composants du rendu, la réduction de la taille du fichier et la prise en charge des licences MIT.

Si vous développez une application Web basée sur les données à l'aide de React 16, il existe une forte probabilité que vous utiliserez une interface de grille ou de feuille de calcul pour afficher les données utilisateur à un moment donné. Selon la situation, vos utilisateurs peuvent vouloir que la grille de l'application puisse:

• Faites défiler avec un titre fixe
• Trier en cliquant sur le titre de la colonne
• afficher et masquer des colonnes spécifiques
• Paging, regroupement et résumé
• Modifier les données dans une cellule
• Exporter vers Excel
• Extension approfondie / ligne

Le maillage est probablement l'un des composants d'interface utilisateur les plus difficiles et les plus complexes de React, car bon nombre des caractéristiques nécessaires nécessitent beaucoup d'expertise REACT, ainsi que la volonté et la capacité de se plonger dans le DOM en profondeur. Heureusement, Extrect Grid offre toutes ces fonctionnalités et plus encore.

Dans cet article, nous utiliserons Sencha Extreact Grid pour créer un exemple qui affiche des informations sur les actions et les sociétés de stock. Si vous souhaitez écrire une grille à l'aide de tables HTML ou d'autres composants tiers, vous devrez peut-être faire des choses comme la manipulation de cliquer sur l'en-tête de la colonne pour le tri, en cliquant sur le séparateur entre les en-têtes de colonne pour redimensionner ou glisser le téléavertisseur et obtenir le Pager et obtenir le séparateur opérations suivantes telles que les données de page. Avec une grille Extreact, ces fonctionnalités sont intégrées. Vous voulez l'essayer vous-même? Commencez avec l'essai gratuit de 30 jours d'Extrect maintenant - inscrivez-vous ici.

Commençons à créer des applications à l'aide d'une grille Extrect.

En démarrage avec Extreacte Générateur d'applications

Pour commencer à développer une application React à l'aide de composants Extreacts, suivez ces étapes:

Assurez-vous que vous avez configuré un environnement de nœud

Tout d'abord, assurez-vous que le nœud 8.11 et le NPM 6 sont définis sur votre système. Vous pouvez télécharger la dernière version du nœud sur le site Web du nœud. Si vous avez déjà installé le nœud, vous pouvez facilement vérifier les versions de nœud et de npm en utilisant la commande suivante:

<code>node -v
npm -v</code>

Obtenez des informations d'identification de connexion pour le référentiel NPM Extrect

Le package NPM Extrect est hébergé dans le référentiel NPM privé de Sencha. Vous n'avez besoin de vous connecter au référentiel qu'une seule fois pour accéder à tous les packages Extrect. Pour obtenir des informations d'identification de connexion, visitez la page d'essai gratuite de 30 jours Extrect et remplissez le formulaire. Nous vous enverrons un e-mail avec des détails de connexion ainsi que certains liens de ressources tels que la documentation et les exemples de projets.

Connectez-vous dans le référentiel NPM Extrect et obtenez le générateur d'application Extreacte

L'étape suivante consiste à se connecter au référentiel NPM privé de Sencha, qui héberge le package Extrect. Utilisez votre connexion NPM (fournie par e-mail) pour associer le référentiel à la portée @Sencha et entrez les informations d'identification lorsqu'elle est invitée:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

L'étape suivante consiste à installer le package du générateur Extrect.

<code>npm install -g @sencha/ext-react-gen</code>

Créez votre première application React

Exécutez le générateur yeoman pour créer votre première application Extreacte:

<code>ext-react-gen app your-app-name-here -i</code>

Le générateur vous demandera de nommer votre application, de nommer le package NPM et de sélectionner le thème. Le thème du matériel par défaut (basé sur le guide de conception de matériel de Google) est un bon thème de départ. Sélectionnez "Générer une application vide". Le générateur vous invitera également à créer un nouveau répertoire pour le projet. Le générateur téléchargera et créera ensuite votre exemple d'application, y compris les dépendances pertinentes.

Exécutez votre application React

Dans la sortie du générateur, vous trouverez les étapes pour exécuter l'application. C'est aussi simple que de passer à votre nouveau répertoire d'application et d'exécuter l'application avec la commande suivante:

<code>npm start</code>

Cela lancera l'application et votre application React vide affichera uniquement le titre de l'application. Le composant principal de l'application (tel que StocksGrid) a un conteneur au répertoire racine qui est marqué en plein écran avec l'ensemble de mise en page à s'adapter, ce qui signifie qu'il étirera ses éléments enfants pour le remplir.

Voir le code avant cette étape sur GitHub.

Ajouter une grille à l'application

Ajouter des données de stock

Nous allons ajouter un exemple de jeu de données à l'application, appelée Stocks.json. Il s'agit d'un ensemble de données assez important avec environ 10 000 lignes de données JSON, chaque ligne représente une entreprise ou un code boursier - nous avons donc le nom de l'entreprise, le code stock, l'industrie, l'industrie dans laquelle ils se trouve à vendre. Ce sont les données que nous afficherons dans la grille. Dans une application réelle, toutes ces données seront renvoyées dans le backend. Nous le chargerons statiquement pour cet exemple d'application, plutôt que d'itréter tous les mécanismes de la façon de construire l'API REST Backend. Mais il se chargera exactement de la même manière que vous obtenez les données du backend réel.

Créez une grille de base

Dans la méthode de rendu des composants StockGrid, nous retournerons une grille avec des colonnes.

Pour placer des colonnes dans la grille, nous utilisons le composant de colonne, qui prend le même DatainDex que le champ Nom de données Stocks. Il prend un texte texte comme texte d'en-tête de colonne, et nous pouvons ensuite spécifier une largeur pour la colonne, comme une largeur ou une flexion fixe, ou une combinaison de flex et une valeur minimale ou maximale. Nous ajouterons des composants de la colonne aux noms de l'entreprise, aux codes, aux cocher, à l'industrie et à l'industrie. Créez une nouvelle classe StocksGrid comme indiqué ci-dessous:

<code>node -v
npm -v</code>

Maintenant, ajoutez StockGrid à l'application de classe comme suit:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

Voir le code avant cette étape sur GitHub. Vous pourrez voir une application Web avec une grille vide sur NPM Start.

lier les données de stock à l'aide de la grille

La grille dans Extrect est un tableau qui extrait et rend les données de l'EXT Data Store. Dans Extreact, notre implémentation de stockage est une structure de données qui vous permet de trier et de filtrer les données pour les grilles ou les composants tels que les listes ou les graphiques.

Nous pouvons maintenant commencer à charger des données de stock et à créer un stockage. De même, la grille obtient toujours ses données du stockage, et une certaine interaction avec la grille déclenchera des événements sur le stockage, tels que le rechargement, le tri ou la pagination. Pour ce faire, nous créerons notre stockage ici.

EXT Le stockage des données est différent du stockage du flux. Ce qui rend le maillage et le stockage légèrement différents de la méthode de réaction standard, c'est que les deux sont étroitement intégrés. En règle générale, vous pouvez transmettre des données directement au stockage, ou le stockage peut extraire des données du backend en soi à l'aide d'un proxy. Avec Extreact Grid, vous obtenez des fonctionnalités interactives telles que le filtrage, le tri, la pagination, le regroupement et le résumé sans réellement écrire de code.

Dans cet exemple, nous transmettons les données directement au stockage à partir du fichier de données Stocks. Vous pouvez également créer un stockage à l'aide de configurations proxy - la possession d'un proxy nous permet d'effectuer une variété de grandes actions telles que la pagination à distance, le filtrage et le tri. Nous définissons AutoloAD sur true afin qu'il charge automatiquement la grille. Les données ne sont spécifiquement triées par aucun critère, nous le trierons donc sur le client en spécifiant l'attribut de nom.

<code>npm install -g @sencha/ext-react-gen</code>

En grille, affectez la configuration du magasin au magasin créé.

<code>ext-react-gen app your-app-name-here -i</code>

Maintenant, nous avons une grille avec toutes les données comme suit:

Avec ce code simple, vous pouvez obtenir de nombreuses fonctionnalités gratuitement, comme le tri - cela vous permet de cliquer sur n'importe quel en-tête de colonne et il triera automatiquement (voir les colonnes symboliques ci-dessous).

Dans ce cas, le tri est effectué du côté client. Cependant, si nous implémentons une véritable API backend, nous pouvons configurer le proxy pour trier à distance en arrière-plan et le trier dans la base de données à l'aide de la clause "Order by".

Vous pouvez également obtenir des colonnes redonnables gratuitement. Donc, même si nous définissons des largeurs sur ces colonnes, si l'utilisateur veut afficher ou fermer quelque chose, il peut le faire en faisant glisser les colonnes à gauche et à droite.

Vous pouvez également obtenir une belle fonctionnalité de groupe. Donc, si nous voulons nous regrouper par industrie, nous pouvons dire le groupe par ce domaine, il regroupera toutes les données par valeur de l'industrie, et lorsque vous faites défiler chaque groupe, cela vous donnera un titre fixe.

Vous remarquerez que pour 10 000 enregistrements, ces données rendent très rapidement. La raison pour laquelle il rend si rapide est qu'il utilise ce que nous appelons le rendu du tampon. Ainsi, même si cette table a l'air pleine et que vous pouvez faire défiler vers le bas et qu'elle continue, elle ne rend qu'un peu plus de contenu que vous ne le voyez réellement dans la "hauteur de la fenêtre" lorsqu'elle se charge initialement.

Lorsque vous faites défiler vers le bas, il remplace en fait le contenu de la cellule par des enregistrements plus récents, tout comme vous pavez en stockage. Il préserve donc autant que possible les éléments DOM et maintient le DOM petit, ce qui rend la consommation de mémoire moins et assurant des performances élevées.

Voir le code avant cette étape sur GitHub.

Set Grid Style

Il existe plusieurs façons de coiffer la grille afin que les données soient plus faciles à analyser.

Utilisation de la cellule Prop

Voyons comment contrôler les styles de cellules. Nous pouvons rendre le nom en gras - le meilleur moyen est d'utiliser un accessoire cellulaire. La cellule utilise un certain nombre de configurations qui contrôlent l'apparence de la cellule. Nous ajouterons une configuration de style ici, puis nous dirons que la police est égale à Bold.

<code>node -v
npm -v</code>

Ajouter le bouton en ligne

Maintenant, nous ferons quelque chose de plus adapté au monde réel. Supposons que nous voulons un bouton que nous pouvons cliquer pour acheter l'une des actions de la colonne à gauche. Pour ce faire, nous pouvons ajouter une colonne, cette fois, nous n'ajouterons pas le DatainDex, car il ne correspond à aucun élément spécifique dans le champ ou aucun champ dans le magasin. Nous ajouterons un widgetcell avec le bouton. Nous ferons quelques styles - nous y ajouterons une interface utilisateur d'action circulaire, donc le bouton aura un look d'action circulaire:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

Le gestionnaire d'achat que nous utiliserons est très simple. Lorsque vous cliquez sur le bouton Acheter, nous utiliserons simplement l'hypothèse appelée Ext.Toast, qui affichera un petit message rapide en haut affichant le code du stock que vous achetez. De même, nous rendrons les colonnes que chaque ligne sera rendue. Nous rendrons ce bouton, puis lorsque vous cliquez dessus, il appellera cette fonction:

<code>npm install -g @sencha/ext-react-gen</code>

Vous pouvez voir à partir de cet exemple que vous pouvez essentiellement intégrer n'importe quel composant Extreacte à l'intérieur de la cellule de grille et qu'il est complètement interactif. Il agit comme un composant React complet.

Voir le code avant cette étape sur GitHub.

Ajouter un graphique de ligne d'étincelle de tendance

Dans les données des actions, nous avons un tableau de tiques des cinq dernières ventes d'actions. Incorpagons-le dans la grille comme graphique de ligne d'étincelle. Nous utiliserons WidgetCell pour rendre le composant Extrect à l'intérieur de la cellule de la grille.

<code>node -v
npm -v</code>

Lorsque vous survolez différents points du graphique en ligne avec votre souris, il affichera la valeur Y formatée en deux décimales.

Voir le code avant cette étape sur GitHub.

Exporter des données vers Excel

L'une des exigences communes dans les applications à forte intensité de données est d'exporter des données vers Excel. Extreact peut facilement y parvenir en utilisant les plugins de la grille.

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

Pour faciliter l'appel à la fonction d'exportation, nous ajouterons plus de composants. Nous allons ajouter la barre de titre et accoster la barre de titre en haut de la grille et y placer un menu. Lorsque vous cliquez sur le bouton Exporter, vous aurez la possibilité d'exporter vers Excel ou CSV.

<code>npm install -g @sencha/ext-react-gen</code>

Le gestionnaire d'exportation passera le type d'exportation et l'extension du nom de fichier:

<code>ext-react-gen app your-app-name-here -i</code>

Assurez-vous d'inclure l'exportateur dans la dépendance package.json. Par exemple:

<code>npm start</code>

Installation des dépendances.

<code><grid> ></grid>
      <column> dataIndex="name" text="Name" width={300} /></column>
      <column> dataIndex="symbol" text="Symbol" /></column>
      <column> dataIndex="ticks" text="Trend" /></column>
      <column> dataIndex="sector" text="Sector" width={200} /></column>
      <column> dataIndex="industry" text="Industry" width={350} /></column>
></code>

Le plugin Exportateur prend en charge l'exportation de données vers divers formats de fichiers. Il prend en charge les formats natifs XSLX, Excel XML et HTML et CSV / TSV (Valeurs séparées de virgule / onglet).

Voir le code avant cette étape sur GitHub.

Ajouter l'édition à la grille

Nous pouvons rendre la grille plus comme une feuille de calcul en ajoutant la fonction de modification des données. Pour ajouter cette fonctionnalité, nous devons ajouter un autre plugin appelé gridcellé. En ajoutant ce plugin et en marquant les colonnes modifiables comme modifiables, vous avez maintenant des données de grille qui peuvent être modifiées en double-cliquant sur n'importe quelle cellule de grille. Vous pouvez continuer à modifier la grille en appuyant sur la touche Tab dans la cellule de la grille.

Ajouter un plugin d'édition de cellules de grille:

<code>export default class App extends Component {
  render() {
       return (
           <extreact></extreact>               <stocksgrid></stocksgrid>              
       )
   }
}</code>

rendre "nom" modifiable:

<code>     this.store = new Ext.data.Store({
           data: stocks,
           autoLoad: true,
           sorters: [{
               property: 'name'
           }],
           listeners: {
               update: this.onRecordUpdated
           }
       })</code>

Gérer les événements d'édition

Si vous souhaitez effectuer des opérations spéciales après avoir modifié la cellule de grille, vous pouvez écouter les événements de changement de données dans le stockage. Vous pouvez le faire en ajoutant des écouteurs de configuration de l'écoute et de «mise à jour des événements».

"L'événement de mise à jour" passera de nombreux paramètres, y compris le stockage, les enregistrements mis à jour, les objets décrivant l'occurrence des événements, puis transmettent un tableau de noms de champ modifiés. Vous l'ajouteras dans le gestionnaire. Dans ce cas, nous affichons simplement un message rapide. Dans une application réelle, vous appliquez réellement la logique métier, comme les modifications persistantes dans une base de données.

<code><grid> store={this.store}></grid>
      ...
></code>

Ajouter des options de sélection aux cellules de grille

Si vous souhaitez ajouter une option "Sélectionner" à une cellule de grille, vous pouvez le faire en utilisant un autre composant Extreacte appelé SelectField. Il vous suffit d'ajouter le composant SelectField Extrect dans la colonne souhaitée.

<code>node -v
npm -v</code>

Voir le code avant cette étape sur GitHub.

Optimiser l'expérience multiplateforme

Cela fonctionne très bien pour les expériences de bureau, mais l'édition cellulaire n'est peut-être pas la meilleure expérience d'édition lorsque vous minimisez la taille de l'écran de votre expérience de téléphone mobile. Pour les petits appareils d'écran, vous devrez peut-être choisir un style d'édition différent.

L'option

PlatformConfig vous permet de spécifier un comportement pour les appareils de bureau ou mobiles. Vous pouvez définir n'importe quel accessoire sur une valeur différente en fonction de PlatformConfig, nous allons ici définir le plugin en fonction de la plate-forme. Dans cet exemple, lorsque l'application est sur le bureau, nous utiliserons GridCelledIt. Lorsque l'application est sur un appareil mobile, nous utiliserons GridDitable, ce qui fournit un meilleur moyen de modifier les données sur un appareil mobile.

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

Voir le code avant cette étape sur GitHub.

Vous pouvez utiliser la grille Extrect 6.6 et ajouter facilement une interface de type de calcul à une application Web basée sur les données à l'aide de React 16. Avec Extreact, vous pouvez utiliser n'importe quel composant EXT JS moderne, y compris les maillages, les mailles d'arbres, les maillages en perspective, les graphiques, les visualisations D3, etc. - aucune personnalisation requise. Vous pouvez créer un package de minimisation optimisé qui ne contient que les composants que vous utilisez dans votre application. Vous pouvez créer un engagement des utilisateurs immersifs en utilisant des dispositions et des fonctionnalités de conception adaptative qui ont fière allure sur les appareils de bureau et mobiles. Pour rappel, vous pouvez commencer un essai gratuit de l'essai de 30 jours d'Extrect maintenant - inscrivez-vous ici.

Les questions fréquemment posées sur la création de REACT 16 applications Web avec Sencha Grid

Qu'est-ce que Sencha Grid et comment s'intègre-t-il à React 16?

La grille Sencha est un composant de grille haute performance conçu pour gérer de grandes quantités de données. Il s'intègre parfaitement à React 16, une bibliothèque JavaScript populaire pour la construction d'interfaces utilisateur. Cette intégration permet aux développeurs de profiter de la puissance de l'architecture basée sur les composants de React et de la puissance de Sencha Grid, telles que le tri des données, le filtrage, le regroupement et l'édition. Cette combinaison fournit des outils puissants pour créer des applications Web complexes.

Comment démarrer avec Sencha Grid dans mon application React 16?

Tout d'abord, vous devez installer le package Sencha Grid à l'aide de NPM (le gestionnaire de packages pour Node.js). Une fois installé, vous pouvez importer le composant Sencha Grid dans votre application React et l'utiliser comme vous le feriez avec tout autre composant React. Les composants de la grille Sencha fournissent divers accessoires que vous pouvez utiliser pour personnaliser leur comportement et leur apparence.

Puis-je utiliser la grille Sencha avec d'autres frameworks ou bibliothèques JavaScript?

Oui, la conception de Sencha Grid est sans framework, ce qui signifie qu'elle peut être utilisée avec n'importe quel cadre ou bibliothèque JavaScript. Cependant, comme React et Sencha Grid ont des fonctionnalités basées sur des composants, l'intégration avec React 16 est particulièrement transparente.

Quelles sont les caractéristiques clés de Sencha Grid?

Sencha Grid offre une large gamme de fonctionnalités, ce qui en fait un outil puissant pour afficher et manipuler de grandes quantités de données. Ces fonctionnalités incluent le tri, le filtrage, le regroupement et l'édition des données, ainsi que des fonctionnalités avancées telles que le défilement infini, l'extension de ligne et le verrouillage des colonnes. La grille prend également en charge une variété de types de données et de formats et peut être facilement personnalisée pour répondre aux besoins de votre application.

Comment Sencha Grid gère-t-elle de grandes quantités de données?

La grille Sencha est conçue pour traiter efficacement de grandes quantités de données. Il utilise un mécanisme de défilement virtuel qui ne rend que les lignes actuellement visibles dans la fenêtre. Cela signifie que même si votre grille a des milliers ou même des millions de lignes, les performances sont toujours élevées et l'expérience utilisateur est fluide.

Puis-je personnaliser l'apparence de la grille Sencha?

Oui, Sencha Grid offre une variété d'options pour personnaliser son apparence. Vous pouvez utiliser CSS pour changer les couleurs, les polices et d'autres styles, et vous pouvez également utiliser sa vaste API pour personnaliser la disposition et le comportement de la grille.

Comment gérer l'interaction des utilisateurs avec Sencha Grid?

Sencha Grid fournit divers événements que vous pouvez écouter pour gérer les interactions utilisateur. Ces événements incluent des événements de clic, de sélection des événements, d'édition d'événements, etc. En écoutant ces événements, vous pouvez implémenter des comportements et des interactions complexes dans votre application.

Puis-je utiliser la grille Sencha dans une application commerciale?

Oui, la grille Sencha est disponible pour les applications commerciales et non commerciales. Cependant, pour un usage commercial, vous devez acheter une licence auprès de Sencha.

Comment mettre à jour les données dans la grille Sencha?

Sencha Grid fournit une variété de façons de mettre à jour les données. Vous pouvez mettre à jour l'ensemble de données ou une seule ligne ou cellule. Lorsque les données sont mises à jour, la grille remenvient automatiquement les lignes ou les cellules affectées.

Quels types de soutien fournissent la grille Sencha?

Sencha fournit à Sencha Grid une documentation complète et des tutoriels, ainsi qu'un forum communautaire où vous pouvez poser des questions et partager des connaissances avec d'autres développeurs. En outre, Sencha fournit des services de soutien professionnel et de conseil aux clients qui ont besoin d'une aide ou d'une orientation supplémentaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!