Javascript 与Ext JS 4和fieldcontainer位置的对齐问题

我有一个窗口，一个面板（填充整个窗口空间），在这个窗口内，面板内有两个

fieldcontainers

，水平地在左侧和右侧

----------------------------
|            |             |
|            |             |
|  left FC   |  right FC   |
|            |             |
|            |             |
|            |             |
----------------------------

两者都可以在运行时隐藏，但是，当我设置

FC_left时。可见（false）

right

fieldcontainer

边框不在窗口的左侧，但在左侧窗口边框和左侧（此右侧

fieldcontainer

）容器边框之间有一个很大的空白。大概是这样的：

----------------------------
|     |                    |
|     |                    |
|     |      right FC      |
|     |                    |
|     |                    |
|     |                    |
----------------------------

当左容器器不可见时，我想在左边的位置看到右容器。如何做到这一点？

您需要被提供或提供给您的客户

在这里，我使用

面板和
字段容器创建了一个演示。我希望这将有助于/指导您实现您的要求

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        /*
         * this function will fire when hide/show button clicked
         * @param {Ext.button.Button}
         */
        function onHideShow(btn) {

            var fCnt = btn.up('panel').down(`#${btn.label}`);

            if (fCnt.isHidden()) {
                fCnt.setVisible(true);
                btn.setText(`Hide ${btn.label}`);
            } else {
                fCnt.setVisible(false);
                btn.setText(`Show ${btn.label}`);
            }
        }

        //Create panel with field container
        Ext.create('Ext.panel.Panel', {

            title: 'Basic example',

            //height:400,

            layout: 'hbox',

            bodyPadding: 10,

            defaults: {
                xtype: 'fieldcontainer',

                flex: 1,

                //width:'50%',

                style: 'border: 2px solid #ccc;',

                labelAlign: 'top',
                // The body area will contain three text fields, arranged
                // horizontally, separated by draggable splitters.
                layout: 'vbox',
                defaults: {
                    width: '100%',
                    margin: '5 10'
                },
                items: [{
                    xtype: 'textfield',
                    flex: 1
                }, {
                    xtype: 'splitter'
                }, {
                    xtype: 'textfield',
                    flex: 1
                }, {
                    xtype: 'splitter'
                }, {
                    xtype: 'textfield',
                    flex: 1
                }]
            },

            items: [{
                itemId: 'Left',
                fieldLabel: 'Left field container',
                margin: '0 5'
            }, {
                itemId: 'Right',
                fieldLabel: 'Right field container'
            }],

            tbar: ['->', {
                text: 'Hide Left',
                label: 'Left',
                handler: onHideShow
            }, {
                text: 'Hide Right',
                label: 'Right',
                handler: onHideShow
            }],

            renderTo: Ext.getBody()
        });
    }
});

你需要被提供给你的朋友

在这里，我使用
面板和
字段容器创建了一个演示。我希望这将有助于/指导您实现您的要求

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {

        /*
         * this function will fire when hide/show button clicked
         * @param {Ext.button.Button}
         */
        function onHideShow(btn) {

            var fCnt = btn.up('panel').down(`#${btn.label}`);

            if (fCnt.isHidden()) {
                fCnt.setVisible(true);
                btn.setText(`Hide ${btn.label}`);
            } else {
                fCnt.setVisible(false);
                btn.setText(`Show ${btn.label}`);
            }
        }

        //Create panel with field container
        Ext.create('Ext.panel.Panel', {

            title: 'Basic example',

            //height:400,

            layout: 'hbox',

            bodyPadding: 10,

            defaults: {
                xtype: 'fieldcontainer',

                flex: 1,

                //width:'50%',

                style: 'border: 2px solid #ccc;',

                labelAlign: 'top',
                // The body area will contain three text fields, arranged
                // horizontally, separated by draggable splitters.
                layout: 'vbox',
                defaults: {
                    width: '100%',
                    margin: '5 10'
                },
                items: [{
                    xtype: 'textfield',
                    flex: 1
                }, {
                    xtype: 'splitter'
                }, {
                    xtype: 'textfield',
                    flex: 1
                }, {
                    xtype: 'splitter'
                }, {
                    xtype: 'textfield',
                    flex: 1
                }]
            },

            items: [{
                itemId: 'Left',
                fieldLabel: 'Left field container',
                margin: '0 5'
            }, {
                itemId: 'Right',
                fieldLabel: 'Right field container'
            }],

            tbar: ['->', {
                text: 'Hide Left',
                label: 'Left',
                handler: onHideShow
            }, {
                text: 'Hide Right',
                label: 'Right',
                handler: onHideShow
            }],

            renderTo: Ext.getBody()
        });
    }
});