Nous avons développé à l'aide du descripteur de construction par défaut Nous avons maintenant besoin de la même application pour travailler avec mobile mais pas nécessairement la même page d'accueil sur le bureau ou la charge mobile.
L'utilisateur visite la page http://example.com à l'aide d'un navigateur de bureau. Puis il voit la mise en page de la vue pour le bureau de Nous avons trouvé cette page à l'intérieur de la documentation sans grande aide: HTTPS: // DOCS. sencha.com/extjs/6.0/core_concepts/tablet_support.html
En réalité une page qui fonctionne actuellement entièrement OK sur le bureau lors de la mise sous tension du simulateur de chrome (réglage par exemple le simulateur Apple iPad) Nous obtenons les erreurs suivantes dans la console:
Nous avons besoin de quelques étapes nécessaires pour la configurer correctement. classique jusqu'à présent pour construire des pages Web dynamiques pour le bureau.
L'utilisateur visite la page http://example.com à l'aide d'un navigateur mobile. Ensuite, il voit la mise en page de la vue pour le mobile (pourrait être un fichier de vue total différent)
3 Réponses :
La question est très large et je ne vois pas ce que vous avez fait et pourquoi il échoue. Le support tactile nommé derrière votre lien est pour la boîte à outils classique, pas pour le moderne, donc si vous souhaitez utiliser la boîte à outils moderne, oubliez ce lien.
Comme avec la plupart de ces changements de cadre, vous êtes le mieux de créer un nouvel environnement d'application ( Ensuite, ne mettez pas seulement tout le code dans un répertoire unique. Vous devez dissecter vos fichiers de code existants en deux parties: "Utilisé pour les deux boîtes à outils" et "utilisé uniquement pour classique uniquement". Les vues sont généralement classiques uniquement, tandis que certains modèles et magasins peuvent être universels. Les deux parties vont dans deux répertoires différents: Seulement alors écrivez les vues de la boîte à outils moderne (mettez-les dans Sencha Generate App ), puis le portage (copie) votre code source sur. Lors de la génération d'un nouvel environnement d'application, ne fournissez pas de boîte à outils de configuration, une application universelle est donc créée.
src pour la partie universelle et classique / src pour la partie classique.
MODERN / SRC ), et tout devrait compiler bien.
Nous ne créons pas une nouvelle application. Au lieu de cela, nous essayons d'améliorer l'application déjà existante pour travailler également sur mobile avec une mise en page différente. Nous pensons que cela peut être fait en permettant une boîte à outils moderne. Nous pourrions être complètement faux ... Nous recherchons comment configurer correctement. Pouvez-vous aider?
@Georgepligor Vous êtes complètement faux dans les deux cas. Vous ne pouvez pas simplement "activer" la boîte à outils moderne, vous devez écrire les vues à partir de zéro, car ils ne sont pas entièrement compatibles (et je suppose qu'ils ne seront jamais, bien qu'ils essaient durement pour extjs7). Et pour configurer une telle application universelle, le moyen le plus simple est de générer une "nouvelle" application, puis de mettre tout votre code existant dans les répertoires appropriés, car les fichiers de configuration (app.json, bootstrap.json, etc.) ne sont pas bien documentés.
Je tiens à souligner que les meilleures stratégies de mises à niveau Sencha Touch -> ExtJS 6 et ExtJS4 -> ExtJS 6 doivent également générer une nouvelle application et copier sur le code JS.
Juste pour clarifier: Nous construisons déjà à EXTJS6. Pas besoin de migrer de extjs4 ou extjs5
Veuillez considérer le comportement attendu. Regarde au-dessus. Nous avons édité la question. Merci
Avez-vous des suggestions ou allons-nous créer une nouvelle question?
@Georgepligor C'est exactement ce qu'est une application universelle extjs. Ma réponse tient toujours 100%. Vous devriez essayer de procéder comme je vous l'ai dit.
Laissez-nous Continuez cette discussion en chat .
Alexandre a raison; La meilleure façon est de générer une nouvelle application universelle et de déplacer votre code de code existant dans cette nouvelle application.
@ EE-P Le problème est que nous n'avons pas la bonne compréhension sur la façon dont EXTJS fonctionne. Je vais éditer la question pour que cela facilite la réponse plus facile. La réponse de Alexander nous a confondues plus loin parce qu'il a probablement le bon modèle de ExtJs dans son esprit pendant que nous avons probablement le mauvais ..
Lorsque vous créez une nouvelle application dans EXTJS 6, vous ACESS SENCHA CMD et appelez: "Sencha Generate app namap. ../folderapp"
then, la structure suivante est créée: Cliquez ici pour voir la structure p>
Je ne connais pas la structure de votre code a été créé, mais Afin de travailler sur des appareils de bureau et mobiles, il est nécessaire de créer cette structure générée par Sencha CMD. P>
Après avoir obtenu cette structure (générer une nouvelle application est une meilleure pratique pour cela) Vous devez mettre le "modèle de rigueur de ExtJJS 6.0" dans votre esprit. EXTJS Autorise des architectures MVC ou MVVM. MVC Architecture est essentiellement contrôlée par un grand contrôleur qui peut contrôler tous les composants de votre application. En revanche, MVVM Architecture dispose d'un contrôleur pour chaque vue - il est instancié lorsque la vue est instanciée et détruite lorsque la vue est détruite. Cette architecture est recommandée dans ExtJS, en particulier dans les dernières versions. P>
Vous devez maintenant transférer le code effectué dans votre application réelle à la nouvelle application et à l'architecture. Mettez toute votre structure de vue dans NameApp> Classic> SRC> Vue. Ouvrez un nouveau dossier pour chaque vue. Ce dossier doit contenir la vue et le contrôleur de cette vue. Par exemple, créons une vue de liste: P>
namap> Classic> SRC> Vue> Liste> List.Js P>
NAMEAPP> Classic> SRC> Vue> Liste> Listcontroller.js
et ainsi de suite ... p>
Vous pouvez désormais créer des vues mobiles et des contrôleurs séparés, sur mobile> SRC> Voir le dossier, suivant le même modèle suivi en classique, mais vous devez utiliser Composants de la boîte à outils mobile bien sûr. p>
jusqu'à ici, vous avez une application mobile et classique séparée dans le même code. Mais vous pouvez utiliser la Power of ExtJS 6 par des classes génériques d'étendre à partir du dossier de l'application afin d'optimiser votre code. Par exemple, vous pouvez créer un contrôleur générique pour une vue spécifique, qui sera étendu dans des dossiers classiques et modernes: P>
NAMEAPP> App> Affichage> Liste> Listcontrolleric.js P>
Ext.define('NameApp.app.view.list.ListController', {
extend: 'NameApp.app.view.list.ListControllerGeneric',
//here you put code using in modern only
});
Merci pour votre réponse étendue. Nous avons réussi à découvrir ce qui se passe. Nous venons d'utiliser la boîte à outils moderne et que nous avons fait pas Créez l'une des nôtres en tant que mobile que vous avez mentionné. Une chose importante à éviter des accidents est de créer toutes les vues du dossier classique dans le dossier moderne, même si vous ne les utilisez pas vraiment sur mobile. En outre, lorsque vous utilisez les basket et mobiles, vous avez besoin SENCHA APP Watch Modern Pour tester à la fois classique et moderne mais Vous avez besoin SENCHA App Build Pour construire les deux (ou SENCHA App Build
Merci George pour vos commentaires. Je suis d'accord avec vous de créer toutes les vues à la fois modernes et classiques. Lorsque je développe des applications universelles, j'exécute deux instances de Sencha CMD - SENCHA App Watch Modern et Sencha application Watch Classic. Ensuite, lorsque je change quelque chose, l'application universelle est mise à jour. Je ne comprends pas où j'ai modifié ma réponse. Aidez-moi à éditer s'il vous plaît.
Je voulais juste modifier votre réponse afin d'inclure les choses écrites dans les commentaires de manière plus structurée. Merci
im Très nouveau à Sencha, mais je veux souligner que l'utilisation de: est essayé pour trouver tous mes fichiers sur le dossier de l'application, même si j'utilise "? moderne" ou utilisez le chrome devs comme agent utilisateur mobile. P> Utilisation: P> sencha app watch modern