extjs4 - 列ヘッダーのドロップダウン メニューにカスタム ボタンを追加する {EXTJS 4}

Question

extjs4 のグリッドの列ヘッダーのドロップダウン メニューにボタンが必要です。データベースにリンクされている列を追加または削除できるようにします。

どんな助けでも大歓迎です...ありがとう..:)

Answer 1

私が見てきたことから、afterrender イベントは避けるべきです。

環境：

私が構築しているアプリケーションは、動的モデルを持つストアを使用しています。グリッドに、サーバーからフェッチされるカスタマイズ可能なモデルが必要です (したがって、カスタマイズ可能なグリッドにカスタマイズ可能な列を含めることができます)。

ヘッダーを変更できなかったため (ストアがリロードされ、変更した既存のメニューが破棄されるため - 上記の例を使用)。同じ効果を持つ代替ソリューションは、次のように実行できます。

Ext.create('Ext.grid.Panel', {
    // ...

    initComponent: function () {
        // renders the header and header menu
        this.callParent(arguments);

        // now you have access to the header - set an event on the header itself
        this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
            this.createHeaderMenu(menu);
        }, this);
    },

    createHeaderMenu: function (menu) {
        menu.removeAll();

        menu.add([
            // { custom item here }
            // { custom item here }
            // { custom item here }
            // { custom item here }
        ]);
    }
});

Answer 2

「標準」の列メニューを 1 つだけではなく、私のように個々の列ごとに作成したい場合は、次のように使用できます。

initComponent: function ()
{
    // renders the header and header menu
    this.callParent(arguments);

    // now you have access to the header - set an event on the header itself
    this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
        menu.on('beforeshow', this.showHeaderMenu);
    }, this);
},

showHeaderMenu: function (menu, eOpts)
{
    //define array to store added compoents in
    if(this.myAddedComponents === undefined)
    {
        this.myAddedComponents = new Array();
    }

    var columnDataIndex = menu.activeHeader.dataIndex,
        customMenuComponents = this.myAddedComponents.length;

    //remove components if any added
    if(customMenuComponents > 0)
    {
        for(var i = 0; i < customMenuComponents; i++)
        {
            menu.remove(this.myAddedComponents[i][0].getItemId());
        }

        this.myAddedComponents.splice(0, customMenuComponents);
    }

    //add components by column index
    switch(columnDataIndex)
    {
        case 'xyz': this.myAddedComponents.push(menu.add([{
                            text: 'Custom Item'}]));

                break;
    }
}