Ext.js - Questions et réponses
Ext JS signifie JavaScript étendu. Il s'agit d'un framework JavaScript pour développer des applications de bureau riches en interface utilisateur Web.
C'est un produit Sencha qui est étendu de YUI (interface utilisateur Yahoo).
Voici les principaux fichiers à inclure dans la page HTML pour exécuter le code Ext JS -
- Ext-all.js
- Ext-all.css
- Widgets d'interface utilisateur personnalisables avec collection d'interfaces utilisateur riches telles que des grilles, des grilles pivotantes, des formulaires, des graphiques, des arbres.
- Compatibilité du code des nouvelles versions avec l'ancienne.
- Un gestionnaire de mise en page flexible permet d'organiser l'affichage des données et du contenu sur plusieurs navigateurs, appareils et tailles d'écran.
- Le package de données Advance dissocie les widgets d'interface utilisateur de la couche de données. Le package de données permet la collecte de données côté client à l'aide de modèles hautement fonctionnels qui permettent des fonctionnalités telles que le tri et le filtrage.
- Il est indépendant du protocole et peut accéder aux données de n'importe quelle source back-end.
- Thèmes personnalisables Les widgets Ext JS sont disponibles dans plusieurs thèmes prêts à l'emploi qui sont cohérents entre les plates-formes.
Rationalise le développement multiplateforme sur les ordinateurs de bureau, les tablettes et les smartphones - pour les navigateurs modernes et hérités.
Augmente la productivité des équipes de développement en s'intégrant aux environnements de développement d'entreprise via des plugins IDE.
Réduit le coût du développement d'applications Web.
Permet aux équipes de créer des applications avec une expérience utilisateur convaincante.
Il dispose d'un ensemble de widgets pour rendre l'interface utilisateur puissante et facile.
Il suit l'architecture MVC donc un code hautement lisible.
La taille de la bibliothèque est d'environ 500 Ko, ce qui augmente le temps de chargement initial et ralentit l'application.
Le HTML regorge de balises <DIV>, ce qui le rend complexe et difficile à déboguer.
Selon la politique générale des licences publiques, il est gratuit pour les applications open source mais payant pour les applications commerciales.
Parfois, pour charger même des choses simples, il faut quelques lignes de codage, ce qui est plus simple en html ou Jquery.
Besoin d'un développeur assez expérimenté pour développer des applications Ext JS.
Ext JS prend en charge la compatibilité entre navigateurs, il prend en charge tous les principaux navigateurs comme -
- IE 6 et supérieur
- Firefox 3.6 et supérieur
- Chrome10 et supérieur
- Safari 4 et supérieur
- Opera 11 et supérieur
Ext JS 4+ prend en charge l'architecture MVC (Model View Controller). Depuis Ext JS 5, il a également commencé à prendre en charge MVVM (Model View Viewmodel).
Ext JS 6 est la dernière version d'Ext JS qui présente l'avantage majeur de pouvoir être utilisée à la fois pour les applications de bureau et mobiles. Fondamentalement, il s'agit d'une fusion d'Ext JS (applications de bureau) et de Sencha touch (application mobile).
Ext JS est un framework JavaScript donc pour commencer à l'utiliser, vous devez utiliser des connaissances préalables en HTML et JS (pas de niveau expert mais doivent avoir une compréhension de base). Ensuite, il faut comprendre les bases, alors donnez-lui du temps et apprenez progressivement.
Les deux frameworks sont assez différents, nous pouvons comparer Ext JS et jQuery UI car Ext JS est un framework riche en UI à part entière. Mais encore Ext JS a beaucoup plus de composants que jQuery UI.
Paramètre | Ext JS | Angulaire JS |
---|---|---|
UI riche | Ext JS fournit des options d'interface utilisateur riches telles que des formulaires, des grilles, des graphiques | Angular JS ne fournit pas d'interface utilisateur riche intégrée |
Composants d'interface utilisateur de thème riche | Ext JS fournit plusieurs thèmes intégrés | Angular JS ne fournit pas d'interface utilisateur riche, il doit être intégré à AngularUI, AngularBootstarp, etc. |
Compatibilité entre navigateurs | Ext JS offre une compatibilité entre navigateurs et fonctionne pour presque tous les navigateurs IE6 +, FF, Chrome, Safari, Opera, etc. | Angular JS doit utiliser une bibliothèque tierce telle que jQuery, jqLite pour résoudre cet objectif. |
Support de test automatique | Possible uniquement avec des outils externes | Fournit intégré. |
Liaison de données bidirectionnelle | Dans Ext JS 5, la liaison bidirectionnelle est incluse. | Il prend en charge le démarrage de la liaison bidirectionnelle à partir de la première version. |
Performance | Ext JS est comparativement plus lourd et plus lent. | Angular JS est un cadre plus léger que Ext JS |
Créer des outils | Ext JS utilise l'outil Sencha cmd pour les builds | Angular JS utilise des outils tiers tels que grunt. |
Ext JS 1.1
La première version d'Ext JS a été développée par Jack Slocum en 2006. C'était un ensemble de classes utilitaires qui est une extension de YUI. Il a nommé la bibliothèque YUI-ext.
Ext JS 2.0
Ext JS version 2.0 a été publié en 2007. Cette version avait une nouvelle documentation API pour les applications de bureau avec des fonctionnalités limitées. Cette version n'a pas de compatibilité descendante avec la version précédente d'Ext JS.
Ext JS 3.0
Ext JS version 3.0 a été publié en 2009. Cette version a ajouté de nouvelles fonctionnalités comme des graphiques et des vues de liste, mais au détriment de la vitesse. Il était rétrocompatible avec la version 2.0.
Ext JS 4.0
Après la sortie d'Ext JS 3, les développeurs d'Ext JS ont eu le défi majeur d'augmenter la vitesse. Ext JS version 4.0 a été publié en 2011. Il avait la structure révisée complète qui a suivi par l'architecture MVC et une application rapide.
Ext JS 5.0
Ext JS version 5.0 a été publié en 2014. Le changement majeur dans cette version a été de changer l'architecture MVC en architecture MVVM. Il comprend la possibilité de créer des applications de bureau sur des appareils tactiles, une liaison de données bidirectionnelle, des mises en page réactives et de nombreuses autres fonctionnalités.
Ext JS 6.0
Ext JS 6 fusionne le framework Ext JS (pour application de bureau) et sencha touch (pour application mobile).
Ext JS a divers composants d'interface utilisateur, certains des composants les plus utilisés sont -
- Grid
- Form
- Messagerie
- Barre de progression
- Info-bulle
- Window
- Éditeur HTML
- Charts
xType définit le type de composant d'interface utilisateur Ext JS, qui est déterminé lors du rendu du composant. Par exemple, textField, Numeric, bouton, etc.
C'est le type de validation qui peut être personnalisé facilement. Peu de vType fournis par Ext JS sont -
alphanumText - Cela renvoie false si le texte saisi a un symbole autre qu'une valeur alphabétique ou numérique.
emailText - Cela renvoie false, si le texte n'est pas une adresse e-mail valide.
Oui, Ext JS peut être intégré à Ajax. Implémentation comme: supposons que sur une zone de texte après le flou, il faut valider les données du serveur pour cela nous pouvons avoir un appel Ajax onblur / onchange à l'id de la zone de texte pour vérifier si les données saisies dans la zone de texte sont présentes dans le serveur / base de données .
Oui, Ext JS peut être intégré à d'autres frameworks côté serveur tels que Java, .net, Ruby on rails, PHP, ColdFusion, etc.
Ext JS peut être implémenté sur n'importe quel environnement de développement intégré (IDE) populaire tel qu'Eclipse, Aptana, Sublime, Webstrom, etc.
Voici quelques moyens d'accéder aux éléments DOM dans Ext JS -
- Ext.get()
- Ext.getElementById()
- Ext.fly()
- Ext.select()
L'architecture MVVM est Model View Viewmodel. Dans l'architecture MVVM, le contrôleur de MVC est remplacé par ViewModel.
ViewModel- C'est essentiellement médicamenteux les changements entre la vue et le modèle. Il lie les données du modèle à la vue. En même temps, il n'a pas d'interaction directe avec la vue, il n'a qu'une connaissance du modèle.
Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});
Ext.onReady () est la première méthode qui est appelée lorsque le DOM est complètement chargé afin que l'élément que vous souhaitez référencer soit disponible lors de l'exécution du script.
Ext.select('div').on('click', function(){
// statement to perform logic
});
Différents types de boîtes d'alerte dans Ext JS sont -
- Ext.MessageBox.alert();
- Ext.MessageBox.confirm();
- Ext.MessageBox.wait();
- Ext.MessageBox.promt();
- Ext.MessageBox.show();
Les classes de base pour Store sont Ext.data.Store
Pour le modèle est Ext.data.Model
Pour Controller est Ext.app.controller
Voici les différentes manières de gérer les événements -
- Utilisation des auditeurs
- Joindre des événements plus tard
- Utilisation d'événements personnalisés
Store.getCount() - Pour les enregistrements mis en cache
Store.getTotalCount() - Pour le nombre total d'enregistrements dans la base de données.
La méthode Store.getModifiedRecords () est utilisée pour obtenir les enregistrements modifiés.
Store.commitChanges () pour mettre à jour les modifications du magasin.
Si nous avons un ID de grille: Ext.getCmp ('gridId'). GetStore (). GetAt (index);
Si nous avons un identifiant de magasin: Ext.getStore ('storeId'). GetAt (index);
Store.load ();
- Classe de base pour Grid - Ext.grid.GridPanel
- Pour le formulaire - Ext.form.Panel
- Pour panneau - Panneau ext.Panel
- Pour le graphique - Graphique ext.
- Pour arbre - Ext.tree.Panel
Différents types de mises en page sont -
- Absolute
- Accordion
- Anchor
- Border
- Auto
- hBox
- vBox
- Card(TabPanel)
- Card(Wizard)
- Column
- Fit
- Table
Cela peut être fait en utilisant pagingToolbar () comme -
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');
});
}]
}]
Loadmask est utilisé pour empêcher toute autre opération en affichant le chargement (ou le message personnalisé) à l'utilisateur jusqu'à ce que les données soient rendues dans la grille. Loadmask: vrai; est la propriété pour afficher loadmask pendant le rendu des données sur la grille.
Renderer est utilisé lorsque nous voulons manipuler les données que nous obtenons du magasin pour afficher des données manipulées en fonction de certains critères. C'est une propriété de colonne qui peut être utilisée comme -
renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
}
Ext.getCmp ('id'). GetValue ();
Caché: vrai;
Triable: vrai; qui est vrai par défaut.
grid.getStore().on ({
beforeload : function(store) {
// perform some operation
},
load : {
fn : function(store) {
//perform some operation
},
scope : this
}
store.load();
});
Ext JS 6 a un package de boîte à outils avec lequel il peut inclure des éléments visuels des deux frameworks (Ext JS et Sencha Touch).
Il peut être ajouté comme -
'toolkit': 'classique', // ou 'moderne'
Si la boîte à outils est classique, elle inclut le cadre d'application de bureau Ext JS.
Et si la boîte à outils est moderne, elle comprend le cadre d'application mobile sencha touch.
Quelle est la prochaine?
De plus, vous pouvez passer en revue vos missions passées que vous avez effectuées sur le sujet et vous assurer que vous êtes en mesure de parler en toute confiance. Si vous êtes plus frais, l'intervieweur ne s'attend pas à ce que vous répondiez à des questions très complexes, mais vous devez plutôt rendre vos concepts de base très forts.
Deuxièmement, cela n'a pas vraiment d'importance si vous ne pouviez pas répondre à quelques questions, mais il importe que quoi que vous ayez répondu, vous ayez répondu avec confiance. Alors soyez confiant lors de votre entretien. Chez tutorialspoint, nous vous souhaitons bonne chance pour avoir un bon intervieweur et tout le meilleur pour votre entreprise future. À votre santé :-)