how to read Extjs dropdown value

[Sam205505050]

I've written a listner on a button action which adds dynamic dropdown in my dialog -

    name : './groupinfo'+count,id : 'groupinfo'+count,xtype : 'selection',type : 'select',emptyText:'Select a group...',options : '/bin/groupinfo/options.json' ,fieldLabel : 'Group',width:200 

options.json sends info in the folloing pattern - [{"text":"Value1","value":"val1"},{"text":"Value2","value":"val2"},{"text":"Value3","value":"val3"}] and dropdown values are showing properly.

Now I want to read the selected value in my js file. So, I have written like below but the value is coming as undefined-

      var dropdownVal = document.getElementById("groupinfo"+i).value;

Now, I have tried this which gives me blank value when I select -

var value1 = $('#groupinfo'+i+' option:selected').text(); alert(value1);var value2 =  $('#groupinfo'+i).val(); alert(value2);

When I tried to get the value from dynamically created text box then I can get the value by using getElementById().value but it is not working for dynamically created dropdown. Please advice!

[BrianKasingli · Accepted solution]

You can use the ExtJS API: Since you are using ExtJS to create the dropdown, it's recommended to use the ExtJS API to retrieve the selected value. You can access the value using the getValue() method of the ExtJS component. Here's how you can do it:

javascript

var dropdown = CQ.Ext.getCmp('groupinfo' + i);
var selectedValue = dropdown.getValue();

Using jQuery: If you prefer using jQuery to read the selected value, make sure you use the correct syntax. For dynamically created dropdowns, it's important to use the appropriate event delegation to access the value. Here's an example:

Jquery

$(document).on('change', '#groupinfo' + i, function() {
var selectedText = $('#groupinfo' + i + ' option:selected').text();
var selectedValue = $('#groupinfo' + i).val();
alert('Selected Text: ' + selectedText + ', Selected Value: ' + selectedValue);
});