1

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

ここに画像の説明を入力

4

1 に答える 1

3

パディングがある理由は、frame：trueがあるためです。これを取り除くには、CSSルールを使用してパディングの原因となる3つのものをターゲットにします。パネルに「form-customer-contact」のような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;}
于 2011-03-14T18:16:44.603 に答える