下面的ExtJS代码创建了彼此左右两个区域,如下所示：
我必须更改这个代码,使两个区域最上方对齐？
<script type="text/javascript">
var template_topbottom_top = new Ext.Panel({
frame: false,border: false,header: false,items: []
});
var template_topbottom_bottom = new Ext.Panel({
frame: false,items: []
});
var template_topbottom = new Ext.Panel({
id:'template_topbottom',baseCls:'x-plain',renderTo: Ext.getBody(),layout:'table',layoutConfig: {columns:2},defaults: {
frame:true,style: 'margin: 10px 0 0 10px; vertical-align: top' //doesn't work
},items:[{
width: 210,height: 300,frame: false,border: true,items: [template_topbottom_top]
},{
width: 1210,height: 200,items: [template_topbottom_bottom]
}
]
});
replaceComponentContent(targetRegion,template_topbottom,true);
</script>
解决方法
在ExtJS 4中,您可以使用tdAttrs配置选项：
layout: {
type: 'table',columns: 2,tdAttrs: {
valign: 'top'
}
}
