ユーザーによりメニューアイテムを切り替える(desktop)

Ext JS

Ext JSのデスクトップサンプルをカスタマイズ。

  • 直前にログイン画面（別途HTML）にてログインしている
  • クッキーにてどのユーザーがログインしたのか判断できている
  • ユーザーによって表示できるメニューが変化する
  • 一般ユーザーにはメンテナンスメニューは表示されない

以上の状況を再現するためのサンプル。

ユーザーによって切り替えるデスクトップメニュー

ザックリ前置き

  • createWindowS : 別途ウィンドウ描画関数、省略
  • createWindowM : 別途ウィンドウ描画関数、省略
  • getCookieVal : 別途クッキー取得用関数、省略（サンプルにはない）
/***ユーザーによってメニュー数を変える準備***/
function setItem(ths)//変数乱用したくないため関数化
    var item1=[{ //メンテナンスユーザー
            text    : "サブ_検索",
            handler : MyDesktop.MyMenuModule.createWindowS,
            scope   : MyDesktop.MyMenuModule,
            windowId: 'MyM'+(++windowIndex)
        },{
            text    : "サブ_メンテナンス",
            handler : MyDesktop.MyMenuModule.createWindowM,
            scope   : MyDesktop.MyMenuModule,
            windowId: 'MyM'+(++windowIndex)
        }];
    var item2=[{ //一般ユーザー
            text    : "サブ_検索",
            handler : ths.createWindowS,
            scope   : ths,
            windowId: 'MyM'+(++windowIndex)
        }];
    //クッキーの値によってitemを変える
    var setItem=(getCookieVal("loginid")=="hogehoge")?item1:item2;
    return setItem;
}
/***ユーザーによってメニュー数を変える準備end***/

MyDesktop.MyMenuModule = Ext.extend(MyDesktop.MyModule, {
    init : function(){
        this.launcher = {
            text    : 'AAA サブメニュー',
            menu    : {
                //itemsをユーザーによって切り替える
                items:setItem(this)
            }
        }
    }
});
//【細かいコードは省略】


もともとのコードはこんなカンジ
と言っても、サンプルにサブメニューはないが。

MyDesktop.MyMenuModule = Ext.extend(MyDesktop.MyModule, {
    init : function(){
        this.launcher = {
            text    : 'AAA サブメニュー',
            menu    : {
                items:[{
                    text    : "サブ_検索",
                    handler : this.createWindowS,
                    scope   : this,
                    windowId: 'MyM'+(++windowIndex)
                },{
                    text    : "サブ_メンテナンス",
                    handler : this.createWindowM,
                    scope   : this,
                    windowId: 'MyM'+(++windowIndex)
                }]
            }
        }
    }
});

item生成を関数で包むメリット

  • 変数が乱用されない
  • メインコードからのthisを受け取れる