1 Das einfachste Netzpanel
Das Grid -Panel ist einer der Kernteile von ExtJs, und Daten können über das Grid -Panel angezeigt, sortiert, gruppiert und bearbeitet werden. Modell und Speicher sind der Kern der Verarbeitungsdaten für die Grid -Panel, und jedes Grid -Panel muss Modell einrichten und speichern. Um ein Gitterfeld zu erstellen, müssen Sie zunächst das Modell definieren. Das Modell enthält alle Felder, die das Gitterfeld anzeigen muss, was einer Sammlung von Tabellenfeldern in der Datenbank entspricht. Der Geschäft kann als Sammlung einer Datenreihe oder als Sammlung von Modellinstanzen angesehen werden. Jeder Speicher enthält eine oder mehrere Modellinstanzen, und die vom Grid -Panel angezeigten Daten werden im Geschäft gespeichert. Das Grid -Panel erhält Daten über den Speicher und zeigt es an, während Store -Leads und Speichern von Daten über Proxy.
Im Folgenden finden Sie ein Grid -Panel, um die grundlegenden Informationen des Benutzers anzuzeigen, einschließlich Benutzername, E -Mail, Mobiltelefonnummer (Name, E -Mail, Telefon) und zuerst ein Benutzermodell (Benutzermodell) erstellen.
Ext.Define ('user', {extend: 'ext.data.model', fields: ['name', 'mail', 'telefon']});Erstellen Sie als Nächstes ein Geschäft, bei dem es sich um eine Sammlung von Benutzern handelt, einschließlich mehrerer Benutzerinstanzen.
var userStore = ext.create ('ext.data.store', {model: 'user', // Benutzermodelldaten, die gerade erstellt wurden: [{Name: 'Lisa', E-Mail: '[email protected]', Telefon: '555-111-1224'}, {name: bart ',' bart: '[email protected]: {Name: 'Homer', E-Mail: '[email protected]', Telefon: '555-222-1244'}, {Name: 'Marge', E-Mail: '[email protected]', Telefon: '555-222254'}]});Nachdem sowohl das Modell als auch das Geschäft erstellt wurden, können Sie ein Gitterfeld erstellen.
Ext.create ('ext.grid.panel', {renderto: ext.getBody (), speichern: userStore, // Die Speicherbreite binden: 400, 200, Titel: 'Anwendungsbenutzer', Spalten: [{text: 'name', breite: 100, sortierbar: falsch, versteckt: Das gleiche, dataindex: 'name' name '//. Modell}, {text: 'E -Mail -Adresse', Breite: 150, dataindex: 'E -Mail', Hidden: true}, {text: 'Telefonnummer', Flex: 1, dataindex: 'Telefon'}]});Das letzte Benutzer -Gitterfeld ist in der Abbildung dargestellt.
2 Grid Panel -Datengruppierung (Gruppierung)
Solange die Anwesen von Groupfield im Geschäft festgelegt ist, können die vom Grid -Panel angezeigten Daten gruppiert werden. Angenommen, das Unternehmen hat viele Mitarbeiter und muss die Mitarbeiter des Unternehmens nach der Abteilung im Grid -Panel gruppieren. Setzen Sie zunächst die Gruppe von Groupfield in die Abteilung im Geschäft.
Ext.create ('ext.data.store', {Modell: 'Mitarbeiter', Daten: ..., GroupField: 'Abteilung' // Daten gruppiert nach Abteilung});Fügen Sie dann die Gruppierungsfunktion zum Gitterfeld hinzu, um eine Gruppierungsanzeigeeffekte zu erzielen.
Ext.create ('ext.grid.panel', {... features: [{ftype: 'grupping'}]});Der Gruppenanzeigeffekt ist in der folgenden Abbildung dargestellt. Klicken Sie hier, um den offiziellen Gruppenanzeigecode anzuzeigen.
3 Gitterpanel -Pagination -Anzeige
Wenn mehr Daten und weitere Seiten angezeigt werden müssen, müssen die Daten Paging angezeigt werden. Das Grid -Panel kann die Paginationsanzeige durch zwei Methoden realisieren: Paging -Symbolleiste und Paging Scroller. Die Paging -Symbolleiste verfügt über die vorherigen Seite/nächste Seite. Paging Scroller lädt Daten dynamisch, wenn das Gitterfeld nach unten scrollt.
Um das Paginierungsdisplay zu implementieren, müssen Sie das Geschäft zuerst festlegen, um die Pagination zu unterstützen. Setzen Sie PageSize im Geschäft. Das Standard -PageSize beträgt 25. Legen Sie die Gesamtzahl der Daten im Reader TotalProperty und die Paging -Plugin -Pagine gemäß PageSize und TotalProperty fest. Der folgende Code wird auf 4 gesetzt und TotalProperty wird aus den zurückgegebenen JSON -Daten erhalten.
Ext.create ('ext.data.store', {modell: 'user', autoload: true, pageSize: 4, // Setzen Sie die Anzahl der Daten, die pro Seite angezeigt werden: {Typ: 'ajax', url: 'data/user.json', leser: {type 'JSON: JSON: Wurzel: Wurzel:' Users ',' Benutzer, //. JSONs verwandtes Attribut: 'Total' // Gesamtdatenmenge}}});Angenommen, das JSON -Datenformat lautet wie folgt
{ "success": true, "total": 12, "users": [ { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" }, { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" }, { "name": "Home", "E-Mail": "[email protected]", "Telefon": "555-222-1244"}, {"Name": "Marge", "E-Mail": "[email protected]", "Telefon": "555-22254"}]}}}}}Die Paging des Geschäfts wurde eingerichtet. Die Paging -Symbolleiste -Paging -Funktion wird im Gitterfeld implementiert.
Ext.create ('ext.grid.panel', {store: userStore, spalten: ..., dockeditems: [{xtype: 'pagingToolbar', // Paging -Symbolleiste Store hinzufügen: UsStore, // Setzen Sie die Paging -Symbolleiste auf dem grid panel's stored docken: 'bottom', displayinfo: echte}]);Der Paging -Effekt der Paging -Symbolleiste ist in der folgenden Abbildung dargestellt. Klicken Sie hier, um den offiziellen Paging -Symbolleisten -Paging -Funktionscode anzuzeigen.
Die Paging -Implementierung von Paging Scroller ist relativ einfach. Legen Sie einfach den folgenden Code im Gitterfeld ein. Klicken Sie hier, um den offiziellen Paging Scroller Paging -Funktionscode anzuzeigen.
Ext.create ('ext.grid.panel', {// Verwenden Sie den Paging Scroller Paging Plugin VerticalScroller: 'PagingGridScroller', // Die Scrollbar nicht zurücksetzen, wenn die Ansicht die Auswahl der Auswahl der Auswahl der Auswahl nicht unterstützt: Richtig, // //;4 Gitterfeld addieren Sie das Kontrollkästchen
Stellen Sie einfach die Selmodel -Eigenschaft des Grid -Panels auf ext.Selection.CheckBoxModel ein, klicken Sie hier, um das offizielle Code -Beispiel anzuzeigen.
Ext.create ('ext.grid.panel', {selmodel: ext.create ('ext.Selection.CheckBoxModel'), // Setzen Sie den Auswahlmodus des Grid -Panels auf Checkbox Store: UserStore, Spalten: ...});5 umfassende Beispiele
var grid = new ext.grid.gridpanel ({Store // Datenquelle cm //ext.grid.columnmodel -Spalten // Funktionen sind die gleichen wie ext.grid.columnmodel. Animationseffekt (Standard ist wahr, wenn die Klasse ext.fx verfügbar ist). DisplayInfo: True, // Dokumentquelle Anzeige displayInfo: true, // documentationmsg: 'Zeigen Sie die Datensätze von {0} bis {1}, insgesamt {2}', leere Handler: function () {Win.Show ();}}}) //*********** Ext.grid.RowNumberer(), {header: "Customer ID", width: 50, sortable: true, dataIndex: 'memid'}, {header: "Customer Name", width: 75, sortable: true, dataIndex: 'memName'}, {header:'Secret No.', width:50, dataIndex:'sex', align:'center', sortable:true, Renderer: Funktion (v) {return (v == '1')? '<img src = "bootions/user_suit.png">': '<img src = "bilder/user_female.png">';}} {Header: 'Tracking -Nummer', WidthTHTHTHTHTHTH: 150, DATINDH: 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, 150, {haceer: {heaker: dataindex: 'kd_time'}]); /******************************************************************************************/ EditorGridPanel chickToEdit:1 //Number of clicks ColumnModel editor:new Ext.form.TextField({ }) //Get modified data var storeEdit = grid.getStore(); // var modified = storeDit.modified.slice (0); // ext.each (modifiziert, Funktion (m) {alert (m.data.id); // Die Daten sind in M.Data und ID ist der Feldname})// Grid Data var selmodel = grid.getSelectionModel () abrufen; Auswahlmodus VAR -Datensatz erhalten; if (! zurückkehren; } selmodel.getSelections (). Länge; // Anzahl der ausgewählten Zeilen record = selmodel.getSelected (); // Daten von ausgewählten Zeilen abrufen
(1) Daten erhalten:
Einzellinie
id = record.get ('id');oder
id = record.data.id;
Mehrere Zeilen
Aufzeichnung [i] .get ('ddd')(2) Daten löschen:
var obj = grid.getSelectionModel (). getSelected (); store.remove (obj); grid.getView (). refresh ();
(3) Abfrage
store.baseParams ['memid'] = fb.form.findfield ('memid'). getValue (); store.baseParams ['start'] = 0; store.load ();(4) Fügen Sie eine Zeile hinzu:
Ext bringt ein Plugin
Benötigt Datei rotexpander.js
var expt = new ext.ux.grid.rowexpander ({tpl: new ext.template ('<p> {adresse} </p>')});Fügen Sie zu Grid -Säulen aus,
Und Plugins hinzufügen: Erweitern Sie das Grid -Attribut