Develop Reference

Get and send id tagfield values. Extjs

There are two fields in the grid:
...
{
text: 'Спец. учетка',
sortable: true,
dataIndex: 'specuserName',
flex: 2,
editor: {
xtype: 'combobox',
store: 'Vendors',
displayField: 'name',
valueField: 'name',
//editable: false,
queryMode: 'remote',
//forceSelection: true,
triggerAction: 'all',
allowBlank: true
}
},
{
header: 'Сотрудники группы',
dataIndex: 'users',
flex:2,
editor: {
xtype: 'tagfield',
typeAhead: true,
queryMode: 'remote',
filterPickList: true,
triggerOnClick: true,
displayField: 'name',
valueField: 'name',
triggerAction: 'all',
store: 'IntraUsers',
}
},
...
ViewController looks like that:
Ext.define('App.view.MainIntranetController', {
extend: 'Ext.app.ViewController',
alias: 'controller.intranetcontainer',
onGridEditorIntraEdit: function (editor, ctx, eOpts) {
//combobox
var vendorColIdx = 2;
var combo = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var vendorRecord = combo.findRecord('name', combo.getValue());
console.log(vendorRecord);
ctx.record.set('specuserId', vendorRecord.get('id'));
//tagfield
var vendorColIdx = 3;
var tagfields = ctx.grid.columns[vendorColIdx].getEditor(ctx.record);
var valuetag = tagfields.getValue();
//ctx.record.set('mainusersId', vendorRecord.get('id'));
//ctx.record.set(valuetag);
//console.log(ctx.record);
//ctx.grid.getStore().sync();
}
});
First I get the id of the selected combobox values ​​and set it to send to the server, and then I try to get the id of the selected tagfields values ​​to send them to the server, but I don’t get it right.
How to make the id of the selected values ​​with tagfield go to the server.
Thanks.

Since setting the tagfield's displayField to "name" prevents getting the array of selected record ids, another way to achieve this is by using tagfield's getValueRecords method. We can pass the result of this method to the Array's map function and gather only the ids:
var tagfieldSeletedIds = Ext.Array.map(tagfield.getValueRecords(), function(record) {
return record.getId()
});

Programatically setting the selected record after rendering in ExtJS 5

I am building a web application where I have 2 combo boxes that use the same store.
The user first sets combo box 1, then combo box 2 is in a floating panel that gets shown when a user clicks a certain button. What I want to happen is that when combo box 2 appears, the pre-selected record would be the one that was selected in combo box 1.
So far, I am using the afterrender event bind for the combo box 2 but nothing seems to be working:
Here is the body of my afterrender function:
console.log('after render combobox hit!');
var comboBox1 = Ext.getCmp('comboBox1');
var store = component.getStore();
var record = comboBox1.findRecordByValue(comboBox1.getValue());
var rowIndex = store.indexOf(record);
var selectedRecord = comboBox1.getStore().getAt(rowIndex);
console.log('combobox selection index = ' + rowIndex);
console.log('selected record = ' + selectedRecord.get('device_name'));
component.select(selectedRecord);
What I do is I get the record and the index selected in Combo Box 1 and then try and set that as the value in Combo Box 2. the select command didn't work. I have also tried the following:
component.select(record, true);
component.setValue(record.get('device_name'));
component.setRawValue(record.get('device_name'));
but none of those worked as well.
Has anyone else tried to programmatically set a default choice for a combobox?

Try this (copy and paste on Fiddle):
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: 'Combobox 1',
itemId: 'combobox1ItemId',
emptyText: 'Select item',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
Ext.create('Ext.Button', {
text: 'Click me',
width: 120,
margin: '10 2 10 120',
renderTo: Ext.getBody(),
handler: function() {
var combo1 = Ext.ComponentQuery.query('#combobox1ItemId')[0];
var combo2 = Ext.ComponentQuery.query('#combobox2ItemId')[0];
var combo1Value = combo1.getValue();
combo2.select(combo1Value)
var store = combo2.getStore();
var item = store.findRecord(combo2.displayField, combo1Value);
setTimeout(function () {
combo2.fireEvent('select', combo2, [item]);
}, 200);
}
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Combobox 2',
itemId: 'combobox2ItemId',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

How to remove Box from tagfield

I am using EXTJS 6 and using Tagfield. When I select TagField I am getting Box with close Icon. How Can I remove that box and close Icon and Place My own css. MyFiddle

If you need to apply your changes to all tagfields in your project, you can simply override theme variables for this element ($tag-field-item-close-icon-glyph, etc.
) in you theme.
All list of available variables described in documentation: http://docs.sencha.com/extjs/6.0.1/classic/Ext.form.field.Tag.html#vars

You can use Ext.form.field.ComboBox instead of using Ext.form.field.Tag
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"},
{"abbr":"BL", "name":"Blabama"},
{"abbr":"BK", "name":"Blaska"},
{"abbr":"BZ", "name":"Brizona"},
{"abbr":"CL", "name":"Clabama"},
{"abbr":"CK", "name":"Claska"},
{"abbr":"CZ", "name":"Crizona"},
{"abbr":"DL", "name":"Dlabama"},
{"abbr":"DK", "name":"Dlaska"},
{"abbr":"DZ", "name":"Drizona"}
]
});
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Choose State',
store: states,
delimiter : ",",
multiSelect : true,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});

How to add ComboBox to settings gear menu in Rally app

Currently I'm working on an app that displays a chart of defects. The chart is to be filtered by a selection of checkboxes that the user can change around to fit his / her needs. These checkboxes are located in the gear menu of the app, under 'settings'. In App.js I have a function that looks like this:
getSettingsFields: function() {
return [
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
This function works perfectly so far and displays the items I left out of the code [they're not important to the question]. The problem is that now I want to add a ComboBox into the same settings page with custom values. The box should have the text [Days, Weeks, Months, Quarters] inside that will further filter which defects to display in the chart. I tried changing the getSettingsFields function to the following:
getSettingsFields: function() {
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
});
return [
{
xtype: 'combobox',
fieldLabel: 'Date Range',
store: myStore,
displayField: 'range',
valueField: 'value'
},
{
xtype: 'fieldcontainer',
fieldLabel: 'States',
defaultType: 'checkboxfield',
items: [
{...}
...
]
}
];
}
Now when I run the app and click on the 'settings' button, everything disappears - even the field of checkboxes. Any explanation to why this is not working would be very helpful!

You're basically doing everything correctly- you've just stumbled upon a really subtle bug. The underlying issue is that there is an infinite recursion that occurs when the settings panel is attempting to clone the settings field config array due to the inclusion of the store. The following code will work around the issue:
{
xtype: 'rallycombobox',
storeConfig: {
fields: ['value', 'range'],
data: [
{'value':'day', 'range':'Days'}, //test data for ComboBox
{'value':'week', 'range':'Weeks'}
]
},
storeType: 'Ext.data.Store',
fieldLabel: 'Date Range',
displayField: 'range',
valueField: 'value'
}
It's basically the same as what you had but uses the rallycombobox instead and passes in storeType and storeConfig to get around the store cloning problem.

extjs multiselect list from json string

I am trying to create a multiselect list from json store, which is in this format
[{"photo_id":1,"file_name":"test.JPG","x":123,"y":456},{"photo_id":2,"file_name":"test2.JPG","x":321,"y":765}]
The multiselect list populates the rows but it doesn't show the file_name in the list
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: store // contains the json string
});
and here is the multiselect box
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
frame: true,
width: '100%',
items: [
{
anchor: '100%',
displayField: 'file_name',
valueField: 'photo_id',
store: storeVar ,
xtype: 'multiselect',
fieldLabel: 'Select an image',
allowBlank: false
}
]
})

Grigor, you can use Ext.JSON.decode to decode your string in json format:
var storeVar = new Ext.data.Store({
extend: 'Ext.data.Model',
fields: ['photo_id', 'file_name'],
data: Ext.JSON.decode(store) // contains the json
});
Here is demo

You are mixing the creation of the Store with the definition of a model: The line
extend: 'Ext.data.Model'
has no effects on a Store, check examples on documentation docs
I can't comment/edit on questions so I write it in a new answer.