1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    38
    Vote Rating
    0
    mikecx is on a distinguished road

      0  

    Default Defining a button handler outside of a form panel definition

    Defining a button handler outside of a form panel definition


    Hello,
    I have some code layed out similar to this:
    Code:
    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?

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    38
    Vote Rating
    0
    mikecx is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


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

    Code:
    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:

    Code:
    ...
    handler: function(btn){
         switch(btn.action){
             case 'preview' :
    
             break;
             ...........
    
         }
    }
    ...

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Aug 2007
    Location
    Edinburgh
    Posts
    49
    Vote Rating
    0
    lburgess is on a distinguished road

      0  

    Default


    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