将面板中心的组件对齐：EXT JS [英] Align components in the center in a Panel: EXT JS

问题描述

我是新的ext JS，我试着在FormPanel中放置3个组件，但是我不知道在中心对齐它们。

这是我的代码

  var durationForm = new Ext.FormPanel （{
 border：false，
 labelAlign：'top'，
 frame：true，
 bodyStyle：'padding-left：475px;'，
 items： {
 items：[{
 rowWidth：.5，
 layout：'column'，
 items：[{
 columnWidth：.13，
 layout ：'form'，
 items：[getNewLabel（'< br />< font size =3> Duration：< / font>'）] 
}，{
 columnWidth：.20，
 layout：'form'，
 items：[fromDate（）] 
}，{
 columnWidth：.17，
 layout： 'form'，
 items：[toDa te（）] 
}] 
}] 
}] 
}）; 
 
 durationForm.render（Ext.getBody（））; 
  

这显示了这样的输出

但是我希望组件在面板的中心对齐。任何人都知道如何做？

解决方案

我已经通过使用table布局解决了这个问题：

  {
 layout：'fit'，//父面板应该有'fit'布局
 items：[// and only一个项目
 {
 xtype：'panel'，
 border：false，//可选
布局：{
类型：'table'，
列：1，
 tableAttrs：{
 style：{
 width：'100％'，
 height：'100％'
} 
}，
 tdAttrs：{
 align：'center'，
 valign：'middle'，
}，
}，
 items：[//单个容器嵌套组件
 {
 xtype：'panel'，
 layout：'fit'，
 cellId：'cell_id'，//这个将被放置为TD 
项的id：[
 {}，{}，{} //嵌套组件
] 
} 
] 
} 
] 
} 
  

I am new to ext JS and I am tryin gto place 3 components in a FormPanel but I don't know ho wto align them in the center.

Here is my code

var durationForm = new Ext.FormPanel({
        border      : false,
        labelAlign  : 'top',
        frame       : true,
        bodyStyle   : 'padding-left:475px;',
        items: [{
          items: [{
            rowWidth    : .5,
            layout      :'column',
                items:[{
                    columnWidth     : .13,
                    layout          : 'form',
                    items           : [getNewLabel('<br/><font size="3">Duration: </font>')]
                },{
                    columnWidth     : .20,
                    layout          : 'form',
                    items           : [fromDate()]
                },{
                    columnWidth     : .17,
                    layout          : 'form',
                    items           : [toDate()]
                }]
          }]
        }]
    });

    durationForm.render(Ext.getBody());

This shows output like this

But I want components to be align in the center of the panel. Anyone know how to do it?

解决方案

I have solved this problem by using 'table' layout:

{
    layout : 'fit', // parent panel should have 'fit' layout 
    items : [ // and only one item
        {
            xtype : 'panel',
            border : false, // optional
            layout : {
                type : 'table',
                columns : 1, 
                tableAttrs : {
                    style : {
                        width : '100%',
                        height : '100%'                                 
                    }
                },
                tdAttrs : {
                    align : 'center',
                    valign : 'middle',
                },
            },
            items : [ // a single container for nested components
                {
                    xtype : 'panel',
                    layout : 'fit',
                    cellId : 'cell_id', // this one will be placed as id for TD
                    items : [
                         {}, {}, {} // nested components
                    ]
                }
            ]
        }
    ]
}

这篇关于将面板中心的组件对齐：EXT JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！