So erstellen Sie React 16 Web -Apps mit dem Sencha Grid

effizient verwalten und anzeigen große Datensätze in React 16-Anwendungen mit Sencha Extract Grid und nutzen integrierte Funktionen wie Sortieren, Filterung und Bearbeitung, ohne dass viele DOM-Vorgänge erforderlich sind.

Schlüsselpunkte:

• effizient verwalten und anzeigen große Datensätze in React 16-Anwendungen mit Sencha Extract Grid, nutzen Sie integrierte Funktionen wie Sortierung, Filterung und Bearbeitung, ohne dass viele DOM-Vorgänge erforderlich sind.
• Vereinfachen Sie den Entwicklungsprozess mit dem Extract NPM -Paket und dem Extraktionsgenerator.
• Verbessern Sie die Benutzeroberfläche, indem Sie interaktive Komponenten wie Schaltflächen und Sparklammdiagramme direkt in Gitterzellen einbetten und ein dynamisches und reaktionsschnelles Benutzererlebnis bieten.
• Verwenden Sie das Grid Exporter-Plug-In, um die Datenexportfunktion mit nur einer kleinen Menge Code zu aktivieren, sodass Benutzer Daten direkt aus dem Gitter in Excel- oder CSV-Format exportieren können.
• Verwenden Sie bedingte Plugins und Responsive-Design-Funktionen, um Anwendungen für Desktop- und Mobilfunkplattformen zu optimieren, um ein nahtloses plattformübergreifendes Benutzererlebnis zu gewährleisten.

Dieser Artikel wurde ursprünglich in Sencha veröffentlicht. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben.

react 16 ist die erste React -Version, die auf der neuen Kernarchitektur von React basiert (Codenamed "Faser". React 16 ist grundlegend entwickelt, um das asynchrone Rendering zu unterstützen, wodurch die Verarbeitung großer Komponentenbäume ermöglicht werden, ohne den Hauptausführungs -Thread zu blockieren. Es unterstützt viele wichtige Funktionen wie das Fangen von Ausnahmen mit Fehlergrenzen, die Rückgabe mehrerer Komponenten vom Rendern, Reduzieren der Dateigröße und der Unterstützung von MIT -Lizenzen.

Wenn Sie eine datengesteuerte Webanwendung mit React 16 entwickeln, besteht eine hohe Wahrscheinlichkeit, dass Sie eine gitter- oder tabelloses ähnliche Schnittstelle verwenden, um Benutzerdaten irgendwann anzuzeigen. Abhängig von der Situation möchten Ihre Benutzer möglicherweise, dass das Netz in der Anwendung in der Lage sein kann:

• scrollen Sie mit festem Titel
• sortieren Sie, indem Sie auf den Spaltentitel
klicken
• Zeigen und ausblenden spezifische Spalten
• Paging, Gruppierung und Zusammenfassung
• Daten in einer Zelle bearbeiten
• exportieren in Excel
• Eingehende/Linienerweiterung

Mesh ist wahrscheinlich eine der schwierigsten und komplexesten UI -Komponenten in React, da viele der notwendigen Merkmale eine Menge React -Expertise sowie die Bereitschaft und Fähigkeit erfordern, sich eingehend mit der DOM zu befassen. Glücklicherweise bietet Extract Grid all diese Funktionen und mehr.

In diesem Artikel werden wir das Sencha Extract Grid verwenden, um ein Beispiel zu erstellen, in dem Informationen zu Aktien und Aktienunternehmen angezeigt werden. Wenn Sie ein Raster mit HTML-Tabellen oder anderen Komponenten von Drittanbietern schreiben möchten, müssen Sie möglicherweise Dinge wie das Handling auf den Spaltenkopf zum Sortieren erledigen Nächste Operationen wie Seitendaten. Mit Extraktraster sind diese Funktionen eingebaut. Möchten Sie es selbst ausprobieren? Beginnen Sie jetzt mit Extremaner 30-Tage-kostenloser Testversion-melden Sie sich hier an.

Beginnen wir mit dem Erstellen von Anwendungen mit dem Extraktionsraster.

Erste Schritte mit Extract Application Generator

Befolgen Sie die folgenden Schritte:

Stellen Sie sicher, dass Sie eine Knotenumgebung eingerichtet haben

Stellen Sie zunächst sicher, dass Node 8.11 und NPM 6 auf Ihrem System eingestellt sind. Sie können die neueste Knotenversion von der Node -Website herunterladen. Wenn Sie den Knoten bereits installiert haben, können Sie den folgenden Befehl einfach die Knoten- und NPM -Versionen überprüfen:

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

Anmeldeinformationen für Extract NPM -Repository

abrufen

Extract NPM -Paket wird im privaten NPM -Repository von Sencha gehostet. Sie müssen sich nur einmal beim Repository anmelden, um auf alle Extraktionspakete zuzugreifen. Um Anmeldeinformationen zu erhalten, besuchen Sie die extrahe 30-tägige kostenlose Testseite und füllen Sie das Formular aus. Wir senden Ihnen eine E -Mail mit Anmeldedaten sowie einigen Ressourcenlinks wie Dokumentation und Beispielprojekten.

Login im Extract NPM -Repository und erhalten Sie den Extract -Anwendungsgenerator

Der nächste Schritt besteht darin, sich bei Senchas privatem NPM -Repository anzumelden, in dem das Extract -Paket gehostet wird. Verwenden Sie Ihr NPM -Login (in E -Mail bereitgestellt), um das Repository mit dem @Sencha -Bereich zu verknüpfen und die Anmeldeinformationen zu geben, wenn er aufgefordert wird:

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

Der nächste Schritt besteht darin, das Extract -Generatorpaket zu installieren.

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

Erstellen Sie Ihre erste React -Anwendung

Führen Sie den Yeoman -Generator aus, um Ihre erste Extract -Anwendung zu erstellen:

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

Der Generator bittet Sie, Ihre Anwendung zu benennen, das NPM -Paket zu benennen und das Thema auszuwählen. Das Standardmaterialthema (basierend auf Googles Material Design Guide) ist ein gutes Startthema. Wählen Sie "eine leere Anwendung generieren". Der Generator fordert Sie außerdem auf, ein neues Verzeichnis für das Projekt zu erstellen. Der Generator lädt dann Ihre Beispielanwendung einschließlich der relevanten Abhängigkeiten herunter und erstellt sie.

Führen Sie Ihre React -Anwendung

aus

In der Generatorausgabe finden Sie die Schritte zum Ausführen der Anwendung. Es ist so einfach wie das Wechsel in Ihr neues Anwendungsverzeichnis und das Ausführen der Anwendung mit dem folgenden Befehl:

<code>npm start</code>

startet die Anwendung und Ihre leere Reaktionsanwendung zeigt nur den Titel der Anwendung an. Die Hauptkomponente in der Anwendung (z. B. StocksGrid) verfügt über einen Container am Stammverzeichnis, der mit dem angemessenen Layout -Layout gekennzeichnet ist. Dies bedeutet, dass sie seine untergeordneten Elemente zum Füllen ausdehnen.

Sehen Sie den Code vor diesem Schritt auf GitHub.

Fügen Sie der Anwendung

ein Gitter hinzu

Stockdaten

hinzufügen

Wir werden der Anwendung einen Beispieldatensatz mit dem Namen Stocks.json hinzufügen. Dies ist ein ziemlich großer Datensatz mit etwa 10.000 Zeilen von JSON -Daten. Jede Zeile repräsentiert ein Unternehmen oder ein Aktienkode zu verkaufen. Dies sind die Daten, die wir im Netz anzeigen werden. In einer realen Anwendung werden all diese Daten im Backend zurückgegeben. Wir werden es statisch für diese Stichprobenanwendung laden, anstatt alle Mechanismen zu iterieren, wie die Backend -REST -API erstellt wird. Es wird jedoch genauso geladen, wie Sie die Daten aus dem tatsächlichen Backend erhalten.

Erstellen Sie ein grundlegendes Gitter

In der Methode der Stockgrid -Komponenten -Render -Methode werden wir ein Raster mit Spalten zurückgeben.

Um Spalten in das Raster zu platzieren, verwenden wir die Spaltenkomponente, die denselben DataNDEX wie das Feld Data -Namen nimmt. Es dauert eine Texte als Spalten -Header -Text, und wir können dann eine Breite für die Spalte angeben, z. B. eine feste Breite oder Flex oder eine Kombination aus Flex und einem minimalen oder maximalen Wert. Wir werden Firmennamen, Codes, Ticking, Branche und Industrie Spaltenkomponenten hinzufügen. Erstellen Sie eine neue StocksGrid -Klasse, wie unten gezeigt:

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

Fügen Sie jetzt Stockgrid zur Klassen -App wie folgt hinzu:

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

Sehen Sie den Code vor diesem Schritt auf GitHub. Sie können eine Webanwendung mit einem leeren Raster für NPM -Start sehen.

Binden Sie Aktiendaten unter Verwendung von Grid

Binding Binding Binding

Das Gitter in Extroct ist eine Tabelle, die Daten aus dem EXT -Datenspeicher extrahiert und rendert. In der Extraktion ist unsere Speicherimplementierung eine Datenstruktur, mit der Sie Daten für Gitter oder Komponenten wie Listen oder Diagramme sortieren und filtern können.

Wir können jetzt damit beginnen, Aktiendaten zu laden und Speicher zu erstellen. Ebenso erhält das Raster immer seine Daten aus dem Speicher, und eine gewisse Interaktion mit dem Netz auslöst Ereignisse für den Speicher, z. B. das Nachladen, Sortieren oder Paging. Dazu werden wir hier unseren Speicher erstellen.

Ext -Datenspeicher unterscheidet sich vom Flussspeicher. Was Mesh und Speicher geringfügig von der Standard -React -Methode unterscheidet, ist, dass die beiden eng integriert sind. Normalerweise können Sie Daten direkt an den Speicher übergeben oder der Speicher kann Daten mit einem Proxy selbst aus dem Backend extrahieren. Mit Extract Grid erhalten Sie interaktive Funktionen wie Filtern, Sortieren, Paging, Gruppieren und Zusammenfassen, ohne tatsächlich Code zu schreiben.

In diesem Beispiel übergeben wir Daten direkt an den Speicher aus der Aktiendatendatei. Sie können auch Speicher mit Proxy -Konfigurationen erstellen. Wenn wir einen Proxy besitzen, können wir eine Vielzahl großartiger Aktionen wie Remote -Paging, Filterung und Sortierung ausführen. Wir setzen autoload auf true, damit das Netz automatisch geladen wird. Die Daten werden nicht speziell nach Kriterien sortiert, sodass wir sie im Client sortieren, indem wir das Namensattribut angeben.

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

In Grid weisen Sie die Store -Konfiguration dem erstellten Store zu.

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

Jetzt haben wir ein Raster mit allen Daten wie folgt:

Mit diesem einfachen Code können Sie viele Funktionen kostenlos abrufen - z.

In diesem Fall erfolgt die Sortierung auf der Clientseite. Wenn wir jedoch eine echte Backend -API implementieren, können wir den Proxy so konfigurieren, dass sie im Hintergrund remote sortieren und mit der "Reihenfolge nach Klausel" in der Datenbank sortieren.

Sie können auch kostenlose Spalten mit resizbaren Spalten erhalten. Selbst wenn wir Breiten in diesen Spalten festlegen, kann er es tun, wenn der Benutzer etwas anzeigen oder schließen möchte, indem er die Spalten nach links und rechts schleppt.

Sie können auch eine schöne Gruppierungsfunktion erhalten. Wenn wir also nach der Industrie gruppieren möchten, können wir Gruppen nach diesem Gebiet sagen, sie wird alle Daten nach Wert der Branche gruppieren, und wenn Sie jede Gruppe nach unten scrollen, erhalten Sie einen festen Titel.

Sie werden feststellen, dass diese Daten für 10.000 Datensätze sehr schnell zurücklegen. Der Grund, warum es so schnell macht, ist, dass es das verwendet, was wir als Puffer -Rendering bezeichnen. Während dieser Tisch voll aussieht und Sie nach unten scrollen können und sie weiterhin bleibt, macht er nur ein wenig mehr zufrieden als in der "Ansichtsfensterhöhe", wenn sie zunächst geladen wird.

Wenn Sie nach unten scrollen, ersetzt es den Inhalt der Zelle durch neuere Datensätze, genau wie Sie im Speicher aufbewahren. Daher bewahrt es die DOM -Elemente so weit wie möglich und hält den DOM klein, wodurch der Speicherverbrauch weniger wird und eine hohe Leistung gewährleistet.

Sehen Sie den Code vor diesem Schritt auf GitHub.

Grid Style

setzen

Es gibt verschiedene Möglichkeiten, das Netz zu stylen, damit Daten einfacher zu analysieren sind.

Verwenden von Cell Prop

Schauen wir uns an, wie Sie Zellstile kontrollieren. Wir können den Namen mutig machen - der beste Weg ist, Cell Requent zu verwenden. Die Zelle verwendet eine Reihe von Konfigurationen, die das Erscheinungsbild der Zelle steuern. Wir werden hier eine Stilkonfiguration hinzufügen und dann sagen wir, dass das Schriftgewicht gleich fett ist.

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

Taste in Zeile

hinzufügen

Jetzt werden wir etwas besseres für die reale Welt tun. Angenommen, wir möchten eine Schaltfläche, auf der wir klicken können, um eine der Aktien in der Spalte links zu kaufen. Dazu können wir eine Spalte hinzufügen. Diesmal fügen wir den DataNdex nicht hinzu, da er keinem bestimmten Element im Feld oder einem Feld im Speicher entspricht. Wir werden eine WidgetCell mit Taste hinzufügen. Wir werden ein paar Stile machen - wir werden eine kreisförmige U -Action -Benutzeroberfläche hinzufügen, damit die Schaltfläche ein kreisförmiges Action -Look hat:

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

Der von uns verwendete Kaufhandler ist sehr einfach. Wenn Sie auf die Schaltfläche Kaufen klicken, verwenden wir nur die Annahme mit dem Namen Ext.Toast, wodurch oben eine kleine Eingabeaufforderung an der Oberseite angezeigt wird, die den Code für die von Ihnen gekaufte Aktie zeigt. In ähnlicher Weise werden wir die Spalten rendern, dass jede Zeile gerendert wird. Wir werden diese Schaltfläche rendern und wenn Sie darauf klicken, wird diese Funktion aufgerufen:

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

Sie können aus diesem Beispiel sehen, dass Sie im Grunde genommen jede Extraktionskomponente in die Gitterzelle einbetten können und sie vollständig interaktiv ist. Es fungiert als vollständige React -Komponente.

Sehen Sie den Code vor diesem Schritt auf GitHub.

Fügen Sie ein Trend -Spark -Zeilendiagramm

hinzu

In Aktiendaten haben wir ein Zeckenarray der letzten fünf Aktienumsätze. Lassen Sie es uns als Spark Line -Diagramm in das Netz einbinden. Wir werden WidgetCell verwenden, um die Extraktionskomponente in der Gitterzelle zu rendern.

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

Wenn Sie mit Ihrer Maus über verschiedene Punkte im Online -Diagramm schweben, werden die als zwei Dezimalstellen formatierten Y -Wert angezeigt.

Siehe den Code vor diesem Schritt auf GitHub.

Daten exportieren, um

zu excel

Eine der häufigsten Anforderungen an datenintensive Anwendungen besteht darin, Daten in Excel zu exportieren. Extroact kann dies leicht erreichen, indem die Plugins -Requisiten des Netzes verwendet werden.

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

Um den Aufruf der Exportfunktion zu erleichtern, werden wir weitere Komponenten hinzufügen. Wir werden die Titelleiste hinzufügen und die Titelbank oben im Netz andocken und ein Menü darin platzieren. Wenn Sie auf die Schaltfläche Exportieren klicken, haben Sie die Möglichkeit, nach Excel oder CSV zu exportieren.

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

Der Exporthandler übergibt den Exporttyp und die Dateiname -Erweiterung:

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

Stellen Sie sicher, dass der Exporteur in die Abhängigkeit von Paket.json aufgenommen wird. Zum Beispiel:

<code>npm start</code>

Abhängigkeiten installieren.

<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>

Das Exporter -Plugin unterstützt den Exportieren von Daten in verschiedene Dateiformate. Es unterstützt native XSLX-, Excel XML- und HTML- und CSV/TSV -Formate (comma/tab -Trennwerte).

Siehe den Code vor diesem Schritt auf GitHub.

Hinzufügen von Bearbeitung zum Netz

Wir können das Netz mehr wie eine Tabelle machen, indem wir die Funktion des Bearbeitens von Daten hinzufügen. Um diese Funktion hinzuzufügen, müssen wir ein weiteres Plugin namens Gridcellediting hinzufügen. Indem Sie dieses Plugin hinzufügen und die bearbeitbaren Spalten als bearbeitbar markieren, haben Sie jetzt Grid-Daten, die durch Doppelklicken auf eine Gitterzelle bearbeitet werden können. Sie können das Raster weiter bearbeiten, indem Sie die TAB -Taste in der Netzzelle drücken.

Gitterzellenbearbeitungs -Plugin hinzufügen:

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

mach "name" bearbeitbar:

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

Bearbeiten von Bearbeitungseignissen

Wenn Sie nach der Bearbeitung der Gitterzelle einige spezielle Vorgänge ausführen möchten, können Sie im Speicher auf Datenwechsel -Ereignisse anhören. Sie können dies tun, indem Sie Listener -Konfiguration und "Aktualisierung von Ereignissen" -Hörer hinzufügen.

"Update Event" überträgt viele Parameter, einschließlich Speicher, aktualisierte Datensätze, Objekte, die das Auftreten von Ereignissen beschreiben, und dann ein Array geänderter Feldnamen übergeben. Sie werden es in den Handler hinzufügen. In diesem Fall zeigen wir nur eine schnelle Nachricht an. In einer realen Anwendung wenden Sie tatsächlich Geschäftslogik an, wie z. B. Änderungen in einer Datenbank.

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

Fügen Sie Auswahloptionen zu Grid Cells

hinzu

Wenn Sie einer Rasterzelle eine Option "Auswählen" hinzufügen möchten, können Sie diese mit einer anderen Extraktkomponente namens SelectField tun. Sie müssen nur die SelectField Extract -Komponente in der gewünschten Spalte hinzufügen.

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

Siehe den Code vor diesem Schritt auf GitHub.

optimieren Sie die plattformübergreifende Erfahrung

Dies eignet sich hervorragend für Desktop -Erlebnisse, aber die Bearbeitung von Zellen ist jedoch möglicherweise nicht die beste Bearbeitungserfahrung, wenn Sie die Bildschirmgröße Ihres Handyerlebnisses minimieren. Für kleine Bildschirmgeräte müssen Sie möglicherweise einen anderen Bearbeitungsstil auswählen.

Mit der Option

plattformconfig können Sie das Verhalten für Desktop- oder Mobilgeräte angeben. Sie können jede Requisite gemäß PlatformConfig auf einen anderen Wert einstellen. Hier setzen wir das Plugin gemäß der Plattform. In diesem Beispiel, wenn sich die Anwendung auf dem Desktop befindet, werden wir eine Gitterzellierung verwenden. Wenn sich die App auf einem mobilen Gerät befindet, werden wir Weddable verwenden, was eine bessere Möglichkeit bietet, Daten auf einem mobilen Gerät zu bearbeiten.

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

Sehen Sie den Code vor diesem Schritt auf GitHub.

Sie können eine extract 6.6-Gitter verwenden und einer datengesteuerten Webanwendung mit React 16 problemlos eine Tabellenkalkulationsschnittstelle hinzufügen. Mit Extroact können Sie alle ext js modernen Komponenten verwenden, einschließlich Maschen, Baumnetze, Perspektivennetze, Diagramme, D3 -Visualisierungen und mehr - keine Anpassung erforderlich. Sie können ein optimiertes Minimierungspaket erstellen, das nur die Komponenten enthält, die Sie in Ihrer Anwendung verwenden. Sie können eintauchendes Benutzer -Engagement erstellen, indem Sie Layouts und adaptive Designfunktionen verwenden, die sowohl auf Desktop- als auch auf mobilen Geräten hervorragend aussehen. Zur Erinnerung können Sie jetzt eine kostenlose Testversion von Extroacts 30-tägiger Testversion beginnen-sich hier anmelden.

häufig gestellte Fragen zum Erstellen von React 16 Webanwendungen mit Sencha Grid

Was ist das Sencha -Gitter und wie integriert es sich in React 16?

Sencha Grid ist eine Hochleistungsnetzkomponente, die für große Datenmengen ausgelegt ist. Es integriert sich nahtlos in React 16, eine beliebte JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen. Diese Integration ermöglicht es Entwicklern, die Leistung der Komponenten-basierten Architektur von React und die Kraft des Sencha-Netzes wie Datensortierung, Filterung, Gruppierung und Bearbeitung zu nutzen. Diese Kombination bietet leistungsstarke Tools zum Erstellen komplexer Webanwendungen.

Wie kann ich in meiner React 16 -Anwendung mit Sencha Grid beginnen?

Erstens müssen Sie das Sencha -Gitterpaket mit NPM (dem Paketmanager für node.js) installieren. Nach der Installation können Sie die Sencha Grid -Komponente in Ihre React -Anwendung importieren und sie wie bei jeder anderen React -Komponente verwenden. Die Sencha Grid -Komponenten bieten verschiedene Requisiten, mit denen Sie ihr Verhalten und Aussehen anpassen können.

Kann ich Sencha Grid mit anderen JavaScript -Frameworks oder Bibliotheken verwenden?

Ja, das Design von Sencha Grid ist rahmenfrei, was bedeutet, dass es mit jedem JavaScript-Framework oder jeder Bibliothek verwendet werden kann. Da sowohl React als auch Sencha Grid komponentenbasierte Merkmale aufweisen, ist die Integration mit React 16 besonders nahtlos.

Was sind einige wichtige Merkmale von Sencha Grid?

Sencha Grid bietet eine breite Palette von Funktionen und macht es zu einem leistungsstarken Werkzeug zum Anzeigen und Manipulieren großer Datenmengen. Diese Funktionen umfassen Sortieren, Filterung, Gruppierung und Bearbeitung von Daten sowie erweiterte Merkmale wie unendliche Scrolling, Zeilen -Extender und Spaltenverriegelung. Das Raster unterstützt auch eine Vielzahl von Datentypen und Formaten und kann leicht an die Anforderungen Ihrer Anwendung angepasst werden.

Wie handelt es sich bei Sencha Grid um große Datenmengen?

Sencha Grid ist so konzipiert, dass sie große Datenmengen effizient verarbeiten. Es verwendet einen virtuellen Scrolling -Mechanismus, der derzeit nur Zeilen im Ansichtsfenster sichtbar macht. Dies bedeutet, dass selbst wenn Ihr Netz Tausende oder sogar Millionen Zeilen hat, die Leistung immer noch hoch ist und die Benutzererfahrung reibungslos ist.

Kann ich das Erscheinungsbild des Sencha -Netzes anpassen?

Ja, Sencha Grid bietet eine Vielzahl von Optionen, um sein Erscheinungsbild anzupassen. Sie können CSS verwenden, um Farben, Schriftarten und andere Stile zu ändern, und Sie können auch die umfangreiche API verwenden, um das Layout und das Verhalten des Netzes anzupassen.

Wie gehe ich mit der Benutzerinteraktion mit Sencha Grid um?

Sencha Grid bietet verschiedene Ereignisse, die Sie anhören können, um die Benutzerinteraktionen zu verarbeiten. Zu diesen Ereignissen gehören das Klicken auf Ereignisse, die Auswahl von Ereignissen, Bearbeitung von Ereignissen und mehr. Durch das Zuhören dieser Ereignisse können Sie komplexe Verhaltensweisen und Interaktionen in Ihrer Anwendung implementieren.

Kann ich Sencha Grid in einer kommerziellen Anwendung verwenden?

Ja, Sencha Grid ist sowohl für kommerzielle als auch für nichtkommerzielle Anwendungen verfügbar. Für die kommerzielle Nutzung müssen Sie jedoch eine Lizenz von Sencha erwerben.

Wie aktualisiere ich Daten in Sencha Grid?

Sencha Grid bietet eine Vielzahl von Möglichkeiten, um Daten zu aktualisieren. Sie können den gesamten Datensatz oder eine einzelne Zeile oder Zelle aktualisieren. Wenn die Daten aktualisiert werden, wird das Gitter automatisch die betroffenen Zeilen oder Zellen weiterentwickelt.

Welche Arten von Unterstützung bietet das Sencha -Netz?

Sencha bietet Sencha Grid umfassende Dokumentation und Tutorials sowie ein Community -Forum, in dem Sie Fragen stellen und Wissen mit anderen Entwicklern teilen können. Darüber hinaus bietet Sencha Kunden, die zusätzliche Hilfe oder Anleitung benötigen, professionelle Unterstützung und Beratungsdienste.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie React 16 Web -Apps mit dem Sencha Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!