extjs how to determine if combobox change event was fire by user - extjs

I am trying Extjs and I am trying this scenario: I have a combobox which will display the first level in a hierarchy by default. That is to say:
0001
0001.0002
0001.0002.0004
0001.0003
0005
First level would be 0001 and 0005. If I select 0001 it goes into the restapi and fetches 0001.0002 and 0001.0003. That behavior is working as expected. My problem is this: I have to show the fetched data in this very same combobox and to keep selected the item I chose first. What my combo is doing is loading the data, but unselecting everything. Here is what I did so far:
var store = Ext.create('mycomponents.store.mystore', {});
var selectedText = '';
var autoSelec = false;
Ext.define('mycomponents.view.myview', {
extend: 'Ext.container.Container',
id: 'myview',
alias: 'widget.newComponent',
xtype: 'myview',
items: [
{
xtype: 'combobox',
reference: 'levels',
publishes: 'value',
fieldLabel: 'Options',
displayField: 'val',
valueField: 'val',
queryMode: 'local',
lastQuery: '',
emptyText: 'Please select...',
anyMatch: true,
anchor: '-15',
store: store,
minChars: 0,
typeAhead: true,
triggerAction: 'all',
selectOnFocus:true,
typeAheadDelay: 100,
labelWidth: 100,
labelAlign: 'right',
width: 265,
pageSize: 0,
clearFilterOnBlur: true,
defaultValue: 0,
matchFieldWidth: false,
allowBlank: false,
forceSelection: true,
enableKeyEvents: true,
onTrigger2Click: function (args) {
this.select(this.getStore().getAt(0));
},
listeners: {
select: function (combo, record, eOpts) {
console.log('Select', combo, record, eOpts);
},
change: function (item, newValue, oldValue) {
if (!autoSelec && newValue !== oldValue && !store.isLoading() && item.selection) {
if (newValue) {
selectedText = newValue;
}
store.proxy.extraParams = {
sort: 'clave',
'filter[activo]': true,
'filter[idpadre]': item.selection.data.idelemento
};
store.load({
callback: function () {
var items = store.data.items;
if (items.length) {
console.log('MY STORE >>>', items);
}
autoSelec = true;
}
});
}
}
}
}
],
initComponent: function () {
this.callParent(arguments);
var that = this;
}
});
How can I set the previous chosen item as the selectt item after the store load and therefore not to allow the reload of the store?

I found a solution after of spent all day long of searching and reading. Maybe this could sound very naive, but I'm starting with Extjs.
Here is the solution:
var items = store.data.items;
store.insert(0, mypreviousElement);
item.setValue(items[0]);
item.focus();
from here, item is my combo... this is a callback after store.load, hope this might help.

Related

Make value of combobox blank

I have a piece of code which makes a combobox active when a checkbox is checked. Once the checkbox is checked I can select a value from the combobox. But I want the combobox to return having no value (blank) once the checkbox is unchecked. How do i do that?
My code is as follows:
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkboxfield',
name: 'system',
boxLabel: 'Production (PACTV)',
inputValue: 'production',
listeners: {
change: function (checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
Ext.getCmp('secondComboID').setReadOnly(false);
Ext.getCmp('secondComboID').allowBlank = false;
Ext.getCmp('secondComboID').validate();
} else {
Ext.getCmp('secondComboID').setReadOnly(true);
Ext.getCmp('secondComboID').allowBlank = true;
Ext.getCmp('secondComboID').validate();
}
}
}
}, {
xtype: 'combobox',
fieldLabel: 'Select Test',
readOnly: true,
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Here is a working fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1u9n
Use this in your fiddle when you uncheck the checkbox:
Ext.getCmp('secondComboID').reset();
Use this code to remove the datas from the combo or to load empty array data in the combo
Ext.getCmp('secondComboID').getStore().loadRawData([]);
Also if You wish to load the previous datas again here is an example of it which allows us to toggle to load the datas and to remove datas from combo
Try the FIDDLE

Display combo box when checkbox is checked - Extjs

I have setup a checkbox and a combobox and I am trying to set up a functionality - when a user checks the checkbox the combobox has to appear. I am new to extjs and I am having issues setting up the function for this functionality.
Ext.onReady(function() {
var tests = [
['Test1'],
['Test3'],
['Test2']
];
Ext.define('Testfile.model.Test', {
extend: 'Ext.data.Model',
fields: ['test']
});
var testsStore = new Ext.data.Store({
model: 'Testfile.model.Test',
proxy: {
type: 'memory',
reader: {
type: 'array'
}
},
data: tests
});
var form = Ext.create('Ext.form.Panel', {
renderTo: document.body,
bodyPadding: 10,
width: 550,
style: 'margin:16px',
height: 300,
title: 'Testing example',
items: [{
xtype: 'checkbox',
name: 'system',
boxLabel: 'Production (PACTV)',
iputValue: 'production',
listeners: {
check: function (checkbox, isChecked) {
var sample = Ext.getCmp('secondComboID');
}
}
}, {
xtype: 'combobox'
fieldLabel: 'Select Test',
id: 'secondComboID',
store: testsStore,
valueField: 'id',
displayField: 'test',
typeAhead: true,
forceSelection: true,
allowBlank: false,
editable: true,
triggerAction: 'all',
lastQuery: ''
}]
});
Ext.getBody().add(me.form);
})
Can someone please suggest a fix to the script?
I would use the change event: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox-event-change
listeners: {
change: function(checkbox, newValue, oldValue, eOpts) {
var combo = checkbox.up('form').down('combobox');
if (newValue) {
combo.show();
} else {
combo.hide();
}
}
}
Also, please notice the use of the hierarchy navigation methods up() and down(). Using these (or other related methods) to find the component is much more preferable than using hard-coded component Ids.
Here's a working example of your code: https://fiddle.sencha.com/#fiddle/ua

combobox not allowing to select the value again, once it selected

I am using combobox in my application, it allows me to select the value only single time, when I want to change my selection it does not allow me to select value again. It just open an and goes back. How to resolve this.
Code:
{
xtype:'combobox',
style:'margin:10px;',
fieldLabel: 'M Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
store: GroupStore,
valueField:'value',
displayField:'name',
multiSelect: false,
name: 'GroupId',
id:'MGroupId',
queryMode: 'local',
triggerAction: 'all',
//disabled:true,
emptyText:'Select Group',
listeners: {
expand : function(field, eOpts)
{
if(isFirst) {
inputJson.Unit.id = Id;
this.getStore().load({
params: {jsonData: Ext.encode(inputJson)}
});
Ext.getCmp('MGroupId').setDisabled(false);
Ext.getCmp('MGroupId').setVisible(true);
}else{
Ext.getCmp('MGroupId').setDisabled(true);
Ext.getCmp('MGroupId').setVisible(false);
}
},
select: function(combo, record, index) {
this.getStore().each(function(r){
if(combo.getValue() == r.data['value'])
{
MGroupName = r.data['name'];
}
});
}

Loading appears when I click on combobox, how to avoid it?

I have 2 combobox, when i click on second combobox the loading appears and it remain there till I click on list item. I dont want loading to appear on second combo.
I have 2 combobox, when i click on second combobox the loading appears and it remain there till I click on list item. I dont want loading to appear on second combo.
var UnitPanel = Ext.create('Ext.panel.Panel', {
itemId:'dsUnitPanel',
border:0,
items:[UnitGrid,{
xtype:'combobox',
tpl: '<tpl for="."><div class="x-boundlist-item" >{name} [{freeSize} GB Free] </div></tpl>',
style:'margin:10px;',
fieldLabel: 'A Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
store: dsAStore,
valueField:'name',
displayField:'name',
//forceSelection: true,
multiSelect: false,
name: 'txtMode',
id:'dsVolumeGroupId',
queryMode: 'local',
triggerAction: 'all',
emptyText:'Select A Group',
listeners: {
select: function(combo, record, index) {
this.getStore().each(function(r){
if(combo.getValue() == r.data['name'])
{
selectedDsVg = combo.getValue();
selectedDsVgFreeSize = r.data['freeSize'];
}
});
} ,
'focus':function()
{
if(selectedDsWizardIndex == null)
{
Ext.MessageBox.alert('Error', 'Please select at least one Array',function(){
enableTabIndexing();
});
}
}
}
},
{
xtype:'combobox',
style:'margin:10px;',
fieldLabel: 'B Group(*)',
editable:false,
bodyStyle:'padding-left:10px;',
loadMask: false,
store: BGroupStore,
valueField:'value',
displayField:'name',
multiSelect: false,
name: 'dsBGroupId',
id:'dsBGroupId',
queryMode: 'local',
triggerAction: 'all',
//disabled:true,
emptyText:'Select B Group',
listeners: {
select: function(combo, record, index) {
//store.on('load', function () { this.getPicker().setLoading(false); }, this);
this.getStore().loadMask.hide();
this.getStore().each(function(r){
if(combo.getValue() == r.data['value'])
{
alert('Select');
bGroupName = r.data['name'];
}
});
},
'focus':function()
{
if(selectedDsWizardIndex == null)
{
Ext.MessageBox.alert('Error', 'Please select at least one',function(){
enableTabIndexing();
});
}
}
}
}
Please suggest.
You should define a listConfig like:
listConfig: {
loadingText: null,
loadMask: false
}

extjs combo won't stop loading 4.07

I have 3 combo box's. When you click the first box the second box needs to update showing the relevant data. I select the first combo the second box updates perfectly. However if i try the same steps again the second box doesn't stop loading ( see image )
Here is the code from my view
{
xtype: 'combobox',
name: 'Clients',
id: 'clients',
displayField: 'Name',
store: 'Clients',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Clients'
},{
xtype: 'combobox',
name: 'Projects',
id: 'projects',
displayField: 'Name',
editable: false,
store: 'Projects',
queryMode: 'local',
mode: 'local',
valueField: 'Id',
fieldLabel: 'Projects'
}
and from my controller
stores: ['Projects', 'Clients', 'Jobs'],
init: function () {
this.control({
'#clients': {
change: this.onClientSelect
},
'processlist button[action=copy]': {
click: this.onCopyPart
},
'#processColourContainer #processColourGrid': {
edit: this.onPurchaseOrderColourUpdate
}
});
},
onLaunch: function () {
var clients = this.getClientsStore();
clients.load();
},
onClientSelect: function (selModel, selection) {
var projects = this.getProjectsStore();
projects.load({
url: '/Projects/Read/?clientId=' + selection,
scope: this
});
},
Known bug:
http://www.sencha.com/forum/showthread.php?153490-Combo-Box-Store-Loading
Adding this should sort it out:
store.on('load', function (store, records, successful, options) {
if (successful && Ext.typeOf(combo.getPicker().loadMask) !== "boolean") {
combo.getPicker().loadMask.hide();
}
});
I had the same symptom with a local data store with ExtJS Combobox, but the correct fix was to set queryMode properly in the combo box - there's no bug in the store (at least in 4.1 version of ExtJS). queryMode must be set to "local" instead of its default "remote" value, if your data is stored locally within the data store (as in my working example below).
ComboBox:
xtype: 'combobox',
name: 'sizeMaxUnits',
value: 'TB',
editable: false,
displayField: 'abbr',
**queryMode: 'local',**
store: 'UnitsStore',
valueField: 'units'
Store:
Ext.define('DiskApp.store.UnitsStore', {
extend: 'Ext.data.Store',
requires: [
'DiskApp.model.UnitsModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
model: 'DiskApp.model.UnitsModel',
storeId: 'MyStore',
data: [
{
abbr: 'MB',
units: 'M'
},
{
abbr: 'GB',
units: 'G'
},
{
abbr: 'TB',
units: 'T'
}
]
}, cfg)]);
}
});
I found that hooking into the 'expand' event on the combo worked better (hooking into 'load' on the store somehow destroyed the binding of the combo to the store, causing all sorts of horrible, hard to track down errors).
combo.on('expand', function (field, options) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
}, this);
This did the job for me without breaking my application.
A really simple solution is to add the listConfig config to your combo box:
{
xtype:'combobox',
fieldLabel: 'My Combo',
listConfig: { loadingText: null, loadMask: false },
}

Resources