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);
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());
}
}]
});
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
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.
In extjs combobox (I'm using it as autocomplete), as you type, it shows the matching results.
Now if I press the down arrow key or the up arrow key, I want to see that highlighted value in the combobox textfield, similar to a google search.
How can this be done?
Any help is highly appreciated… Thanks
You should override the hightlight event of the boundlist.
ExtJS - Update combobox text field value from highlighted row
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"},
{"abbr":"NY", "name": "New York"}
]
});
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
typeAhead: true,
enableKeyEvents: true,
renderTo: Ext.getBody(),
// show mouseover item value in the combobox textfield
listConfig: {
listeners: {
itemmouseenter: function(cmb, record, item, index, e, eOpts ) {
// of course you should set unique value here, in this case 'abbr'
combo.setValue(record.get('abbr'));
}
}
}
});
Ext.view.BoundListKeyNav.override({
highlightAt:function (index) {
var boundList = this.boundList;
var litem = boundList.all.item(index);
if (litem) {
litem = litem.dom;
boundList.highlightItem(litem);
boundList.getTargetEl().scrollChildIntoView(litem, true);
combo.setValue(boundList.getNode(index).textContent);
}
}
});
I am having trouble filtering an array store.
Situation
I have 2 comboboxes with an array store. combobox 1 and combobox 2, both are in mode 'local' and have a predefined array store. when i click and select a row in the first combobox, I apply a filter on the second combobox (which was not yet cliked upon). The thing is that the second combobox did not render it's data (or html) yet so the filter wasn't applied.
when i click on the second combobox, and then clicking on the first, the filter is applied and working.
my question is, how to pre-render an array_store/combobox?
I did try to expand the combobox first, but also didn't work for me. (see commented code)
var store1 = new Ext.data.ArrayStore({
fields: ['id','name'],
data:somedata //array of some data
});
var store2 = new Ext.data.ArrayStore({
fields: ['id','name'],
data:somedata //array of some data
});
var combobox1 = {
name: 'combobox_1',
xtype: 'combo',
hiddenName: 'combobox_1',
store: store1,
displayField:'name',
valueField:'id',
mode:'local',
triggerAction: 'all',
allowBlank:true,
emptyText:'Select...',
listeners:{
select: function(st, r){
var selected = r.get('name');
var combobox2 = Ext.getCmp('combobox2');
//combobox2.expand();
combobox2.store.filter([
{
property : 'name',
value : selected,
anyMatch : true,
caseSensitive: false
}
]);
},
scope:this
}
}
var combobox2 = {
name: 'combobox_2',
xtype: 'combo',
hiddenName: 'combobox_2',
store: store2,
id: 'combobox2'
displayField:'name',
valueField:'id',
mode:'local',
triggerAction: 'all',
allowBlank:true,
emptyText:'Select...',
}