1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    snipeg is on a distinguished road

      0  

    Default Unanswered: IE8 Issues when loading multiple comboboxes

    Unanswered: IE8 Issues when loading multiple comboboxes


    Hi Everyone:
    I'm new to Ext, and I'm having what I think is a weird issue.

    This is the situation, I've a form page, that contains four comboboxes that loads data using a store, which loads the data through and ajax request. (Every combo does a single xhr request)

    Using IE8, everything is messed up due that I get some errors that read:

    SCRIPT5007: Unable to get value of the property 'isReader': object is null or undefined
    ext-all.js, line 7 character 283424
    SCRIPT5007: Unable to get value of the property 'afterEdit': object is null or undefined
    ext-all.js, line 7 character 294839
    SCRIPT5007: Unable to get value of the property 'afterEdit': object is null or undefined

    The most weird thing is that, if I leave only two combos on the page, then everything works fine, but if I add a third combo, then everything is messed up again and I get the errors above.
    This is the code which generates the comboboxes:
    Code:
        // conf should have:
        // ajaxURL ...
        // replaceElement Replace element
        // fieldNamecontrol name
        generic : function (conf) {
            // ext models :-|
            Ext.define('GenericOption', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'text', type: 'string'},
                    {name: 'code', type: 'string'}
                ]
            });
            
            // country dropdown
            
            var goStore = Ext.create('Ext.data.Store', {
                model : 'GenericOption',
                proxy: {
                    type: 'ajax',
                    url : conf.ajaxURL,
                    reader: { type: 'json' }
                },
                
            });
            var replaceElement = Ext.get(conf.replaceElement);
            new UI.ComboBox({
                id : conf.fieldName + '-cmp',
                name : conf.fieldName,
                width: 360,
                emptyText: replaceElement.getAttribute('title'),
                displayField: 'text',
                valueField: 'code',
                renderTo: replaceElement.wrap({tag: 'div'}),
                store: goStore,
                queryMode : 'local'
            });
            
            
            goStore.load(function(){
                Ext.getCmp(conf.fieldName + '-cmp').setValue(replaceElement.getValue());
                replaceElement.remove();
            });
            
        }
    So, the steps to reproduce the error in IE8:
    - Adding more than two combos into the page raises multiple errors, and the ui is messed up.
    - Having only two combos everything works fine.
    - The above code works perfect on chrome, FF, and IE9

    Any help will be very appreciated.

    Many thanks in advance!

    Guillermo

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    1. I would move the Ext.define for your model outside. No need to redefine it multiple times.
    2. Don't use id unless debugging.
    3. Could be something with UI.ComboBox
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    snipeg is on a distinguished road

      0  

    Default


    Mitch, many thanks for your answer

    I've moved the define statement outside the function. Thanks,
    I've also implemented all your suggestions, but the combos doesn't work yet , I'm still checking what happens here....

    Many thanks again.

    Guillermo

  4. #4
    Sencha User
    Join Date
    Jun 2013
    Posts
    5
    Vote Rating
    1
    abdul haq is on a distinguished road

      1  

    Default Issue might be with your store..check this out..

    Issue might be with your store..check this out..


    var goStore = Ext.create('Ext.data.Store', { model : 'GenericOption', proxy: { type: 'ajax', url : conf.ajaxURL, reader: { type: 'json' } }, });
    Remove comma at the end of proxy..it should be like following

    var goStore = Ext.create('Ext.data.Store', { model : 'GenericOption', proxy: { type: 'ajax', url : conf.ajaxURL, reader: { type: 'json' } } });
    Thanks,
    Abdul Haq
    Last edited by abdul haq; 18 Sep 2013 at 3:40 AM. Reason: typo

Thread Participants: 2

Tags for this Thread