HBOX布局中的元素对齐extjs 4

我需要将3个元素置于页面中心的对方之下。这与HBOX不存在问题。但我的元素有不同的宽度：两个宽度为350的元素和一个宽度为1000的元素。这里是样本：HBOX布局中的元素对齐extjs 4

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() 
    });

主要问题是元素的水平排列。第二个问题是：如果屏幕的分辨率很小，没有滚动条，并且面板中有大文本。

好的，又如：

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() 
});

该面板将是完全在屏幕的中间，但形式不会。 P.S.我试图将布局移动到容器 - 它不起作用

来源

2012-06-04 Evgeniy Timchenko

你能否以适当的宽度更新你的代码示例？你也试图使用vbox或hbox？ – sha

对不起，我很着急。这段代码是我的代码，所以我使用HBOX和mi width 350px和1000px –

再次请更正您的问题 - 您在标题和标签中包含VBOX，但代码中包含HBOX。您也谈论宽度，但在代码中有高度 – sha

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() 
});

我想，也许你应该定义一个minHeight的容器，包括布局'fit'到容器，以获得自动滚屏面板。

并且将vbox布局包含在“物品”项目中。

来源

2014-03-10 15:05:10

这个工作对我来说： 'Ext.create（ 'Ext.Viewport'，{ 布局： '适应'，自动滚屏：真实，项目：{ 的xtype： '容器'，了minHeight：845，' 哪里845是我的内容的高度，但我仍然有水平线吧：（ –

''让我开心，没有水平滚动条。 –

首先将容器中的布局定义移动。它与视口无关。其次为你的布局，我认为你应该使用

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

我也觉得可能是有东西的方式ExtJS的布局图像 - 因为当我试着在你的jsfiddle例如 - 图像仍然不会VBOX布局，但其他组件 - （框或按钮）将布局仅仅指刚精细

来源

2012-06-04 13:03:46 sha

我试图将布局移动到容器并将“中间”更改为“中心” - 不起作用。关于图片...我已经发布了另一个代码与图像。 –

在半相关说明中，图像可能是一个问题，因为在布局时图像尚未加载并具有0x0尺寸。我不得不采取一种解决方法让负载监听器在容器上调用doComponentLayout。 –

HBOX布局中的元素对齐extjs 4

回答

相关问题