I would like to accomplish:
When some item in the ComboBox is selected hide some other field in the form or a complete div.
This is my ComboBox:
var typeIDcombo = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'typeid',
store: typeIdData,
displayField:'name',
valueField: 'typeid',
hiddenName: 'typeid',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Selecteer het type link',
forceSelection: true,
selectOnFocus:true,
allowBlank: false,
value: 'Selecteer een type',
});
I have add listeners to my var form = new Ext.FormPanel. But this does not work.
listeners: [{
'select' : function(field,nval,oval) {
alert(field);
}],
Does someone know a solution for this? Thanks in advance.
Try this:
typeIDcombo.on('select', function(combo) {
if (combo.value == 'ABC') {
Ext.getCmp('field').show();
Ext.getCmp('form').doLayout();
} else {
Ext.getCmp('field').hide();
Ext.getCmp('form').doLayout();
}
});
As Warung wrote, that should do it:
var typeIDcombo = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'typeid',
store: typeIdData,
displayField:'name',
valueField: 'typeid',
hiddenName: 'typeid',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Selecteer het type link',
forceSelection: true,
selectOnFocus:true,
allowBlank: false,
value: 'Selecteer een type',
listeners: [{
select : function(field,nval,oval) {
alert("Hit");
}]
});
First, the listener on FormPanel is not necessary cause the FormPanel will not fire any 'select' events on its own events. You should add the listeners on the components inside the FormPanel to listen the specified events fired by the component.
For your case, it is simple as the follows:
var typeIDcombo = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'typeid',
store: typeIdData,
displayField:'name',
valueField: 'typeid',
hiddenName: 'typeid',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Selecteer het type link',
forceSelection: true,
selectOnFocus:true,
allowBlank: false,
value: 'Selecteer een type',
listeners:{
select:function(field, newVal, oldVal){
if(newVal == 'HIDE_SOMETHING'){
Ext.getCmp('fieldId').hide();
Ext.getCmp('formId').doLayout();
}
else if(newVal == 'SHOW_SOMETHING'){
Ext.getCmp('fieldId').show();
Ext.getCmp('formId').doLayout();
}
}
}
});
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 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 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.
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
}