combo getValue is returning display, not value

[lucian_mateescu]

Hello,

I'm really don't understand where is the problem, I'm using latest ext from svn, and having this code snippet i'm getting displayValue instead of value (eg : 'Value 1 ' instead of "xgc-1243639228-545124457").

<script src="/ext-3.0-dev/adapter/ext/ext-base.js"></script>
<script src="/ext-3.0-dev/ext-all-debug.js"></script> 

<div id="nvdiv"></div>

<script type="text/javascript">
Ext.onReady(function(){
	Ext.QuickTips.init();

	var vstd  = [["xgc-1243639228-545124457","Value 1"],
	             ["xgc-1243639228-544343457","Value 2"]];
	var cCharts =  new Ext.form.ComboBox({xtype:'combo',fieldLabel:'Select',
		valueField :'id',displayField :'title',triggerAction:'all',minChars:2,
		store:new Ext.data.ArrayStore({
			proxy : new Ext.data.MemoryProxy(vstd)
			,idIndex: 0, 
			fields:['id','title']
			})
	});
	var v = new Ext.form.FormPanel({
		title:'test Form panel',
		renderTo:'nvdiv',
		width:500,
		items:[cCharts],
		buttons:[{text:'getValue',handler:function(){
			alert(cCharts.getValue());
			}}]
		});
});
</script>

I have tried to debug and the function

    beforeBlur : function(){
        var val = this.getRawValue();
        if(this.forceSelection){
            if(val.length > 0 && val != this.emptyText){
               this.el.dom.value = this.lastSelectionText === undefined ? '' : this.lastSelectionText;
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
            this.setValue(val);
        }
    }

call setValue with displayValue.

Any ideeas ? tnks.

[Animal]

Seems the problem is a field called "id". But also, simplify. No Proxy needed with ArrayStore... that's the whole point of ArrayStore. Then you need to use mode: 'local'

so just experiment with this:

var vstd  = [["xgc-1243639228-545124457","Value 1"],
             ["xgc-1243639228-544343457","Value 2"]];
var cCharts =  new Ext.form.ComboBox({
    fieldLabel: 'Select',
    valueField: 'id-field',
    displayField: 'title',
    triggerAction: 'all',
    minChars: 2,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        fields: ['id-field', 'title'],
        data: vstd
    }),
    listeners: {
        select: function(c) {
            console.log(c.getValue());
        }
    }
});

[lucian_mateescu]

thank you for your reply.

It was not the 'id' name problem. Anyway, using your code, if you press "getValue" button, you will get displayValue field.

I'll use listener on select as you suggest, until I figure what is wrong.

(it was a quick and dirty setup to check code functions, I don't realy use a ArrayStore in my code, data is loaded from server).

[ssawchenko]

I am also seeing this issue, using getValue() or getRawValue() is always returning me the display field and not the value field as I would like. I am not using Proxy, I am using local. The combobox appears to populate correctly with my data, however, I have a button setup that when pressed wants to query the VALUE (not the display) item for the combobox, but I am always getting the display value from the functions.

Here is my combobox setup:

            var _Charges =
              {
                Types :
                  [
                    { id: "Demand", display: "Demand Charge", desc: "Demand Charge" },
                    { id: "Energy", display: "Energy Charge", desc: "Energy Charge" },
                    { id: "Min", display: "Min Charge", desc: "Min Charge" }
                  ]
              };

            // Component selector
            new Ext.form.ComboBox(
              {
                id: "addVariableComponent",
                hiddenName: "addVariableComponentHidden",
                triggerAction: "all",
                mode: "local",
                editable: false,
                store: new Ext.data.JsonStore(
                  {
                    fields: ["id","display", "desc"],
                    data: _Charges.Types
                  }),

                valueField: "id",
                displayField: "display",
                emptyText: "<Select Component>",
                autoSelect: true
              }), //...

Any help would be appreciated!
Thank you,
-Shayla



Edit: I noticed in the DOM that the hidden input is placed directly 'above' the combobox elements. I get around the above issue by using the following jquery line to get the value from that component based on the combobox id.

If there is a better way to do this in EXT please let me know.

var giventype = $("#addVariableComponent").prev().val(); // Gets hidden input value for combobox

[skirtle]

Your code seems to work fine for me using getValue(). What version of Ext are you using?

[ssawchenko]

We are using 3.3.0 at the moment.

[nitingautam]

I am also getting same issue with 3.3.1