Ext.layout.CardLayout nécessite le plein écran?

Question

Je programme une application Sencha Touch avec une composition modérément complexe de Ext.TabBar avec Ext.Panel à l'intérieur.

Mais mon Ext.Panel en utilisant Ext.layout.CardLayout fonctionne dans un mystérieux problème quand ne pas avoir une propriété fullscreen: true définie sur: il jette un TypeError: Object card has no method 'setActiveItem' quand je tente d'appeler la méthode de .setActiveItem()panel ce qu'il n'a pas dans ma preuve de concept version qui avait fullscreen: true activée.

Je peux reproduire le problème sur la console de Chrome sur une page avec la bibliothèque Sencha tactile chargée comme ceci:

> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]}) 
undefined 
> p1.setActiveItem(0) 
TypeError: Object card has no method 'setActiveItem' 

Et il ne se produit pas avec la propriété .fullscreen:

> var p2 = new Ext.Panel({fullscreen: true, 
          layout:'card', 
          items:[{html:'a'},{html:'b'}]}) 
undefined 
> p2.setActiveItem(0) 
subclass 

Qu'est-ce que donne?

info Version: J'utilise Sencha touch 1.0.1a

Update 1 (3 janv, 10.30UTC ~ + 1h), pas à pas autour avec le débogueur et découvrir des choses:

Le simple paramétrage layout: 'card' ne déclenche pas la création d'un objet réel Ext.layout.CardLayout en cours de création. Puisque .setActiveItem() essaie de déléguer à la propriété .layout du compent, il échouera presque instantanément. Cependant, la mise en .layout à une nouvelle Ext.layout.CardLayout provoque plus de problèmes en bas de la ligne ..

Mise à jour 2: (3 janvier ~ 12: 25UTC + 1h) Tout se résume à divers composants objets non être rendus/insérés dans la dépendance suffisante pour être prêt à rendre. J'ai réussi à faire fonctionner mon code en ajoutant des écouteurs, d'abord un écouteur pour l'événement added dans le panneau qui contient un this.setLayout(new Ext.layout.CardLayout());, puis un écouteur afterrender sur le composant ajouté qui appelle finalement .setActiveItem() pour passer à la carte désirée.

Answer 1

Une disposition de carte fonctionne bien quand ce n'est pas l'extérieur, plein écran, mais bien sûr quelque chose doit être la racine, panneau plein écran.

Dans ce cas, j'utilise une mise en page « ajustement » autour de la mise en page de la carte intérieure et réglage de l'élément actif fonctionne très bien:

var inner = new Ext.Panel({ 
    layout:'card', 
    items:[ 
     {html:'a'}, 
     {html:'b'} 
    ] 
}); 

var outer = new Ext.Panel({ 
    fullscreen:true, 
    layout:'fit', 
    items:[ 
     inner 
    ] 
}); 

Je soupçonne que la question est plus de savoir si le groupe spécial a été rendu ou non, et fullscreen: true arrive juste à forcer le rendu immédiat (et de tous les enfants, c'est pourquoi cela fonctionne dans mon code ci-dessus).

C'est de la source Ext.Component:

if (this.fullscreen || this.floating) { 
    this.monitorOrientation = true; 
    this.autoRender = true; 
} 

if (this.fullscreen) { 
    var viewportSize = Ext.Viewport.getSize(); 
    this.width = viewportSize.width; 
    this.height = viewportSize.height; 
    this.cls = (this.cls || '') + ' x-fullscreen'; 
    this.renderTo = document.body; 
} 

Je suppose que vous pourriez faire partie de cet ensemble manuellement ...mais je dois demander, comment évitez-vous d'avoir un composant ancêtre plein écran à l'extérieur en premier lieu?

Answer 2

Mise à jour 2 dans ma question sorte de réponses à la question, bien que la solution se sente distinctement cargaison-culte. Je ne serai pas trop surpris si cela se brise dans les futures versions de Sencha Touch.

Answer 3

J'ai eu le même problème. La mise en page de la carte ne fonctionne que si le panneau de conteneur a la disposition de 'ajustement'. Mais le réglage de la classe de conteneur a fait que le défilement ne fonctionnait pas correctement. Donc, ce que je devais faire est de désactiver le scroller pour le conteneur et le panneau de la carte et définir le scroller pour les enfants du panneau de la carte.

Answer 4

Sencha a peut-être changé cela depuis sa publication car je n'ai pas d'erreur. Cependant, setActiveItem() force le rendu immédiat de mes vues, ce qui n'est pas souhaitable lors de la configuration de l'interface utilisateur. Si vous souhaitez définir la carte initiale sans rendre les vues immédiatement, utilisez la propriété directement au lieu du poseur, comme ceci:

yourComp.activeItem = yourView; 

au lieu de

yourComp.setActiveItem(yourView);