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
Related
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 have an extjs combobox whose queryMode is set to remote.
I also want the typeAhead feature in it. But typeahead doenst work in this case.
The store reloads to the original data even after typing some text in the combobox.
Here is my code:
var queryStore = Ext.create('Ext.data.Store', {
//autoLoad: true,
model: 'UserQuery',
proxy: {
type: 'ajax',
url: 'queryBuilder_getQueryList',
extraParams: {
tableId: this.title
},
reader: {
type: 'json'
}
},
listeners: {
load: function () {
var combo = Ext.getCmp('cmbQueryList');
var lst = this.last();
if (lst)combo.setValue(lst.data);
}
}
});
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
typeAhead: true,
forceSelection: true,
emptyText: 'Select Query...',
queryMode: 'remote',
triggerAction: 'query',
selectOnFocus: true,
allowBlank: false,
editable: true
});
Please suggest how do I get typeAhead and querymode remote to work together.
this code corking for me .I guess your store property autoload is true so when you going to select the combobox its going to server and reload the data. please remove the property of store auto load true. Then its working.
new Ext.form.ComboBox({
fieldLabel:'Apps',
displayField: 'name',
valueField: 'id',
typeAhead: true,
listWidth : 345,
store: myStore(),
forceSelection: true,
triggerAction: 'all',
mode:'remote',
maxLength: 50,
editable: false,
anchor : '90%',
selectOnFocus:true
}),
This following code worked at me. We have to specific the both mode and queryMode to local.
var queryCombo = new Ext.form.ComboBox({
width: 200,
id: 'cmbQueryList',
store: queryStore,
valueField: 'queryID',
displayField: 'queryName',
emptyText: 'Select Query...',
queryMode: 'local',
mode: 'local'
});
I have a comboBox in which items are coming from database and a have applied filter option using that comboBox...Combo works good at first time ,but the problem is when i want to select items from the comboBox at second time i don't find items in my combo(only the previous selected item)..
this.control({
'combobox[itemId=YourCombo]':
{
select: this.combogridfilter
}
});
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.load().filter([
{id:'item_code', property:"item_code", value: value1, anyMatch: false}
]);
},
here is the combo configuration
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store:this.store,
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
You should clear filter before applicate a new one:
combogridfilter: function(newValue){
var value1= Ext.getCmp('myCombo').getValue();
var grid=Ext.getCmp('afteraddingtemplate');
grid.store.clearFilter(true);
grid.store.filter('item_code', value1);
},
You should not share the store between the grid and the combo. Sharing stores between components is asking for trouble. What is happening, is that when you filter the grid, you filter the combo too. Given it's the same store...
What you can do is use a simple memory store for your combo, that you populate when the grid store is loaded.
For example, configure your combo this way:
{
renderTo: Ext.getBody(),
xtype:'combo',
id:'myCombo',
itemId:'YourCombo',
action:'change',
fieldLabel:'Select a template',
queryMode:'local',
store: {
fields: ['item_code']
,proxy: {type: 'memory', reader: 'array'}
},
name:'item_code',
displayField:'item_code',
valueField:'item_code',
enableKeyEvents: true,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a Template',
selectOnFocus: true
}
And populate it on the load event of the grid store:
grid.getStore().on('load', function(store) {
Ext.getCmp('myCombo').getStore().loadData(store.getRange());
});
i have some code that describes by column
cols.offer.push({
dataIndex: 'tags',
header : 'Тэги',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
displayField: 'name',
//valueField: 'name',
multiSelect:true,
typeAhead: true,
editable:false,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
focus: function(e) {
this.setValue(this.rawValue.split(', '));
}
}
}
});
so I want to select only two options in combobox.
and I want if I would select third - nothing will happen
thanks!
it works for me!
cols.offer.push({
dataIndex: 'show_at_index_as_tag_id',
header : 'Показывать на главной под тегом',
width:150,
editor : {
xtype : 'combo',
store : gridTagStore,
queryMode: 'local',
typeAhead: true,
displayField: 'name',
selectOnTab: true,
triggerAction: 'all',
lazyRender: true,
valueField: 'id',
multiSelect:true,
listClass: 'x-combo-list-small',
listeners: {
beforeselect : function(){
return (this.value.length == 1 && this.value[0] === "") || this.value.length == 0 ;
}
}
}
});
I decided to limit with only one option and to use multiselect because I have store with options that is being used in other places of application.
But I need to select empty value in this combo, so multiselection with one option select is the good solution
Add beforeselect listener to ComboBox. In the function define how many items already selected in ComboBox, if its count > 2 return false; to do nothing.
I have a dependent combo box that is required. When the parent combo box value is selected, the dependent combo is cleared and the store is reloaded. How do I keep the ExtJs validation error from showing during the reload?
new Ext.form.ComboBox({
id: 'ddlMake',
store: makeStore,
displayField: 'Description',
valueField: 'TypeCode',
width: 110,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a make',
selectOnFocus: true,
allowBlank: false,
listeners:
{
select: function (combo, record, index) {
var selVal = Ext.getCmp('ddlMake').getValue();
var modelCombo = Ext.getCmp('ddlModel');
modelCombo.setValue('');
modelCombo.store.reload({
params: { categoryTypeCode: 'MODEL', subCategoryTypeCode: selVal }
});
}
}
}),
new Ext.form.ComboBox({
id: 'ddlModel',
store: modelStore,
displayField: 'Description',
valueField: 'TypeCode',
width: 110,
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a model',
selectOnFocus: true,
allowBlank: false
}),
The Reset() method will clear any validation messages. Here is what I ended up using:
function LoadModelCombo(combo, record, index) {
var selVal = Ext.getCmp('ddlMake').getValue();
if (selVal != '') {
var modelCombo = Ext.getCmp('ddlModel');
modelCombo.setValue('');
modelCombo.store.reload({
params: { categoryTypeCode: 'MODEL', subCategoryTypeCode: selVal }
});
modelCombo.reset();
}
}
I don't have the exact code, but there are methods to silence other listeners - See docs for stopEvent and stopPropogation.