Ext.js - Fragen und Antworten

Ext JS steht für erweitertes JavaScript. Es ist ein JavaScript-Framework zur Entwicklung umfangreicher webbasierter Desktop-Anwendungen.

Es ist ein Sencha-Produkt, das über YUI (Yahoo-Benutzeroberfläche) erweitert wurde.

Dies sind die Hauptdateien, die in die HTML-Seite aufgenommen werden müssen, um Ext JS-Code auszuführen.

  • Ext-all.js
  • Ext-all.css
  • Anpassbare Benutzeroberflächen-Widgets mit einer Sammlung umfangreicher Benutzeroberflächen wie Raster, Pivot-Raster, Formulare, Diagramme und Bäume.
  • Code-Kompatibilität neuer Versionen mit der älteren.
  • Ein flexibler Layout-Manager hilft bei der Organisation der Anzeige von Daten und Inhalten über mehrere Browser, Geräte und Bildschirmgrößen hinweg.
  • Das erweiterte Datenpaket entkoppelt die UI-Widgets von der Datenschicht. Das Datenpaket ermöglicht die clientseitige Erfassung von Daten mithilfe hochfunktionaler Modelle, die Funktionen wie Sortieren und Filtern ermöglichen.
  • Es ist protokollunabhängig und kann auf Daten von jeder Back-End-Quelle zugreifen.
  • Anpassbare Designs Ext JS-Widgets sind in mehreren sofort einsatzbereiten Designs verfügbar, die plattformübergreifend konsistent sind.
  • Optimiert die plattformübergreifende Entwicklung auf Desktops, Tablets und Smartphones - sowohl für moderne als auch für ältere Browser.

  • Steigert die Produktivität von Entwicklungsteams durch die Integration in Unternehmensentwicklungsumgebungen über IDE-Plugins.

  • Reduziert die Kosten für die Entwicklung von Webanwendungen.

  • Ermöglicht Teams das Erstellen von Apps mit einer überzeugenden Benutzererfahrung.

  • Es verfügt über eine Reihe von Widgets, mit denen die Benutzeroberfläche leistungsstark und einfach gestaltet werden kann.

  • Es folgt der MVC-Architektur so gut lesbarer Code.

  • Die Größe der Bibliothek beträgt ca. 500 KB, was die anfängliche Ladezeit verlängert und die Anwendung verlangsamt.

  • HTML ist voll von <DIV> -Tags, was das Debuggen komplex und schwierig macht.

  • Gemäß den allgemeinen Richtlinien für öffentliche Lizenzen ist es für Open Source-Anwendungen kostenlos, für kommerzielle Anwendungen jedoch kostenpflichtig.

  • Manchmal erfordert das Laden selbst einfacher Dinge nur wenige Codierungszeilen, was in einfachem HTML oder Jquery einfacher ist.

  • Benötigen Sie ziemlich erfahrene Entwickler für die Entwicklung von Ext JS-Anwendungen.

Ext JS unterstützt Cross-Browser-Kompatibilität, es unterstützt alle gängigen Browser als -

  • IE 6 und höher
  • Firefox 3.6 und höher
  • Chrome10 und höher
  • Safari 4 und höher
  • Opera 11 und höher

Ext JS 4+ unterstützt die MVC-Architektur (Model View Controller). Ab Ext JS 5 wurde auch MVVM (Model View Viewmodel) unterstützt.

Ext JS 6 ist die neueste Version von Ext JS, die den großen Vorteil hat, dass sie sowohl für Desktop- als auch für mobile Anwendungen verwendet werden kann. Grundsätzlich handelt es sich um eine Zusammenführung von Ext JS (Desktop-Anwendungen) und Sencha Touch (mobile Anwendung).

Ext JS ist ein JavaScript-Framework. Um es verwenden zu können, sollten Sie über Vorkenntnisse in HTML und JS verfügen (keine Expertenkenntnisse, aber Grundkenntnisse). Dann braucht es, um das Grundlegende zu verstehen, also gib ihm Zeit und lerne allmählich.

Beide Frameworks sind sehr unterschiedlich. Wir können Ext JS und jQuery UI vergleichen, da Ext JS ein vollwertiges UI-reiches Framework ist. Trotzdem hat Ext JS viel mehr Komponenten als die jQuery-Benutzeroberfläche.

Parameter Ext JS Angular JS
Reichhaltige Benutzeroberfläche Ext JS bietet umfangreiche UI-Optionen wie Formulare, Raster und Diagramme Angular JS bietet keine integrierte Benutzeroberfläche
Rich Theme UI-Komponenten Ext JS bietet mehrere integrierte Themen Angular JS bietet keine Rich UI und muss in AngularUI, AngularBootstarp usw. integriert werden.
Cross-Browser-Kompatibilität Ext JS bietet browserübergreifende Kompatibilität und funktioniert für fast alle Browser IE6 +, FF, Chrome, Safari, Opera usw. Angular JS muss zur Lösung dieses Zwecks eine Drittanbieter-Bibliothek wie jQuery, jqLite verwenden.
Unterstützung für automatische Tests Nur mit externen Werkzeugen möglich Bietet eingebaute.
Zweiwege-Datenbindung In Ext JS 5 ist die bidirektionale Bindung enthalten. Es unterstützt die bidirektionale Bindung ab der ersten Version.
Performance Ext JS ist vergleichsweise schwerer und langsamer. Angular JS ist ein leichteres Framework als Ext JS
Tools erstellen Ext JS verwendet das Sencha-Cmd-Tool für Builds Angular JS verwendet Tools von Drittanbietern wie Grunzen.

Ext JS 1.1

Die erste Version von Ext JS wurde 2006 von Jack Slocum entwickelt. Es handelte sich um eine Reihe von Dienstprogrammklassen, die eine Erweiterung von YUI darstellen. Er nannte die Bibliothek YUI-ext.

Ext JS 2.0

Ext JS Version 2.0 wurde 2007 veröffentlicht. Diese Version hatte eine neue API-Dokumentation für Desktop-Anwendungen mit eingeschränkten Funktionen. Diese Version war nicht abwärtskompatibel mit der vorherigen Version von Ext JS.

Ext JS 3.0

Ext JS Version 3.0 wurde 2009 veröffentlicht. Diese Version fügte neue Funktionen als Diagramm- und Listenansicht hinzu, jedoch auf Kosten der Geschwindigkeit. Es war abwärtskompatibel mit Version 2.0.

Ext JS 4.0

Nach der Veröffentlichung von Ext JS 3 hatten die Entwickler von Ext JS die größte Herausforderung, die Geschwindigkeit zu erhöhen. Ext JS Version 4.0 wurde 2011 veröffentlicht. Es hatte die komplett überarbeitete Struktur, gefolgt von der MVC-Architektur und einer schnellen Anwendung.

Ext JS 5.0

Ext JS Version 5.0 wurde 2014 veröffentlicht. Die wichtigste Änderung in dieser Version bestand darin, die MVC-Architektur in MVVM-Architektur zu ändern. Es bietet die Möglichkeit, Desktop-Apps auf Touch-fähigen Geräten zu erstellen, bidirektionale Datenbindung, reaktionsschnelle Layouts und viele weitere Funktionen.

Ext JS 6.0

Ext JS 6 führt das Framework Ext JS (für Desktop-Anwendungen) und Sencha Touch (für mobile Anwendungen) zusammen.

Ext JS verfügt über verschiedene UI-Komponenten. Einige der am häufigsten verwendeten Komponenten sind:

  • Grid
  • Form
  • Nachrichtenbox
  • Fortschrittsanzeige
  • Tooltipp
  • Window
  • HTML-Editor
  • Charts

xType definiert den Typ der Ext JS UI-Komponente, der beim Rendern der Komponente festgelegt wird. ZB textField, Numeric, button etc.

Dies ist der Validierungstyp, der einfach angepasst werden kann. Nur wenige von Ext JS bereitgestellte vType sind -

alphanumText - Dies gibt false zurück, wenn der eingegebene Text ein anderes Symbol als einen alphabetischen oder numerischen Wert hat.

emailText - Dies gibt false zurück, wenn der Text keine gültige E-Mail-Adresse ist.

Ja, Ext JS kann in Ajax integriert werden. Implementierung als: Angenommen, in einem Textfeld müssen nach der Unschärfe die Daten vom Server überprüft werden, damit ein Ajax-Aufruf onblur / onchange an die Textfeld-ID gesendet werden kann, um zu überprüfen, ob die in das Textfeld eingegebenen Daten im Server / in der Datenbank vorhanden sind .

Ja, Ext JS kann in andere serverseitige Frameworks wie Java, .net, Ruby on Rails, PHP, ColdFusion usw. integriert werden.

Ext JS kann in jeder gängigen integrierten Entwicklungsumgebung (IDE) wie Eclipse, Aptana, Sublime, Webstrom usw. implementiert werden.

Dies sind einige Möglichkeiten, um auf DOM-Elemente in Ext JS zuzugreifen -

  • Ext.get()
  • Ext.getElementById()
  • Ext.fly()
  • Ext.select()

Die MVVM-Architektur ist Model View Viewmodel. In der MVVM-Architektur wird der Controller von MVC durch ViewModel ersetzt.

ViewModel- Es behandelt grundsätzlich die Änderungen zwischen Ansicht und Modell. Es bindet die Daten vom Modell an die Ansicht. Gleichzeitig hat es keine direkte Interaktion mit der Ansicht, sondern nur Kenntnisse über das Modell.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady () ist die erste Methode, die aufgerufen wird, wenn das DOM vollständig geladen ist, sodass jedes Element, auf das Sie verweisen möchten, verfügbar ist, wenn das Skript ausgeführt wird.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Verschiedene Arten von Warnfeldern in Ext JS sind -

  • Ext.MessageBox.alert();
  • Ext.MessageBox.confirm();
  • Ext.MessageBox.wait();
  • Ext.MessageBox.promt();
  • Ext.MessageBox.show();

Basisklassen für Store ist Ext.data.Store

Für Modell ist Ext.data.Model

Für Controller ist Ext.app.controller

Dies sind die verschiedenen Möglichkeiten für die Ereignisbehandlung -

  • Listener verwenden
  • Ereignisse später anhängen
  • Benutzerdefinierte Ereignisse verwenden

Store.getCount() - Für zwischengespeicherte Datensätze

Store.getTotalCount() - Für insgesamt keine Datensätze in der DB.

Die Methode Store.getModifiedRecords () wird verwendet, um geänderte Datensätze abzurufen.

Store.commitChanges () -Methode zum Aktualisieren von Speicheränderungen.

Wenn wir eine Raster-ID haben: Ext.getCmp ('gridId'). GetStore (). GetAt (index);

Wenn wir die Store-ID haben: Ext.getStore ('storeId'). GetAt (index);

Store.load ();

  • Basisklasse für Grid - Ext.grid.GridPanel
  • Für Formular - Ext.form.Panel
  • Für Panel - Ext.panel.Panel
  • Für Diagramm - Ext.chart.Chart
  • Für Baum - Ext.tree.Panel

Verschiedene Arten von Layouts sind -

  • Absolute
  • Accordion
  • Anchor
  • Border
  • Auto
  • hBox
  • vBox
  • Card(TabPanel)
  • Card(Wizard)
  • Column
  • Fit
  • Table

Dies kann mit pagingToolbar () als - erfolgen

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});
dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]

Die Lademaske wird verwendet, um andere Vorgänge zu verhindern, indem dem Benutzer das Laden (oder die benutzerdefinierte Nachricht) angezeigt wird, bis Daten in das Raster gerendert werden. Lastmaske: wahr; ist die Eigenschaft zum Anzeigen der Lastmaske, während Daten in das Raster gerendert werden.

Renderer wird verwendet, wenn wir die Daten, die wir aus dem Speicher erhalten, bearbeiten möchten, um manipulierte Daten basierend auf bestimmten Kriterien anzuzeigen. Es ist eine Spalteneigenschaft, die verwendet werden kann als -

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}

Ext.getCmp ('id'). GetValue ();

Versteckt: wahr;

Sortierbar: wahr; Das ist standardmäßig wahr.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 verfügt über ein Toolkit-Paket, mit dem visuelle Elemente beider Frameworks (Ext JS und Sencha Touch) enthalten sein können.

Es kann hinzugefügt werden als -

'Toolkit': 'klassisch', // oder 'modern'

Wenn das Toolkit klassisch ist, enthält es das Ext JS-Desktopanwendungsframework.

Und wenn das Toolkit modern ist, enthält es das Sencha Touch-Framework für mobile Anwendungen.

Was kommt als nächstes?

Außerdem können Sie Ihre früheren Aufgaben, die Sie mit dem Thema erledigt haben, durchgehen und sicherstellen, dass Sie sicher darüber sprechen können. Wenn Sie frischer sind, erwartet der Interviewer nicht, dass Sie sehr komplexe Fragen beantworten, sondern Sie müssen Ihre grundlegenden Konzepte sehr stark machen.

Zweitens ist es wirklich nicht wichtig, wenn Sie nicht wenige Fragen beantworten können, aber es ist wichtig, dass Sie alles, was Sie beantwortet haben, mit Zuversicht beantwortet haben müssen. Fühlen Sie sich während Ihres Interviews einfach sicher. Wir von tutorialspoint wünschen Ihnen viel Glück, einen guten Interviewer zu haben und alles Gute für Ihre zukünftigen Bemühungen. Prost :-)