View Full Version : How to Display the 'Selected' Value in a ComboBox

28 Apr 2011, 5:23 PM
In a customer info form, I have a comboBox which lists countries. When I click on the dropdown, it shows the names but the "selected" country, (i.e the customer's) doesn't appear in the text field.

The comboBox is sourced from a 'countries' store/table. Country_id in the customer table is an integer, loaded by the form. What I need to do (I think) is "get countries(customer.country_id).country_name"
How can I do that? Thanks.

var countries = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'country'],
root: 'rows'
proxy: new Ext.data.HttpProxy({
url: 'get_countries.php'
autoLoad: true

var client_form = new Ext.FormPanel({
url: 'client-form-submit.php',
renderTo: document.body,
frame: true,
title: 'Client Form',
listeners: {
render: function(component) {
click: function(eventObj, el) {
Ext.Msg.alert("Click event", "Element id " + el.id + " clicked");
width: 450,
items: [{...
xtype: 'combo',
name: 'country',
fieldLabel: 'Country',
mode: 'local',
store: countries,
valueField: 'country_id',
hiddenName: 'id',
width: 130
client_form.getForm().load({url:'get_client.php',params:{suite_no: 'e154'}});

28 Apr 2011, 5:57 PM
if you omit the hiddenName, you will get the name of country
otherwise, you will get the id the of country.
you can check post info in firebug.

28 Apr 2011, 7:51 PM
Thanks for your suggestion. I actually did try leaving out hiddenName before I posted, but neither the country name nor country_id appear in the the text area of the combo.

I do see the two responses, one each for countries and customers in Firebug, but the format's are different. For countries it's {rows:[{"id":"1","country":"Afghanistan"},... but for customers it's {success: true, data:{"cust_id":"52",...Every other form field is loaded correctly though.

29 Apr 2011, 2:08 AM
The valueField of your combo box should be id and the hiddenName should be country_id.

29 Apr 2011, 6:16 AM
That 'works' - the selected value is displayed. However, when you click on the drop down arrow, there's no list of countries to choose from. You have to click in the field, and delete characters - then a list of countries appears.

I was hoping the behavior would similar to an HTML form and imagine there's a way to code it - but but hey, I'll go with it for now. Thanks much!

29 Apr 2011, 6:42 AM
Add triggerAction: 'all' to your combo box.

29 Apr 2011, 10:03 AM
That's it! Thanks so much!

Did you happen to know this from experience or did you look it up in the API? I ask because I didn't go through the API - not thoroughly - and am now asking myself why. I'm still getting started with this framework and trying to figure out an approach to problem solving.

Thanks again.

29 Apr 2011, 11:24 AM
Glad, I could help!

Reading the API and looking at the samples really helps. You should bookmark those pages and learn from them.

I was able to answer you question because of experience.

Again, glad I could help.