Modal window "covering" the button which opens it only after a bit!

[Fire-Dragon-DoL]

Ok, the things is easier: if I have a button which shows a window after click, and this window is modal (so you can't interact with the button again until the window is closed), if I click on the button "fast", the window is opened two times, maybe because the modal feature is not enabled exactly on button click

Any solution to this or is it a general bug that can't be fixed on extjs?

[vietits]

Opening a window a little late maybe because of loading its resources such as class definition from server. If you want to make sure that only one instance of window is opened then below is my suggestion:

Ext.onReady(function(){
    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Click Me',
        handler: function(){
            if(this._isHandling) return;
            this._isHandling = true;
            Ext.create('Ext.window.Window', {
                modal: true,
                width: 200,
                height: 200
            }).show();
            delete this._isHandling;
        }
    });
});

[Fire-Dragon-DoL]

Mh, I hoped for a better solution because I have to do this for each button now...

Thanks anyway

[Fire-Dragon-DoL]

Opening a window a little late maybe because of loading its resources such as class definition from server. If you want to make sure that only one instance of window is opened then below is my suggestion:

Ext.onReady(function(){
    Ext.create('Ext.button.Button', {
        renderTo: Ext.getBody(),
        text: 'Click Me',
        handler: function(){
            if(this._isHandling) return;
            this._isHandling = true;
            Ext.create('Ext.window.Window', {
                modal: true,
                width: 200,
                height: 200
            }).show();
            delete this._isHandling;
        }
    });
});

I noticed an important thing: If I use a messagebox, this doesn't happen. Why? How can I emulate messagebox behaviour?

EDIT: I just noticed that your suggestion doesn't work. But I can't unmark your answer as best one.

[vietits]

It will be better if you post a test case that reflects your situation. It's hard to say without seeing at your code.

[Fire-Dragon-DoL]

Your code doesn't work because I think the "show" method is async and not sync, maybe due to animation?

The solution I found is this:

Ext.override(Ext.window.Window, {
  /**
   * Show the window ensuirng a single instance is used
   * @param {Ext.Component} componentWithSingleInstance Component that should use single instance of chosen window (required)
   * This component will be disabled after show and re-enabled on window close
   */
  showSingleInstanceForComponent: function(componentWithSingleInstance, animateTarget, callback, scope) {
    if (!Ext.isDefined(componentWithSingleInstance)) Ext.Error.raise('componentWithSingleInstance required');

    componentWithSingleInstance.setDisabled(true);
    this.on('close', function() {
      // We are sure that this button has not been destroyed, that's why we use on and not mon
      this.setDisabled(false);
    }, componentWithSingleInstance);

    return this.show(animateTarget, callback, scope);
  }
});

Still, I think this is a horrible bug: in ALL languages I found 'till now, when you open a new modal window you EXPECT the code is blocked after the "show" method. And it's logical, I think it's madness the requirement to disable all buttons when you open a window to avoid a strange behaviour like this.

Can I post this as a bug on the forum?

[vietits]

If you think this is a bug, you can post it on Ext:Bug forum.

[Fire-Dragon-DoL]

Thanks, I did some tests, this is definitely a bug because it happens only if the window is animated, otherwise there are no problems.

http://www.sencha.com/forum/showthre...235#post888235