8

だから私は ExtJS 4.1 を使用しています。2 つのアイテムを含むビューポートがあります。それらは正しく積み重ねられていますが、それらの間にスペースを入れたいです。マージンが機能していないようです。

var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.onReady(function() {
    Ext.QuickTips.init();

    window.formPanel = Ext.widget({
        bodyPadding: '5 5 0',
        collapsible: false,
        defaultType: 'textfield',
        frame: true,
        id: 'formPanel',
        layout: 'form',
        renderTo: '',
        title: 'Spring Demo 3 (Lookup Transfer Request)',
        url: contextPath + '/users/ajax',
        width: 450,
        xtype: 'form',

        buttons: [{
            text: 'Check Status',
            scope: this,
            handler: function() {
                formPanel.getForm().submit({
                    success: function(res, req) {

                    }
                });
            }
        }],

        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 105
        },

        items: [{
            afterLabelTextTpl: required,
            allowBlank: false,
            fieldLabel: 'Username',
            name: 'username',
            value: ''
        }, {
            afterLabelTextTpl: required,
            allowBlank: false,
            fieldLabel: 'TXID',
            name: 'txid',
            value: ''
        }]
    });

    window.resultsPanel = Ext.widget({
        items: [{
            id: 'labMessage',
            margin: '0 0 0 10',
            text: 'Waiting....',
            xtype: 'label'
        }],
        title: 'Results',
        xtype: 'panel'
    });

    window.viewPort = Ext.widget({
        items: [formPanel, resultsPanel],
        layout: {
            align: 'center',
            pack: 'center',
            type: 'vbox'
        },
        margins: '10 10 10 10',
        padding: '10 10 10 10',
        renderTo: 'container',
        xtype: 'viewport'
    });
});
4

1 に答える 1

18

Ext.layout.container.VBoxレイアウトには、子コンポーネントにそれぞれのスタイルを適用するpaddingおよび構成があります。defaultMargins命名に一貫性がない理由はわかりませんが、それがドキュメントに書かれていることです。

サンプル コードを見ると、マージンを間違ったコンポーネントに適用しているようです。パネル間の間隔が必要な場合は、コンテナーではなくパネル自体にマージン/パディング設定を配置します。

window.resultsPanel = Ext.widget({
    xtype:  "panel",
    title:  "Results",
    margin: "10 0 0 0",  // Same as CSS ordering (top, right, bottom, left)
    items:  [{
        xtype:  "label",
        id:     "labMessage",
        margin: "0 0 0 10",
        text:   "Waiting..."
    }]
});
于 2012-09-18T19:38:35.660 に答える