javascript 如何在 ExtJS 表格布局中顶部对齐两个区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5220253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I top align two areas in an ExtJS table layout?
提问by Edward Tanguay
The ExtJS code below creates two regions to the left and right of each other, like this:
下面的 ExtJS 代码在彼此的左侧和右侧创建了两个区域，如下所示：
What do I have to change to this code so that the two areas are top aligned?
我必须对此代码进行哪些更改才能使两个区域顶部对齐？
<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,
border: false,
header: 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,
header: false,
items: [template_topbottom_top]
},{
width: 1210,
height: 200,
frame: false,
border: true,
header: false,
items: [template_topbottom_bottom]
}
]
});
replaceComponentContent(targetRegion, template_topbottom, true);
</script>
回答by nogridbag
In ExtJS 4, you can use the tdAttrs config option:
在 ExtJS 4 中，您可以使用 tdAttrs 配置选项：
layout: {
type: 'table',
columns: 2,
tdAttrs: {
valign: 'top'
}
}
回答by Sean Adkinson
For reuse, I would add a class style to your CSS file that will always top-align table layout cells.
为了重用，我将向您的 CSS 文件添加一个类样式，该样式将始终顶部对齐表格布局单元格。
<style>
.x-table-layout-cell-top-align td.x-table-layout-cell {
vertical-align: top;
}
</style>
This is preferred over a previous answer that used .table-layout tdas the CSS selector, because if you have a table within this table layout, that selector would top-align ALL cells, not just those associated with the table layout.
这比用作.table-layout tdCSS 选择器的先前答案更受欢迎，因为如果您在此表格布局中有一个表格，则该选择器将顶部对齐所有单元格，而不仅仅是与表格布局相关联的单元格。
You would add this class to your Ext.Panellike so:
您可以将此类添加到您的Ext.Panel喜欢中：
new Ext.Panel({
cls: 'x-table-layout-cell-top-align',
layout: 'table',
items: [
...
]
})
If your panel already has a clsattribute, you can add additional classes with spaces:
如果您的面板已经有一个cls属性，您可以添加带有空格的其他类：
cls: 'my-container-cls x-table-layout-cell-top-align',
回答by Juan Mendes
Both suggested answers may do it. But the best answer (at least with Ext-JS 4), is to use an HBox layout and use the align: top, layout config.
两个建议的答案都可以做到。但是最好的答案（至少对于 Ext-JS 4）是使用 HBox 布局并使用align: top, 布局配置。
Go to http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.htmland click on the button that says: 'Align: top', or 'Align: stretch'
转到http://docs.sencha.com/ext-js/4-0/#!/example/layout/hbox.html并单击显示以下内容的按钮：“对齐：顶部”或“对齐：拉伸”
回答by Ru5
tdAttrs : {
style : {
verticalAlign : 'top'
}
}
回答by Jason
<style>
.x-table-layout td {
vertical-align:top;
}
</style>
