I m trying to set a default value of combo box which is using store. I have tried value, defaultValue and have tried afterrender but nothing seem to work. Did anyone come across with the same problem? Any help would be appreciated.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
value: 'AL', // the value should be an existing store's valueField
renderTo: Ext.getBody()
});
Try to set default value after load store.
YourComboBox.setValue('default value');
https://fiddle.sencha.com/#fiddle/16q4
Related
I have 2 combos: The second one is on a form and depends on the first one. To do this, the value of the second one is binded to a ViewModel data property. I made a button to reset the form and reassign the value of the second combo with the value of the first one (It might be change).
The problem is when I do the following: I change the value of the first combo. When I click the button the first time, it works (the second combo is changed). But when I click the second time (with both combos with the same value), the second combo is emptied. It doesn't seem to work if the value of the second combo is the same as that of the first combo. What I am doing wrong?
Here is my code in a fiddle
When the value of the first combo corresponds to the value of the second combo, the viewmodel does not change, which is logical. We don’t need extra operations. Accordingly, the value is not substituted in the second combobox and it only makes a reset.
To force a model update, you must inform her about this using the notify method
You can see that behavior on my fiddle
Look at callstack when values are matches and don't mathes.
Try it, I hope it'll help.
Use Component Query Selector to direct set the value in combo box.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
var viewmodel = Ext.create('Ext.app.ViewModel', {
data: {
state: 'AL'
}
});
var refCombo = Ext.create('Ext.form.field.ComboBox', {
store: states,
queryMode: 'local',
itemId: 'refCombo',
displayField: 'name',
valueField: 'abbr',
editable: false,
value: 'AL',
renderTo: Ext.getBody()
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
viewModel: viewmodel,
items: [{
xtype: 'combo',
store: states,
queryMode: 'local',
itemId: 'refCombo2',
displayField: 'name',
valueField: 'abbr',
editable: false,
bind: {
value: '{state}'
}
}, {
xtype: 'button',
text: 'CLICK',
handler: function(button) {
button.up('form').getForm().reset();
viewmodel.setData({'state': refCombo.getValue()})
let refCombo2 = Ext.ComponentQuery.query('#refCombo2')[0];
refCombo2.setValue( refCombo.getValue());
}
}]
});
combo.setvalue(id) called in beforeedit function show display values while editing in 4.2 but in 6.2 it is showing empty.
combo.getStore().load();
combo.getStore().on('load', function(){combo.setvalue(id)})
is working in 6.2 but taking time after row is ready to edit.
try to use this, stores changed really hard from 4.2 to 6.2, maybe your load finish before the onload listener is setted.
combo.getStore().load(function(){
combo.setValue(id);
});
also comboboxes should be setted by valuefield, so read on your combo configs if that is setted properly. If you don't have to use valuefield you can use
combo.setRawValue(id);
More specified example
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
listeners:{
render: function(combo){
combo.setValue('AL');
}
},
renderTo: Ext.getBody()
});
I need a combo's menu to be open after getting focus automatically. Changing minchar config was not effective. Is there any other config for this purpose?
Update:
Ext.define("My.form.combo.Local", {
extend: "Ext.form.ComboBox",
xtype: 'local-combo',
queryMode: 'local',
minChars: 0,
selectOnFocus: true,
forceSelection: true,
typeAhead: true,
initComponent: function () {
this.callParent();
this.on('focus', function () {
console.log('f');
this.expand();
});
}
});
The following snipped worked in ExtJS 4.2.3
You can control the picker with expand and collapse
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
var c =Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
c.on('focus',function(c){c.expand()})
I made a fiddle for you: https://fiddle.sencha.com/#fiddle/fj5
It works like a charm. Maybe you have some other problems in your code.
I have a combo look like http://jsfiddle.net/Q5nNV/
everything is well but when i search (typing) some text like asdf to combo box and click clear button
That's not select first item, it look like
Here is my code
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AK", "name":""},
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
value: "AK",
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
onTrigger2Click: function (args) {
this.setValue("AK");
},
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'),
renderTo: Ext.getBody()
});
I want when i click clear button my combo will select first item (empty item). How to fix that thank
this works for me
var combo = Ext.getCmp('myId');
combo.select(combo.getStore().getAt(0));
This should do the trick. You basically need to select the first value, make it re-query so that it can clear the filter and then send focus back to the field (optional):
Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AK", "name":""},
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
triggerAction: 'all',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
trigger2Cls: 'x-form-clear-trigger',
enableKeyEvents: true,
onTrigger2Click: function (args) {
// Select the first record in the store
this.select(this.getStore().getAt(0));
// Force a re-query to clear the filter
this.doQuery();
// Send focus back to the field
this.focus();
},
tpl: new Ext.XTemplate('<tpl for=".">' + '<li style="height:22px;" class="x-boundlist-item" role="option">' + '{name}' + '</li></tpl>'),
renderTo: Ext.getBody()
});
});
Obviously, the re-query and focus are optional. You could easily remove them from this code.
Alternately, you could use the this.select(this.getStore().getAt(0)); and then do this.blur() to select it and then immediately get rid of the unpopulated list.
this is work for me....
var cmbESTADO = component.query('#cmbESTADO')[0];
cmbESTADO.store.load(function(st){
cmbESTADO.select(cmbESTADO.getStore().getAt(0));
});
when the combobox is not load, the select not work. Before load and then select.
This works for me:
me.myCombo.setValue(valueIndex);
I have in my base class a combobox, where I only configure the "fields" property. Like this:
items: [
comboText = Ext.create('Ext.form.ComboBox', {
width: 150,
padding: '0 20 0 0',
displayField: 'label',
store: Ext.create('Ext.data.Store', {
fields: [
{type: 'string', name: 'label'},
{type: 'string', name: 'fieldName'}
]
})
}),
...]
How can I pass only the data property to this combo ?
I tried the code below but does not work:
comboTest.store.loadData(value);
where value contains an array like this:
[
{"label":"First name", "fieldName":"firstname"},
{"label":"Birth date", "fieldName":"birthdate"}
]
No errors, but the combobox opens nothing.
I got this to work using:
xtype:'combo',
fieldLabel:'Division',
name:'division',
valueField: 'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
I know this question is really old, but just in case anyone comes looking for an answer that works out of the box; for me this was it.
Try this config:
xtype:'combo',
fieldLabel:'Division',
name:'division',
queryMode:'local',
store:['A','B','C'],
displayField:'division',
autoSelect:true,
forceSelection:true
Another Alternative is listed right in the docs of the ComboBox:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
valueField is mandatory for combobox. Try setting the valueField in your combobox.
It works:
{
name: 'sample',
xtype: 'combobox',
allowBlank: false,
emptyText: 'select ...',
queryMode: 'local',
itemId: 'sample',
id: 'sample',
displayField: 'name',
valueField: 'name',
forceSelection:true,
store: ['B','C', 'A'],
typeAhead: true
}
instead of using loadData();
comboTest.store.loadData(value);
use loadRawData();
comboTest.store.loadRawData(value);
If confusion try ths fiddle