谁能告诉我我怎样才能使tbarFormPanel之间的这个空白消失?我希望工具栏适合显示的形式。



码:

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;}

07-24 09:44
查看更多