In extjs4 how to get edited values of combobox - combobox

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

Related

Extjs : Selecting same value in multiselect combo not removing value

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.
}

ExtJS - submitting disabled checkbox

Version 4.2.1
In a form I use a checkbox which should not be changed for a certain type of user.
So I disable the checkbox and set checked and value to `true. I want this value to be submitted.
{
name: 'myName',
itemId: 'myItemId',
xtype: 'checkboxfield',
fieldLabel: "test",
checked: true,
value: true,
disabled: true,
},
When I submit the form I see that there is no parameter for this checkbox.
Only when I set disabled to true I get a parameter with value on
When I look at:
var data = form.getValues();
console.log(data);
this checkbox is not submitted with an on value.
When I use readonly: true I can check/uncheck the checkbox and that value is submitted.
So how can I disable the checkbox for editing, set the value to checked and get it submitted to the server?
Found this thread from 2008/2009 which has a simple solution.
Form Submit is not sending values of disabled field
Sending disabled field
This code sets the checkbox to readonly is shown and a user cannot change the value.
And the field is submitted to the server.
readOnly: true,
fieldClass: "x-item-disabled"

Extjs4 Ext.selection.CheckboxModel with Ext.grid.property.Grid

First of all, I am using Extjs 4.1.
I have a grid with property grid and I want to add a column of checkbox into the grid. The property grid code is as follows:
var grid = Ext.create('Ext.grid.property.Grid', {
tbars:[],
selModel: Ext.create('Ext.selection.CheckboxModel',{mode: 'MULTI'}),
columnLines: true,
renderTo: Ext.getBody(),
source: {
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
}
});
However the checkbox selection model does not show up in the grid.
anyone can point me to the correct direction or property grid does not work with checkbox ?
Although the selModel property is documented in Ext.grid.property.Grid, this is only because Ext.grid.property.Grid extends Ext.grid.Panel. The problem is that this type of grid only has a fixed selModel and namely of type cellmodel. You can see its behaviour by clicking on a property (the property editor gets the focus and e.g a date proeprty shows a date picker). The cellmodel selModel is hard coded in the source code in the initComponent() method, so if you want to change that, you should write your own subclass in which you overwrite that.

How to set combobox's value from extjs controller

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');

Ext js combobox does not display all items in menu

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.

Resources