0

私は自分の問題を説明しようとします。タブパネルがあります。1つのタブに、フォームパネルとグリッドパネルがあり、どちらも折りたたみ可能です。フォームパネルを折りたたむと折りたたまれ、グリッドパネルを折りたたむと両方が折りたたまれます。2つのパネルの一方を折りたたむと、もう一方のパネルが消えます。これは何でしょうか?

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

フィドルや簡単なサンプルがないと何も言えませんが、コードを見ると、興味深いことが1つあります。

あなたはlayout: borderトップレベルだけを持っていて、それからあなたは中にたくさんの入れ子になったパネルを持っています。border折りたたまれている2つのパネルを含むコンテナでレイアウトを定義してみてください。

于 2012-06-05T11:15:28.510 に答える
0

境界線レイアウトを使用する場合は、これを参照することをお勧めします:http: //docs.sencha.com/ext-js/4-0/# !/example/layout/border.html 私は今までしかありませんこれを東と西のパネルに使用して、イベントトリガーに関する追加情報を非表示にしたり表示したりしました。すでにIDを持っているので、それらを手動でトリガーする方がおそらく良いでしょう。

于 2012-06-08T05:43:38.427 に答える