javascript - 我怎样才能让 Ext JS 窗体和它的工具栏之间的边距消失？

Question

谁能告诉我如何让 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， margin 已经出来了，下面是有效的代码及其外观:

#form_customer_information .x-panel-ml,
#form_customer_information .x-panel-mr,
#form_customer_information .x-panel-mc
{
    padding:0px;
}

Answer 1

存在填充的原因是因为您有 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 的配置选项并使用此 CSS 规则:

.form-customer-contact .x-panel-body
{padding:10px;}