Current state: The combobox display by default a 0
Goal: I want to display "24/7" which is an option that appears inside its list if clicked.
Here is my combobox:
{
xtype: "combobox",
name: "horario",
reference: "horarioCombo",
queryMode: "local",
label: i18n.t(
"OSAccess.view.usuarios.tabs.configDefault.field.horario",
"Horarios por defecto"
),
bind: {
hidden:
"{!settingsGlobal.configuracion.sistemaSmartpass}",
value: "{usuario.horarioId}",
required:
"{!isCreate && settingsGlobal.configuracion.sistemaSmartpass}"
},
displayField: "descripcion",
valueField: "id",
flex: 2,
publishes: {
selection: true
},
hidden: true,
store: {
type: "horarios",
autoLoad: true
}
}
Related
We do have a combobox to autocomplete like a search field.
If it is on the modern toolkit. the picker is changed to the spinner selector and you cannot type anymore.
How can I prevent the picker change in modern or how could I do like a search autocomplete in the modern framework.
seems like if you set the combobox queryMode to remote, it does not work well in the modern framework.
{
xtype: 'combobox',
itemId: 'cmbName',
style: { color: '#4944FF' },
viewModel: {
type: 'peopleModel'
},
bind: {
store: '{peopleStore}'
},
hideLabel: true,
enableKeyEvents: true,
placeholder: 'Enter name (type min. 3 letters)',
hiddenName: 'lastname',
name: 'lastname',
forceSelection: false,
submitValue: false,
displayField: 'lastname',
valueField: 'lastname',
queryMode: 'remote',
matchFieldWidth: false,
multiSelect: false,
minChars: 3,
pageSize: 10,
listeners: {
select: 'onSelect'
}
}
I got a combocox in editor grid. When entering values I have to validate so I used property forceSelection : true . But turning on force selection raise another problem as the combo value is blank when the combo box loss focus as below attached image.
Sample code:
var employeeType = [{
'typeid': 1,
'typename': 'Contractor'
}, {
'typeid': 1,
'typename': 'Regular'
}];
var employeeTypeStore = Ext.create('Ext.data.Store', {
fields: ['typeid', 'typename'],
data: employeeType
});
Ext.define('Employees', {
extend: 'Ext.data.Model',
fields: [{
name: 'emptype',
type: 'string'
}, {
name: 'name',
type: 'string'
},
]
});
var empStore = Ext.create('Ext.data.Store', {
model: 'Employees',
data: [{
'emptype': 'Regular',
'name': 'John Doe'
},{
'emptype': 'Regular',
'name': 'Ricky'
},{
'emptype': 'Regular',
'name': 'Mason'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: empStore,
width: 1000,
height: 500,
title: 'Employees',
columns: [{
text: 'Employee Type',
dataIndex: 'emptype',
editor: {
xtype: 'combobox',
queryMode: 'local',
store: employeeTypeStore,
displayField: 'typename',
valueField: 'typeid',
forceSelection : true
}
}, {
text: 'Employee Name',
dataIndex: 'name'
}],
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
}
});
If the value is false then I need to show the last correct value.
Its the Expected behavior.
Setting forceSelection: true will restrict the user to select the value which is present in the list only. So if you loose the focus without selecting any item it will gonna blank.
You can use typeAhead: true to populate and autoselect the remainder of the text being typed if it matches a known value.
I have the below combobox set to put some records through API call and then display on the page. I need to submit 2 values when user clicks submit, 1) gmiExchangeCode and 2) gmiFuturesCode. The first value works through this form's field, the gmiFuturesCode doesn't work on updating the hidden form field.
}, {
xtype: 'combo',
autoLoad: true,
hideTrigger: true,
fieldLabel: 'Product',
displayField: 'gmiDescription',
valueField: 'gmiExchangeCode',
submitValue: true,
name: 'exchange',
queryMode: 'remote',
queryParam: 'entry',
typeAhead: true,
minChar: 2,
tpl: new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item" style="border-bottom:1px solid #757575;">{gmiExchangeCode} - {lisaMarket} - {gmiFuturesCode} - {gmiDescription}</div></tpl>'),
store: {
fields: ['text', 'value'],
proxy: {
type: 'ajax',
url: 'API',
reader: {
type: 'json'
}
}
},
listeners: {
select: function (combo, record, index) {
hidden.setValue(record.get('gmiFuturesCode'));
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}, {
There is nothing called "hidden.setValue()" you have to get the object using the query selector or Ext.getCmp('ObjectID')
Here is a working Example Fiddle
Ext.create('Ext.form.Panel', {
title: 'test',
width: 400,
height: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
reference: 'states',
publishes: 'value',
fieldLabel: 'Select State',
displayField: 'displayField',
anchor: '-15',
store: {
fields: ['valueField', 'displayField'],
data: [
['1', 'MyDisplayValueFor1'],
['2', 'MyDisplayValueFor2'],
['3', 'MyDisplayValueFor3']
]
},
minChars: 0,
queryMode: 'local',
typeAhead: true,
listeners: {
select: function (combo, record, index) {
console.log(record.get('displayField'));
Ext.getCmp('futures').setValue(record.get('displayField'));
Ext.Msg.alert('Alert', 'The hidden Field value from the getter is : ' + Ext.getCmp('futures').getValue());
}
}
}, {
xtype: 'hidden',
id: 'futures',
name: 'futures'
}]
})
Try this
Ext.getCmp('futures').setValue(record.get('gmiFuturesCode'));
I have tree panel, that has the cell editing plugin:
plugins = {
ptype: 'cellediting',
clicksToEdit: 1
};
And I want to achieve the following scenario: if there is a single click on a node, the editor should be a combobox, if double click - editor should be a textfield. How can I implement this?
This is my function from the controller:
getEditor: function (record) {
if (dblclick) {
Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('combo', {
editable: false,
allowBlank: false,
flex: 1,
queryMode: 'local',
store: App.store.Goods,
displayField: 'name',
valueField: 'id'
})
});
};
if (singleClick) {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('textfield', {
selectOnFocus: true,
maxLength: 20,
enforceMaxLength: true
})
});
}
return;
},
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
}