I'm trying to build grid with combobox in toolbar, in Grid I will have some informations about employees and combo will allow me to select employee I would like to load those info.
I've created grid easily, but I have problem with combobox in toolbar: it fires change event every time I type something.
Ext.define('My.Grid.Combo', {
extend: 'Ext.form.ComboBox',
fieldLabel: 'Choose State',
store: states,
alias: 'widget.combostates',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
forceSelection: true,
listeners: {
change: function (field, newValue, oldValue) {
console.log(newValue);
},
scope: this
}
});
Here is my demo: http://jsfiddle.net/Misiu/LTVXF/
Put cursor inside that combo and start typing. After every key press that event is fired (see console)
I would like to get that event (or other, doesn't matter) to fire after user selects valid element from that checkbox (I'm using forceSelection).
I could add editable: false, but I would like to have local filtering after I enter part of valid value.
The reason this is happening is because it actually is changing the value every time you hit a key. What you want to use is the select listener. Using this you can grab the value out of the record that was selected.
listeners: {
select: function(combo, records, eOpts) {
console.log(records[0].get('name'));
console.log(records[0].get('abbr'));
}
}
Try removing "scope: this". Once you remove it, when you call this in the event you will be able to see the combobox from which the event is fired. Otherwise it will be the value of window.
Related
I am working with the Sencha EXT JS app on version 7.2 and we found the following scenario:
Click on the dropdown and select a value
Click "done"
Click on the dropdown and select another value
Click "cancel"
Click on the dropdown
Verify the invalid value selected
There is a sencha fiddle to help to reproduce this behavior:
https://fiddle.sencha.com/#view/editor&fiddle/3704
Thank you!
Looks like to be standard feature (not a bug) ;)
Anyway, to fix/change behavior for all the comboboxes use the following override:
Ext.define('overrides.field.ComboBox', {
override: 'Ext.field.ComboBox',
onExpandTap: function() {
this.getPicker().setValue(this.getValue());
this.callParent();
}
});
To do the same for single combobox:
{
picker: 'edge',
xtype: 'combobox',
valueField: 'id',
displayField: 'description',
queryMode: 'local',
store: 'optionsStore',
listeners: {
// Add this..
expand: function(field) {
field.getPicker().setValue(field.getValue());
}
}
}
For our scenario, the problem is when we refreshed the page.
Using your override suggestion, only when I opened on the second time the value is selected correctly.
So we are using the following override to fix this behavior:
Ext.define('Ext.override.field.Select', {
override: 'Ext.field.Select',
updatePickerValue: function (picker, value) {
if (!value) value = this.getValue();
picker.setValue(value);
}
});
It is almost the same, but we are overriding the updatePickerValue method.
Thanks for you help!
Renato Carvalho
Having form panel with combo box in it
Ext.define('MyApp.admin.view.UserAddView', {
extend: 'Ext.form.Panel',
requires: [
'MyApp.admin.controller.UserAddViewController'
],
controller: 'userAdd',
autoScroll: true,
frame:true,
items: [{
xtype:'combobox',
fieldLabel: 'Roles',
collapseOnSelect: true,
editable: false,
multiSelect: true,
queryMode: 'remote',
queryParam: undefined,
displayField: 'authority',
bind: {
store: '{role}'
},
name: 'authorities'
}]
});
Then I want to set values dynamically to this combobox from the view controller
var ob = {'authorities': 'ROLE_ADMIN_USERS'};
var panelToAddName = Ext.create('MyApp.admin.view.UserAddView', {});
panelToAddName.getForm().setValues(ob);
Every time I receive an error
Uncaught TypeError: undefined is not a function
in the following line
panelToAddName.getForm().setValues(ob);
There is no such a problem if the store is specified locally inside combobox
store: ['ROLE_ADMIN_USERS']
I guessed there is a problem related to remote list is not loaded when setValue is called, but setting queryMode: 'local', and loading store with list from view controller doesn't fix the issue.
Is there a way to set value to the combobox with remotly loaded list from view controller?
I think the problem is with bind config of your combobox. In Ext5 doc, there is not config with name bind for combobox.
If your store name is role, try writing store:'role' instead of bind.
Hope this will work.
I've finally figured the issue out by setting
queryMode: 'local'
then loading store from the view controller
var storeRole = me.getViewModel().getStore('role');
storeRole.load();
then bindStore of the combo box
var combobox = panelToAddName.items.getAt(0).items.getAt(0).items.getAt(0).items.getAt(2);
combobox.bindStore(storeRole);
If somebody knows how to get combo box in more simplistic way you are welcome to comment. The following does not have a bindStore() method
Ext.ComponentQuery.query('combobox')[0]
I have a dynamic form and i want to add a listener when change a field value, but i couldnt achive to do that. I added a click listener but when i change it to the change it doesnt work.
thanks in advance.
here is the code below :
panel = Ext.define('MyApp.view.dynamicform.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.dynamicformform',
title: title,
id: 'dynamicform.Form',
bodyPadding: 5,
autoScroll: true,
layout: 'auto',
defaults: {
anchor: '100%'
},
dockedItems: [],
items : genItems(storeData),
listeners: {
afterrender: function (comp) {
var element = comp.getEl();
element.on('change', function(e,el) {
alert('blabla')
});
}
},
initComponent : function() {
this.callParent(arguments);
}
});
when i write click instead of change it works perfectly. I dont get what iam doing wrong.
The afterrender event you have added the listener for is purely for the panel component alone. Therefore trying to attach a change event wont work, since you are trying to do this on the panel:
afterrender: function (comp) {
var element = comp.getEl();
//element is the panel here, not child items such as spinners...
element.on('change', function(e,el) {
alert('blabla')
});
}
You say the click is working, but I think that's just because you are clicking anywhere on the panel including on the child items you are rendering. Instead, the child items coming back in the genItems() need to contain change event listener configs.
EDIT
You could loop through the child items on comp in your afterrender event and for any that are spinners, etc, add the change events that way.
I have an editable grid and a store that loads from a proxy. Im using the store.collect() function to load a combobox to the editor of the grid, the thing is that the grid renders itself before the collect() function is finished, so I get an empty combo. How can I make sure the grid renders after the store is loaded? BTW it works fine if I don't use collect().
This is my grid editor combo:
editor: {
xtype: 'combobox',
store: store_ingredientes.collect('ALIMENTO_DESCRIPCION'),
displayField: 'ALIMENTO_DESCRIPCION',
queryMode: 'local',
allowBlank: false
}
If I log the collection on the load event of the store it works as spected:
load: function(){
console.log( store_ingredientes.collect('ALIMENTO_DESCRIPCION'));
}
To wait until the store is loaded you can use:
yourStore.on('load', function(store, records, options){
//this will be executed after store is loaded
});
In my MVC application I have a controller defined like this:
Ext.define('NE.controller.MyController', {
extend: 'Ext.app.Controller',
stores : [...'StoreAgents'..],
views: [ ...'MyView'...], // * alias w_view
init: function() {
this.control({
'w_view': {
render: function() { this.getStore('StoreAgents').load(); }
}
});
}
});
And in the view MyView I have a combobox defined like this:
{
xtype: 'combobox',
name : 'id_agent',
forceSelection: true,
fieldLabel: 'Agent',
store: 'StoreAgents',
queryMode: 'local',
displayField: 'name',
valueField: 'id'
}
I would expect combobox list to be updated every time the view is rendered, am I wrong?
Currently the combobox remains with no options, even if I see (through firebug) that the application fires the request which correctly returns all agents data.
Furthermore, I noticed that whenever I browse through another view, managed by another controller, which in turn declares another StoreAgent and calls its load() method.. well, if I come back, now I see the combobox populated.
What I am missing?
Thank you
Edit:
I noticed that the store is {buffered: true}. If I switch it to false, then the store fires the 'datachange' event; otherwise it does not. So the question now is: why if buffering is enabled the load() does not fire 'datachange'?
This may be due to a filtered out situation. If the combobox is being filled with a value before the store loads, a filter will be put on the store that filters out all the values before they exist, and then when new records are added they are not displayed either. Try this.
init: function() {
this.control({
'w_view': {
render: function() { this.getStore('StoreAgents').load();
this.getStore('StoreAgents').clearFilter();}
}
});
}