I am working in extjs4. I have combobox with code as-
{
margin:'7 6 5 5',
xtype:'combobox',
fieldLabel:'Language',
name:'language',
id:'combo',
width:190,
allowBlank:false,
emptyText: '--Select language--',
labelWidth: 60,
store: new Ext.data.ArrayStore({
fields: ['id','value'],
data: [
['1','Marathi'],
['2','English']
]
}),
queryMode: 'local',
valueField:'id',
displayField:'value',
editable:false
},
Throuhout my functioning I want to set combobox's value defaultly to user's selected choice. So how to set combobox's value from controller
To select default value you can use event listener. After combobox has been rendered you can set value you need using setValue() method from Ext.form.field.Field and if you need to select combobox value on demand you can get it using Ext.getCmp('combo') and then use setValue() or even better set itemId instead of id and use componentQuery to fetch combobox and set value:
Ext.ComponentQuery.query('#combo')[0].setValue('2');
setValue( value ) : Ext.form.field.Field Sets the specified value(s)
into the field. For each value, if a record is found in the store that
matches based on the valueField, then that record's displayField will
be displayed in the field. If no match is found, and the
valueNotFoundText config option is defined, then that will be
displayed as the default field text. Otherwise a blank value will be
shown, although the value will still be set.
listeners:{
scope: this,
afterRender: function(me){
me.setValue('1');
}
}
Here is an example in fiddle
Try this:
Ext.getCmp('combo').setValue('1' or '2');
Related
I am using ext5 multiselect combo. If we select a value from the dropdown, say 'Other' and click outside to cancel the dropdown.
Now the value 'Other' will be shown in combo.
Again click the dropdown and select tha same value 'Other', it should remove 'Other' from its values. But rather it adds same value once again.
My code is given below:
xtype: 'combo',
emptyText: 'Retail BI',
name: 'chainRefId',
store: Ext.create('shared.store.filter.ChainRefs'),
displayField: 'name',
multiSelect: true,
valueField: 'chain_ref_id',
listeners: {
expand: function(){
this.getStore().load();
},
change: function(combo, newVal) {
if (!combo.eventsSuspended) {
var storeCombo = Ext.ComponentQuery.query('combo[name=storeId]')[0];
storeCombo.getStore().removeAll();
storeCombo.setValue(null);
var chainCombo = Ext.ComponentQuery.query('combo[name=chainId]')[0];
chainCombo.getStore().removeAll();
chainCombo.setValue(null);
}
}
}
Is there a solution for this?
Thanks in advance.
Your combo's store gets reloaded on each expand. Technically the record corresponding to the value you selected the first time disappears on the second store load, so the removing logic does not "see" it and therefore leaves it in the field.
Remove this:
expand: function(){
this.getStore().load();
}
and just use autoLoad: true on the store.
I have faced the same problem. I have provided a workaround for this. This fix holds good for tagfield too.
//on combo store load event
load: function () {
// I am assuming reference to combo
var rawVal = combo.getValue();
// If combo is multiselct, getValue returns an array of selected items.
// When combo is configured as remote, everytime it loads with new records and therefore removes the old reference.
// Hence, do setValue to set the value again based on old reference.
combo.setValue(rawVal);
// Here you can see, based on old reference of selected items, the drop down will be highlighted.
}
i am working in extjs4. I have view with component as=
xtype : 'comboboxselect',
id : 'Id1',
displayField: 'emailAddress',
typeAhead: true,
editable : true,
hideTrigger:true,
forceSelection: false,
i want to allow users to enter new emailIds also. So i kept editable as true. But when i am trying to get combobox's selected value on sumbit button click, its not giving me newly inserted emailsId's in combobox.I tries it as =
Ext.getCmp('Id1').getSubmitData() or Ext.getCmp('Id1').getRawValue()
But its not giving me newly inserted emailId's. So how to perform this in extjs4
If this is Ext.form.field.ComboBox (xtype:'combobox') then getValue() returns the current value of the combobox. More info available on sencha docs
I have the following ExtJS Textfield that lives in a form. I have a store called
store_Product that fetches data via ajax proxy and suggest them to the PCODE field.
In reality this store has many other fields such as price,color,size and so on..
I am trying to set an onchange listener on this field such that when the user select the PCODE, it delivers other information (of the Product selected) to other fields in the page.
The code bellows work. The console.log(store_Product.data) correctly fetches the data from the model. However, the data fetched is of the whole store. I just want the one selected. How would I change this code to do that.
{
fieldLabel: 'PCODE ',
name: 'pcode',
typeAhead: true,
xtype: 'combo',
store: store_Product,
displayField: 'pcode',
valueField: 'pcode',
allowBlank:false,
minChars:1,
forceSelection:true,
hideTrigger:true,
queryDelay: 0,
listeners:{
change: function(combo,value){
console.log(store_Product.data)
}
}
}
Thanks.
Of course it's gonna log everything. Have you tried looking at the value you're receiving in the handler?
change: function(combo, value) {
console.log(value);
var idx= store_Product.find('pcode', value),
record = store_Product.getAt(idx);
console.log(record);
}
If pcode is the id of your records, you can use Store.getById:
store_Product.getById(value)
I have a comboBox within a form, the valueField is the ObjectId field of a document in mongodb, it displays the proper value of the fields in the comboBox, but it returns just a part of the value with getValue, getRawValue returns the value of the displayField.
This is the code of the comboBox:
{
xtype: 'combo',
fieldLabel:'Firm',
store:Ext.data.StoreManager.lookup('bbCompaniesStore'),
displayField: 'firm',
valueField: '_id',
name: 'country',
labelAlign: 'top',
cls: 'field-margin',
flex: 1
}
This is how I get the value from the form:
var nomeField = formPanel.items.get(0).items.get(0);
var firmField = formPanel.items.get(0).items.get(1);
var noteField = formPanel.items.get(0).items.get(2);
var contact = Ext.ModelManager.create({nome: nomeField.getValue(), note: noteField.getValue(),'firm_id':firmField.getValue()}, 'Contact');
It works but it trunks the value of _id, I checked with firebug, the server sends the rigth data,I think that extjs does some kind of normalization, before I solved using getRawValue, but with combobox it returns the displayField. I do not know how to fix this problem.
Can someone tell me how to get rid of the feature that filters combo box items.
when i click on the trigger of the combo, i want to display ALL menu items regardless of what text is already in the box, NOT filtered. I've tried several different config options with no luck.
make sense ?
for example, if i have 'View' as my text in the combo, and i click on the trigger, it will only show 'View1' and 'View2' items, i want it to include all the others...
Thanks!
heres my current config
{
...
items: [{
xtype: 'combo',
id: 'myViewsCombo',
emptyText: 'Select View',
selectOnFocus: true,
listeners: {
select: function(combo, record, index) {
L3.handlers.loadView(combo.value);
}},
store: ['View1', 'View2','blahblah']
}]
}
Setting triggerAction: "all" solved the same problem for me.
Try the setting the 'disableKeyFilter' config option to true.
See the ext combobox api.