谁能告诉我我怎样才能使tbar
和FormPanel
之间的这个空白消失?我希望工具栏适合显示的形式。
码:
var form_customer_contact = new Ext.FormPanel({
frame:true,
labelWidth: 90,
labelAlign: 'right',
title: 'Customer Contact',
bodyStyle:'padding:0',
width: 300,
height: 600,
autoScroll: true,
itemCls: 'form_row',
defaultType: 'displayfield',
tbar: [{
text: 'save',
iconCls: 'icon_green_check',
handler: function(){
window_wrapper.hide();
var show_button_click_result = new Ext.Panel({
title: 'Invoice Address',
width: 290,
height: 200,
html: 'customer contact saved',
frame: true,
border: true,
header: true
});
replaceComponentContent(small_box_upper_left, show_button_click_result, true);
}
}, '-', {
text: 'send protocol to customer',
iconCls: 'icon_arrow_box_upper_right',
handler: function(){
var show_button_click_result = new Ext.Panel({
title: 'Invoice Address',
width: 290,
height: 200,
html: 'protocol sent to customer',
frame: true,
border: true,
header: true
});
replaceComponentContent(small_box_upper_left, show_button_click_result, true);
}
}],
items: [{
fieldLabel: 'Customer Type',
name: 'customerType',
allowBlank:false,
value: 'Company'
},{
fieldLabel: 'Item 20',
name: 'item20',
value: 'test'
}, {
fieldLabel: 'Item 21',
name: 'item21',
value: 'test'
}, {
xtype: 'button',
text: '<span style="color:red">Cancel Order</span>',
anchor: '100%',
handler: function() {
var show_button_click_result = new Ext.Panel({
title: 'Invoice Address',
width: 290,
height: 200,
html: 'You cancelled the order.',
frame: true,
border: true,
header: true
});
replaceComponentContent(small_box_upper_left, show_button_click_result, true);
}
}
]
});
附录
多亏了@Johnathan,页边空白得以实现,这是可以工作的代码以及它的外观:
#form_customer_information .x-panel-ml,
#form_customer_information .x-panel-mr,
#form_customer_information .x-panel-mc
{
padding:0px;
}
最佳答案
存在填充的原因是因为您拥有frame:true -要摆脱它,只需使用CSS规则来定位导致填充的3件事。给您的面板一个ID,例如“ form-customer-contact”,然后使用以下3条规则:
.form-customer-contact .x-panel-ml,
.form-customer-contact .x-panel-mr,
.form-customer-contact .x-panel-mc
{padding:0px;}
[跟进]
您可能希望使用另一条规则将填充物放回表单主体中,因此仅扩展了工具栏...因此,摆脱bodyStyle的config选项并使用此CSS规则:
.form-customer-contact .x-panel-body
{padding:10px;}