4

グリッド ヘッダーにいくつかのサブメニューを含むメニューを作成しようとしていますが、サブメニュー項目が表示されています。でオーバーライドgetColumnMenu()する方法は次のExt.grid.header.Containerとおりです。

Ext.override(Ext.grid.header.Container, {
    /**
     * Returns an array of menu CheckItems corresponding to all immediate children of the passed Container which have been configured as hideable.
     */
    getColumnMenu: function (headerContainer) {
        // debugger
        var xmenu = new Ext.menu.Menu({
            style: {
                overflow: 'visible'
            },
            items: [{
                text: 'Category 1',
                menu: [{
                    text: 'Item 1.1',
                    checked: true,
                    checkHandler: this.onColumnCheckChange
                }, {
                    text: 'Item 1.2',
                    checked: false,
                    checkHandler: this.onColumnCheckChange
                }]
            }, {
                text: 'Category 2',
                menu: [{
                    text: 'Item 2.1',
                    checked: true,
                    checkHandler: this.onColumnCheckChange
                }, {
                    text: 'Item 2.1',
                    checked: false,
                    checkHandler: this.onColumnCheckChange
                }]
            }]
        });

        var test = [];
        xmenu.items.each(function (item) {
            test.push(item);
        });
        return test;

    }
});

メニューのカテゴリ 1 とカテゴリ 2 が表示されます。

ここに画像の説明を入力

しかし、サブメニューを表示しようとすると、次のエラーが表示されます。

ここに画像の説明を入力

どういうわけかparentMenuメニューのプロパティですundefined。助言がありますか？

4

1 に答える 1

2

正直なところ、なぜあなたのコードが機能しなかったのかよくわかりません。メニューとメニューアイテムの作成を整理しようとしたところ、うまくいきました。次のコードを使用しました

getColumnMenu: function(headerContainer) {
    var menuItems = [];

        /* CATEGORY 1 */
        var itemsOneMenu = Ext.create('Ext.menu.Menu', {
            items: [{
                text: 'Item 1.1',
                checked: true,
                checkHandler: this.onColumnCheckChange
            },{
                text: 'Item 1.2',
                checked: false,
                checkHandler: this.onColumnCheckChange
            }]
        });

         categoryOneMenuItem = Ext.create('Ext.menu.Item', {
            text: 'Category 1',
            hideOnClick: false,
            menu: itemsOneMenu
        });

        /* CATEGORY 2 */
        var itemsTwoMenu = Ext.create('Ext.menu.Menu', {
            items: [{
                text: 'Item 2.1',
                checked: true,
                checkHandler: this.onColumnCheckChange
            },{
                text: 'Item 2.1',
                checked: false,
                checkHandler: this.onColumnCheckChange
            }]
        });

        categoryTwoMenuItem = Ext.create('Ext.menu.Item', {
            text: 'Category 2',
            hideOnClick: false,
            menu: itemsTwoMenu
        });

    menuItems.push(categoryOneMenuItem,categoryTwoMenuItem);
    return menuItems;
}

ここでは、実行中の例http://jsfiddle.net/alexrom7/xheHn/を見つけることができます。唯一の観察事項は、選択された列を表示または非表示にするために、EXT が CheckItem checkchange イベントをリッスンし続けることです。

于 2013-04-02T05:11:08.980 に答える