1. #1
    Ext User dantheman's Avatar
    Join Date
    Mar 2007
    Posts
    259
    Vote Rating
    1
    dantheman is on a distinguished road

      0  

    Default ComboBox and onSelect

    ComboBox and onSelect


    Hello all!

    First post. Let me start with a great big THANKS for this great toolset.

    I have a question about using a custom onSelect in a ComboBox.

    I've whipped up everything according to the helpful examples,
    and it works .. up to a point.

    I feel a bit silly even asking this, but I've dug into Combo.js and the forum-search
    examples and I think it's a case of something hiding beneath my nose.

    I have a combo box that successfully uses an HttpProxy to populate a JSON dataStore.
    The ComboBox successfully paginates the properly formatted results.

    When I click on a row in the results, however, the box does not collapse itself.
    It puts the proper selection into the text field (not a select element), but does not
    turn itself off

    Additionally, the text placed into the text field disappears whenever I click off the control.

    I've tried adding this.collapse(), but although this does collapse the control, the text
    still disappears from the text field.

    I suppose it's worth noting why I'm overriding onSelect: I want to throw some of the
    various record values around to various places, so I needed a shim for that. Maybe
    there's a better way to get that done?

    My question becomes: how does ComboBox know when its work is done?
    How can I convince it that the text it has placed into my text field shoud stay?

    Thanks,
    --dan

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Are you returning false on your onselect listener or possibly calling e.stopEvent()?
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Ext User dantheman's Avatar
    Join Date
    Mar 2007
    Posts
    259
    Vote Rating
    1
    dantheman is on a distinguished road

      0  

    Default


    Quote Originally Posted by JeffHowden
    Are you returning false on your onselect listener or possibly calling e.stopEvent()?
    No. I'm not doing any housekeeping. Should I?

    Taking a cue(?) from another thread, I tried remaking the markup
    into a select, but that definitely wasn't the trick :roll:

    I have a powerful intuition that I've overridden some internal
    housekeeping, and/or not spec'd the display/valueFields properly.

    So, more specifics ..
    my text field has
    id=s_deptname name=s_deptname

    I specify a displayField: 's_deptname'

    and in the onSelect, I manually set the value for the text field, and a couple other
    hidden vars based on the selected records fields.

    Should I somehow manually engage the prior onSelect method?
    Am I spec'ing the textfield and displayField values right?
    --dan

  4. #4
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    I think we'll need to see some code and/or a link to an example the illustrates what you're describing.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  5. #5
    Ext User dantheman's Avatar
    Join Date
    Mar 2007
    Posts
    259
    Vote Rating
    1
    dantheman is on a distinguished road

      0  

    Default


    Quote Originally Posted by JeffHowden
    I think we'll need to see some code and/or a link to an example the illustrates what you're describing.
    Thanks Jeff. Here goes ...

    The markup:
    Code:
           <input type=hidden name=s_dept value="" >
     
           
     or Dept: <input type=text id=s_deptname name=s_deptname  size=5 >
    The JS:

    Code:
    <script>
    Ext.onReady(function(){
        var dept_ds = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: '/tools/remote_lookup'
            }),
            reader: new Ext.data.JsonReader(
            {
                	root: 'items', 
    		totalProperty: 'totalCount', 
    		id: 0
            },
            [
                	{name: 'deptcode', mapping: 'deptcode'}, 
    		{name: 'deptname', mapping: 'deptname'}
            ])
        });
        dept_ds.on( 'beforeload', function() {
            dept_ds.baseParams = {
                    kind: 'dept', 
    		search: document.admin_auths.s_deptname.value
            };
        } );
     
        var resultTpl = new Ext.Template(
            '<div class="search-item">',
                '<span>{deptcode} :: {deptname}</span>',
            '</div>'
        );
     
        var search = new Ext.form.ComboBox({
            store: dept_ds,
            displayField:'s_deptname',
            typeAhead: false,
            loadingText: 'Searching...',
            emptyText: 'or a Department . . .',
            forceSelection: true,
            width: 300,
            pageSize:10,
            selectOnFocus: true,
            tpl: resultTpl,
            onSelect: function(record){
                    document.admin_auths.s_dept.value = record.data.deptcode;
                    document.admin_auths.s_deptname.value = record.data.deptname;
                    document.admin_auths.s_person.value=admin_auths.s_kerb.value='';
          }
        });
        search.applyTo('s_deptname');
    });
    </script>
    Things are wrapping oddly. Hope it's not too troublesome.

    To recap: the code in the onSelect does the job.
    The ComboBox just doesn't think it's done, and when
    I tell it explicitly with a collapse(), it takes the text in s_deptname with it.

    Any hints appreciated. I am sure it's a doh! waiting to happen..

    --dan

  6. #6
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    onSelect is the function used when a selection is made. If you override it (which is ok), you are turning off the default onSelect behavior of the combobox. If what you want is an event for when something is selected, there is an event for that purpose.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  7. #7
    Ext User dantheman's Avatar
    Join Date
    Mar 2007
    Posts
    259
    Vote Rating
    1
    dantheman is on a distinguished road

      0  

    Default


    Quote Originally Posted by jacksloc
    onSelect is the function used when a selection is made. If you override it (which is ok), you are turning off the default onSelect behavior of the combobox. If what you want is an event for when something is selected, there is an event for that purpose.
    Thanks Jack.

    I had a thought on the train home that there must be another event I could use.

    Did I mention thanks?

    --dan

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

      0  

    Default


    onSelect is the function used when a selection is made. If you override it (which is ok), you are turning off the default onSelect behavior of the combobox. If what you want is an event for when something is selected, there is an event for that purpose.
    what is that event?

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

      0  

    Default


    select is the event. onSelect is the private function that fires the select event.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    32
    Vote Rating
    0
    migo_config is on a distinguished road

      0  

    Default


    I still don't understand. How do I close this onSelect?.....

Similar Threads

  1. Combobox on a PropsGrid
    By seldon in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 29 Apr 2007, 4:51 PM
  2. ComboBox doesn't scroll
    By mapo in forum Ext 1.x: Help & Discussion
    Replies: 13
    Last Post: 16 Apr 2007, 6:56 PM
  3. Possible bug in Combobox
    By buzz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 Mar 2007, 5:23 PM
  4. ComboBox on demand?
    By SteveEisner in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 12 Mar 2007, 10:53 PM
  5. Help with JsonReader / combobox
    By SteveEisner in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 12 Mar 2007, 1:39 PM

Thread Participants: 8