We Keep Coding

ExtJS : Re-selecting the same value does not fire the select event

Normally, when you select an item in a combobox, you would expect it to fire the select event. However, if you try to select an item that was already selected, the select event is not fired. That is the "normal" behavior of an ExtJs combobox.
I have a specific need for an ExtJS combobox: I need it to fire the select event even if I re-select the same value. But I cannot get it to work. Any help would be much appreciated!
Example here: https://fiddle.sencha.com/#view/editor&fiddle/2n11
Open the dev tools to see when the select event is fired.
I'm using ExtJS Classic 6.6.0.
Edit: I answered my own question and updated the Fiddle with working solution.

try to look at this:
ExtJS 4 Combobox event for selecting selected value
Its for earlier ExtJS version, but catching click event for itemlist may help you out too..

I found the culprit: it all happens in the SelectionModel of the combobox BoundList, in the method doSingleSelect.
So if we extend Ext.Selection.DataViewModel and Ext.form.field.ComboBox, we can force the select event to be fired every time.
Ext.define( "MyApp.selection.DataViewModelExt", {
"extend": "Ext.selection.DataViewModel",
"alias": "selection.dataviewmodelext",
"doSingleSelect": function(record, suppressEvent) {
var me = this,
changed = false,
selected = me.selected,
commit;
if (me.locked) {
return;
}
// already selected.
// should we also check beforeselect?
/*
if (me.isSelected(record)) {
return;
}
*/
commit = function() {
// Deselect previous selection.
if (selected.getCount()) {
me.suspendChanges();
var result = me.deselectDuringSelect([record], suppressEvent);
if (me.destroyed) {
return;
}
me.resumeChanges();
if (result[0]) {
// Means deselection failed, so abort
return false;
}
}
me.lastSelected = record;
if (!selected.getCount()) {
me.selectionStart = record;
}
selected.add(record);
changed = true;
};
me.onSelectChange(record, true, suppressEvent, commit);
if (changed && !me.destroyed) {
me.maybeFireSelectionChange(!suppressEvent);
}
}
});
We also must extend the combobox to force using our extended DataViewModel. The only thing to change is the onBindStore method where it instancies the DataViewModel:
Ext.define( "MyApp.form.field.ComboBoxEx", {
"extend": "Ext.form.field.ComboBox",
"alias": "widget.comboboxex",
"onBindStore": function(store, initial) {
var me = this,
picker = me.picker,
extraKeySpec,
valueCollectionConfig;
// We're being bound, not unbound...
if (store) {
// If store was created from a 2 dimensional array with generated field names 'field1' and 'field2'
if (store.autoCreated) {
me.queryMode = 'local';
me.valueField = me.displayField = 'field1';
if (!store.expanded) {
me.displayField = 'field2';
}
// displayTpl config will need regenerating with the autogenerated displayField name 'field1'
if (me.getDisplayTpl().auto) {
me.setDisplayTpl(null);
}
}
if (!Ext.isDefined(me.valueField)) {
me.valueField = me.displayField;
}
// Add a byValue index to the store so that we can efficiently look up records by the value field
// when setValue passes string value(s).
// The two indices (Ext.util.CollectionKeys) are configured unique: false, so that if duplicate keys
// are found, they are all returned by the get call.
// This is so that findByText and findByValue are able to return the *FIRST* matching value. By default,
// if unique is true, CollectionKey keeps the *last* matching value.
extraKeySpec = {
byValue: {
rootProperty: 'data',
unique: false
}
};
extraKeySpec.byValue.property = me.valueField;
store.setExtraKeys(extraKeySpec);
if (me.displayField === me.valueField) {
store.byText = store.byValue;
} else {
extraKeySpec.byText = {
rootProperty: 'data',
unique: false
};
extraKeySpec.byText.property = me.displayField;
store.setExtraKeys(extraKeySpec);
}
// We hold a collection of the values which have been selected, keyed by this field's valueField.
// This collection also functions as the selected items collection for the BoundList's selection model
valueCollectionConfig = {
rootProperty: 'data',
extraKeys: {
byInternalId: {
property: 'internalId'
},
byValue: {
property: me.valueField,
rootProperty: 'data'
}
},
// Whenever this collection is changed by anyone, whether by this field adding to it,
// or the BoundList operating, we must refresh our value.
listeners: {
beginupdate: me.onValueCollectionBeginUpdate,
endupdate: me.onValueCollectionEndUpdate,
scope: me
}
};
// This becomes our collection of selected records for the Field.
me.valueCollection = new Ext.util.Collection(valueCollectionConfig);
// This is the selection model we configure into the dropdown BoundList.
// We use the selected Collection as our value collection and the basis
// for rendering the tag list.
//me.pickerSelectionModel = new Ext.selection.DataViewModel({
me.pickerSelectionModel = new MyApp.selection.DataViewModelExt({
mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
// There are situations when a row is selected on mousedown but then the mouse is dragged to another row
// and released. In these situations, the event target for the click event won't be the row where the mouse
// was released but the boundview. The view will then determine that it should fire a container click, and
// the DataViewModel will then deselect all prior selections. Setting `deselectOnContainerClick` here will
// prevent the model from deselecting.
ordered: true,
deselectOnContainerClick: false,
enableInitialSelection: false,
pruneRemoved: false,
selected: me.valueCollection,
store: store,
listeners: {
scope: me,
lastselectedchanged: me.updateBindSelection
}
});
if (!initial) {
me.resetToDefault();
}
if (picker) {
me.pickerSelectionModel.on({
scope: me,
beforeselect: me.onBeforeSelect,
beforedeselect: me.onBeforeDeselect
});
picker.setSelectionModel(me.pickerSelectionModel);
if (picker.getStore() !== store) {
picker.bindStore(store);
}
}
}
}
});
Then just use the extended combobox in your app. By doing that, the select event will be fired every time.

ExtJS: How to customise the combobox picker's keynav?

A combobox has a picker (a boundlist instance) which itself has a keynav (BoundListKeyNav).
How can I modify / customise this keynav instance?
Basically, by default it contains bindings for home / end. While this would be useful under normal circumstances, it is not when using a customised combobox. I want my home / end keys to function correctly, as they do before ext decides to hijack them (go to start / end of input contents).
Ideally, I want to do this in the configuration object of the combobx, like so:
{
xtype: 'combobox',
itemId: 'search',
emptyText: 'Search',
editable: true,
typeAhead: false,
hideTrigger: true,
queryMode: 'local',
minChars: 3,
displayField: 'name',
valueField: 'search'
}
It is made to behave in such a way that you can type anything in (to search) but can also choose auto completed searches.
The keynav lives at combo.listKeyNav, but the chunk of code which sets this up in ext fires no events to let us jump in and change it. It appears the combo has no configuration for such a thing either (seeing as the function setting listKeyNav doesn't take any config from our combo object).
FYI
It is the BoundListKeyNav which has these bindings hard coded. The combobox's onExpand creates the instance (taking no config anywhere, allowing for no customisation).

The only way is to override onExpand method of combo.

As Saki wrote customizing of the key navigation is only possible with overriding the onExpand method of the combobox - basically duplicating the original implementation (in case of ExtJS4).
For example:
onExpand: function() {
var me = this,
keyNav = me.listKeyNav,
selectOnTab = me.selectOnTab,
picker = me.getPicker();
// Handle BoundList navigation from the input field. Insert a tab listener specially to enable selectOnTab.
if (keyNav) {
keyNav.enable();
} else {
keyNav = me.listKeyNav = new Ext.view.BoundListKeyNav(me.inputEl, {
boundList: picker,
forceKeyDown: true,
tab: function(e) {
if (selectOnTab) {
this.selectHighlighted(e);
me.triggerBlur();
}
// Tab key event is allowed to propagate to field
return true;
},
enter: function(e) {
var selModel = picker.getSelectionModel(),
count = selModel.getCount();
this.selectHighlighted(e);
// Handle the case where the highlighted item is already selected
// In this case, the change event won't fire, so just collapse
if (!me.multiSelect && count === selModel.getCount()) {
me.collapse();
}
},
home: {
fn: Ext.emptyFn,
defaultEventAction: false
},
end: {
fn: Ext.emptyFn,
defaultEventAction: false
}
});
}
// While list is expanded, stop tab monitoring from Ext.form.field.Trigger so it doesn't short-circuit selectOnTab
if (selectOnTab) {
me.ignoreMonitorTab = true;
}
Ext.defer(keyNav.enable, 1, keyNav); //wait a bit so it doesn't react to the down arrow opening the picker
me.inputEl.focus();
}

KnockoutJS select fires onChange after setting default value

I have set up the following select for changing semesters on page. When the select detects a change, the changeSemesters function is fired, which runs an AJAX that replaces the current data on the page with data specific to the selected semester.
View
<select data-bind="options: semestersArr, optionsText: 'name', optionsValue: 'id', value: selectedSemester, event: { change: changeSemesters }"></select>
ViewModel
this.selectedSemester = ko.observable();
//runs on page load
var getSemesters = function() {
var self = this, current;
return $.get('api/semesters', function(data) {
self.semestersArr(ko.utils.arrayMap(data.semesters, function(semester) {
if (semester.current) current = semester.id;
return new Model.Semester(semester);
}));
self.selectedSemester(current);
});
};
var changeSemesters = function() {
// run ajax to get new data
};
The problem is that the change event in the select fires the changeSemester function when the page loads and sets the default value. Is there a way to avoid that without the use of a button?

Generally what you want to do in these scenarios is to use a manual subscription, so that you can react to the observable changing rather than the change event. Observables will only notify when their value actually changes.
So, you would do:
this.selectedSemester.subscribe(changeSemesters, this);
If selectedSemester is still changing as a result of getting bound, then you can initialize it to the default value.
this.selectedSemester = ko.observable(someDefaultValue);

How To Cancel The Change Event On A Select Control Using Knockout?

I have a select control bound to a Knockout observable array:
<select data-bind="event: { change: selectedProductOfferingChange }, options: $parent.productTypes, optionsText: 'text', optionsCaption: '-- Select --', value: selectedProductType, enable: !isReadOnly()"></select>
When the selection is changed, I want to run some code, perhaps make an AJAX call. If the change is not allowed, I want to cancel the change and display a modal dialog. I can't subscribe to the property as that will fire after the change has taken place. I would need the new value to determine if the change should be cancelled or not.
I tried the following in the viewmodel but the change is not cancelled though the property (selectedProductOffering) on the viewmodel is not updated:
self.selectedProductOfferingChange = function (data, event) {
event.stopImmediatePropagation();
return false;
};
Could I use the "beforeChange" option with subscribe?
self.selectedProductType.subscribe(function (previous) {
}, self, "beforeChange");
Can the change be cancelled here?

After some thought, here's what I came up with:
self.selectedProductOfferingChange = function (data, e) {
// Do any checking here
if (confirm("OK to make this change ?")) { return; }
// This stops the viewmodel property from being updated
e.stopImmediatePropagation();
// Since the viewmodel property hasn't changed, force the view to update
self.selectedProductType.valueHasMutated();
};
The problem with this code is that it doesn't give you access to the new value. A computed will solve this issue:
<select data-bind="options: $parent.productTypes, optionsText: 'text', optionsCaption: '-- Select --', value: computedSelectedProductType, enable: !isReadOnly()"></select>
self.computedSelectedProductType = ko.computed({
read: function () {
return self.selectedProductType();
},
write: function (value) {
// Do any checks here. If you want to revert to the previous
// value, don't call the following but do call:
// self.selectedProductType.valueHasMutated()
self.selectedProductType(value);
},
owner: self
});

Binding an event to an add dialog select input in jqgrid

I have a jqgrid with the add dialog enabled for adding new rows. The way I would like it to work is that the user will select from a list of drop down items and the item chosen will cause a second drop-down to be populated with data based on the first item.
For example, if my grid had two columns, one for country and one for state, when the user clicked the add button, the country input would be a drop-down, dynamically populated with countries by an ajax call. Then, when the user selects a country, the state drop-down is populated based on the country selected.
Currently I am doing something like the following:
beforeProcessing: function () {
var allcountries = ajaxcall();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
},
loadComplete: function () {
$('#Countries').change(function () {
// States will be populated here
alert("changed");
});
}
The first part in beforeProcessing works fine and the countries drop-down is populated as expected. However, the event in loadComplete does not get attached to the select input with id the 'Countries' and the alert never occurs. It seems that the select object has not yet been created with loadComplete fires, but if that is the case I'm not sure where to place the logic where the states will be populated.
Any ideas?

jqGrid has no direct support of depended selects, but in the answer you will find the implementation of the scenario. The most problem is that the code is not small, but it's quickly to analyse a working code as to write your own one.

I ended up doing something like the following, its a bit redundant but it works and isn't too code heavy:
First, in the beforeProcessing callback, I populate both the countries and states drop-downs with their initial values:
beforeProcessing: function () {
var allcountries = ajaxCallToFetchCounties();
$('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
var states = ajaxCallToFetchStates();
$('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
}
Then in the pager's add option, I used the beforeShowForm callback to attach a method to the change event of the countries select input, and within that method I fetch the states based on the current country and repopulate the select control:
beforeShowForm: function (form) {
$("#Countries").unbind("change").bind("change", function () {
var states = ajaxCallToFetchStates();
//Manually clear and re-populate the states select box here with the new list of states.
});
$('#tr_AccountCode', form).show();
}