EXTJS 3.4 面板中的项目对齐问题
Posted
技术标签:
【中文标题】EXTJS 3.4 面板中的项目对齐问题【英文标题】：EXTJS 3.4 items alignment issues in panel 【发布时间】：2012-12-22 14:20:59 【问题描述】：团队我在 ext js 面板中面临两个项目对齐问题。我使用的是 extjs 3.4 版。
基本上我想在每行中水平对齐两个面板文本框，但目前每行只有一个。
面板和第一个文本框之间似乎没有空格。有什么方法可以在 EXTJS 3.4 中做到这一点
代码：
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function()
var tab2 = new Ext.FormPanel(
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
title: 'formname',
bodyStyle:'padding:5px',
scrollable:'true',
border:'true',
width: 1200,
height:600,
items: [
xtype:'panel',
height:200,
autoScroll:true,
defaults: flex: 1, layout: 'form', border: false,
layout:'hbox',
items:[
title:'Personal Details',
defaultType: 'textfield',
items: [
fieldLabel: 'First Name',
name: 'first',
width:200,
allowBlank:false,
value: 'Jack'
,
fieldLabel: 'Last Name',
name: 'last',
width:200,
value: 'Slocum'
,
xtype:'combo',
fieldLabel: 'Company',
name: 'company',
width:200,
value: 'Ext JS'
,
fieldLabel: 'Email',
name: 'email',
width:200,
vtype:'email'
]
]
],
buttons: [
text: 'Save'
,
text: 'Cancel'
]
);
tab2.render(document.body);
);
</script>
</div>
</body>
</html>
【问题讨论】：
【参考方案1】：IMO 最简单的方法是使用FormLayout 并通过 CSS 修改定位。 FormLayout 中的每个字段都包裹在div.x-form-item 中，因此您可以为其设置float: left 样式。如果将字段的宽度调整为面板的宽度，这就是您需要做的一切。否则，您必须在每个第二个字段上设置 clear: left。
工作样本：http://jsfiddle.net/wC5hZ/2/
您也可以使用TableLayout，但代码会更多。
【讨论】：
以上是关于EXTJS 3.4 面板中的项目对齐问题的主要内容，如果未能解决你的问题，请参考以下文章
ExtJS (3.4)：更新 TabPanel 中面板的工具提示