1

ドロップダウン ボタン メニューにいくつかの要素 (2 番目のドロップダウン ボタン) を含むパネルがあります。2 番目のドロップダウン ボタンをクリックすると、メイン メニューが閉じます。これが私のコードです：

第 1 レベルのドロップダウン ボタンを作成する

    Ext.onReady(function () {
        Ext.create('Ext.Button', {
            text: 'Click me',
            margin: 10,
            renderTo: Ext.getBody(),
            menu: getMenu()
        });
    });

1 レベルの Cretae メニュー

    function getMenu() {
        return Ext.create('Ext.menu.Menu', {
            plain: true,
            items: [
                Ext.create('Ext.panel.Panel', {
                    width: 500,
                    height: 100,
                    bodyPadding: 5,
                    items: [
                        getFirstElement(),
                        getSecondElement()
                    ]
                })
            ]
        });
    }

いくつかの要素を作成します

    function getFirstElement() {
        return Ext.create('Ext.form.field.Date', {
            fieldLabel: 'Date',
            value: null,
            labelWidth: 50,
            width: 150,
            padding: 5
        });
    }

第 2 レベルのドロップダウン ボタンを作成する

    function getSecondElement() {
        return Ext.create('Ext.Button', {
            text: 'Select',
            menu: Ext.create('Ext.menu.Menu', {
                plain: true,
                items: [
                    Ext.create('Ext.panel.Panel', {
                        width: 500,
                        height: 100,
                        bodyPadding: 5,
                        items: [
                            {
                                html: '1'
                            },
                            {
                                html: '2'
                            }
                        ]
                    })
                ]
            })
        });
    }

何か案は？

4

1 に答える 1

0

メニューには という設定オプションがありますallowOtherMenus。これを true に設定すると、構成オプションが設定されたメニューと同時に他のメニューを表示できます。

したがって、 getSecondElement 関数は次のようになります。

function getSecondElement() {
        return Ext.create('Ext.Button', {
            text: 'Select',
            menu: Ext.create('Ext.menu.Menu', {                
                allowOtherMenus: true,
                plain: true,
                items: [
                    Ext.create('Ext.panel.Panel', {
                        width: 500,
                        height: 100,
                        bodyPadding: 5,
                        items: [
                            {
                                html: '1'
                            },
                            {
                                html: '2'
                            }
                        ]
                    })
                ]
            })
        });
    }

複数のメニューを操作する例は、この JsFiddle にあります: http://jsfiddle.net/SEVCe/

そのプロパティに関するドキュメントは Senchaドキュメントにあります。

于 2013-03-19T20:42:05.063 に答える