Using extjs 5.1.3 version. I have a typeAhead bobox in the form as below:
Combobox store:
Ext.define('MyApp.view.myobj.field.CustomObject', {
extend:'Ext.form.field.ComboBox',
xtype: 'cstmObject',
requires: [
'MyApp.model.myobj.CustomObject'
],
fieldLabel: 'Custom Object Name',
displayField: 'name',
valueField: 'name',
queryMode: 'remote',
selectOnFocus: false,
typeAhead: true,
hideTrigger: true,
minChars: 1,
queryCaching : false,
store:{
model: 'MyApp.model.myobj.CustomObject'
}
}
Below is snippet in form:
{
xtype: 'cstmObject',
fieldLabel: 'Custom Object Name',
allowBlank: false,
maxLength: 5,
enforceMaxLength: true,
bind: '{customObject.row}'
}
On typing the value in bobox sometimes dropdown values are displaying and sometimes not showing for the input. When I observe network panel, store is loading properly from server.
What are possible client side issues for not showing dropdown values when store is loading properly from server ?
Update: I found a pattern for the issue i.e. if an exact match of record is found in the dropdown list with the typed value, then only dropdown values are disappearing. (e.g. if I type alphabet A and if there is a record with value A then dropdown values are disappearing. If I type a then dropdown will not be disappear since there is no record with lowercase a).
What are required configurations I need to provide to fix this ?
Using extjs 5.1.3 version. I have a typeAhead bobox in the form as below:
Combobox store:
Ext.define('MyApp.view.myobj.field.CustomObject', {
extend:'Ext.form.field.ComboBox',
xtype: 'cstmObject',
requires: [
'MyApp.model.myobj.CustomObject'
],
fieldLabel: 'Custom Object Name',
displayField: 'name',
valueField: 'name',
queryMode: 'remote',
selectOnFocus: false,
typeAhead: true,
hideTrigger: true,
minChars: 1,
queryCaching : false,
store:{
model: 'MyApp.model.myobj.CustomObject'
}
}
Below is snippet in form:
{
xtype: 'cstmObject',
fieldLabel: 'Custom Object Name',
allowBlank: false,
maxLength: 5,
enforceMaxLength: true,
bind: '{customObject.row}'
}
On typing the value in bobox sometimes dropdown values are displaying and sometimes not showing for the input. When I observe network panel, store is loading properly from server.
What are possible client side issues for not showing dropdown values when store is loading properly from server ?
Update: I found a pattern for the issue i.e. if an exact match of record is found in the dropdown list with the typed value, then only dropdown values are disappearing. (e.g. if I type alphabet A and if there is a record with value A then dropdown values are disappearing. If I type a then dropdown will not be disappear since there is no record with lowercase a).
What are required configurations I need to provide to fix this ?
Share Improve this question edited Oct 10, 2015 at 8:32 Tarabass 3,1522 gold badges18 silver badges35 bronze badges asked Aug 18, 2015 at 14:57 AwesomeAwesome 6,6299 gold badges37 silver badges62 bronze badges 2- As you show it, it should work (I tried your code in a fiddle). Maybe try to reproduce the issue yourself in a fiddle, or post example server responses for both working and broken cases. To me it seems that the issue is server-related. – rixo Commented Sep 8, 2015 at 11:27
- Look at the fiddle for jonathan cartwright below. I hade the exact same thing in that fiddle until i used a store for the sata source for the bobox. If you still have it with my fiddle, let me know. – Jonathan cartwright Commented Sep 11, 2015 at 12:07
4 Answers
Reset to default 4 +50Seems like this is a bug in Ext 5.1
This happens only when the ponent is bound to a model.
Here is Fiddle to reproduce this issue. Type A you will see the results and when you type A1 (which is present in the store), the results will be hidden.
Logged a bug in Ext 5 Forum
Update
Here is a fix that i came up with.
Ext.define('MyApp.overrides.form.field.ComboBox', {
override: 'Ext.form.field.ComboBox',
/**
* Fix for EXTJS-19274
*/
setValue: function(value) {
var me = this;
// This is the value used to forceSelection in assertValue if an invalid value is left
// in the field atpleteEdit. Must be cleared so that the next usage of the field
// is not affected.
me.lastSelectedRecords = null;
// Value needs matching and record(s) need selecting.
if (value != null) {
// Only go through text/record matching if there's a change.
if (value !== me.getRawValue()) {
me.doSetValue(value);
}
}
// Clearing is a special, simpler case.
else {
me.suspendEvent('select');
me.valueCollection.beginUpdate();
me.pickerSelectionModel.deselectAll();
me.valueCollection.endUpdate();
me.resumeEvent('select');
}
return me;
}
});
The fiddle fiddle here works in the way you want with the exception that the lit of options e from a store. What I noticed is that I had to tie the bobox directly to a store for it to work without hiding after typing A1.
For other people looking into the other fiddles listed on this issue, if you type A1 very slowly you wont see the behavior. if you type it in the same speed that you would when you are usually writing a post or something that is when you will see the autoplete disappear with
i Have Extjs Combo Like this :
{
xtype :'bo',
emptyText :'Pilih Client ...',
id :'f_client',
store : 'store_client',
displayField:'longname',
typeAhead : true,
valueField :'nickname',
width : 350
}
and i try searching data a lowercase or A Uppercase is okay, so i think you must check again on your server side. cause some query like oracle is case sensitive.
column1 like '%a%'
and
`column1 like '%A%'`
is different.
Ext.form.field.ComboBox has a property caseSensitive which is false by default. This means that the problem can be in your control, but only if this property is set to true. You can check in your console (or with the Sencha extension for Chrome) if this property is false.
Also check in your network tab of your console what is send to the server. If the bo sends uppercase, but the server returns lowercase, the problem is server side.