alignement des éléments dans la disposition HBOX extjs 4

Question

Je dois placer trois éléments l'un sous l'autre au centre de la page. Ce n'est pas un problème avec HBOX. Mais mes éléments ont des largeurs différentes: deux éléments de largeur 350 et un élément de largeur 1000. voici l'exemple:

Ext.create('Ext.Viewport', { 
      layout: { 
       type: "hbox", 
       pack: "center", 
       align: "middle" 
      }, 
      items: { 
       xtype: 'container', 
       items:[{ 
        xtype: 'image', 
        height: 350, 
        width: 350, 
        src: '/images/logo.jpg' 
       },{ 
        xtype: 'image', 
        height: 350, 
        width: 350, 
        src: '/images/logo2.jpg' 
       },{ 
        xtype: 'panel', 
        width: 1000, 
        margin: '0px 0px 0px -325px', 
        frame: true, 
        autoscroll: true, 
        title: 'panel title', 
        html: 'some panel with some rows with<br /> some text' 
       }] 
      }, 
      renderTo: Ext.getBody() 
    }); 

Le problème principal est l'alignement horizontal des éléments. Le deuxième problème est: pas de barre de défilement si la résolution de l'écran est petite et j'ai un gros texte dans le panneau.

Ok, un autre exemple:

Ext.create('Ext.Viewport', { 
       layout: { 
        type: "hbox", 
        pack: "center", 
        align: "middle" 
       }, 
       items: { 
        xtype: 'container', 
        items:[{ 
         xtype: 'form', 
         width: 350, 
         title: 'Form Panel', 
         items: [{ 
          xtype: 'textfield', 
          fieldLabel: 'Name' 
         }] 
        },{ 
         xtype: 'panel', 
         width: 1000, 
         frame: true, 
         autoscroll: true, 
         title: 'panel title', 
         html: 'some panel with some rows with<br /> some text' 
        }] 
       }, 
       renderTo: Ext.getBody() 
}); 

Ce panneau sera exactement au milieu de l'écran, mais le formulaire ne sera pas. P.S. J'ai essayé de déplacer la mise en page dans le conteneur - cela ne fonctionne pas

Answer 1

Ext.create('Ext.Viewport', { 
    layout : 'fit', 
    autoScroll : true, 
    items: { 
     xtype: 'container', 
     autoScroll : true, 
     minHeight : 1000, 
     layout: { 
      type: "vbox", 
      pack: "center", 
      align: "center" 
     }, 
     items:[{ 
      xtype: 'image', 
      height: 350, 
      width: 350, 
      src: '/images/logo.jpg' 
     },{ 
      xtype: 'image', 
      height: 350, 
      width: 350, 
      src: '/images/logo.jpg' 
     },{ 
      xtype: 'panel', 
      width: 1000, 
      margin: '0px 0px 0px -325px', 
      frame: true, 
      title: 'panel title', 
      html: 'some panel with some rows with<br /> some text' 
     }] 
    }, 
    renderTo: Ext.getBody() 
}); 

Je pense que vous devriez peut-être définir un minHeight au conteneur, et inclure la mise en page 'fit' au conteneur afin d'obtenir le panneau de défilement automatique.

Et d'inclure la disposition vbox aux éléments du contianer.

Answer 2

Tout d'abord, déplacez votre définition de disposition à l'intérieur du conteneur. Cela n'a rien à voir avec viewport. Deuxièmement pour votre mise en page Je pense que vous devriez utiliser

type: 'vbox', 
align: 'center', 
pack: 'center', 

Je pense aussi qu'il pourrait y avoir quelque chose avec la façon dont ExtJs mises en page des images - parce que quand j'ai essayé votre exemple jsFiddle - les images ne seront toujours pas mise en page Vbox, mais d'autres composants - (boîte ou bouton) serait mise en page jsut fin