Placer une fenêtre modale dans la fenêtre d'affichage

Je viens de commencer ExtJS, de sorte qu'il peut être très banal ce que je demande ici. Je viens de terminer la voitures tutoriel de la Sencha site web et je suis maintenant en essayant de créer quelque chose. J'ai ajouté un Viewport comme point de vue initial, et là, j'ai placé un Panel qui détient tous mes widgets:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'fit'
    },
    ...
});

J'ai également créé un Window qui peut être ouvert en cliquant sur un bouton:

Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 185,
    renderTo: 'MyApp.view.MyViewport',
    width: 334,
    layout: {
        type: 'absolute'
    },
    title: 'My Window',

    initComponent: function() {
      ...
    }
});

Et le onclick gestionnaire est comme ceci:

var wind = new MyApp.view.MyWindow();
wind.modal = true;
wind.show();

Le problème c'est que quand j'ouvre la fenêtre, il est rendu à l'intérieur du Viewport, sous tous les panneaux, au lieu de flotter dans le navigateur de la fenêtre d'affichage. Comment puis-je régler ce problème?

Mise à jour

J'ai créé un nouveau Window à l'aide de la Sencha Architect et ouvrir de la même façon. Il fonctionne comme prévu. Lorsque l'on regarde les séparer .js fichiers de MyWindow et MyWindow1, je ne vois pas de réelle différence.

MyWindow: http://pastebin.com/yE9V1twc

MyWindow1: http://pastebin.com/ZznUVZni

InformationsquelleAutor Bart Friederichs | 2013-04-19
  1. 1

    Si vous souhaitez afficher une fenêtre à l'intérieur de fenêtre d'affichage de la région (ou n'importe quel conteneur), nécessité de définir la propriété "contraindre" de la Poste.Fenêtre de vrai et de le rendre sur le conteneur de l'élément dom.
    Par exemple:

    //your window
Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',
    ...
    constrain: true,
    ...
});

//your viewport
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

...

initComponent: function() {
    var me = this;
    this.callParent();
    me.on({
        afterrender: function() { <-- or do it in the handler of the button
            Ext.create('MyApp.view.MyWindow', {
                renderTo: me.getComponent('vp-center').getEl()//<-- see itemId of center region
            }).show();
        }
    });
},

items: [{
    region: 'center',
    title: 'Center region',
    itemId: 'vp-center'
}]

...

    Voir l'exemple complet sur jsfiddle: http://jsfiddle.net/MNFJn/

    Vous pouvez également ajouter votre fenêtre comme un élément de la fenêtre d'affichage de la région. Voir les sources de sencha exemple:
    http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/layout/border.html?theme=gray

    • L'ajout de constrain travaillé, il n'est plus rendu en dehors de la fenêtre. Il n'est pas encore déplaçable bien. Et il est rendu dans le coin inférieur gauche.
    • Aussi, l'ajout d'une complètement nouvelle fenêtre (je suis en utilisant Sencha Architect), crée un MyWindow qui fonctionne comme prévu.
    InformationsquelleAutor Vlad
  2. 1

    Supprimer renderTo: 'MyApp.view.MyViewport', de votre MyWindow classe. Cela se traduira dans le code ci-dessous pour votre Fenêtre de définition:

    Ext.define('MyApp.view.MyWindow', {
    extend: 'Ext.window.Window',

    height: 185,
    width: 334,
    layout: {
        type: 'absolute'
    },
    title: 'My Window',

    initComponent: function() {
      ...
    }
});
    • Cela n'a aucun effet.
    InformationsquelleAutor vahissan