Reuseable MessageBox

  • I'm trying to create code for a reusable question box. I came up with creating an object for generic messages that I can reuse. However, I don't know how to create a callback for the function that created it.

    The following code calls for the function when I create it, and

    if(btn=='yes') alert(this.message.func);

    returns 'undefined', instead of calling the function I need.

    That means that the function is fired when I try to define it.


    deleteSection: function(section_id, action) {
    if(action=='ask') {
    message = {title: 'title', message: 'message', func: this.deleteSection(section_id, 'act')};
    Generic.message.showQuestionBox(message);
    return;
    }
    if(action=='act') {
    alert('Acting!');
    }
    },



    and in Generic.message..:


    showQuestionBox : function(message) {
    Ext.Msg.show({
    title:message.title,
    msg: message.message,
    func: message.func,
    buttons: Ext.Msg.YESNO,
    fn: function(btn) {
    if(btn=='yes') alert(this.message.func);
    if(btn=='no') return false;
    },
    icon: Ext.MessageBox.QUESTION
    });
    }


    Any ideas how to create a reuseble message box?


  • Tried it a few times, it doesn't work.
    Maybe I don't know where/how to put the code:

    The functions aren't in the same objects, ..:

    Program.MagicTabs.Section = {
    deleteSection: function(section_id, action) { /* Function here */ }
    }



    Generic.message = {
    showQuestionBox : function(message) { /*Function here*/ }
    }


    I tried changing the reference to 'this' object a few times, but I didn't manage to get it working.


    I tried this code [in addition to your code straight]:

    deleteSection: function(section_id, action) {
    this.on('event', Generic.message.showQuestionBox.createDelegate(thi s,
    [{title: 'title'
    ,msg: 'Are You sure ?'
    ,buttons : Ext.Msg.YESNO
    ,fn :Program.MagicTabs.Section.deleteSection
    ,scope: this
    ,icon: Ext.MessageBox.QUESTION
    }], 0 );
    }


    And replaced the old showQuestionBox code with your code, it didn't work.

    I think there's an error in the code, since it throws me out of the Javascript itself. I tried putting both of the methods under the same scope, it didn't work either.


  • Working wonderfully, what a beautiful code ;-)
    I keep discovering how great it is to have a library and how crippled Javascript is..

    Thanks a lot for your help. It'll help me create more general functions for objects and such..


  • this.on('event', this.showQuestionBox.createDelegate(this,
    [{title: 'title'
    ,msg: 'Are You sure ?'
    ,buttons : Ext.Msg.YESNO
    ,fn :this.deleteSection
    ,scope: this
    ,icon: Ext.MessageBox.QUESTION
    }], 0 );

    showQuestionBox : function(message) {

    var config = {};
    if(typeof message.fn == 'function'){
    var args= Array.prototype.slice.call(arguments,1) ;
    config.fn = function(btn) {
    if(btn=='yes' btn=='ok'){
    message.fn.apply(message.scopenull,args);
    }
    };
    }

    Ext.Msg.show( Ext.applyIf (config,message) );
    }
    Always wanted to try this one ;)


  • Sorry, I didn't explain what your actual problem was.

    In your original example, in setting up your message block, you were actually calling what you had intended 'to be called, after questioning'.

    deleteSection: function(section_id, action) {
    if(action=='ask') {
    message = {title: 'title', message: 'message', func: this.deleteSection(section_id, 'act')};
    Generic.message.showQuestionBox(message);
    return;
    }
    if(action=='act') {
    alert('Acting!');
    }
    },
    That's were createDelegate helps out. Your revised message should like something like this:

    message = {title: 'title'
    , message: 'message' //passing these params WHEN its called.
    , func: this.deleteSection.createDelegate(this,[section_id, 'act'])
    };
    Now, given a generic mechanism:

    //Show a Ext.Msg box, and only invoke the desired function if the yes or ok buttons are pressed
    // @params
    // @message = standard Ext.Msg config object compatible with Ext.Msg.show.
    Generic.message.showQuestionBox = function(message) {

    var config = {};
    if(typeof message.fn == 'function'){
    var args= message.args Array.prototype.slice.call(arguments,1) ;
    config.fn = function(btn) {
    if(btn=='yes' btn=='ok'){
    message.fn.apply(message.scopenull,args);
    }
    };
    }

    Ext.Msg.show( Ext.applyIf (config,message) );
    };

    And, put it all together (for your use-case):



    deleteSection: function(section_id, action) {
    if(action=='ask') { //using standard Ext.msg config names now
    message = {title: 'title', messagemsg: 'message', funcfn: this.deleteSection.createDelegate(this,[section_id, 'act'])
    Generic.message.showQuestionBox(message);
    return;
    }
    if(action=='act') {
    alert('Acting!');
    }
    },

    And here is example when used as an event handler:


    var message = {title: 'Delete Warning'
    ,msg: 'Are you Sure '
    ,buttons:Ext.MessageBox.OKCANCEL
    ,fn: App.deleteSection
    ,scope: this
    ,args:[section_id,'act'] //We're asking here, so just act!
    };
    someWidget.on('click': Generic.message.showQuestionBox.createDelegate(nul l,[message],0));







  • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Reuseable MessageBox , Please add it free.