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

Thread: Combo Box question

  1. #1
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Default Combo Box question

    Two of the config parms for the comboBox are displayField and valueField.

    I figured these would allow me to emulate the following html drop down.
    HTML Code:
    <select name="country">
    <option value="1">Afghanistan</option>
    <option value="2">Albania</option>
    <option value="3">Algeria</option>
    <option value="4">American Samoa</option>
    <option value="5">Andorra</option>
    <option value="6">Angola</option>
    <option value="7">Anguilla</option>
     ...
    <option value="252">Zimbabwe</option>
    </select>
    For illustration purposes, data store looks like this:
    PHP Code:
               var countryStore = new Ext.data.SimpleStore({
                  
    fields : ['county_id''country_name'],
                  
    data: [
                    [
    '1''Afghanistan'], ... ['252','Zimbabwe']           
                }); 
    My form field is in a fieldset:
    PHP Code:
                var clientDetailsFieldset = {
                  
    xtype'fieldset',
                  
    title'Client contact details',
                  
    buttonsformButtons,
                  
    items: [{
                    
    id'id_client_contact_ref',
                    
    fieldLabel'ClientContactID',
                    
    name'id_client_contact_ref',
                    
    disabledtrue
                  
    },{
                    
    xtype'combo',
                    
    storecountryStore
                    
    displayField'country_name',
                    
    valueField'country_id',
                    
    editablefalse,                                                 
                    
    mode'local'
                    
    forceSelectiontrue,                
                    
    emptyText'Select a title...',                                                              
                    
    fieldLabel'Country',
                    
    name'country_id',
                    
    allowBlankfalse 
                 
    }]
               }; 
    When the form is submitted, the server side script (PHP) is seeing the country name in $_POST['country_id'] (ie the displayField and not the valueField).

    Am I doing something wrong, or is this working as intended?

    TIA,
    Nick

  2. #2
    Ext User cerad's Avatar
    Join Date
    Dec 2007
    Posts
    226
    Vote Rating
    0
      0  

    Default

    Change county_id to country_id in your field list.

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    123
      0  

    Default

    Use 'hiddenName' instead of 'name'.

  4. #4
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Default

    Cerad, thanks for the quick response. Sorry, that was a contrived example to illustrate what I am doing and I unwittingly created a typo in it. My real code doesn't have the typo but I am seeing the displayField posted rather than the valueField.

  5. #5
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Default

    Many thanks Condor. Hadn't figured that out when reading the ComboBox API entry.

  6. #6
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Question

    Quote Originally Posted by Condor View Post
    Use 'hiddenName' instead of 'name'.
    Okay, this works fine for getting the 'key' for a key/value combo arrangement which is commonly required dealing with data stored in databases where data has been normalised using foreign keys, but how can I preload a form containing combo boxes in the scenario describe below? (Which, by the way, works fine as long as your form just has regular text fields.)

    In my simple case I have a small grid to the left being used as a selection list, and when a row is selected, a form on the right is preloaded with data from the grid store:

    PHP Code:
                grid.getSelectionModel().on('rowselect', function(smrowindexrecord) {
                  
    clientContactForm.getForm().loadRecord(record);                                   
                 }); 
    The grid store is defined is defined like this:
    PHP Code:
               var dataFields = [
                       ... 
    snipped ...
                       {
    name'first_name'type'string'mapping'first_name'},
                       {
    name'initials'type'string'mapping'initials'},
                       {
    name'last_name'type'string'mapping'last_name'},
                       {
    name'id_title'type'string'mapping'id_title'},
                       {
    name'title'type'string'mapping'title'},
                       ... 
    snipped ...
                ]; 
                
                var 
    store = new Ext.data.JsonStore({
                    
    url'gimme_ma_grid_data',
                    
    totalProperty:'totalCount',
                    
    root'rows',
                    
    idProperty'id_client',
                    
    remoteSorttrue,
                    
    fieldsdataFields 
                
    }); 
    The combo box and store are defined as follows:
    PHP Code:
                var titleStore = new Ext.data.JsonStore({
                    
    url'gimme_ma_combo_data,
                    root: '
    rows',
                    fields : ['
    id_title', 'title'],
                    autoLoad: true
                });
                
                var titleCombo = new Ext.form.ComboBox({
                    store: titleStore, 
                    displayField: '
    title',
                    valueField: '
    id_title',
                    editable: false,                                                 
                    mode: '
    local', 
                    forceSelection: true,                
                    emptyText: '
    Select a title...', 
                    triggerAction: '
    all',  // without this the combo won't load from the storedespite the autoload!                                                                             
                    
    fieldLabel'Title',
                    
    name'title',                
                    
    hiddenName'id_title',
                    
    allowBlankfalse             
                
    }); 
    What I see is shown in the attached image. Even though I have
    Code:
    name: 'title'
    and
    Code:
    hiddenName: 'id_title'
    , the field is showing the 'key' (ie id_title), rather than the 'value' (title).
    I'm thinking I will have to add a line or two more code to dynamically correct the values set in the title and hiddenTitle fields something like this?
    PHP Code:
    grid.getSelectionModel().on('rowselect', function(smrowindexrecord) {
                  
    clientContactForm.getForm().loadRecord(record);
                  
    clientContactForm.getForm().findField('title').value record.title;
                  
    clientContactForm.getForm().findField('hiddenTitle').value record.id_title;                       
    }); 
    Or is Ext misbehaving and should it actually not need this tweak?
    (Or am I just being completely stupid ... again )

    I was rather expecting the displayField and valueField config parms given to the combo box to provide it all the necessary info it would need to behave like a regular html drop-down list.

    (Using Ext 3.1.0)
    Last edited by nickweavers; 30 Dec 2009 at 9:13 AM. Reason: add Ext version

  7. #7
    Ext User cerad's Avatar
    Join Date
    Dec 2007
    Posts
    226
    Vote Rating
    0
      0  

    Default

    mode needs to be set to remote since you are using a json store.

    And you might run in to the case where the form is rendered before the store finishes loading. In that case you will have to hang a listener off of the store and trigger an update of the form.

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    123
      0  

    Default

    To avoid the problem of the form loading before the combobox store you can use this patch.

  9. #9
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by cerad View Post
    mode needs to be set to remote since you are using a json store.

    And you might run in to the case where the form is rendered before the store finishes loading. In that case you will have to hang a listener off of the store and trigger an update of the form.
    Thanks again cerad, yes I had switched from local store to remote and forgot to update the mode. Now both combo boxes are showing the values that should go into their hidden fields after the form is loaded from the store record which is NOT what I want at all. See attached.

    I tried the following to preset the title to the value that is in the grid store:
    PHP Code:
                grid.getSelectionModel().on('rowselect', function(smrowindexrecord) {
                  
    clientContactForm.getForm().loadRecord(record);
                  if (
    record.data.id_title != '') {
                    
    titleCombo.store.on('load',function(){
                      
    titleCombo.setValue(record.data.title);
                    });        
                  }                                            
                }); 
    How can I set the field created by the parm
    Code:
    hiddenName: 'id_title'
    ?
    When I look through the scoped variables that Ext has created for the combobox, it appears to have generated the following, where the hidden value I need to set is actually within
    Code:
    outerHTML: "<input type="hidden" name="id_title" id="id_title" value="1">"
    How do I access this field and update its value in ExtJs? (I have not used ExtJs to manipulate HTML yet)
    PHP Code:
    titleComboObject
        allowBlank
    false
        autoEl
    Object
        autoScroll
    "undefined"
        
    boxReadytrue
        bufferSize
    230
        constructorFunction
    : function () {}
        
    containerObject
        displayField
    "title"
        
    docObject
        dqTask
    Object
        editable
    false
        el
    Object
        emptyText
    "Select a title..."
        
    eventsObject
        fieldLabel
    "Title"
        
    forceSelectiontrue
        hiddenField
    HTMLInputElement
            accept
    ""
            
    accessKey""
            
    align""
            
    alt""
            
    attributesNamedNodeMap
            autofocus
    false
            baseURI
    "http://localhost:8080/opsuk/index.php?option=com_opsuk-backoffice&controller=mai... (length: 91)"
            
    checkedfalse
            childElementCount
    0
            childNodes
    NodeList
            children
    HTMLCollection
            className
    ""
            
    clientHeight0
            clientLeft
    0
            clientTop
    0
            clientWidth
    0
            constructorFunction
    : function () {}
            
    contentEditable"false"
            
    defaultCheckedfalse
            defaultValue
    "1"
            
    dir""
            
    disabledfalse
            draggable
    false
            files
    null
            firstChild
    null
            firstElementChild
    null
            form
    HTMLFormElement
            id
    "id_title"
            
    indeterminatefalse
            innerHTML
    ""
            
    innerText""
            
    isContentEditablefalse
            lang
    ""
            
    lastChildnull
            lastElementChild
    null
            localName
    "input"
            
    maxLength524288
            multiple
    false
            name
    "id_title"
            
    namespaceURI"http://www.w3.org/1999/xhtml"
            
    nextElementSiblingHTMLInputElement
            nextSibling
    HTMLInputElement
            nodeName
    "INPUT"
            
    nodeType1
            nodeValue
    null
            offsetHeight
    0
            offsetLeft
    0
            offsetParent
    null
            offsetTop
    0
            offsetWidth
    0
            onabort
    null
            onbeforecopy
    null
            onbeforecut
    null
            onbeforepaste
    null
            onblur
    null
            onchange
    null
            onclick
    null
            oncontextmenu
    null
            oncopy
    null
            oncut
    null
            ondblclick
    null
            ondrag
    null
            ondragend
    null
            ondragenter
    null
            ondragleave
    null
            ondragover
    null
            ondragstart
    null
            ondrop
    null
            onerror
    null
            onfocus
    null
            oninput
    null
            onkeydown
    null
            onkeypress
    null
            onkeyup
    null
            onload
    null
            onmousedown
    null
            onmousemove
    null
            onmouseout
    null
            onmouseover
    null
            onmouseup
    null
            onmousewheel
    null
            onpaste
    null
            onreset
    null
            onscroll
    null
            onsearch
    null
            onselect
    null
            onselectstart
    null
            onsubmit
    null
            outerHTML
    "<input type="hidden" name="id_title" id="id_title" value="1">"
            
    outerText""
            
    ownerDocumentHTMLDocument
            parentElement
    HTMLDivElement
            parentNode
    HTMLDivElement
            placeholder
    ""
            
    prefixnull
            previousElementSibling
    null
            previousSibling
    null
            protoObject
    Object
            prototypeObject
    "undefined"
            
    readOnlyfalse
            required
    false
            scrollHeight
    0
            scrollLeft
    0
            scrollTop
    0
            scrollWidth
    0
            selectionEnd
    "TypeError: Accessing selectionEnd on an input element that cannot have a selection."
            
    selectionStart"TypeError: Accessing selectionStart on an input element that cannot have a selection."
            
    size20
            src
    ""
            
    styleCSSStyleDeclaration
            tabIndex
    0
            tagName
    "INPUT"
            
    textContent""
            
    title""
            
    type"hidden"
            
    useMap""
            
    validityValidityState
            value
    "1"
            
    willValidatefalse
        hiddenName
    "id_title"
        
    id"ext-comp-1013"
        
    initialConfigObject
        itemCt
    Object
        keyNav
    Object
        label
    Object
        lastSelectionText
    "1"
        
    lastSizeObject
        mode
    "remote"
        
    mons: Array
        
    name"title"
        
    originalValue""
        
    ownerCtObject
        positionEl
    Object
        protoObject
    Object
        prototypeObject
    "undefined"
        
    queryDelay500
        rendered
    true
        resizeEl
    Object
        selectedIndex
    : -1
        store
    Object
        submitValue
    false
        trigger
    Object
        triggerAction
    "all"
        
    validationTaskObject
        value
    "1"
        
    valueField"id_title"
        
    width230
        wrap
    Object 
    TIA,
    Nick,
    Attached Images Attached Images

  10. #10
    Sencha User nickweavers's Avatar
    Join Date
    Feb 2008
    Posts
    106
    Vote Rating
    1
      0  

    Default

    May not be too pretty, but this seems to work...
    PHP Code:
                grid.getSelectionModel().on('rowselect', function(smrowindexrecord) {
                  
    clientContactForm.getForm().loadRecord(record);
                  
    // Set the initial combo box name and hidden name fields to match what is in the
                  // corresponding selected store row fields
                  
    if (record.data.id_title != '') {
                    
    titleCombo.store.on('load',function(){
                      
    titleCombo.setValue(record.data.title);
                    });
                    var 
    id_titleField Ext.query('#id_title');
                    
    id_titleField.value record.data.id_title;        
                  }                                            
                }); 

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
  •