Results 1 to 4 of 4

Thread: On Change event is not getting triggered if I add checkboxes dynamically to checkbox

  1. #1
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default Answered: On Change event is not getting triggered if I add checkboxes dynamically to checkbox

    I have two checkbox group components in screen, when I add all checkboxes to checkboxgroup component in view able to see on change event getting triggered.

    Code:
    {
                            xtype: 'checkboxgroup',
                            itemId: 'categorySection',
                            id: 'categorySection',
                            vertical: true,
                            padding: '10 0 0 0',
                            layout: 'fit',
                            items: [{
                                xtype:'checkbox',
                                boxLabel: 'Chk1',
                                checked: false,
                                name: 'riskFilter',
                                inputValue: 'chk1'
                            },{
                                xtype:'checkbox',
                                boxLabel: 'Chk2',
                                checked: false,
                                name: 'riskFilter',
                                inputValue: 'chk2'
                            }]
                        },
    When I add checkboxes to checkbox group after page load, the change event is not getting triggered on the checkbox group.

    View code part:-

    Code:
    {
                            xtype: 'checkboxgroup',
                            itemId: 'categorySection',
                            id: 'categorySection',
                            vertical: true,
                            padding: '10 0 0 0',
                            layout: 'fit',
                            items: [],
                            listeners:{
                                'change':'mthName2'
                            }                    }, {
                            xtype: 'checkboxgroup',
                            itemId: 'riskSection',
                            id: 'riskSection',
                            vertical: true,
                            padding: '10 0 0 0',
                            layout: 'fit',
                            items: [],
                            listeners:{
                                'change':'mthName'
                            }
                        }
    Controller Part Code:-

    Code:
     handleAssetsDataLoad:function(chkBoxGrpObj, store){
            var Items;
            var ChkBoxGrp = chkBoxGrpObj.items;
            store.each(function(item) {
                Items = new Ext.form.Checkbox({
                        boxLabel: item.data.name,
                        checked: false,
                        name:  'assetFilter',
                        inputValue: item.data.name
                    });
                ChkBoxGrp.add(assetItems);
            });
        },
    In both cases I have same look and feel experience, only difference is with change event triggering.

  2. In your controller, you were adding the checkboxes to the group using the items property. add() should be called directly on the checkboxgroup component.

    Also, the event is change, not checkchange. Fixing these 2 things calls the listeners as you'd expect.


  3. #2
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    Can you create a fiddle (https://fiddle.sencha.com) or provide a more complete code sample to test against? I created this simple test case with 6 checkboxes in a checkboxgroup. I then dynamically added a checkbox to the group and it triggers change event.

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

  4. #3
    Sencha Premium User
    Join Date
    Feb 2015
    Posts
    60
    Answers
    2

    Default

    Hi lee,
    https://fiddle.sencha.com/#fiddle/o9n

    I created code in Fiddle, In the controller app/controller/Home.js under onLaunch method I wrote code to add checkboxes to checkboxgroup dynamically. Able to see the checkboxes on selecting My Investments Radio buttons on the top.

    The Change event is not getting triggered, I added listeners in the view app/view/Home.js

  5. #4
    Sencha - Sustaining Engineer tristan.lee's Avatar
    Join Date
    Mar 2015
    Location
    Central Ohio
    Posts
    1,579
    Answers
    165

    Default

    In your controller, you were adding the checkboxes to the group using the items property. add() should be called directly on the checkboxgroup component.

    Also, the event is change, not checkchange. Fixing these 2 things calls the listeners as you'd expect.

    Tristan Lee
    Sencha Inc - Sustaining Engineer


    Having an issue? Help us help you - be detailed; provide some code; demonstrate with a fiddle (fiddle.sencha.com)

    Embed your fiddle in your post: [FIDDLE]id[/FIDDLE]

Similar Threads

  1. orientation change event isn't being triggered in phonegap app
    By Tieis in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 15 Oct 2013, 12:15 PM
  2. Replies: 1
    Last Post: 15 Mar 2012, 5:13 AM
  3. Change event of toggle field not getting triggered
    By suraj.breezy in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 5 Jan 2012, 9:55 AM
  4. Event AFTEREDIT is not triggered when CheckBox is checked
    By msuresh in forum Ext 2.x: Help & Discussion
    Replies: 25
    Last Post: 26 Jul 2009, 1:28 AM

Tags for this Thread

Posting Permissions

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