Question

I have a grid with

columns: [
    ...
    { xtype:'actioncolumn',
      width:40 }
    ...
]

initComponent: function() {

    var callback=function(hasPerm) {
        if(!hasPerm) {
             // I want the action column go away here :)
        }
    }
    isGranted("users.delete",callback);


}

isGranted is a global function, sends an ajax request to check for the given permission and on success event invokes the given function with the returned bool parameter.

isGranted=function(perm, fv) {
    Ext.Ajax.request({
        url: "/isgranted?perm="+perm,
        method: 'POST',
        success: function(result) {
            var res=new Object();
            res=Ext.JSON.decode(result.responseText);
            fv(res.success);
        }
    });
}

How can I get reference to the columns to hide them in the given callback function? this.columns didn’t worked.

Answer 1

UPDATE: Incorporated @DmitryB suggestions. Much better.

Know that, initComponent won’t wait for your ajax call to complete, it will continue and finish building the component.

columns: [
  ...
  { xtype:'actioncolumn',
    action: 'someaction',
    hidden: true,
    width:40 }
  ...
]

initComponent: function() {
  var callback=function(hasPerm) {
    if(hasPerm) {
       this.down('[action=someaction]').show();
    }
  }
  isGranted("users.delete",callback, this);
}

isGranted=function(perm, fv, scope) {
  Ext.Ajax.request({
    url: "/isgranted?perm="+perm,
    method: 'POST',
    success: function(result) {
        var res=new Object();
        res=Ext.JSON.decode(result.responseText);
        fv.call(scope, res.success);
    }
  });
}