PDA

View Full Version : How to disable an item in Dropdwn box?



gopalr1
16 Nov 2016, 7:34 AM
Hi,

I am a newbie to EXT JS 4.x and I am trying to disable an item in a Dropdown/Combo box
The option in the DD box must be visible and disabled so that the user can not click to select it.

Here is my function:

// The following function accepts the display value of an item and if found
// in the Dropdown box, disables or enables the item as per the Boolean disable

// Example: updateAFDLTaskOption('AFDL_FILES_TO_VENDOR', true);
function updateAFDLTaskOption(eventType, disable)
{
var task_type_combo_box;
var retVal = "Failed"; // default return value

// Get the Widget Control
task_type_combo_box = Ext.ComponentQuery.query('xcp_dropdown_list[xcpId="task_type_list"]')[0];

// Examine the contents
task_type_combo_box.getStore().each(function (r)
{

if(disable)
{
if(r.data.v_out_event_type == eventType) // Matches Item value
{
r.data.disabled = true; // Disable the Item
retVal = "Disabled";
}
}
else
{
if(r.data.v_out_event_type == eventType)
{
r.data.disabled = false; // Enable the Item
retVal = "Enabled";
}
}
});
// Refresh the DD box to show the updated items
task_type_combo_box.doComponentLayout();

return retVal;
}

I tested the function in console, there are no errors and all the items show as enabled
Looks like the refresh of DD is not working.
Please suggest the correct function to refresh the DD Control

Thanks
Raj

Gary Schlosberg
16 Nov 2016, 10:33 AM
Here's a thread that might help:
https://www.sencha.com/forum/showthread.php?261806

gopalr1
30 Nov 2016, 8:18 AM
Here's a thread that might help:
https://www.sencha.com/forum/showthread.php?261806

Thanks Gary!!

I wanted to disable an item in a Dropdown box so that the user can not select it.
For this, I was planning to get the Component of the Dropdown box
and add a listener, say, the 'beforeselect' listener and return false for the desired item

Here is the code

ecmDisableTaskOption = function ()
{ var task_type_combo_box;

// Get the Existing ComboBox Component
task_type_combo_box = Ext.ComponentQuery.query('xcp_dropdown_list[xcpId="task_type_list"]')[0];
// Add a listener for this Combo
task_type_combo_box.on('change', function(combo, record, index) {

console.log('new', record, 'old', index);
});
return "Done.......";
};


// Call the function to setup the desired listener
ecmDisableTaskOption();


Now, if I select an Item in the Dropdown list with the Id 'task_type_list' on the page
I would expect to see some log on the console, but, nothing happens

Appreciate your help!!

Thanks
Raj

gopalr1
8 Dec 2016, 11:11 AM
Hi,
I wanted to disable an item in a Dropdown box so that the user can not select it.
For this, I was able to get the Component of the Dropdown box
and add the 'beforeselect' listener and return false for the desired item
Here is the code
ecmDisableAFDLTaskOption(eOption)
{
var task_type_combo_box;
// Get the ComboBox Component
task_type_combo_box = Ext.ComponentQuery.query('xcp_dropdown_list[xcpId="task_type_list"]')[0];
task_type_combo_box.on('beforeselect',function(combo, record, index, eOpts)
{
if(record.data.v_out_event_type == eOption) {
// Cancel the default action
return false;
}
else {
// Allow the default action
return true;
}
});
}
// Call the function to setup the desired listener
ecmDisableAFDLTaskOption('AFDL_FILES_TO_VENDOR');

Now, I am Unable to select the desired Item in the Dropdown list -- Means the function is working!!!
However, I want to see the Item in the Disabled Style so that it appears as Disabled
Please suggest how to add the disabled style to the Item
Appreciate your help!!
Thanks
Raj