在ExtJS中显示/隐藏面板

时间:2015-04-02 21:34:44

标签: javascript extjs extjs4

我在用户界面中有一个名为Code的面板,我不希望在他们根据角色登录时向特定用户显示该面板。我是ExtJS的新手。我有阻止用户的算法/条件,但我不确定在此代码中应用它的位置。 .js文件是:

analysisCodePanel = new Ext.Panel( {
    id : 'analysisCodePanel',
    title : 'Code',
    region : 'center',
    split : true,
    height : 90,
    layout : 'fit',
    listeners :
    {
        activate : function( p ) {
            GLOBAL.IDs[1] = null;
            GLOBAL.IDs[2] = null;

            p.body.mask("Loading...", 'mask-loading');
            runAll(Data, p);}
            return;
        },
        deactivate: function(){
    },
    collapsible : true                      
});

我的条件是检查用户是否是管理员,这样我就可以GLOBAL.IsCodeAdmin()然后显示上面的面板,否则将其从登录的用户中隐藏。

2 个答案:

答案 0 :(得分:0)

如果此面板是视口的子节点,则必须使用控制器来显示和隐藏面板。

在你的控制器中为下面的视口渲染设置监听器。确保您阅读文档并仔细开始。然后我将了解如何使用不同的事件来控制元素。此链接是一个良好的开端http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started

// ExtJs controller
Ext.define('app.controller.ViewPortController', {
        extend: 'Ext.app.Controller',
        refs: [
            {
                ref: 'myPanel', // this elemenet can be referred as getMyPanel()
                selector: 'panel[id=analysisCodePanel]'  // selector to get panel reference
            }
        ],
        init: function () {
            this.control({
                'viewport': {
                    'render': this.viewPortRender   // on viewport render this function will be called
                }
            })
        },
        viewPortRender: function () {
            if (GLOBAL.IsCodeAdmin()) {
                this.getMyPanel().show();     // show panel
            } else {
                this.getMyPanel().hide();     // hide panel
            }
        }
    }
);

答案 1 :(得分:0)

我通过使用名为disabled的面板属性并将其设置为true来解决问题。