How to prevent a component from being rendered

[jlawton]

I have an application that I am building which will have some security on it. One idea I had was to have the panels say what permission level they need in order to show their content (which would then be grabbed remotely). So I whipped up a quick example to try some stuff, but I can't figure out how to prevent a component from being rendered during it's initialization.

To break it down to a simpler example, if I have a panel with a property "show" that can be either true or false, if it's true I want the panel to be rendered, and if it's false I don't. How can I do that? In the example posted below, I don't want the second 'mypanel' to even get rendered to the screen. Is there a function call or something that I can put in the constructor that will stop the process?

jsfiddle example here, source code posted below:

Ext.define('My.view.mypanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',
    config: {
        show: true
        ,html: 'default text'
    },
    constructor: function(options) {
        this.initConfig(options);
        if (this.getShow()) {
            // show the panel as normal
            this.setHtml('show panel'); 
        } else {
            // some code to prevent the panel from even being rendered
            this.setHtml('don\'t show panel');
        }
        this.callParent(arguments);
    }
});

Ext.application({
    name: 'My',
    views: ['mypanel'],
    
    launch: function() {
        My.app = this;
        Ext.create('Ext.container.Viewport', {
            items: [
                { xtype: 'mypanel', show: true }
               ,{ xtype: 'mypanel', show: false }
               ,{ xtype: 'mypanel', show: true }
                ]
        });
    }
});

[ssamayoa]

Use hidden config option.

http://docs.sencha.com/ext-js/4-1/#!...nel-cfg-hidden

[jlawton]

hidden won't do, because then the content of the panel will still be rendered. And therefore it would be accessible (albeit via the console) to a sneaky user that knew how to inspect stores and whatnot via the console. I can remove it after the fact that it's rendered, but I don't even want to let it get that far. I want to stop it as soon as possible, hopefully during the constructor firing.

[vadimv]

Have had to deal once with authorisations and user profiles and for me was enough to use Ext.ComponentLoader which asked the server for content, on its side the server based on user roles returned the respective content to component's Loader - a very nice feature of ExtJS.

If you don't like the above approach probably you could use 'beforerender' event. Or just use a simple function which returns the items you want to show based on the role. There are many approaches, just shot the good one.

[ssamayoa]

May be this way?

var items = [];
if (has permission for panel1)
items.push({xtype: 'mypanel1'});
if (has permission for panel2)
items.push({xtype: 'mypanel2'});
...
Ext.create('Ext.container.Viewport', { items: items });

[jlawton]

@ssamayoa, yeah this seems the way we are leaning towards going.