1. #1
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    0
    richardcromer is on a distinguished road

      0  

    Question Unanswered: Second set of Eyes for Non populating combobox.

    Unanswered: Second set of Eyes for Non populating combobox.


    Greetings,

    I have tried just about every way (except the right way of course) to populate a combobox. The combobox appears but is empty. When I click the down arrow I get the dreaded "this.el is null" message. Can someone please, please take a look and tell me what I have done wrong (I have been staring/changing/reducing/massaging this for the last 3 hours--how pathetic).

    Please help.

    Ext.define('Ordering.view.GeneralInformationPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.generalinfopanel',
    animCollapse: true,
    title: 'General Information',
    initComponent: function(){
    Ext.apply(this, {
    items: this.createActionView()
    });
    this.callParent(arguments);
    },
    createActionView : function() {
    // The data store containing the list of states
    var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
    {"abbr":"AL", "name":"Alabama"},
    {"abbr":"AK", "name":"Alaska"},
    {"abbr":"AZ", "name":"Arizona"}
    ]
    });
    this.actionView = Ext.create('Ext.Panel',{
    title: 'Action View',
    bodyStyle:'padding:5px 5px 0',
    items: [{
    xtype : 'combo',
    name : 'activities',
    fieldLabel : 'Actitities',
    mode : 'local',
    store : states,
    displayField : 'name',
    valueField : 'abbr'
    }] //items
    }); // end of Ext.FormPanel
    return this.actionView;
    }
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,506
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please use code tags whenever you post code (# button on the editor toolbar). I highly recommend using the 'Preview Post' button before you post as a way of checking what your post will look like to other people.

    Even if you do post code without code tags by accident you can still go back and edit your post (link down the bottom of your post) to put the code tags in.

    All that said, I tried your code and it all worked fine for me. I tested it with ExtJS 4.0.2 and 4.0.5, Chrome and FF.

    What's the full stacktrace for your error? Which version of ExtJS are you using? Can you try using the code you posted on here in isolation from the rest of your app? Just stick it in an HTML page and do an Ext.create() with a renderTo, that's all I did to test it. Would be useful to confirm whether the code fails for you when it's isolated from the rest of your app's code.

    Note that mode has been renamed to queryMode in ExtJS 4, but that didn't stop your code working for me.

  3. #3
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    0
    richardcromer is on a distinguished road

      0  

    Default


    First of all, thank you for your reply and the protocol tips. I will be sure to incorporate them. I did exactly what was suggested. In fact I did the following:

    I downloaded ExtJs 4.0.2-gpl.zip again and put it on tomcat server
    I copied the example out of the Sencha API docs for combobox usage.
    I just made a new html file and pasted the example, thus removing any references to my old app.

    When I ran it I still get an empty combobox. When I press the down-arrow, I get the error "this.el is null".(arghhhhhh!):

    What could I be doing wrong still?

    I put a breakpoint on the line that is failing, and this is the stacktrace of the event:


    enable()ext-all-debug.js (line 22601)
    constructor()ext-all-debug.js (line 22463) el = Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}
    binding = null
    eventName = "keydown"

    newClass()ext-all-debug.js (line 3067)
    (?)()21 (line -5100) c = function()
    a = [Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}, null, "keydown"]

    instantiate()ext-debug.js (line 6428)
    alias()ext-debug.js (line 2414)
    setConfig()ext-all-debug.js (line 23432) el = Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}
    config = Object { boundList={...}, forceKeyDown=true, up=function(), more...}

    constructor()ext-all-debug.js (line 23423) el = Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}
    config = Object { boundList={...}, forceKeyDown=true, up=function(), more...}

    callParent()ext-all-debug.js (line 2833) args = [Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}, Object { boundList={...}, forceKeyDown=true, up=function(), more...}]

    constructor()ext-all-debug.js (line 69089) el = Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}
    config = Object { boundList={...}, forceKeyDown=true, tab=function()}

    newClass()ext-all-debug.js (line 3067)
    evaluatedFn()3 (line -10650) c = function()
    a = [Object { dom=input#ext-gen1005.x-form-field, id="ext-gen1005", defaultUnit="px", more...}, Object { boundList={...}, forceKeyDown=true, tab=function()}]

    instantiate()ext-debug.js (line 6428)
    alias()ext-debug.js (line 2414)
    onExpand()ext-all-debug.js (line 69687)
    expand()ext-all-debug.js (line 68117)
    doQuery()ext-all-debug.js (line 69468) queryString = ""
    forceAll = true

    onTriggerClick()ext-all-debug.js (line 69559)
    onTriggerWrapClick()ext-all-debug.js (line 68011) e = Object { browserEvent=Event mouseout, type="mouseout", button=0, more...}

    (?)()22 (line -10983) e = Object { browserEvent=Event mouseout, type="mouseout", button=0, more...}
    options = Object {}
    fn = function()
    scope = Object { initialConfig={...}, fieldLabel="Choose State", store={...}, more...}
    ename = "click"
    dom = div#ext-gen1006.x-form-trigger-wrap
    wrap = wrap(e, args)
    args = undefined

    wrap()ext-debug.js (line 16900) e = click clientX=246, clientY=13
    args = undefined

  4. #4
    Ext JS Premium Member
    Join Date
    Jul 2011
    Posts
    12
    Vote Rating
    0
    richardcromer is on a distinguished road

      0  

    Default Solved!

    Solved!


    Thanks for all who viewed with the goal of helping. My problem was that Ext did not like "bootstrap.js" and "ext-debug.js" (I have no clue why). When I changed over to ext-all.js and ext-all-debug.js, the combobox options where available when I hit the downarrow (before it would come up empty and when I hit the downarrow I would get an ext bug "this.el is null")

    I am trying to work on an app so I won't delve any more on why this is the case (although I welcome an explanation) but for now I seem to be beyond this hump. Thanks again everyone.

    p.s. Can someone tell me how to change the thread's state to Answered?

  5. #5
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You should be able to select an answer. Be sure to post code within CODE tags in the future.

Thread Participants: 2