Einführung in die Funktionen von Tabellen in ExtJs
Die Tabelle wird durch die Klasse ext.grid.gridpanel definiert, die aus ext.panel erb
Die Spalteninformationen der Tabelle sind durch ext.grid.columnmodel definiert
Die Datenspeicherung der Tabelle wird durch ext.data.store definiert. Nach den verschiedenen analytischen Daten kann die Datenspeicherung in die folgenden Typen unterteilt werden:
JsonStore, Simpleestore, GroupingStore…
Der grundlegende Schreibprozess einer Tabelle:
1. Erstellen Sie ein Tabellenspaltenmodell
var cm = new ext.grid.columnmodel ({{header: 'rollen', dataindex: 'rollen'}, {header: 'stufe', dataindex: 'grade'}, {header: 'date dataNdex: dataindex:' erstellt ', type' Date ', Renderer: Renderer: tex. Daten});2. Erstellen Sie ein Datenarray
var data = ['Soldier', '7', '2011-07-2412: 34: 56'], ['General', '10', '2011-07-2412: 34: 56'],];
3. Erstellen Sie einen Datenspeicherobjektspeicher, der zwei Teile enthält: Proxy, die Art und Weise, um Daten zu erhalten; Leser, der Weg, um Daten zu analysieren
Die Zuordnung von ArrayReader wird verwendet, um die Reihenfolge der Spalten festzulegen
var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'role', mapping: 1}, {name: 'grade', mapping: 0} {name: 'createDate', mapping: 2, type:'date', DateFormat: 'ym-dh: i: s'} // Datumspalte erstellen und Format anzeigen])}); store.load ();4. Erstellen Sie ein Gridpanel, montieren
var grid = new ext.grid.gridpanel ({Renderto: 'Grid', Store: Store, CM: CM});Darüber hinaus können Sie SkriptTagproxy verwenden, um Remotedaten zu erhalten, wie unten gezeigt
var store = new Ext.data.Store({ proxy: new Ext.data.ScriptTagProxy({ url:'http://...'}), reader: new Ext.data.ArrayReader({}, [ {name: 'role', mapping: 1}, {name: 'grade', mapping: 0} ]), sortInfo: {field: "Rolle", Richtung: "ASC"} // Setzen Sie die Standardsortiersequenz, ASC/Desc});Gemeinsame Eigenschaften von Tabellen
var grid = new ext.grid.gridpanel ({EnableColumnmove: Falsch, // Ziehen und Drop -Spalten sind verboten, um zu aktivieren. var cm = new Ext.grid.ColumnModel({ {header: 'role', dataIndex: 'role', width:90, sortable: true}, //width sets the column width, the default is 100px, sortable sets the sort function {id:'grade', header: 'level', dataIndex: 'grade', width:40}});var grid = new Ext.grid.gridpanel ({Renderto: 'Grid', Store: Store, CM: CM ViewConfig: {// Jede Spalte automatisch die Form ForceFit: true} AutoExpandColumn: 'grade' // Die Spalte automatisch erweitert, die Spalte ist in der Kolumnenmodell definiert});Rendertabellen rendern und spezielle Stile für Tische festlegen
Fügen Sie CM einfach ein Renderer -Attribut hinzu und fügen Sie eine benutzerdefinierte Funktion hinzu, um den Stil der in übergebenen Parameter zu rendern (automatisch nach ext übergeben).
Funktion rendersEx (value) {if (value == 'male') {return "<span style = 'color: blau;'> männlich </span> <img src = 'bilder/icon_male.png'/>"; } else {return "<span style = 'color: rot;'> weiblich </span> <img src = 'bilder/icon_female.png'/>"; }} var cm = new ext.grid.columnmodel ([{header: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {header: 'sex', dataindex: 'sex', renderer: rendersEx}},]; ['2','Kate','female']]];var store = new Ext.data.Store({ proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader({}, [ {name: 'id'}, {name: 'name'}, {name: 'sex'} ])});store.load();var grid = new ext.grid.gridpanel ({AutoHeight: true, Renderto: 'Grid', Store: Store, CM: CM});Zeigen Sie automatisch Zeilennummern an, erstellen Sie einfach einen Rownumberer beim Erstellen von CM
var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer (), // Zeilennummern {Header: 'id', dataindex: 'id'}, {header: 'name', dataindex: 'name'}, {haceer: 'sex', dataindex: 'sex: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderer: renderssex,);Spalten löschen
store.remove (store.getat (i));
Aktualisieren Sie den Tisch
grid.view.refresh ();
Fügen Sie ein Kontrollkästchen für eine Tabelle hinzu
Müssen CheckBoxSelectionModel verwenden
SelectionModel SM sollte bei Verwendung in CM und Tabelle platziert werden
var sm = new ext.grid.CheckBoxSelectionModel (); var cm = new ext.grid.columnmodel ([new ext.grid.rownumberer (), sm, {header: 'number', dataindex: id '}, {haceer:' name ', dataindex:' name '}]; ['2', 'Name2']]; Ext.grid.gridpanel ({AutoHeight: true, renderto: 'grid', store: store, cm: cm, sm: sm});Nur eine Zeile wird über die RowSelectionModel -Einstellung ausgewählt:
var grid = new ext.grid.gridpanel ({AutoHeight: true, renderto: 'grid', store: store: cm: cm, sm: new ext.grid.rowSelectionModel ({SingleSelect: true})});Verwenden Sie das Modell aus, um Daten abzurufen
grid.on ('click', function () {var selections = grid.getSelectionModel (). getSelections (); für (var i = 0; i <selections.length; i ++) {var record = selections [i]; ext.msg.alert ("id");Tabellenansicht
Aus der Idee von MVC kontrollieren Tabellenkontrollen:
* Ext.data.store kann als Modell angesehen werden
* Ext.grid.gridpanel kann als Controller angesehen werden
* Ext.grid.gridView kann als Ansicht angesehen werden
* Im Allgemeinen wird die GridView automatisch durch Gridpanel generiert. Wenn Sie die Eigenschaften von GridView festlegen möchten, können Sie die Ansichtsinstanz über GetView () von ext.grid.gridpanel erhalten.
Ext.get ('button1'). On ('klick', function () {grid.getView (). Scrolltotop (); grid.getView (). FocusCell (0, 0); var cell = grid.getView (). GetCell (0, 0); Cell.style.backCroundColor = 'Red';});Verwenden Sie die ViewConfig von Gridpanel, um beim Erstellen einer Tabelle die Initialisierungsparameter der Gridview festzulegen
var grid = new ext.grid.gridpanel ({Höhe: 100, Breite: 400, Renderto: 'Grid', Speicher: New Ext.Data.store ({autoload: true, true, proxy: new ext.data.memoryproxy (data), leser: new ext.data.data, {{oder {ColumnStext: 'Spalte anzeigen', // Setzen Sie das Dropdown-Menü Eingabeaufforderung Text ScrollOffset: 30, // Setzen Sie die reservierte Breite der Bildlaufleiste auf der rechten SorteascText: 'Asctext', // Setzen Sie das Dropdown-Menü Eingabeaufforderung.Fügen Sie einer Tisch eine Paging -Symbolleiste hinzu
* Sie können die BBAR -Eigenschaft von Gridpanel verwenden und das pagingToolbar -Paging -Symbolleiste -Objekt erstellen
* Beachten Sie, dass, wenn die Paging -Symbolleiste konfiguriert ist.
var grid = new ext.grid.gridpanel ({Renderto: 'Grid', AutoHeight: True, Store: Store, CM: CM, BBAR: New Ext. {2} ', leereMSG: "no record" // Informationen angezeigt, wenn keine Daten vorhanden sind})}); store.load ();Holen Sie sich Paginierungsdaten aus dem Hintergrundskript
Verwenden Sie HTTpproxy, um die Anfrage zu übergeben, die JSON -Daten des Servers zu erhalten und übergeben Sie sie an JSONReader zur Analyse
var cm = new Ext.grid.ColumnModel([ {header:'number',dataIndex:'id'}, {header:'name',dataIndex:'name'}]);var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'page.jsp'}), reader: new Ext.data.jsonReader ({TotalProperty: 'TotalProperty', root: 'root'}, [{name: 'id'}, {name: 'name'}]}); var grid = new ext.grid.grid.gridpanel ({renderto: 'grid' grid 'autohths adoden. Speicher: Store, CM: CM, BBAR: Neue ext.pagingToolbar ({pageSize: 10, speichern: speichern, displayInfo: true, displayMsg: 'Zeigen Sie {0} zu {1} Datensätzen/Total {2}', leere store.load ({params: {start: 0, limit: 10}});Wenn Sie möchten, dass die Paginierungs -Symbolleiste oben in der Tabelle angezeigt werden, können Sie die Symbolleiste mit den Einstellungen für die Gridpanel TBAR -Eigenschaft hinzufügen.
Lassen Sie DELJS die zurückgegebenen Daten paginieren
* Sie müssen die Datei PagingMemoryProxy.js unter dem Verzeichnis von Beispielen/Gebietsschema in die Seite einführen
* Verwenden Sie PagingMemoryProxy, um den Proxy einzurichten
var store = new ext.data.store ({proxy: new ext.data.pagingMemoryProxy (Daten), Leser: new ext.data.arrayReader ({}, [{name: 'id'}, {name: 'name'}, {name: 'Descn'}]})}); // name: {name: 'ca.'}]}); // name: {name: 'ca.'})}); // name: call call store.load ({params: {start: 0, limit: 3}});Verwendung von EditorGrid mit bearbeitbarer Tabellenkontrolle
Schritte zur Erstellung eines einfachen Editorgrids:
1. Definieren Sie das Spaltenspaltenmodel und fügen Sie das Editor -Attribut hinzu
var cm = new ext.grid.columnmodel ([{header: 'number', dataindex: 'id', editor: new ext.grid.griditor (new ext.form.textfield Ext.form.textfield ({dingBlank: false}))}]);2. Bereiten Sie ein Array vor
var data = ['1', 'jason'], ['2', 'jay'];
3. Erstellen Sie ext.data.store, setzen
var store = new ext.data.store ({proxy: new ext.data.memoryProxy (Daten), Leser: new ext.data.arrayReader ({}, [{name: 'id'}, {name: 'name'}])});4. Laden Sie Daten und erstellen Sie Editorgridpanel
store.load (); var grid = new ext.grid.editorgridpanel ({AutoHeight: true, Renderto: 'Grid', Store: Store, CM: CM});Fügen Sie Daten für bearbeitbare Tabellen hinzu und löschen Sie
1. Erstellen Sie einen Datensatzsatz mithilfe der Datensatzmethode MyRecord. MyRecord entspricht einer Klasse
var myRecord = ext.data.record.create ([{name: 'id', type: 'string'}, {name: 'name', type: 'string'}]); store.load ();2. Erstellen Sie das Editorgridpanel -Panel und erstellen Sie ext.toolbar in der Eigenschaft TBAR
var grid = new ext.grid.editorgridpanel ({AutoHeight: true, renderto: 'grid', store: store: cm: cm, tbar: new ext.toolbar (['-', {//- bedeutet Menü-Separator-Text: add eine Zeile ', Handler: Funktion () {) {var p = New MyRecord ({{}); grid.stopediting (); Löschen? '-'])});Speichern Sie geänderte Ergebnisse für bearbeitbare Tabellen
Fügen Sie basierend auf dem obigen Beispiel eine Schaltfläche Speichern hinzu
Text: 'speichern', Handler: function () {var m = store.modified.slice (0); // Die modifizierten Daten im Speicher für (var i = 0; i <M.Length; i ++) {// überprüfen, ob die Tabelleninformationen korrekt sind und ob sie Spaces var record = m [i] enthält; var fields = record.fields.keys; für (var j = 0; j <fields.length; j ++) {var name = fields [j]; var value = record.data [name]; var colindex = cm.findcolumnIndex (Name); var rowIndex = store.indexofid (record.id); var editor = cm.getCelleditor (colindex) .field; if (! editor.ValidateValue (Wert)) {ext.msg.alert ('Tipp', 'Bitte überprüfen Sie, ob die eingegebenen Daten korrekt sind!', function () {grid.starteDiting (rowIndex, colindex);}); zurückkehren; }}} var jsonArray = []; Ext.each (m, function (item) {jsonarray.push (item.data); // Die geänderten Daten in JsonArray}); Ext.lib.ajax.request (// verwenden die AJAX -Anfrage, um dem Hintergrund 'Post', 'Save_data.jsp', {Erfolg: Funktion (Antwort) {// erfolgreiche ext.msg.alert ('Information', Response.responSthext, Funktion () {Story.Reload ();})},}, fehlern: factum: faction () {) {) {) {) {) {// zurück. "Der Server speichert Datenfehler!");Darüber hinaus kann das Geschäft die Eigenschaft PrunemodifiedRecords festlegen: True. Auf diese Weise löscht der Speicher das geänderte Tag jedes Mal automatisch, wenn er Operationen beseitigt oder lädt, wodurch das Phänomen vermieden wird, alle geänderten Informationen über das nächste Mal eingereicht zu werden.
Begrenzen Sie den Datentyp der Tabelleneingabe
Numberfield
oder
Combobox
var combodata = ['0', 'java'], ['1', 'android']; leereText: 'bitte auswählen', modus: 'local', TriggerAction: 'All', ValueField: 'Wert', DisplayField: 'text', readonly: true})), renderer: function (value) {return combodata [value] [1]; }}Datefield
{Header: 'Date', dataindex: 'Date', Editor: New Ext.Grid.Gridgeitor (new ext.form.datefield ({Format: 'ym-d', minvalue: '2011-07-24', BehinderteDays: [0, 6], deaktiviertes DayStext: Wählen Sie das Datum zwischen Montag und Samstag,}), Renderer: {value). }}Nutzung von PropertyGrid
Es handelt sich um eine intelligentere Komponente für fortschrittliche Form
var grid = new ext.grid.propertygrid ({title: 'propertyGrid', autoHeight: true, width: 400, renderto: 'grid', viewconfig: {engitFit: true}, Quelle: {"String": "String", "Datum": New Date (Parse): Parse. }});So deaktivieren Sie die Bearbeitungsfunktion von PropertyGrid
grid.on ('voredit', Funktion (e) {e.cancel = true; return false;});Nutzen Sie den Wert gemäß dem Namen der Tabelle
grid.store.getbyid ('jason'). get (value);Implementieren Sie verschachtelte Tabellen in ExtJs
Lassen Sie uns zuerst den Effekt sehen:
Der Code ist wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en content = "text/html; charSet = utf-8"/> <title> test </title> <script type = "text/javaScript"> </script> <link rel = "stylesheet" type = "text/css" href = "lib/extjs/2_2/ressourcen/cs 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/javaScript" src = "lib/extjs/plus/rowExpander.js"> </script type = "text/javascript"> texte "> {funtey () () () () {var testdata = [[[>"> "> ["lugreen", "männlich", 26, ["math", 100], ["chinesisch", 150]], ["lisi", "männlich", 25, ["Mathematik", 100], ["Chinese", 150]]], ["Zhangsan", "männlich", 27, ["Mathe", 120], ["Chinese", 158 ", 158", 158]. Ext.data.Simplestore ({Fields: ["Name", "Sex", "Alter", "Note"], Daten: testData}); var expander = new ext.grid.rowexpander ({tpl: new ext.xtemplate ('<div>', ', </div>}); // Gitterfenster.Testele = Körper; cm = new Ext.grid.ColumnModel([ {header: "Article",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true} ,{header: "Score",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true} ]); Ext.domery.Select ("Div.Detaildata") [0]; Ext.grid.CheckBoxSelectionModel ({SingleSelect: True}); 130, versteckt: Falsch, sortierbar: false, resizierbar: true}]); );}); </script> <style type = "text/css">#div2 H2 {Schriftgewicht: 200; Schriftgröße: 12px;}. C1 H2 {Schriftgewicht: 200;} </style> </head> <body> <div id = "grid1"> </div> <div id = "grid2"> </div> </body> </html>Das verwendete "RoweExpander.js" ist im offiziellen ExtJS -Beispiel gebaut.
Bei der Implementierung dieser verschachtelten Tabelle müssen zwei Tipps beachten:
1. Die Datenquelle, die dem Datenspeicher in der äußeren Tabelle zur Verfügung gestellt wird, repräsentiert die Daten im Detailbereich in Form eines verschachtelten Arrays, wie im unten stehenden Fettdruck gezeigt.
var testdata = ["Lugreen", "männlich", 26, ["Math", 100], ["Chinese", 150]], ["Lisi", "männlich", 25, ["Math", 100], ["Chinesisch", 150]], ["Zhangsan", "männlich", 27, 27, ["Mathe", 120, 120], ["Chinese", 158 ", 158", 158 ", 158", 158], 158],;
Verwenden Sie das JSON -Attribut des Datensatzobjekts im Array, um die Daten im Detail zu erhalten
var data = r.json [3];
2. Fügen Sie verschachtelte Tabellen in das Erweiterung von RoweExpander hinzu.