We Keep Coding

MultiSelect combobox in modern ExtJS

Something strange has happened and easy-to-use property multiSelect has gone deprected for some reason. Documentation advises to
Use {#link Ext.form.field.Tag} or {#link Ext.view.MultiSelector}
but does not provide any example. So if I have an ordinary combobox, how can I make it multiselectable?

Instead of an ordinary combobox with multiSelect, you should use tagfield. Configuration is basically the same.
{
xtype: 'tagfield',
fieldLabel: 'My first tagfield',
store: {
...
},
displayField: 'name',
valueField: 'id',
queryMode: 'local',
}
You can checkout an example here

Append option to combox without modifying data store

Is there a way to add an option to a combobox without modifying the underlying data store in any way? I have 2 combobox elements in my form. The only difference between the two comboboxes is that one has an additional 'All' option. For example:
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}]
});
//The first combobox should load the data as is from the store above
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
//There should be a second combobox here that is almost identical
//to the one above, just appending an additional option (that says "All")
//to the top of the list
I'm aware that there are various ways to alter the store such as:
states.insert(0, [{
abbr: 'All',
name: 'All'
}])
However, I want to achieve this without altering the store, purely adding the option to the combobox itself. Is this possible?
UPDATE
I am aware that I could make the I could set the combobox 'emptyText' configuration option to 'All', but this is not what I want. I would like to have 'All' as an actual option.

Combo is a simple SELECT field of HTML. Without OPTION you cannot populate the dropdown.
Its not possible to achieve it without adding into store. Data you see in the combo comes from store.
According to the docs :
A combobox control with support for autocomplete, remote loading, and many other features.
A ComboBox is like a combination of a traditional HTML text field and a field; the user is able to type freely into the field, and/or pick values from a dropdown selection list. The user can input any value by default, even if it does not appear in the selection list; to prevent free-form values and restrict them to items in the list, set forceSelection to true.
The selection list's options are populated from any Ext.data.Store, including remote stores. The data items in the store are mapped to each option's displayed text and backing value via the valueField and displayField configurations, respectively.

I have already made comboboxes with "All", I hope I get it right, haven't got the source code available right now, but to create an "All" option for one of the comboboxes, in ExtJS 6 you have to do something like this:
var storeWithAll = Ext.create('Ext.data.Store',{
url:
proxy: etc.
listeners:{
load:function(store) {
// Add the "All" record after every load!
store.insert(0, [{
abbr: 'All',
name: 'All',
special:true
}]);
}
}
});
var storeWithoutAll = Ext.create('Ext.data.ChainedStore',{
// ChainedStore has the same data as the source:
source: storeWithAll,
filters:[{
// Filter away the "All" record
filterFn:function(item) {return !item.get("special");}
}]
});
Ext.create('Ext.form.field.ComboBox',{
store: storeWithAll, // Use the store with "All" record
...
});
Ext.create('Ext.form.field.ComboBox',{
store: storeWithoutAll, // Use the store without "All" record
...
});

How to set another name for similar records in model, for further binding with form fields in ext js?

Have a project on ext js 6. I'm a newbie in it, but I have read a docs, experimented on it, but didn't understood anything. The point of trouble is: there is a form, which has binding to the model.
Form fields:
{
xtype: 'checkboxfield',
fieldLabel: 'Field1',
bind: '{someField1}'
},
{
xtype: 'textfield',
fieldLabel: 'Field2',
bind: '{someField2}'
}
Model fields:
{
name: 'someField1',
type: 'boolean',
mapping: 'some_field_1'
},
{
name: 'someField2',
type: 'string',
mapping: 'some_field_2'
},
As I understand it, every field which has the model, transmitted to server. And this field described by "name" key.
But question is, what if I need, that in model would be few fields, with the same names? But form fields connected to model by name, and an interpreter will not understand which fields do I need..
So I need that model fields would have different names, but transmitted to server with the same name. Is there a possibility to do this?
Because there is a server response, and "mapping" grabs the model field and insert it into form input. But it doesn't work vise versa, and client sends value with "name" key. Help me to understand and solve this problem, please)

If you update the bind code on the view to look like this
bind: {
value : '{someField1}'
}
you can probably set the name then independent of the binding.

bindStore breaks combobox

Among the other form fields i have(the combobox is an extension of the standard combobox with extra config options):
marker: new Forms.ui.ComboBox({
fieldLabel: _('Marker'),
displayField: 'name',
valueField: 'id',
store: new Ext.data.JsonStore({
fields: ['name', 'id','resellerid'],
data: [
{'name':_('Default'), 'id': 0, 'resellerid': 0}
]
})
})
Now when i need to use bindStore in a function that is called separately and has a jsonStore passed to it(store):
this.fields.marker.bindStore(store);
However, while the store is populated - im unable to select anything. I moved the store to the same script to test it - and set it directly to the combobox config as 'store:' - it works.
So the problem comes from bindstore it seems.
What am i missing?

Apparently it was the quotes around the data property names that broke it.

How to dynamically select values in Multiselect combo box - LovCombo ExtJS 3.2

I am using lovcombo in ExtJS 3.2. I fetch the data for initial loading of combo box and I am getting it correctly. But now I have a requirement in which, lets say initially I got 10 entries (options) in combo box, I need to select now 5 options dynamically. Actually I am using it to show dependent entity mapping. Means one entity is dependent on many other entities, so showing them in multiselect combo box. When I get root entity, I need to fetch dependent entities for my root entity, and accordingly I will select those entries dynamically in combo box. This is my code -
{
xtype: 'lovcombo',
fieldLabel: 'data Requirement ',
store: dep_req_store,
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText: 'Select Requirement...',
triggerAction: 'all',
name: 'data_id',
id: 'data_id' + idSuf,
hiddenName: 'reqIdHid3',
width: 200,
forceSelection: true,
editable: true,
hideOnSelect: false,
beforeBlur: Ext.emptyFn,
}
I will iterate thru each element of this combo after its loaded and will select necessary options:
Ext.getCmp('data_id' + idSuf).getStore().data.items.each(function(record) {
record.dirty = true; //I tried this but no success.
});
Also, I didn't find any attribute which can help me to select the option like:
record.selected = true
So, please help me in this. Is it possible to achieve this using lovcombo?
Thanks in advance.

in record's field definition you can create a new field called checked, this field is by default used by lovcombo to store checked state of the record
fields: [
...
{name: 'checked', type: 'boolean'},
....
]
and when you want to check any record after loading it just do
record.set('checked', true);
Reference: