Ext: tying the disabling of a button to the LABKEY.WebPart.render()

LabKey Support Forum (Inactive)
Ext: tying the disabling of a button to the LABKEY.WebPart.render() Leo Dashevskiy  2012-05-11 15:43
Status: Closed
 
Hello!

I have a button that via a WebPart calls an R script that generates an image that shows up in that WebPart.

I would like to disable the button, while the R script is running (so that the user does not have the ability to press the button again and launch another concurrent R script!), which actually means, disabling the button until the moment the generated image "comes back" and shows up.

I actually got the Ext mask to work so that, when the user presses the button, the WebPart, which launches the R script, is masked exactly until the moment the image is generated.

The thing is, when the button is pressed, I explicitly make the call to .show() of the mask, but I nowhere have explicitly specified its .hide() method. So I am assuming that it does get called somewhere somehow, once the image gets displayed. Which to me means, if I understand, how it works correctly, that the rendering of the generated image fires some event, which gets listened to by the mask and once the mask receives the event, the handler for it is to call the .hide() method. So my idea is to figure out exactly, which event does the WebPart fire, once the image is generated, and to add a listener to that event to the button and then the handler for it would be to enable the button back.

Could you consult me, if indeed the WebPart (or something else) does indeed fire some event once the image output of an R script gets displayed in the WebPart?

Below is some code in the order it gets called in the Ext.onReady() method.


WebPart creation:

        var graphWebPartConfig = {
            reportId: '<path to the R script>',
            ... < extra params > ...
        };

        var graphWebPart = new LABKEY.WebPart({
            frame: 'none',
            partConfig: graphWebPartConfig,
            partName: 'Report',
            renderTo: 'Graph'
        });


Mask creation:

        var mask = new Ext.LoadMask('Graph', {
            msg: "Generating the graphics, please, wait..."
        });


Button creation:

        new Ext4.Button({
            handler: function() {
                mask.show();

                // set graphWebPart config params to pass to the R script here

                graphWebPart.render();
            },
            renderTo: 'buttonGraph',
            text: 'Graph'
        });


and the HTML snippet is naturally just: <div id='Graph'></div>

Thanks.
 
 
Ben Bimber responded:  2012-05-12 08:25
hi leo,

I have not tested these, but I believe a combination of these will help:

your button handler will be passed a reference to the button, so you can do something roughly like:

        new Ext4.Button({
            handler: function(btn) {
                mask.show();

                btn.setDisabled(true);

                // set graphWebPart config params to pass to the R script here
                graphWebPart.render();
            },
            renderTo: 'buttonGraph',
            text: 'Graph'
        });

then you can re-enable it whenever you need. the webpart probably supports a success callback:

        var graphWebPart = new LABKEY.WebPart({
            frame: 'none',
            partConfig: graphWebPartConfig,
            partName: 'Report',
            renderTo: 'Graph',
            scope: this,
            success: function(){ alert('loaded!');}
        });

and you could enable/disable your button from there, i think.
 
Leo Dashevskiy responded:  2012-05-14 10:56
Thanks, Ben!

That's exactly what I was looking for: seems to work like a charm!