Results 1 to 7 of 7

Thread: multiple checkboxes in formpanel

  1. #1

    Default multiple checkboxes in formpanel

    Hello,

    I have a small problem. I have formpanel with a set of checkboxes. I need to be able to on check, or click, send a request to a server.

    Code:
        var matchForm = new Ext.FormPanel({
            autoHeight:true,
            defaults: {autoWidth: true},
            defaultType: 'checkbox',
            items :[
                    /*{
                        fieldLabel: 'Phonetic Company',
                        name: 'Company'
                    },*/{
                        fieldLabel: 'Company Exact',
                        name: 'Company',
                        listeners: {click: alert("clicked")}
                    }, {
                        fieldLabel: 'First Name',
                        name: 'vchFirstName',
                        listeners: {click: setMatchOption}
                    },{
                        fieldLabel: 'Last Name',
                        name: 'vchLastName',
                        listeners: {click: setMatchOption}
                    },{
                        fieldLabel: 'Email',
                        name: 'vchBusinessEmail',
                        listeners: {click: setMatchOption}
                    }]
        });
    I'm now trying listeners, but what I thought should work was:

    Code:
    matchForm.on("check",function(e){});
    Can someone put me in the right direction? Thanks.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Answers
    4

    Default

    The form does not have a check event, the checkbox fields do. In order to test whether this works change the first one to
    Code:
                       fieldLabel: 'Company Exact',
                        name: 'Company',
                        listeners: {check: function() { alert("checked"); }}

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    9,488
    Answers
    74

    Default

    pjacobs -

    FormPanel does not have an event called 'check'. Check out all the available events for FormPanel here by clicking "Events" at the top right.

    Ext.form.Checkbox has an event called check which is probably what you are looking for. It will be fired each time a checkbox is turned on or off and passed 2 arguments. The first is the checkbox itself and the second is whether or not it was checked on or off. You can see this in the documentation.

    I've created an updated example for you given the code above which should point you in the right direction.
    Code:
        var bd = Ext.getBody();
        
        var setMatchOption = function(chkbox, checked) {
        	if (checked) {
        		alert(chkbox.getName() + ' has been turned on.');
        	} else {
        		alert(chkbox.getName() + ' has been turned off.');
        	}    	
        };
        var matchForm = new Ext.FormPanel({
        	renderTo: bd,
            autoHeight:true,
            defaults: {autoWidth: true},
            defaultType: 'checkbox',
            items :[
                    /*{
                        fieldLabel: 'Phonetic Company',
                        name: 'Company'
                    },*/{
                        fieldLabel: 'Company Exact',
                        name: 'Company',
                        listeners: {check: function() {alert("clicked");}}
                    }, {
                        fieldLabel: 'First Name',
                        name: 'vchFirstName',
                        listeners: {check: setMatchOption}
                    },{
                        fieldLabel: 'Last Name',
                        name: 'vchLastName',
                        listeners: {check: setMatchOption}
                    },{
                        fieldLabel: 'Email',
                        name: 'vchBusinessEmail',
                        listeners: {check: setMatchOption}
                    }]
        });
    Notice how setMatchOption takes 2 arguments and it matches the method signature of what is the events documentation. Also notice how I changed the Company Exact checkbox to be wrapped in an anonymous function rather than running immediately. Typically when you setup a function to be an event handler you will leave off the ()'s. By passing a reference to the function you can then access it later as opposed to now.

    In order to send an Ajax request you are going to want to look at the static method Ext.Ajax.request.

  4. #4

    Default

    In firebug I get:
    Code:
    o[e] has no properties
    [IMG]chrome://firebug/content/blank.gif[/IMG]                    this.addListener(e, o[e].fn, o[e].scope, o[e]);
    Here's my updated code:

    Code:
        var matchForm = new Ext.FormPanel({
            autoHeight:true,
            defaults: {autoWidth: true},
            defaultType: 'checkbox',
            items :[/*{
                        fieldLabel: 'Phonetic Company',
                        name: 'Company',
                        listeners: {check: setMatchOption}
                    },*/{
                        fieldLabel: 'Company Exact',
                        name: 'Company',
                        listeners: {check: setMatchOption}
                    }, {
                        fieldLabel: 'First Name',
                        name: 'vchFirstName',
                        listeners: {check: setMatchOption}
                    },{
                        fieldLabel: 'Last Name',
                        name: 'vchLastName',
                        listeners: {check: setMatchOption}
                    },{
                        fieldLabel: 'Email',
                        name: 'vchBusinessEmail',
                        listeners: {check: setMatchOption}
                    }]
        });
        
        var setMatchOption = function(chkbox, checked) {
            conn.request({
                url: 'index.php?m=contactsImport&action=setMatchingOption',
                method: 'POST',
                params: {
                    field: chkbox.getName(),
                    value: checked
                }
            });
        }
    Any ideas?

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    9,488
    Answers
    74

    Default

    Place setMatchOption before you create the FormPanel.

  6. #6

    Default

    Ah! excellent. Thanks much.

    Now I have one last rule to set for this. If any checkboxes are "on", I need to enable a button. How do I check for this?

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    9,488
    Answers
    74

    Default

    Buttons have an enable/disable method available to them.

    You can retrieve whether or not a checkbox is enabled or disabled via getValue().

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •