如何获得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保证金出来了，这里是可行的，什么样子的代码：

#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，像“形式与客户接触”，然后用这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;}