Page 1 of 4 123 ... LastLast
Results 1 to 10 of 33

Thread: Basic ComboBox limitations?

  1. #1

    Default Basic ComboBox limitations?

    I'm evaluating the usefulness of ComboBoxes and I believe I've come across three issues:

    1. Selecting which option should be initially selected. As we all know, in HTML the selected attribute defines which option is initially selected (or the first, if none selected). How can this be specified using the ComboBox component?
    2. Differences between value and display. In an HTML option element, you specify both a value and a display value. Looking over the options for ComboBox doesn't appear to show any way to specify anything other than a value for the input element the ComboBox is rendered to.
    3. Ability to dynamically (via JavaScript) control the contents of the ComboBox. I know this is being addressed elsewhere through subclassing ComboBox, but this still remains an issue.


    Can anyone speak to any of these issues? Any information would be helpful.

  2. #2

  3. #3

    Default

    All three are definitely possible. Exactly, just play with it: get one of the examples that use a combo box (like [URL=

  4. #4

    Default

    Thanks for the responses.

    Yes, I've tried to do each of the issues outlined above but was unable to. Perhaps I'm overlooking something in the documentation, any pointers?

    For example, consider the attached screenshot of the docs page. Notice the drop down menu is rendered as an input field (the default behavior of comboBoxes). Notice whenever I get the value of the field it returned the text "Starts with". Often it is more valuable to retrieve a key such as "01" or something similar (or in another example, you'd prefer the 2-letter state abbreviation rather than the State's full name).
    Attached Images Attached Images

  5. #5

    Default

    PHP Code:
    var p_combo_country = { 
            
    xtype'combo'
            
    fieldLabel'Country'
            
    hiddenName'country'
            
    store: new Ext.data.SimpleStore({ 
                
    fields: ['countryCode''country'], 
                
    data Ext.formdata.countries // from formdata.js 
            
    }), 
            
    valueField'countryCode'// like 'CA' 
            
    displayField'country'// like 'Canada' 
            
    mode'local'
            
    value'CA' // value to initialize with 
            
    emptyText'Select a country...'
            
    selectOnFocustrue 
        
    }; 
    In formdata.js I have the values that are used by the combo's store (you could also load those from the server if you wish):

    PHP Code:
    Ext.formdata.countries = [ 
            [
    'AC''Ascension Island'], 
            [
    'CA''Canada'], 
            ... 
    ]; 
    As for the dynamically controlling the value - that would depend on what you want to do with it. I guess you'll have to implement that, if it doesn't work - post a question with your code.

    Hope this helps.

  6. #6

    Default

    Sorry for not being clear. Let me clarify; consider the following code:

    Code:
    <script type="text/javascript">
        Ext.onReady(function() {
            new Ext.form.ComboBox({
                store: new Ext.data.JsonStore({
                    url: '/stocksController',
                    autoLoad: true,
                    root: 'results',
                    fields: [
                        {name: 'symbol'},
                        {name: 'company'}
                    ]
                }),
                displayField: 'company',
                typeAhead: true,
                editable: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                applyTo: 'comboBox01'
            })
        });
    </script>
    I have two main problems with this:

    1. The first item returned from the URL specified is not selected by default. I don't want to allow the user to have an option of leaving the field blank, but this is the default behavior for Ext combo boxes. This occurs even when I've chosen no emptyText to be displayed. How can I specify the selected item?
    2. Even more importantly, the values returned for the "company" field are displayed to the user in the combo box, but I want the company stock symbol field (named "symbol") to be selected instead of the name. (That is, if the user selects "Apple" from the combo box, the server is sent "AAPL"). Is this possible with Ext's combo boxes?

  7. #7
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    You're missing the value field, not setting a default value, allowBlank not set

  8. #8
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    by the way, all of your concerns minus the default value are in the combo box examples out of the box.

  9. #9

    Default

    Thanks again for the replies. The property default is undocumented, at least for the ComboBox class. How is it different from value? I believe this will answer the first question.

    Unfortunately, though, the second question remains unanswered. I'm probably not making it very clear, so let me try by giving an HTML example of what I'm trying to recreate:

    HTML Code:
    <select name="mySelectItem">
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        ....
    </select>
    Notice that for every option there are two pieces of information in a basic HTML combo box: the value to display, and the value to submit with the form. This is exactly what I want to have in my Ext combo box. However, it appears as though I'm only able to recreate something analogous to the following:

    HTML Code:
    <select name="mySelectItem">
        <option value="Alabama">Alabama</option>
        <option value="Alaska">Alaska</option>
        <option value="Arizona">Arizona</option>
        <option value="Arkansas">Arkansas</option>
        ....
    </select>
    That is, whatever field you select to display in the combo box is exactly the same field that is sent to the server with the form submission. I'm pretty sure you can see how something like this is undesirable.

  10. #10

    Default

    You probably weren't reading the answers very attentively.

    PHP Code:
    valueField'countryCode'// like 'CA' 
    displayField'country'// like 'Canada' 
    So in your case it will be something like this:

    PHP Code:
    store: new Ext.data.JsonStore({ 
        
    url'/stocksController'
        
    autoLoadtrue
        
    root'results'
        
    fields: ['symbol''company'
    }), 
    valueField'symbol'
    displayField'company' 
    And I believe that by

Page 1 of 4 123 ... 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
  •