Introduction aux caractéristiques des tables dans les extjs
Le tableau est défini par la classe ext.grid.gridpanel, hérité de Ext.Panel, et le xtype est la grille
Les informations sur la colonne du tableau sont définies par ext.grid.columnmodel
Le stockage de données du tableau est défini par ext.ata.store. Selon les différentes données analytiques, le stockage des données peut être divisé en types suivants:
JSONSTORE, SIMPLESTORE, GRASSIONSSTORE…
Le processus d'écriture de base d'une table:
1. Créer un modèle de colonne de table
var cm = new ext.grid.columnmodel ({{en-tête: 'role', dataindex: 'role'}, {en-tête: 'niveau', dataindex: 'grade'}, {Header: 'Create Date', dataindex: 'Createate', type: 'date', Renderer: ext. données});2. Créez un tableau de données
var data = [['soldat', '7', '2011-07-2412: 34: 56'], ['General', '10', '2011-07-2412: 34: 56'],];
3. Créez un magasin d'objets de stockage de données, qui contient deux parties: proxy, la voie d'obtenir des données; lecteur, le chemin pour analyser les données
Le mappage de ArrayReader est utilisé pour définir l'ordre des colonnes
var store = new ext.ata.store ({proxy: new ext.data.memoryproxy (data), lecteur: new ext.ata.arrayreader ({}, [{name: 'role', mapping: 1}, {name: 'grade', mapping: 0} {name: 'créé' DateFormat: 'ym-dh: i: s'} // Créer une colonne de date et le format d'affichage])}); store.load ();4. Créez un gridpanel, assemblez le modélisation de colonnes et stockez
var grid = new ext.grid.gridpanel ({renderto: 'grid', store: store, cm: cm});De plus, vous pouvez utiliser ScriptTagProxy pour obtenir des données distantes, comme indiqué ci-dessous
var store = new Ext.Data.store ({proxy: new ext.data.scripttagproxy ({url: 'http: // ...'}), lecteur: new ext.data.arrayreader ({}, [{nom: 'role', cartographie: 1}, {nom: 'grade', mapping: 0} {champ: "rôle", direction: "ASC"} // Définit la séquence de tri par défaut, ASC / DESC});Propriétés communes des tables
var grid = new ext.grid.gridpanel ({perteColmnMove: false, // glisser-déposer les colonnes sont interdites à être activées: VRAI, // ZEBRA CROSSING ENFET ENFET LOADMASK: TRUE, // Masque et invite Fonction When Reading Data Renderto: 'Grid', stocker CM: CM} var cm = new ext.grid.columnmodel ({{en-tête: 'role', dataindex: 'role', width: 90, sortable: true}, // width définit la largeur de la colonne, la valeur par défaut est 100px, sortable définit la fonction de tri {id: 'grade', en-tête: 'level', dataindex: 'grade', width: 40}}); varwer); Ext.Grid.GridPanel ({Renderto: 'Grid', Store: Store, CM: CM ViewConfig: {// Soit chaque colonne remplir automatiquement le formulaire ForceFit: True} AutoExpandColumn: 'Grade' // Étendez automatiquement la colonne, l'ID de colonne est définie dans ColumnModel});Rendre des tables et définir des styles spéciaux pour les tables
Il suffit d'ajouter un attribut rendu à CM et d'ajouter une fonction personnalisée pour rendre le style des paramètres passés (automatiquement passé par EXT), c'est-à-dire assembler les événements de réponse HTML, CSS ou JS correspondants avant de retourner la valeur.
Fonction RendersEx (valeur) {if (value == 'mâle') {return "<span style = 'colori: bleu;'> mâle </span> <img src = 'images / icon_male.png' />"; } else {return "<span style = 'Color: Red;'> Femme </span> <img src = 'images / icon_female.png' />"; }} var cm = new Ext.Grid.ColumnModel ([{Header: 'Id', DataRainDex: 'Id'}, {Header: 'Name', DatainDex: 'Name'}, {Header: 'Sex', DatainDex: 'Sex', 'Renderer', '] ['2', 'Kate', 'Female']]]; var Store = new Ext.Data.Store ({Proxy: new Ext.Data.MemoryProxy (données), Reader: New Ext.Data.ArrayReader ({}, [NAM grid = new Ext.Grid.GridPanel ({AutoHeight: true, renderTo: 'Grid', Store: Store, CM: CM});Affichez automatiquement les numéros de ligne, créez simplement un Rownumber lors de la création de CM
var cm = new Ext.Grid.ColumnModel ([new ext.grid.rownumbunerger (), // Afficher les numéros de ligne {en-tête: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header: 'sexe', dataindex: 'sex', rederer: RendersEx},]);Supprimer les colonnes
store.remove (store.getatur (i));
Actualiser la table
grid.view.refresh ();
Ajouter une case à cocher pour une table
Besoin d'utiliser CheckboxSelectionModel
SELECTIONMODEL SM doit être placé en CM et en table lorsqu'il est utilisé
var sm = new Ext.Grid.CheckBoxSelectionModel (); var cm = new Ext.Grid.ColumnModel ([New ext.grid.rownumberrer (), sm, {header: 'nombre', dataindex: 'id'}, {header: 'name', dataindex: 'name'}]); var data = [['1', 'name'], ['2', 'name2']]] Ext.Grid.GridPanel ({AutoHeight: True, Renderto: 'Grid', Store: Store, CM: CM, SM: SM});Une seule ligne est sélectionnée via le paramètre RowselectionModel:
var grid = new ext.grid.gridpanel ({autoHeight: true, renderto: 'grid', store: store, cm: cm, sm: new ext.grid.rowselectionmodel ({singleSelect: true})});Utilisez le modèle sélectionné pour obtenir des données
grid.on ('click', function () {var sections = grid.getSelectionModel (). getSelections (); for (var i = 0; i <selections.length; i ++) {var enregistre = sections [i]; ext.msg.alelert (enregistrement.get ("id"));}});Vue de la table
De l'idée de MVC, commandes de table:
* Ext.data.store peut être considéré comme un modèle
* Ext.grid.gridpanel peut être considéré comme un contrôleur
* Ext.grid.gridview peut être considéré comme une vue
* Généralement, GridView est automatiquement généré par GridPanel. Si vous souhaitez définir les propriétés de GridView, vous pouvez obtenir l'instance de vue via GetView () de ext.grid.gridpanel.
Ext.Get ('Button1'). On ('click', function () {grid.getView (). ScrollToP (); grid.getView (). FocusCell (0, 0); var Cell = grid.getView (). GetCell (0, 0); Cell.Style.backgroundColor = 'Red';});Utilisez ViewConfig de GridPanel pour définir les paramètres d'initialisation du GridView lors de la création d'un tableau
var grid = new ext.grid.gridpanel ({hauteur: 100, largeur: 400, renderto: 'grid', magasin: new ext.ata.store ({autoload: true: proxy: new ext.ata.memoryproxy (data), lecteur: new ext.ata.Arayreder ({}, méta)}). ViewConfig: {ColumnStExt: 'Afficher la colonne', // Définissez le texte de l'invite du menu déroulant: 30, // Définissez la largeur réservée de la barre de défilement sur le droit Sortastext: 'ASCTEXT', // Définit le texte de menu Drop-down SortDesCtext: 'Down Order', // Définir le Menu Drop-Down Invite ForceFit: True // Autochalthation étend la longueur de chaque chronique});Ajouter une barre d'outils de pagination à une table
* Vous pouvez utiliser la propriété BBAR de GridPanel et créer l'objet de barre d'outils Ext.PagingToolbar Paging
* Notez que si la barre d'outils de pagination est configurée, Store.Load () doit être exécutée après la construction du tableau.
var grid = new ext.grid.gridpanel ({renderTo: 'Grid', AutoHeight: True, Store: Store, CM: CM, Bbar: New Ext.PagingToolbar ({PageSize: 10, // 10 éléments de données sont affichés par page Store: Store, DisplayInfo: True, // Afficher des informations sur les données: ' {2} ', videmsg: "Aucun enregistrement" // Informations affichées lorsqu'il n'y a pas de données})}); store.load ();Obtenez des données de pagination à partir du script d'arrière-plan
Utilisez HTTPProxy pour passer la demande, obtenez les données JSON du serveur et remettez-la à JSONReader pour analyse
var cm = new ext.grid.columnmodel ([{en-tête: 'numéro', dataindex: 'id'}, {en-tête: 'name', dataindex: 'name'}]); var store = new ext.ata.store ({proxy: new ext.data.httproxy ({url: 'page.jsp'}), new: reader: New Ext.data.jsonReader ({totalProperty: 'totalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}])}); var grid = new ext.grid.gridpanel ({renderto: 'grid', AutoHeight: true, // la hauteur est inconnue avant les données est envoyée, SO AUTOHEAU Store: Store, CM: CM, BBAR: New Ext.PagingToolbar ({PageSize: 10, Store: Store, DisplayInfo: true, DisplayMsg: 'Afficher le {0} à {1} enregistre / total {2}', videmsg: "No Record"})}); store.load ({params: {start: 0, limite: 10}});Si vous souhaitez que la barre d'outils de pagination apparaisse en haut du tableau, vous pouvez ajouter la barre d'outils à l'aide des paramètres de la propriété GridPanel TBAR.
Laissez les extjs paginez les données renvoyées
* Vous devez introduire le fichier pagingmemoryproxy.js sous le répertoire des exemples / paramètres régionaux dans la page
* Utilisez PAGINYMEMORYPROXY pour configurer le proxy
var store = new ext.ata.store ({proxy: new ext.data.pagingMemoryProxy (data), lecteur: new ext.ata.arrayreader ({}, [{name: 'id'}, {name: 'name'}, {name: 'descn'}])}); // appelle store.load ({params: {start: 0, limite: 3}});Utilisation de Editorgrid avec contrôle de table modifiable
Étapes pour créer un éditeur simple:
1. Définissez le modèle de colonne de colonne et ajoutez l'attribut de l'éditeur
var cm = new ext.grid.columnmodel ([{en-tête: 'numéro', dataindex: 'id', éditeur: new Ext.Grid.grideditor (new Ext.form.TextField ({allowblank: false // non-intrigue dans TextField n'est pas autorisé}))}, {en-tête: 'name', dataindex: 'nom Ext.form.TextField ({allowblank: false}))}]);2. Préparez un tableau
var data = [['1', 'Jason'], ['2', 'Jay']];
3. Créer Ext.Data.Store, définir le proxy de mémoire et définir ArrayReader pour analyser les tableaux
var store = new Ext.Data.Store ({proxy: new Ext.Data.MemoryProxy (données), lecteur: new ext.ata.arrayreader ({}, [{name: 'id'}, {name: 'name'}])});4. Charger les données et créer EditorGridPanel
store.load (); var grid = new ext.grid.editorgridpanel ({autoHeight: true, renderto: 'grid', store: store, cm: cm});Ajouter et supprimer des données pour les tables modifiables
1. Créez un ensemble d'enregistrements à l'aide d'enregistrer la méthode Créer MyRecord. MyRecord équivaut à une classe
var myRecord = ext.data.record.create ([{name: 'id', type: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Créez le panneau EditorGridPanel et créez ext.toolbar dans la propriété tbar
var grid = new Ext.Grid.EditorGridPanel ({AutoHeight: True, Renderto: 'Grid', Store: Store, CM: CM, TBAR: `` Ajouter une ligne '', Handler: function (); GRID.STOPEDITE (); 'Confirmer pour supprimer? '-'])});Enregistrer les résultats modifiés pour les tables modifiables
Sur la base de l'exemple ci-dessus, ajoutez un bouton de sauvegarde
Texte: 'Save', Handler: function () {var m = store.modified.slice (0); // Obtenez les données modifiées dans le magasin pour (var i = 0; i <M.Length; i ++) {// Vérifiez si les informations de la table sont correctes et si elles contiennent des espaces var enregistre = m [i]; var fields = disques.fields.keys; pour (var j = 0; j <fields.length; j ++) {var name = fields [j]; var valeur = enregistrement.data [name]; var coLindex = cm.FindColumnIndex (nom); var rowIndex = store.indexofid (disques.id); var editor = cm.getCelLeditor (Colindex) .field; if (! Editor.ValidAdValue (Value)) {ext.msg.Alert ('Tip', 'Veuillez vérifier si les données entrées sont correctes! retour; }}} var jSonArray = []; Ext.each (m, fonction (item) {jsonArray.push (item.data); // mettez les données modifiées dans jsonArray}); Ext.lib.ajax.request (// Utilisez la demande ajax pour soumettre à l'arrière-plan 'post', 'Save_data.jsp', {Success: Function (Response) {// return a réussi ext.msg.Alert ('Information', Response.ResponSext, function () {store.reload ();});}, l'échec: fonction () {// return Ext.msg. "Le serveur a enregistré une erreur de données!");De plus, le magasin peut définir la propriété PruneModifiedRecords: true. De cette façon, le magasin effacera automatiquement la balise modifiée à chaque fois qu'il supprime ou chargera les opérations, ce qui peut éviter le phénomène de l'apport de toutes les informations modifiées la prochaine fois qu'elle sera soumise.
Limitez le type de données de l'entrée de la table
Numberfield
?
Peigne
var combodata = [['0', 'java'], ['1', 'Android']]; {Header: 'ComboBox', dataindex: 'combo', éditeur: new ext.grid.grideditor (new Ext.form.ChOBOX ({Store: ', Text'], Text '], Text'. videText: 's'il vous plaît sélectionner', mode: 'local', TriggerAction: 'all', valueField: 'value', affichefield: 'text', readonly: true})), renderer: function (value) {return combodata [value] [1]; }}Champ de date
{en-tête: 'date', dataindex: 'date', éditeur: new ext.grid.grideditor (new ext.form.datefield ({format: 'ym-d', minvalue: '2011-07-24', Disableddays: [0, 6], DisabledayStext: 'Sélectionner la date entre lundi et samedi'})), Renderer: Function (Valent) {Return) {Return) {Retour) value.format ("ymd"); }}Utilisation de PropertyGrid
Il s'agit d'un composant de formulaire avancé plus intelligent développé basé sur EditorGrid
var grid = new ext.grid.propertygrid ({title: 'propriétégrid', autoHeight: true, width: 400, renderto: 'grid', ViewConfig: {ForceFit: true}, source: {"String": "String", "Date": new Date (Date.Pisse ": .01 }});Comment désactiver la fonction d'édition de propriété
grid.on ('AVANTEdit', fonction (e) {e.cancel = true; return false;});Obtenez de la valeur en fonction du nom de la table
grid.store.getbyid ('Jason'). get (valeur);Implémenter des tables imbriquées dans les extjs
Voyons d'abord l'effet:
Le code est le suivant:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html><head><meta http-equiv =" contenu -ype " contenu = "text / html; charset = utf-8" /> <itle> test </ title> <script type = "text / javascript"> </ script> <link rel = "stylesheet" type = "text / css" href = "lib / extjs / 2_2 / ressources / css / ext-al.css" /> <script type = "text / javascript" src = "lib / extjs / 2_2 / adapter / ext / ext-base.js"> </ script> <script type = "text / javascript" src = "lib / extjs / 2_2 / ext-all-debug.js"> </ script> <script type = "text / javascript" src = "lib / extjs / 2_2 / source / locale / ext-lang-zh_cn.js"> </ script> <script type = "text / javascrip ["Lugreen", "Male", 26, [["Math", 100], ["Chinese", 150]]], ["Lisi", "Male", 25, [["Math", 100], ["Chine Ext.data.simplestore ({fields: ["name", "sexe", "age", "grade"], data: testData}); var expander = new ext.grid.rowExpander ({tpl: new ext.xtemplate ('<div>', '', '</v>') }); expander.on ("Expand", fonction (Expander, R, Body, RowIndex) {// Rechercher la grille Window.Testele = Body; //alert(body.id); if (ext.domquery.select ("div.x-panel-bwrap", body) .length == 0) {// alert ("a"); var data = r.json [3] Ext.Data.SIMPLESTORE ({Fields: ["Class", "Degrade"], Data: Data}); 130, Hidable: False, triable: FAUX, RESIZABLE: VRAI}]); AutoHeight: true});}}); // var sm = new ext.grid.checkboxSelectionmodel ({singleSelect: true}); "Gender", Dataindex: 'Sex', largeur: 130, Hidable: False, Sortable: False, Resizable: True}]); Plugins: [Expander]});}); </ script> <style type = "text / css"> # div2 h2 {Font-weight: 200; Font-Size: 12px;}. C1 H2 {Font-Weight: 200;} </ Style> </ Head> <Body> <div id = "Grid1"> </div> <div id = "Grid2"> </div> </odody> </html>Le "RowExpander.js" utilisé est construit dans l'exemple d'exécutions officiel.
Il y a deux conseils à noter lors de la mise en œuvre de cette table imbriquée:
1. La source de données fournie à la banque de données dans le tableau extérieur représente les données dans la zone de détail sous la forme d'un tableau imbriqué, comme indiqué dans le gras ci-dessous.
var testData = [["LuGreen", "Male", 26, [["Math", 100], ["Chinese", 150]]], ["Lisi", "Male", 25, ["Math", 100], ["Chinois, 150]], [" Zhangsan "," Male ", 27," Math ", 120], [" Chinese ", 158]];
Utilisez l'attribut JSON de l'objet enregistré dans le tableau pour obtenir les données en détail
var data = r.json [3];
2. Ajoutez des tables imbriquées dans l'événement de développement de RowExpander.