I have a following code for combo box, how can I get the value that is selected in the combobox and load that value into a variable, and use it later.
Thank you
Ext.define('Column', {
extend: 'Ext.data.Model',
fields: ['data1', 'Data2']
});
var store = Ext.create('Ext.data.Store', {
model: 'Column',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/data.xml',
reader: {
type: 'xml',
record: 'result'
}
}
});
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
store: store,
displayField: 'data1',
valueField: 'data1',
width: 250,
labelWidth: 120,
fieldLabel: 'select a value',
renderTo: 'simpleCombo',
queryMode: 'local',
typeAhead: true
});
Simply use the select event
var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
store: store,
displayField: 'data1',
valueField: 'data1' ,
width: 250,
labelWidth: 120,
fieldLabel: 'select a value',
renderTo: 'simpleCombo',
queryMode: 'local',
typeAhead: true,
listeners: {
select: function(combo, records) {
// note that records are a array of records to be prepared for multiselection
// therefore use records[0] to access the selected record
}
});
API Link
Additional content from the comments:
Take a look at the multiSelect property of the combobox. You get all values separated by a defined delimiter and the select event will give you a records array with more that one record. Note the that getValue() only give you the defined displayField which is a string and not the record itself. So using iComboValue[0] gives you the first character. The selected records should always be accessed using the selected event. But you may store them in a array for later use and overwrite it with any new select.
You can also use:
var iComboValue = simpleCombo.getValue();
may be you should try this
// to get the combobox selected item outside the combo listener
simpleCombo.on('change', function (combo, record, index) {
alert(record); // to get the selected item
console.log(record); // to get the selected item
});
Related
I have an example fiddle in which I use Ext.window.Window to edit the grid entries.
The id of the value is displayed in the grid itself, and empty in the edit window.
For combobox in the grid, I did this and it works
{
text : 'type',
dataIndex : 'type',
flex: 1,
renderer: function (v, p, record) {
return record.get('type');
},
},
For combobox in the form edit I added to the combobox listeners:{ render: function(combo)}
{
xtype: 'combobox',
store: {
type: 'type-store'
},
fieldLabel: 'Type',
displayField: 'name',
valueField: 'id',
queryMode: 'remote',
publishes: 'name',
name: 'name',
listeners:{
'render': function(combo){
console.log(combo);
combo.setValue();//How set current value
}
}
But I do not understand how to correctly set the current value?
thank
First things first, in order to link the value of the combo, your data data.json you must include the id for the "type", not just the description:
{
"id": 1, "id_type":3 , "type": "Третий", "mytextfield": "Текстовое значение"
},
You can actualy use the "name" if you want to, but you have to change your combo valueField to "name" also.
In the controller, first load the combo store (or autoload) and then, instead using the view_model of the windows, use the form to load your record:
console.log(wind.lookup("mycombo").getStore().load());
wind.down('form').loadRecord(record);
I modified your fiddle with those changes
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()
});
I've a combobox which returns 10 values from DB;
Ext.define('Iso3Combo', {
extend:'',
xtype:'iso3combo',
requires: [
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json'
],
name: iso3
fieldLabel: iso3,
displayField:'iso3', // takes from DB
valueField:'id', // takes from DB
store: {
proxy: {
type: 'ajax',
url: ...getUrl() + '/country/list',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
},
queryMode: 'local',
autoLoad:true,
bind: '{currRec.iso3}',
listeners: {
fn: function () {
console.log('isocombo listeners...');
},
select: this.getIso3,
change: this.getIso3,
scope: this
}
});
As you will notice above; combobox's displayed content is iso3 and gets id as primary key. Therefore I can not change valueField. So tried this function to reach some other value for that selected combobox record;
getIso3: function () {
var me = this;
// var rec = me.getSelectedRecords(); //says getSelectedRecords is not a function
var country = me.down('[name=iso3]').getValue(); // returns 'id'
// var isoCode = rec.data.iso3; //Couldn't be success to verify if I get correct value..
How can i be able to load all values of DB from selected combobox record and select one of them?
You need to use combobox.getSelection() or combobox.getSelectedRecord(). This both method will return you selected record. Or inside of select event you will get selected record in second parameter so also you can get iso3 value like this record.get('iso3').
Here is an FIDDLE, I have created a demo using form and combobox. This will help you or guide you to solve your problem.
I am using this COUNTRY JSON.
Code Snippet
// The data store containing the list of Country
var country = Ext.create('Ext.data.Store', {
fields: ['iso3', 'id'],
proxy: {
type: 'ajax',
url: 'countryList.json',
reader: {
type: 'json',
rootProperty: 'countrylist'
}
},
autoLoad: true
});
// Create form with the combo box, attached to the country data store
Ext.create('Ext.form.Panel', {
title: 'Country List Example with ComboBox',
bodyPadding: 10,
items: [{
xtype: 'combo',
fieldLabel: 'Choose Country',
store: country,
queryMode: 'local',
displayField: 'iso3',
valueField: 'id',
listeners: {
select: function (field, record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`);
}
}
}],
renderTo: Ext.getBody(),
buttons: [{
text: 'Get Combo Value/Record on button click',
handler: function () {
var record = this.up('form').down('combo').getSelectedRecord();
if (record) {
Ext.Msg.alert('Success', `Selected country <br> iso3 : <b>${record.get('iso3')}</b> <br> id : <b>${record.get('id')}</b>`)
} else {
Ext.Msg.alert('Info', 'Please select contry first.. :)');
}
}
}]
});
handler: function () {
var selectionmodel=this.up().down('multiselect');
var values=selectionmodel.values;
}
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()
});
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.