I'm setting the value of a combobox using combo.setValue(value) passing an id that is linked to a displayField. The problem is that I want to show the displayField not the id, it seems like extjs does not make the conversion.
{
xtype: 'combobox',
fieldLabel: 'Categoria',
name: 'categoria',
labelAlign: 'top',
allowBlank: false,
blankText: 'Campo obbligatorio',
typeAhead: true,
displayField: 'categoria',
valueField: 'id',
store: comboCategoriaStore,
columnWidth: .2,
margin: 5,
listeners: {
select: {
fn: me.onFieldBlur,
scope: me
}
}
}
Related
I am trying to create two combo boxes. The first one shows the country names and the second one shows provinces/states. The idea is to filter the second combo based the selection on first one and put the value of 'VisitingCountryProvince' as the default selection.
The problem with the below code is, it is not selecting the default value based on the first combo box. If I remove the bind filter, the second combo box shows the correct value of 'VisitingCountryProvince'.
Any idea?
{
xtype: 'fieldset',
title: 'Visiting Country',
layout: 'anchor',
anchor: '-10',
collapsible: false,
defaults: {
xtype: 'combo',
labelStyle: 'font-weight: bold;',
flex: 1,
anchor: '0',
editable: false,
forceSelection: true,
allowBlank: false,
emptyText: 'Select...',
queryMode: 'local',
},
items: [{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value'
}, {
name: 'VisitingCountryProvince',
fieldLabel: 'Sub',
store: {
type: 'array',
fields: ['value', 'countryName']
},
bind: {
filters: {
property: 'countryName',
value: '{visitingCountryFieldRef.value}'
}
},
valueField: 'value',
displayField: 'value'
}]
},
The closest answer to the issue I could find is in here, How to use combo "publishes" value & bindings to filter store on another combo
I just figured out that, I can do either filter or select a default value, not both. How do I filter and bind a default value from the filtered list?
You need to write your logic of filtering the values of second combo store in the "select" event handler of the first combo box.
{
name: 'VisitingCountry',
fieldLabel: 'Main',
reference: 'visitingCountryFieldRef',
publishes: 'value',
store: {
type: 'arraydropdownstore'
},
valueField: 'value',
displayField: 'value',
listeners:{
select:function(){
//Access the second[bound to second combobox]store and apply the
//filter, Also there are arguments for select event handler, for this
//Please refer docs.sencha.com for extjs version you are using.
}
}
}
How to render the selected value of combo box in grid of ExtJs?
{
header: 'value',
width: 150,
dataIndex: 'roleType',
editor: {
xtype: 'combobox',
store: 'RoleStore',
valueField: 'roleId',
displayField: 'roleType',
}
}
If you're using ExtJS5+, you can use the widget column.
{
xtype: 'widgetcolumn',
header: 'value',
width: 150,
dataIndex: 'roleType',
widget: {
xtype: 'combobox',
store: 'RoleStore',
valueField: 'roleId',
displayField: 'roleType',
}
}
Example: https://fiddle.sencha.com/#fiddle/17tv
I am having big troubles with data bindings in ExtJs5. I still can't understand why the field label can't be binded to the view-controller as there is a setFieldLabel() function?
{
xtype: 'combobox',
store: 'genderStore',
queryMode: 'local',
displayField: 'label',
valueField: 'gender',
labelAlign: 'top',
bind:{
value:'{scrape}',
fieldLabel:'{myLabel}'
}
}
formulas: {
myLabel:function(get){
return get('widgetSettings').properties.keyDim.dimensionName;
},
scrape:function(get){
return 0;
},
The value gets populated, but the fieldLabel - not.
Thanks!
I have 2 combos, I want to force to select the first combo (employer combo), after it's selected then the combo 2 (employee combo) is enable.
ExtJS 4.2.1
The code of the combos is:
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Right now my remote combo employee combo send into the query param "searchStr" that is the string typed in the combo. I need to pass also the selection from combo 1 (employer combo).
How can I achieve this? Thanks.
use something like this.
Ext.ComponentQuery.query('EmployerId').value
Ext.getCmp('EmployerId').value
var empValue = getComponent('EmployerId').value
if .value not work then try getValue() method.
Hope this helps.
in your second component(EmployeeId) add configuration disabled:true on load.
then add afterrender listener to the first one. and then set the other combo available.
Then do this............................................................................
{
xtype: 'combobox',
store: Ext.create('SoftHuman.store.catalog.Employer', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'EmployerId',
fieldLabel: 'Company',
name: 'EmployerId',
queryMode: 'local',
allowBlank: true
listeners: { <---------------------here
select: function(combo, selection) {
if (combo.getValue() != undefined) {
Ext.ComponentQuery.query('EmployeeId').setDisabled(false)
} <----------------------------- to here
}, {
xtype: 'combobox',
anchor: '100%',
store: Ext.create('SoftHuman.store.employee.EmployeeCombo'),
displayField: 'FullName',
valueField: 'EmployeeId',
queryMode: 'remote',
fieldLabel: 'Employee',
editable: true,
disabled:true, <------------add this
hideTrigger: true,
queryParam: 'searchStr',
name: 'EmployeeId',
allowBlank: true,
listConfig: {
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function () {
return '<b>{EmployeeNumber}</b> / {FullName}';
}
}
},
Hope this helps :)
This is my combobox
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store: [
['tr','Türkçe'],
['ru','Русский'],
['en','English']
],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true
},
Generally, when I want to select the first value of a store, I use this methods:
xtype: 'combo',
fieldLabel: 'prov',
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
listeners: {
afterrender: function(combo) {
var recordSelected = combo.getStore().getAt(0);
combo.setValue(recordSelected.get('field1'));
}
}
{
xtype: 'combo',
fieldLabel: LANG.LOGIN_LANG,
id : 'lang',
store:[['tr','Türkçe'],['ru','Русский'],['en','English']],
mode: 'local',
triggerAction: 'all',
value: 'tr',
selectOnFocus:true
},
For remote comboboxes you need to plug into store's load event to select the value after store is loaded.
You can use the value property like so:
value : 'tr'
then it will display first value by default.
You can use this code, assigning any store element after its id to the default combobox value.
{
xtype: 'combobox',
forceSelection: true,
allowBlank: true,
typeAhead: true,
queryMode: 'local',
colspan: 3,
id: 'filter_column_c',
style: {'margin': '5px 15px 15px 30px'},
fieldLabel: 'Column',
valueField: 'column',
displayField: 'name',
store: nomStores["storeCombo"],
value: nomStores["storeCombo"].getById(1),
},
As an alternative, I faced the need to show a locally stored Store, which was just a matter of listening the afterRender method:
listeners: {
afterRender: function() {
this.select(01);
}
}
01 in this case is the id (valueField) of the element in the Store:
areasCenters: {
data: [{
id: 01,
name: 'Todas'
},
{
id: 02,
name: 'Elegir...'
}
],
autoLoad: true
}