Triggers with screenmask

[araujoadanr]

Does anyone know how to use Triggers with ScreenMask?

[Sherzod]

2 minutes ago, araujoadanr said:

Does anyone know how to use Triggers with ScreenMask?

Hello,

Could you please clarify your question a bit more?

[araujoadanr]

Sure, thanks a lot for replying.

I have some editors that have triggers (trigger buttons), and when they perform very long operations, I can't get the screen mask to work with a "wait" message, which I usually use with the controls like a normal button.

[Sherzod]

Just to better understand — are you using a filter editor, or editors within the grid cells?

Also, could you give an example of the long-running operations you mentioned?

[araujoadanr]

Im use filter with mGridFiltering.zipy grid, the filter add in runtime 

Sorry for the delay. I have prepared a test case using the GridFiltering sample from uniGUI\Demos\Desktop\GridFilter.

I have attached a ZIP file containing a video that demonstrates the filtering example for better clarification.

Thank you in advance.

[Sherzod]

Hello, 

Thank you for the test case. I will check it in the next few days.

[araujoadanr]

Thank you.

[Sherzod]

Hello,

You have some dependencies, and it seems there are third-party components involved, so I couldn’t run your test case.

However, the general idea is clear — when filters are applied, the grid should show a mask during that time, if I understood correctly, right?

[Sherzod]

Could you please create the test case again without unnecessary dependencies?

[araujoadanr]

Sorry for Delay, 

Please try again.

GridFiltering.zip

[Sherzod]

Hello,

3 hours ago, araujoadanr said:

Sorry for Delay, 

Please try again.

Np, try this approach:

UniDBGrid1.ClientEvents.ExtEvents ->

function reconfigure(sender, store, columns) 
{

    if (!sender._cMask) {

        sender._cMask = new Ext.LoadMask({
            target: sender,
            msg: 'Filtering...'
        });

        var store = sender.getStore();

        store.on('load', function () {
            sender._cMask.hide();
        });

        store.on('exception', function () {
            sender._cMask.hide();
        });
    }

    columns.forEach(function (col) {

        if (col.fedit && !col._maskBound) {

            col._maskBound = true;

            col.fedit.on('change', function () {

                sender._cMask.show();

                // safety fallback
                Ext.defer(function () {
                    if (sender._cMask) {
                        sender._cMask.hide();
                    }
                }, 8000);

            });
        }

    });
}

 

[araujoadanr]

Thank you very much... you are a genius!

[araujoadanr]

I have this button (trigger) to clear the filters, using the code you provided. I asked AI to add it. Honestly, I'm not a JS expert, but the code works. Would you have any objection?

function reconfigure(sender, store, columns, oldStore, oldColumns, eOpts)
{
    if (!sender._cMask) {
        sender._cMask = new Ext.LoadMask({
            target: sender,
            msg: 'Filtrando...'
        });
    }

    var currentStore = sender.getStore();
    if (!sender._storeBound || (oldStore && oldStore !== currentStore)) {
        if (oldStore && oldStore !== currentStore) {
            oldStore.un('load', sender._onStoreLoad, sender);
            oldStore.un('exception', sender._onStoreException, sender);
        }
        sender._onStoreLoad = function () { sender._cMask.hide(); };
        sender._onStoreException = function () { sender._cMask.hide(); };
        currentStore.on('load', sender._onStoreLoad, sender);
        currentStore.on('exception', sender._onStoreException, sender);
        sender._storeBound = true;
    }

    var showMask = function () {
        if (sender._cMask) {
            sender._cMask.show();
            Ext.defer(function () {
                if (sender._cMask) sender._cMask.hide();
            }, 8000);
        }
    };

    if (columns) {
        columns.forEach(function (col) {

            // fedit change
            if (col.fedit && !col._maskBound) {
                col._maskBound = true;
                col.fedit.on('change', showMask);
            }

            // triggers: usar getTrigger() + el elemento DOM
            if (col.fedit && !col._triggerBound) {
                col._triggerBound = true;
                ['t1', 't2'].forEach(function (tid) {
                    var trig = col.fedit.getTrigger(tid);
                    if (trig && trig.el) {
                        trig.el.on('click', showMask);
                    }
                });
            }

        });
    }
}