1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Question How to prevent a component from being rendered

    How to prevent a component from being rendered


    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:

    Code:
    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 }
                    ]
            });
        }
    });

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    186
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,323
    Vote Rating
    186
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      0  

    Default


    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 });
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    36
    Vote Rating
    0
    jlawton is on a distinguished road

      0  

    Default


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

Thread Participants: 2

Tags for this Thread