Defining a button handler outside of a form panel definition

[mikecx]

Hello,
I have some code layed out similar to this:

function handleCodeReports(print){  
            var PostString = '';
            PostString+='CodeType='+Ext.ComponentMgr.get('CRCType').getGroupValue()+'&';
            if(print)
                PostString+= 'Action=Preview&';
            else
                PostString+= 'Action=Preview&';
            window.open('Reports/CodeReports.py?' + PostString );
}

var CodeReports = new Ext.form.FormPanel({
    autoScroll: true,
    frame: true,
    hidden: true,
    items: [{
        xtype: 'fieldset',
        title: 'Code Type',
        autoHeight: true,
        items: [{
            xtype: 'radio',
            checked: true,
            fieldLabel: 'Procedure',
            name: 'CRCType',
            id: 'CRCType',
            inputValue: 'Procedure'
        },{
            xtype: 'radio',
            checked: false,
            fieldLabel: 'Diagnosis',
            name: 'CRCType',
            inputValue: 'Diagnosis'
        }]        
    }],
    buttons: [{
        text: 'Preview',
        formBind: true,
        handler:handleCodeReports(false)
    },{
        text: 'Print',
        formBind: true,
        handler:handleCodeReports(true)
    }]
});

The error I am getting is 'Ext.ComponentMgr.get("CRCType") is undefined' presumably because my function is defined before my formPanel, however if I define the function after the formPanel, it will tell me that the function is undefined.

Anyone have any suggestions on how to get around this?

[jay@moduscreate.com]

handler:handleCodeReports(false) means you're calling the method and assigning the result of that method to the reference.

handler:handleCodeReports means that you're setting the reference.

[mikecx]

Ok great, that makes sense, now how do I tell the button what parameter to pass into the function?

[lburgess]

I quite often add a param to my button configs which store what actions I want to trigger in my handler:

buttons: [{
        text: 'Preview',
        formBind: true,
        handler:handleCodeReports(false),
        action: 'preview'

    },{
        text: 'Print',
        formBind: true,
        handler:handleCodeReports(true),
        action: 'preview'
    }]

the first param of the 'handler' is the btn component:

...
handler: function(btn){
     switch(btn.action){
         case 'preview' :

         break;
         ...........

     }
}
...

[devnull]

the javascript function method createCallback() can be used to do what you want.

[lburgess]

the javascript function method createCallback() can be used to do what you want.

nice tip devnull .. don't know why I hadn't thought of using it there (I do in other places)!

If you require scope, you can use createDelegate ..

both are documented here:
http://extjs.com/deploy/dev/docs/output/Function.html