所以我使用的是ExtJS 4.1。我有一个包含两个项目的视口。它们堆叠正确但我想在它们之间留出一些空间。边距似乎不起作用。
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
Ext.onReady(function() {
Ext.QuickTips.init();
window.formPanel = Ext.widget({
bodyPadding: '5 5 0',
collapsible: false,
defaultType: 'textfield',
frame: true,
id: 'formPanel',
layout: 'form',
renderTo: '',
title: 'Spring Demo 3 (Lookup Transfer Request)',
url: contextPath + '/users/ajax',
width: 450,
xtype: 'form',
buttons: [{
text: 'Check Status',
scope: this,
handler: function() {
formPanel.getForm().submit({
success: function(res, req) {
}
});
}
}],
fieldDefaults: {
msgTarget: 'side',
labelWidth: 105
},
items: [{
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'Username',
name: 'username',
value: ''
}, {
afterLabelTextTpl: required,
allowBlank: false,
fieldLabel: 'TXID',
name: 'txid',
value: ''
}]
});
window.resultsPanel = Ext.widget({
items: [{
id: 'labMessage',
margin: '0 0 0 10',
text: 'Waiting....',
xtype: 'label'
}],
title: 'Results',
xtype: 'panel'
});
window.viewPort = Ext.widget({
items: [formPanel, resultsPanel],
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
},
margins: '10 10 10 10',
padding: '10 10 10 10',
renderTo: 'container',
xtype: 'viewport'
});
});
答案 0 :(得分:18)
Ext.layout.container.VBox
布局具有padding
和defaultMargins
配置,这些配置会将相应的样式应用于子组件。我不知道为什么命名不一致,但这就是文档所说的。
查看示例代码,看起来您正在将边距应用于错误的组件。如果您想要面板之间的间距,请将边距/填充设置放在面板本身而不是容器上。
window.resultsPanel = Ext.widget({
xtype: "panel",
title: "Results",
margin: "10 0 0 0", // Same as CSS ordering (top, right, bottom, left)
items: [{
xtype: "label",
id: "labMessage",
margin: "0 0 0 10",
text: "Waiting..."
}]
});