0

我试图解释我的问题。我有一个标签面板。在一个选项卡中,我有一个表单面板和一个网格面板,两者都是可折叠的。当我折叠表单面板时,它会折叠,当我折叠网格面板时,它们都会折叠。现在,当我展开两个面板之一时,另一个面板消失了。这可能是什么?

Ext.define('MyApp.view.TMS', {
    extend: 'Ext.container.Viewport',

    id: 'tmsViewport',
    layout: {
        type: 'border'
    },

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'tabpanel',
                id: 'mainTab',
                activeTab: 0,
                region: 'center',
                items: [{
                    xtype: 'panel',
                    id: 'configurationTab',
                    title: 'Configuration',
                    items: [{
                        xtype: 'tabpanel',
                        id: 'configurationVehicles',
                        title: 'configuration',
                        activeTab: 0,
                        items: [{
                            xtype: 'panel',
                            id: 'configurationDrivers',
                            collapsed: false,
                            title: 'Drivers',
                            items: [{
                                xtype: 'form',
                                floating: false,
                                height: 400,
                                id: 'configurationDriversConfiguration',
                                itemId: 'configurationDriversConfiguration',
                                bodyPadding: 10,
                                animCollapse: false,
                                collapsed: false,
                                collapsible: true,
                                title: 'Driver Configuration',
                                items: [{
                                    xtype: 'button',
                                    id: 'configurationDriversAdd',
                                    text: 'Add'
                                }, {
                                    xtype: 'button',
                                    id: 'configurationDriversDelete',
                                    text: 'Delete'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversCode',
                                    fieldLabel: 'Driver Code'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversName',
                                    fieldLabel: 'Driver Name'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversLicense',
                                    fieldLabel: 'Driver License nr'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversGivenName',
                                    fieldLabel: 'Driver Given Name'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversFamilyName',
                                    fieldLabel: 'Driver Familiy Name'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversPhone',
                                    fieldLabel: 'Driver Phone Nr'
                                }, {
                                    xtype: 'textfield',
                                    id: 'configurationDriversEmail',
                                    fieldLabel: 'Driver Email'
                                }, {
                                    xtype: 'combobox',
                                    id: 'configurationDriversProvider',
                                    fieldLabel: 'Provider',
                                    displayField: 'name',
                                    store: 'comboProviders',
                                    valueField: 'id'
                                }, {
                                    xtype: 'textareafield',
                                    id: 'configurationDriversMemo',
                                    fieldLabel: 'Memo'
                                }, {
                                    xtype: 'button',
                                    handler: function (button, event) {
                                        var form = document.forms;

                                        Ext.MessageBox.alert('Submitted Values', form.getValues(true));


                                    },
                                    height: 37,
                                    id: 'configurationDriversSave',
                                    text: 'Save'
                                }]
                            }, {
                                xtype: 'gridpanel',
                                height: 300,
                                id: 'configurationDriversGrid',
                                itemId: 'configurationDriversGrid',
                                animCollapse: false,
                                collapsible: true,
                                title: 'Drivers',
                                store: 'gridDrivers',
                                viewConfig: {

                                },
                                columns: [{
                                    xtype: 'gridcolumn',
                                    dataIndex: 'id',
                                    text: 'Id'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'version',
                                    text: 'Version'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'driverId',
                                    text: 'DriverId'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'firstName',
                                    text: 'FirstName'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'middleName',
                                    text: 'MiddleName'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'lastName',
                                    text: 'LastName'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'email',
                                    text: 'Email'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'workPhone',
                                    text: 'WorkPhone'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'note',
                                    text: 'Note'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'licenseNumber',
                                    text: 'LicenseNumber'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'providerId',
                                    text: 'ProviderId'
                                }]
                            }]
                        }]
                    }]
                }]
            }]
        });

        me.callParent(arguments);
    }

});
4

2 回答 2

1

如果没有小提琴或一些更简单的示例,很难说任何话,但是查看您的代码,我注意到一件有趣的事情:

layout: border只有在顶层,然后你有很多嵌套的面板。尝试border在包含正在折叠的两个面板的容器中定义布局。

于 2012-06-05T11:15:28.510 回答
0

如果您要使用边框布局,您可能需要参考:http ://docs.sencha.com/ext-js/4-0/#!/example/layout/border.html 我只做过将其用于东面板和西面板,以隐藏和显示有关事件触发器的其他信息。由于您已经有了 ID,因此最好手动触发这些 ID。

于 2012-06-08T05:43:38.427 回答