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'
}
}
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.
}
}
}
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 :)
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
}
}
}
I have a make and a model combo box. The make combo loads info when the user selects a make. The problem is, it does not fire when the user tabs off the combobox. It does work when they press enter or they select an item from the list with the mouse. Here is what we have for the make combo:
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'MakeOid',
width: 175,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners:
{
select: function(combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
}
}
Here is what I ended up using. I used both select and change:
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'MakeOid',
width: 175,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners: {
select: function (combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
},
change: function (combo, record, index) {
LoadModelCombo(combo, record, index);
FillAircraftType();
}
}
}),
use forceSelection config property of combobox component this would allow you to achive what you want. for rest you can see the sencha documentation of this config
I have a grid with some data (users list). For each row I have many actions such as update, delete, activate, suspend, view orders you name it.
Instead of placing so many buttons which will fill more than 400-500 pixels I want to place a combobox with an action applied to each field.
The problem is that I can't simply render a combobox in a column row just like that or I'm missing something? Can someone shed some light on this please?
new Ext.grid.GridPanel({
region: 'center',
id: 'usersGrid',
store: store,
stripeRows: true,
autoExpandColumn: 'username',
columns: [{
// username
},{
// email
},{
// last seen
},{
// actions combo, it won't show
header: '',
width: 220,
fixed: true,
hideable: false,
dataIndex: 'actions',
renderer: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
id: 0,
fields: ['abbr', 'action'],
data: [
['suspend', 'Suspend'],
['activate', 'Activate'],
['update', 'Update'],
['delete', 'Delete']
]
}),
displayField: 'action',
valueField: 'abbr',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select action'
})
}
]
});
Convert Grid to Editable Grid
Add editor config in columns instead of 'renderer'. Find below the altered code.
new Ext.grid.EditorGridPanel({
region: 'center',
id: 'usersGrid',
store: store,
stripeRows: true,
autoExpandColumn: 'username',
columns: [{
// username
}, {
// email
}, {
// last seen
}, {
// actions combo, it won't show
header: '',
width: 220,
fixed: true,
hideable: false,
dataIndex: 'actions',
editor: {
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['abbr', 'action'],
data: [
['suspend', 'Suspend'],
['activate', 'Activate'],
['update', 'Update'],
['delete', 'Delete']
]
}),
displayField: 'action',
valueField: 'abbr',
mode: 'local',
typeAhead: false,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select action'
}
}]
});
You are attempt to accomplish this is mostly correct. The way that you are adding the custom editor might need some tweaking.. Have you tried this change?
editor: new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
id: 0,
I'm unfortunately unable to determine what your code is doing and not working.
What version of ExtJS are you using? One thing of note that I'm finding is that I don't see any object called Ext.data.SimpleStore in the current ExtJS API docs. Have you tried using a different type of data store instead? You might want to try using different type of store for this combo?