extjs panneau de redimensionner tout en fenêtre se redimensionne

J'ai un panneau avec un "formulaire" de mise en page, contenant plusieurs boutons. maintenant je veux l'activer ce panneau redimensionner en fonction de redimensionnement de la fenêtre. Comment puis-je obtenir ce fait?

grâce.

OriginalL'auteur Simon | 2011-05-04

  1. 1

    Vous pouvez faire le panneau redimensionnable par la définition de la 'redimensionner' option de configuration, voir la documentation pour les différentes options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.

    Dont la forme composants interagissent vous aurez besoin de mettre de l'ancre si vous souhaitez utiliser un formulaire de mise en page ou de passer à une hbox/vbox type de set-up avec divers flex paramètres.

    OriginalL'auteur joekrell

  2. 13
    Ext.EventManager.onWindowResize(function(w, h){
    panel.doComponentLayout();
});

    En supposant que vous avez un groupe nommé "panneau" avec un dimensionnement automatique intégrées (par ex. height: "100%"). Sinon, la nouvelle largeur et la hauteur de la fenêtre sont passés dans la fonction anonyme transmise à onWindowResize().

    Je vous remercie. Ce post m'a aidé avec un tout autre problème.
    C'est la solution que je cherchais! J'ai eu pour redimensionner une fenêtre, donc j'ai tout simplement passé à la fonction anonyme de la hauteur et la largeur de la setSize fonction. window.setSize(w, h)
    Dans ExtJS 6 EventManager est obsolète, il faut donc utiliser la Ext.GlobalEvents au lieu de: Ext.GlobalEvents.on('resize', function(w, h) { ... });

    OriginalL'auteur dinesy

  3. 4

    Comme l'a écrit @deniztt vous devez vous abonner à EventManager classe onWindows Événement de Redimensionnement.

    Il peut être quelque chose comme ceci:

    Ext.EventManager.onWindowResize(function () {

    var width = Ext.getBody().getViewSize().width - 160;
    var height = Ext.getBody().getViewSize().height - 140;

    panel.setSize(width, height);

});

    Où le panneau est fait référence à votre panneau de

    Vous pouvez lire à ce sujet ici.

    Parfait pour ce que je voulais. Merci!

    OriginalL'auteur Gregory Nozik

  4. 0

    Vous pouvez définir la taille de la fenêtre et la valeur de l'enfant panneau de autoHeight et autoWidth attributs vrai.
    Une autre façon est de les attraper, les resize cas de la fenêtre et de redimensionner le panneau enfant en fonction de la nouvelle taille de valeurs.

    autoWidth et autoHeight ne semble pas fonctionner dans un diagramme de contexte. Je ne suis pas sûr si je fais quelque chose de mal ou si il y a un bug.

    OriginalL'auteur Deniz

  5. 0

    Grâce à Gegory et Joseph pour la EventManager solution. J'ai fait quelques modifications mineures apportées à cette solution, le remplacement de la getBody() avec un DIV et un réglage initial de la largeur ou de la hauteur de mon tableau (ou de toute autre composante):

    <div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
    var renderDiv = Ext.get('chart_div');
    var chart = Ext.create('Ext.chart.Chart', {
        renderTo: renderDiv,
        width: renderDiv.getWidth(),
        height: renderDiv.getHeight() - 50,
        ...
    });

    Ext.EventManager.onWindowResize(function () {
        var height = renderDiv.getHeight() -50;
        var width = renderDiv.getWidth();
        chart.setSize(width, height);
    });
});

    autoWidth et autoHeight ne semble pas fonctionner pour moi (Ext-JS 4.2.1).

    OriginalL'auteur fraber