1 Le panneau de grille le plus facile
Le panneau de grille est l'une des parties principales des extjs, et les données peuvent être affichées, triées, regroupées et modifiées via un panneau de grille. Le modèle et le magasin sont au cœur des données de traitement des panneaux de grille, et chaque panneau de grille doit configurer le modèle et le stockage. Pour créer un panneau de grille, vous devez d'abord définir le modèle. Le modèle comprend tous les champs que le panneau de grille doit afficher, ce qui équivaut à une collection de champs de table dans la base de données. Le magasin peut être considéré comme une collection d'une rangée de données ou une collection d'instances de modèle. Chaque magasin contient une ou plusieurs instances de modèle, et les données affichées par le panneau de grille sont stockées dans le magasin. Le panneau de grille obtient des données via le magasin et les affiche, tandis que le magasin lit et enregistre les données via le proxy.
Vous trouverez ci-dessous un panneau de grille pour afficher les informations de base de l'utilisateur, y compris le nom d'utilisateur, l'e-mail, le numéro de téléphone mobile (nom, e-mail, téléphone) et créer d'abord un modèle d'utilisateur (modèle utilisateur).
Ext.Define ('User', {Extend: 'Ext.Data.Model', Fields: ['Name', 'Email', 'Phone']});Ensuite, créez un magasin, qui est une collection d'utilisateurs, y compris plusieurs instances utilisateur.
var userstore = ext.create ('ext.data.store', {modèle: 'utilisateur', // data du modèle utilisateur juste créé: [{nom: 'lisa', e-mail: '[email protected]', téléphone: '555-111-1224'}, {nom: 'bart', '[email protected]' {nom: 'Homer', e-mail: '[email protected]', téléphone: '555-222-1244'}, {nom: 'marge', e-mail: '[email protected]', téléphone: '555-222-1254'}]});Une fois le modèle et le magasin créés, vous pouvez créer un panneau de grille.
Ext.Create ('ext.grid.panel', {renderto: ext.getBody (), Store: Userstore, // Bind the Store Width: 400, Height: 200, Title: 'Application Users', Colonnes: [{Text: 'Name', Width: 100, Triable: False, HIDable Modèle}, {texte: 'adresse e-mail', largeur: 150, dataindex: 'e-mail', caché: true}, {text: 'numéro de téléphone', flex: 1, dataindex: 'téléphone'}]});Le dernier panneau de grille utilisateur est illustré sur la figure.
2 regroupements de données du panneau de grille (regroupement)
Tant que la propriété GroupField est définie dans le magasin, les données affichées par le panneau de grille peuvent être regroupées. Supposons que l'entreprise ait de nombreux employés et doit regrouper les employés de l'entreprise par département du groupe de réseau. Tout d'abord, définissez la propriété Groupfield au département du magasin.
Ext.Create ('ext.data.store', {Modèle: 'Employee', Données: ..., Groupfield: 'Department' // Définir les données groupées par département});Ensuite, ajoutez la fonction de regroupement au panneau de grille pour obtenir l'effet d'affichage du regroupement.
Ext.create ('ext.grid.panel', {... fonctionnalités: [{fType: 'Grouping'}]});L'effet d'affichage du groupe est illustré dans la figure ci-dessous. Cliquez ici pour afficher le code d'affichage officiel du groupe.
Affichage de pagination du panneau de grille
Lorsqu'il y a plus de données et plus de pages à afficher, les données doivent être affichées. Le panneau de grille peut réaliser l'affichage de la pagination via deux méthodes: barre d'outils de pagination et défilement de pagination. La barre d'outils de pagination a les boutons de page / page suivante précédents. Paging Scroller charge dynamiquement des données lorsque le panneau de grille défile vers le bas.
Pour implémenter l'affichage de pagination, vous devez d'abord définir le magasin pour prendre en charge la pagination. Réglez PageSize dans le magasin. La pages de pages par défaut est de 25. Définissez le nombre total de données dans le lecteur TotalProperty et le plugin de pagination pagins en fonction de PageSize et TotalProperty. Le code suivant est défini sur 4 et TotalProperty est obtenu à partir des données JSON renvoyées.
Ext. Attribut associé de JSON: 'Total' // Total Data Quantity}}});
Supposons que le format de données JSON est le suivant
{"Success": true, "total": 12, "utilisateurs": [{"name": "lisa", "email": "[email protected]", "téléphone": "555-111-1224"}, {"nom": "bart", "e-mail": "[email protected]", "téléphone": "55-2222-1234"}, "," téléphone ":" 55-2222-1234 ". "Home", "Courriel": "[email protected]", "téléphone": "555-222-1244"}, {"Name": "Marge", "Email": "[email protected]", "téléphone": "555-222-1254"}]}}La pagination du magasin a été créée. La fonction de pagination de la barre d'outils de pagination est implémentée dans le panneau de grille.
Ext.Create ('ext.grid.panel', {Store: Userstore, Columns: ..., dockeDItems: [{xtype: 'pagingtoolbar', // Ajouter le magasin de barre d'outils de pagitage: Userstore, // Définissez la barre d'outils de la pagination dans le même que le groupe de grille du panneau de grille: 'Bottom', affichentInfo: True});L'effet de pagination de la barre d'outils de pagination est illustré dans la figure ci-dessous. Cliquez ici pour afficher le code officiel de la fonction de pagination de la barre d'outils.
La mise en œuvre de la pagination du défilement de la rampe est relativement simple. Définissez simplement le code suivant dans le panneau de la grille. Cliquez ici pour afficher le code officiel de la fonction de pagination de pivotage.
Ext.Create ('ext.grid.panel', {// Utilisez le plugin de paginateur de paginateur VerticalScroller: 'PAGINGGRIDSCROLLER', // Ne réinitialise pas la barre de défilement lorsque la vue de rafraîchissement invalideCrolleronRefresh: false, // infinite Scrolling ne prend pas en charge la sélection de la sélection: Vrai, // ...});4 panneau de grille Ajouter une case à cocher
Définissez simplement la propriété SelModel du panneau de grille sur ext.selection.checkboxmodel, cliquez ici pour afficher l'exemple de code officiel.
Ext.Create ('ext.grid.panel', {selModel: ext.create ('ext.selection.checkboxmodel'), // Définissez le mode de sélection du panneau de grille pour cocher le magasin: userstore, colonnes: ...});5 exemples complets
var grid = new ext.grid.gridpanel ({store // source de données cm //ext.grid.columnmodel // Les fonctions sont les mêmes que Ext.Grid.ColumnModel. avec l'effet d'animation (la valeur par défaut est vraie, lorsque la classe ext .fx est disponible). DisplayInfo: true, // Document Source DisplayInfo: true, // documentationmsg: 'afficher les enregistrements de {0} à {1}, un total de {2}', videmsg: 'no enregistrement'}), tbar: [{text: 'query', icon-text-text-icon ', Handler: function () {win.show ();}}}) // *************************************. Ext.Grid.Rownumberrer (), {Header: "Customer ID", Width: 50, Sortable: True, DataRainDex: 'Memid'}, {Header: "Nom du client", Width: 75, Sortable: True, Dataindex: 'Memname'}, {Header: 'Secrect No.', Width: 50, Dataindex: 'Sex', ALLIGN: 'Centre'. renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} {header: 'Tracking Number', width:150, dataIndex:'code'}, {header: 'Date', width:150, dataindex: 'kd_time'}]); / *************************************************************************************. // var modifié = storeDidit.modified.slice (0); // ext.each (modifié, fonction (m) {alert (m.data.id); // Les données sont en m.data et id est le nom de champ}) // Obtenir les données de grille var selModel = grid.getSelectionModel (); Obtenir l'enregistrement VAR du mode de sélection; if (! selmodel.hasselection ()) {ext.msg.alert ('avertissement', 'Veuillez sélectionner la ligne à modifier!'); retour; } selModel.getSelections (). Length; // Nombre de lignes sélectionnées Record = selModel.getSelected (); // Obtenez des données de lignes sélectionnées(1) Obtenir des données:
Unique
id = enregistre.get ('id');ou
id = disques.data.id;
Multiples lignes
enregistrer [i] .get ('ddd')(2) Supprimer les données:
var obj = grid.getSelectionModel (). getSelected (); store.remove (obj); grid.getView (). Refresh ();
(3) requête
store.baseParams ['memid'] = fb.form.findfield ('memid'). getValue (); store.baseParams ['start'] = 0; store.load ();(4) Ajouter une ligne:
EXT apporte un plugin
Nécessite un fichier rowexpander.js
var expand = new ext.ux.grid.rowExpander ({tpl: new ext.template ('<p> {adresse} </p>')});Ajouter à développer des colonnes de grille,
Et ajouter des plugins: développer l'attribut de grille