Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: createChild problem on IE

  1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    114

    Default createChild problem on IE

    Hi all!

    I`m testing extcore3 createChild. Trying to add options`s to a select.
    On FF it works fine, but on IE6 or 7, it does not populate the select and
    shows no error.

    html:
    PHP Code:

        
    <select id='mysel' name='mysel'>
          <
    option value=-1>Select</option>
        </
    select
    js:
    PHP Code:
          Ext.onReady(function() {
            
    Ext.fly('mysel').createChild({tag'option'value1html'First Option'})
          }); 
    Any ideas?


    Thank you!

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

    Default

    IE does not support adding Options to a SELECT like that. You have do it the old-school way and add new Option(text, value) to the SELECT.

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    114

    Default

    Solved! thank you tryanDLS!

    PHP Code:

    Ext
    .onReady(function() {
       var 
    myselect document.getElementById("mysel")
       try{
           
    myselect.add(new Option("New Last Option""4"), null)
       }  catch(
    e){ // IE does not like 'null' as last parameter
           
    myselect.add(new Option("New Last Option""4"))
       }
    }); 
    Why Ext can`t handle this IE diff?

  4. #4
    Ext JS Premium Member syscobra's Avatar
    Join Date
    Nov 2007
    Location
    Venezuela
    Posts
    146

    Default

    Quote Originally Posted by tomlobato View Post
    Solved! thank you tryanDLS!

    PHP Code:

    Ext
    .onReady(function() {
       var 
    myselect document.getElementById("mysel")
       try{
           
    myselect.add(new Option("New Last Option""4"), null)
       }  catch(
    e){ // IE does not like 'null' as last parameter
           
    myselect.add(new Option("New Last Option""4"))
       }
    }); 
    Why Ext can`t handle this IE diff?
    I was watching the debug file of extcore and i found that insertHtml use this function:
    Code:
    frag = range.createContextualFragment(html);
    With netbeans it says me that function is not available on all the browsers outthere so maybe thats why. But as we all now that IE sucks its not strange that it doesn't work well with all the options you can use flawless in other browsers.

    Anyways.
    Here is my aproach
    PHP Code:
    Ext.onReady(function() {
    // Create a new method (insertOption) to use in the Ext.Element
    Ext.Element.addMethods(function(){
        return {
             
    insertOption: function(optionvalue,optionhtml){ // Function to insert an Option to a Select
                
    if (Ext.isIE) { // if its Internet Explorer use this to add the option to the select
                    
    var mySelect document.getElementById(this.dom.id);
                    
    mySelect.add(new Option(optionhtmloptionvalue));
                } else { 
    //else use the normal action
                    
    Ext.fly(this).createChild({tag'option'valueoptionvaluehtmloptionhtml});
                }
            }
        }
    }());
    // end of method (insertOption)
    Ext.fly('mysel').insertOption(1,'First Option'); // Using the newly added method from the Element
    }); 
    This aproach helps you if you use it a lot of times in any proyect.
    The use is like in the code. You call the element(or CompositeElement) using Ext.get or Ext.fly then use the function insertOption and the parameters are the value and the html (text) of the option.

    Tryed on IE7, Firefox and Chrome...The browsers i have installed on my machine

    I am starting to learn a lot of the ext core stuff
    Javier Rincón aka SysCobra

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Ext doesn't handle the difference with IE, because there's no point in adding that little-used case to the generic createChild functionality. It would add code bloat for little benefit. This has been a known issue for the last 3 years (I was the first person to ever come across it here) and since then, it has come up probably less than 5 times.

  6. #6
    Sencha User
    Join Date
    Nov 2008
    Posts
    114

    Default

    very good, it uses Ext.isIE instead try/catch and creates
    a general addOption method.

    Thank you!

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Posts
    114

    Default

    Quote Originally Posted by tryanDLS View Post
    Ext doesn't handle the difference with IE, because there's no point in adding that little-used case to the generic createChild functionality. It would add code bloat for little benefit. This has been a known issue for the last 3 years (I was the first person to ever come across it here) and since then, it has come up probably less than 5 times.
    ok, understood.

  8. #8
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    sorry, saw some incorrect code and i just had to nitpick

    @syscobra, you're adding an unnecessary self-invoking function wrapper to your code.
    the correct code should be:
    Code:
    // Create a new method (insertOption) to use in the Ext.Element
    Ext.Element.addMethods({
         insertOption: function(optionvalue,optionhtml){ // Function to insert an Option to a Select
            if (Ext.isIE) { // if its Internet Explorer use this to add the option to the select
                var mySelect = document.getElementById(this.dom.id);
                mySelect.add(new Option(optionhtml, optionvalue));
            } else { //else use the normal action
                Ext.fly(this).createChild({tag: 'option', value: optionvalue, html: optionhtml});
            }
        }
    });

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Shouldn't that be:
    Code:
    Ext.Element.addMethods({
         insertOption: function(optionvalue, optionhtml){
            if(Ext.isIE){
                this.dom.add(new Option(optionhtml, optionvalue));
            } else {
                this.createChild({tag: 'option', value: optionvalue, html: optionhtml});
            }
        }
    });
    ps. Does this really need an Ext.isIE check? Isn't this.dom.add(new Option(optionhtml, optionvalue)); always supported?

  10. #10
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    Quote Originally Posted by Condor View Post
    Shouldn't that be:
    Code:
    Ext.Element.addMethods({
         insertOption: function(optionvalue, optionhtml){
            if(Ext.isIE){
                this.dom.add(new Option(optionhtml, optionvalue));
            } else {
                this.createChild({tag: 'option', value: optionvalue, html: optionhtml});
            }
        }
    });
    ps. Does this really need an Ext.isIE check? Isn't this.dom.add(new Option(optionhtml, optionvalue)); always supported?
    i should think it is always supported.

Page 1 of 2 12 LastLast

Posting Permissions

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