ExtJS 3.4 MessageBox buttons YESNO strange behaviour

0
votes

I have this problem with MessageBox component in ExtJS 3.4 and I'm searching desperately for a solution.

 function supprimerCatalogPreEnregFunction() {
    Ext.Msg.show({
        msg: document.getElementById('confirmDeleteMessage').value,
        buttons: Ext.Msg.YESNO,
        icon: Ext.MessageBox.ERROR,
        fn : function (btn) {
            if (btn == 'yes') {
               document.getElementById('deleteForm:deleteCatalogPreEnreg').onclick();
            }
        }
    });
}

The problem is that my btn return value 1, not 'yes' or 'no' as i expect. And it drives me crazy because I've trying a lot of solutions and I can't understand why this happens.

This function is a handler for a new Ext.Button. The button is part of a new Ext.Panel, buttons:[...].

I can't understand why the button has that strange value and it frustrates me a lot. Can a missing comma produce this behaviour? Although, I didn't found a missing comma.

L.E:

I've researched more and I looked more carefully in my code and, helped by debugger, I found that my function function (btn){}

receives as arguments on position 0: value 1, on second position receives Window (my current location) and the third argument is the one wich should've been received by my component, and it looks like ["yes", "", Object{}] etc. And i think this is the argument I need, where 0st position is the value of my btn, but I don't know where the other arguments come from to know what I need to do to in order to make it work.

As I'm still a little confused, I'll update this with a general explanation about how I've implemented this handler.
So, at Ext.onReady I load a function init()
Then, in this function i made a var deleteButton = new Ext.Button
This button has a handler which is my initial function from question
The deleteButton is added to a new Ext.Panel with buttons:[deleteButton, etc]
This panel is added as item to a Ext.TabPanel
And, finally, TabPanel is added to a ViewPort.

3
javascriptextjsmessageboxextjs3
Show the code that is calling that function, it's hard to tell from the paragraph. Even better, reproduce the problem in a fiddle.sencha.com/#home. Also, stop in your handler with a debugger try to understand what is happening. - Juan Mendes

3 Answers

1
votes

The Sencha Documentation shows the implementation like:

// Prompt for user data and process the result using a callback:
Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
    if (btn == 'ok'){
        // process text value and close...
    }
});

Running the following code using ExtJs 3.4:

Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = '/js/ext-3.4.0/resources/images/default/s.gif';

    Ext.Msg.show({
        msg: "test",
        buttons: Ext.Msg.YESNO,
        icon: Ext.MessageBox.ERROR,
        fn : function (btn, text) {
            if (btn == 'yes') {
                console.log(btn, text);
            }
        }
    });
});

Output (Firebug console):

yes (an empty string)

So your code should be working. I would check to see if there are any global overrides being loaded and test it in isolation

0
votes

Looking at the source it seems that the first param is the button clicked (Ext.Msg.YESNO which may give you a truthy result) but the second parameter passed is the text value you are looking for:

var handleButton = function(button){
    buttons[button].blur();
    if(dlg.isVisible()){
        dlg.hide();
        handleHide();
        //here the arguments are button, activeTextEl.dom.value and opt... so look at the second argument in your callback
        Ext.callback(opt.fn, opt.scope||window, [button, activeTextEl.dom.value, opt], 1);
    }
};

I'd try changing your code to:

function (btn, btnTxt) {
    if (btnTxt == 'yes') {
        document.getElementById('deleteForm:deleteCatalogPreEnreg').onclick();
    }
}
0
votes

First of all, thank you very much for replies.
It seemed that the problem was from a script that I was included it in my jsf page.
And that messed up parts of my code and that's why my component had a strange bahviour.
I solved it by removing that script and let the function as I posted it initially.