1. #1
    Ext User
    Join Date
    May 2007
    Posts
    4
    Vote Rating
    0
    rollyF is on a distinguished road

      0  

    Question on "check" event in radio field is only firing once

    on "check" event in radio field is only firing once


    What is wrong with my code? I am trying to toggle the showing and hidding of a fieldset depending on what radio button is selected. The check event is only firing once.

    I'm an Ext newbee.

    TIA,
    Rolly


    Ext.onReady(function(){

    var showToggle = function fnCallback(e){
    if(e.value == '2') {
    date_fieldset.show();
    }
    else {
    date_fieldset.hide();
    }
    }

    var form_account = new Ext.form.Form({
    labelAlign:'right',
    labelWidth: 90,
    url:''
    });

    var search_option_1 = new Ext.form.Radio({
    boxLabel: 'Accounts that I created or modified today',
    name: 'search_option',
    value: '1',
    checked: true,
    width:190
    });

    var search_option_2 = new Ext.form.Radio({
    boxLabel: 'Accounts that I created or modified by range of dates',
    name: 'search_option',
    value: '2',
    width:190
    });

    var search_from_date = new Ext.form.DateField({
    fieldLabel: 'From',
    name: 'from_date',
    width:190,
    allowBlank:true
    });

    var search_to_date = new Ext.form.DateField({
    fieldLabel: 'To',
    name: 'from_date',
    width:190,
    allowBlank:true
    });

    form_account.fieldset(
    {legend:'Search Criteria',hideLabels:true},
    search_option_1,
    search_option_2
    )

    var date_fieldset = form_account.fieldset(
    {legend: 'Date Range', hidden:true},
    search_from_date,
    search_to_date
    )

    form_account.addButton('Search');

    search_option_1.on('check', showToggle);
    search_option_2.on('check', showToggle);

    form_account.render('search-form');
    });


  2. #2
    Ext Premium Member BernardChhun's Avatar
    Join Date
    Mar 2007
    Location
    Quebec, Canada
    Posts
    831
    Vote Rating
    2
    BernardChhun will become famous soon enough

      0  

    Default


    according to this example: http://extjs.com/deploy/ext/examples/menu/menus.html

    the radio button has a checkHandler config attribute to which you can link a function. I'm pretty sure this works out everytime.

    Code:
     var search_option_1 = new Ext.form.Radio({
    boxLabel: 'Accounts that I created or modified today',
    name: 'search_option',
    value: '1',
    checked: true,
    width:190,
    checkHandler : showToggle
    });
    
    var search_option_2 = new Ext.form.Radio({
    boxLabel: 'Accounts that I created or modified by range of dates',
    name: 'search_option',
    value: '2',
    width:190,
    checkHandler : showToggle
    });

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    4
    Vote Rating
    0
    rollyF is on a distinguished road

      0  

    Default


    Bernard,

    Thank you for your suggestion. However, checkHandler does not appear to be a config attribute of Ext.form.Radio. When I tried it the event is not firing at all.

    -Rolly

  4. #4
    Ext Premium Member BernardChhun's Avatar
    Join Date
    Mar 2007
    Location
    Quebec, Canada
    Posts
    831
    Vote Rating
    2
    BernardChhun will become famous soon enough

      0  

    Post


    Hey again,

    you are SOO right about that one. The example I posted was based of a checkbox within the Menu widget! my bad Rolly.

    so looking in the docs, the check event should do it.

    Code:
    var checkHandler = function(checkbox, checked){
         if (checked){
          date_fieldset.show();
         } else {
          date_fieldset.hide();
         }
    }
    What is bugging me right now is the way you make your function before you even declare your Ext.form.Radio. are you sure the date_fieldset still exists when the function is called?

    try doing
    Code:
    console.log(date_fieldset)
    before trying to hide or show them.

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    4
    Vote Rating
    0
    rollyF is on a distinguished road

      0  

    Default


    Bernard,

    Thank you again for your followup. The date_fieldset does exist and as what I mentioned, the event is only firing once and it shows the hidden date_fieldset. But when I select the other option, I expect the event to fire again and hide the date_fieldset. The event doesn't fire again.

    By the way, what is the best practice of declaring the function? I thought that declaring that on top does not mean anything because what bind these events are the following statement:

    search_option_1.on('check', showToggle);
    search_option_2.on('check', showToggle);

    which is after I declare the date_fieldset.

    Thanks,
    rolly

  6. #6
    Ext User
    Join Date
    May 2007
    Posts
    4
    Vote Rating
    0
    rollyF is on a distinguished road

      0  

    Post


    I've attached the zip file, in case anyone wants to try this.

    -rolly
    Attached Files

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    2
    tryanDLS is on a distinguished road

      0  

    Default


    I think there's a bug here - it would appear that when a radio button is clicked, the others aren't toggling off their checked value, so the event is not fired when the button is clicked the 2nd time around.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    cchiriac is on a distinguished road

      0  

    Default


    It looks like a bug to me too. My current workaround is to attach the listeners to the Radio's element. I'm doing this after i call the form.render. Here's a raw copy from my code :

    Code:
    fs.render(dialog.body);
                
                radioCompany.el.on('click', function(){
                  companyFieldset.show();
                  personFieldset.hide();
                });
                     
                radioPerson.el.on('click', function(){
                  personFieldset.show();
                  companyFieldset.hide();
                });
    fs is the form, the two radios are defined before the call to the render method.

  9. #9
    Ext Premium Member phibix's Avatar
    Join Date
    Apr 2007
    Location
    Dallas
    Posts
    20
    Vote Rating
    0
    phibix is on a distinguished road

      0  

    Default


    It is a bug. I've traced the logic of how Ext.form.Radio works. It only fires the check event when the checked value of the dom element is different than the one stored in the class instance. This works fine for check boxes since they're unchecked by clicking on them which invokes onClick and properly updates the instance variable 'checked'.

    For radio buttons this never happens. Unselecting the element happens by clicking on another element, thus onClick is never fired on the unselected radio button and the value this.checked is never updated.

    The solution is to have Radio overwrite setValue from Ext.form.Checkbox so it deselects all inputs with the same name and then selects the one being set.

    I'll work up some code and then post it in a moment.

    P

  10. #10
    Ext Premium Member phibix's Avatar
    Join Date
    Apr 2007
    Location
    Dallas
    Posts
    20
    Vote Rating
    0
    phibix is on a distinguished road

      0  

    Default


    Okay this is what I came up with. The logic is:

    1. locate all the form radio buttons for this group
    2. set the checked instance variable on each fields's Ext.form.Radio instance to false
    3. set the value to true on the current field

    I had two gotchas. First I use brackets in my form names. Its a rails-ism and lets rails auto format my params in to hashes and arrays. The reason this matters is because I started with the same code used in Ext.form.Radio.getGroupValue() to locate all the radio buttons belonging to this group, and brackets aren't allowed in DomQuery's attribute comparisions. I ended up instead selecting all nodes in the current form that are of type radio then check in the iterator that the name is the same as the current node.

    The second gotcha was there's no easy way to access the Ext.form.Radio instance. To make it easy to get to one instance from another without having to tell the Radio objects about each other, I store a reference to the Ext.form.Radio in the dom element itself.

    Here's the code:
    PHP Code:
    Ext.form.Radio.prototype.onRender = function(ctposition) {
      
    Ext.form.Radio.superclass.onRender.call(thisctposition);
      
    this.el.dom.__ext_field this;
    }

    Ext.form.Radio.prototype.setValue = function(v) {
      var 
    radios this.el.up('form').select('input[type=radio]');
      for(var 
    0radios.elements.lengthi++) {
        if(
    radios.elements[i].__ext_field && radios.elements[i].name == this.el.dom.name) {
          
    radios.elements[i].__ext_field.checked false;
        }
      }

      
    this.checked = (=== true || === 'true' || == '1');
      if(
    this.el && this.el.dom){
        
    this.el.dom.checked this.checked;
      }
      
    this.fireEvent("check"thisthis.checked);

    Works for me. :-)

    P

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar