在面板中心对齐组件:EXT JS [英] Align components in the center in a Panel: EXT JS
本文介绍了在面板中心对齐组件:EXT JS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是 ext JS 的新手,我正在尝试在 FormPanel 中放置 3 个组件,但我不知道如何将它们居中对齐.
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.
这是我的代码
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());
这显示了这样的输出
但我希望组件在面板的中心对齐.有人知道怎么做吗?
But I want components to be align in the center of the panel. Anyone know how to do it?
推荐答案
我已经通过使用 'table' 布局解决了这个问题:
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屋!
查看全文