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

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
}

Related

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

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.

Cannot disable combo selects first value

I have a combo like below.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Label',
allowBlank: true,
maxLength: 50,
minChars: 10000,
name: 'txt',
id: 'txt',
store: states,
displayField: 'name',
selectOnFocus: false,
forceSelection: false,
typeAhead: false,
autoSelect: false,
queryMode: 'local',
triggerAction: 'all',
hideTrigger: true,
listeners: {
beforequery: function (record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = false;
},
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
doProcess();
}
}
},
renderTo: Ext.getBody()
});
My purpose to provide is building a textbox that remember history. I've searched and found this solution: You must use combo like textfield.
No problem so far.
But when I write something and select record from list that searched before, the next time combo selects it automatically while I write.
I'm not sure if I explained.
You can test it here: https://fiddle.sencha.com/#view/editor&fiddle/28tl
Regards.
You can set the trackOver boundlist config to false like so:
xtype: 'combo',
...
listConfig: {
trackOver: false
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2945
Try with "tagfield". Check here
Hi I've solved my problem like below.
https://fiddle.sencha.com/#view/editor&fiddle/28tl
This example tells me more clear than my question.
Ext.application({
name: 'Fiddle',
launch: function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Label',
allowBlank: true,
maxLength: 50,
minChars: 10000,
name: 'txt',
id: 'txt',
store: states,
displayField: 'name',
selectOnFocus: false,
forceSelection: false,
typeAhead: false,
autoSelect: false,
queryMode: 'local',
triggerAction: 'all',
hideTrigger: true,
enableKeyEvents: true
,
listConfig: {
listeners: {
itemclick: function (list, record) {
_iseFareIleSecildi = true;
},
highlightitem: function (view, node, eOpts) {
_iseKlavyeIleSecildi = true;
}
}
},
listeners: {
beforequery: function (record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = false;
Ext.defer(function () {
secimiSifirla();
}, 30);
},
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
console.log('action');
}
},
keyup: function (combo, e) {
if (e.getKey() == e.ENTER) {
console.log('action');
}
},
beforeselect: function (combo, record, index, eOpts) {
if (_iseFareIleSecildi) {
secimiSifirla();
return true;
} else {
if (_iseKlavyeIleSecildi) {
secimiSifirla();
return true;
} else {
return false;
}
}
}
},
renderTo: Ext.getBody()
});
}
});
var _iseFareIleSecildi = false;
var _iseKlavyeIleSecildi = false;
function secimiSifirla() {
_iseFareIleSecildi = false;
_iseKlavyeIleSecildi = false;
}
Regards.

Editor: single click for combobox, double click for textField

I have tree panel, that has the cell editing plugin:
plugins = {
ptype: 'cellediting',
clicksToEdit: 1
};
And I want to achieve the following scenario: if there is a single click on a node, the editor should be a combobox, if double click - editor should be a textfield. How can I implement this?
This is my function from the controller:
getEditor: function (record) {
if (dblclick) {
Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('combo', {
editable: false,
allowBlank: false,
flex: 1,
queryMode: 'local',
store: App.store.Goods,
displayField: 'name',
valueField: 'id'
})
});
};
if (singleClick) {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.widget('textfield', {
selectOnFocus: true,
maxLength: 20,
enforceMaxLength: true
})
});
}
return;
},

hide combo box value when already selected extjs

I have 2 combo box inside grid. The second combo box value will be change base on first combo box.
For example the combo has 3 item : America, Europe, Asia. If in the first combo box Europe is selected, then in the second combo box, Europe is not appear again.
I don't know which version of extjs I used, but here's the code :
MY COMBO STORE
var cb_group = Ext.create('Ext.data.Store', {
model: 'cb_group',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'srv/master/group/combo',
reader: {
type: 'json',
root: 'rows'
}
}
});
MY COMBO INSIDE GRID
var set_approval_dtl = Ext.create('Ext.Window', {
title: title_approval2, width: 850, height: 395, rowdblclick: true, forceFit: true,
closeAction: "hide", store: ms_set_approval_dtl_store,
defaults: {
sortable: true, resizable: false
},
items: [
{xtype: "form", items: [
{layout: 'column', columnWidth: .5, itemId: 'set_approve', defaults: {border: false},
items: [{xtype: "panel", itemId: "set_approve_panel", height: 330, defaultType: 'textfield', margin: '0 10px 0 10px',
defaults: {labelWidth: 120, width: 850, maxLength: 200},
items: [
{xtype: "grid", itemId: "grid_items", width: 782, height: 280, margin: '0 10px 10px 10px', autoScroll: true,
plugins: Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1, pluginId: 'rowEditing'}),
store: ms_set_approval_dtl_store, stripeRows: true, defaultType: "gridcolumn",
viewConfig: {forceFit: true},
columns: [
{header: grid18j, width: 150, dataIndex: 'nm_act', align: 'center'},
{header: subtitle_approval3, width: 126, dataIndex: 'level1', align: 'center',
editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr1", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
listeners: {
expand: function(field, options, val) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
},
select: function(value) {
var obj = this.lastSelection[0].data;
return obj.nm;
this.lastSelection[0].hide;
cb_group.removeAt(0);
}
}},
renderer: function(val) {
var index = cb_group.findExact('id', val);
if (index !== -1) {
var rs = cb_group.getAt(index).data;
return rs.nm;
}
}
},
{header: subtitle_approval4, width: 126, dataIndex: 'level2', align: 'center', itemId: "level2",
editor: {xtype: "combobox", name: "cdgr", itemId: "cdgr2", typeAhead: true, editable: false, triggerAction: "all", forceSelection: true,
emptyText: grid8k, store: cb_group, valueField: "id", displayField: "nm",
listeners: {
expand: function(field, options) {
if (Ext.typeOf(field.getPicker().loadMask) !== "boolean") {
field.getPicker().loadMask.hide();
}
}
}
},
select: function(value) {
var obj = this.lastSelection[0].data;
return obj.nm;
},
renderer: function(val) {
var index = cb_group.findExact('id', val);
if (index !== -1) {
var rs = cb_group.getAt(index).data;
return rs.nm;
}
}
}]
}]}
]}]}
]});
I've tried this.lastSelection[0].hide; and cb_group.removeAt(0); in the first combo. But it didn't work at all. And I dont know why my select listener is not working.
please share some solution. Thanks
You can use XTemplates to manage this kind of behavior with one store and two comboboxes.
At first you have to create an XTemplate for your list of items in the combobox:
// displayfield = displayfield configured in your combobox
var template = Ext.create('Ext.XTemplate',
'<tpl for=".">',
' <tpl if="[Ext.getCmp(\'combobox1\').getValue()] != id && [Ext.getCmp(\'combobox2\').getValue()] != id">',
' <div class="x-boundlist-item">{label}</div>',
' <tpl else>',
' <tpl if="id == null || id == \'\'">',
' <div class="x-boundlist-item">{label}</div>',
' <tpl else>',
' <div class="x-boundlist-item" style="font-size:0px; height:0px;"></div>',
' </tpl>',
' </tpl>',
'</tpl>'
);
The XTemplate contains some statements to check if the specific value is already selected in one of the comboboxes. If not, then the entry will appear in the dropdown list, otherwise it will be hidden. To make it work, you have to set the template in your combobox and add some listeners to them:
// Combobox 1
{
xtype: 'combo',
id: 'combobox1',
store: 'your_store',
tpl: template,
displayField: 'label',
valueField: 'id',
listeners: {
beforeSelect: function (combo, record, index, eOpts)
{
// Check if the selected value is already selected in combobox2
var cbx2value = !!Ext.getCmp('combobox2').getValue() ? Ext.getCmp('combobox2').getValue() : '';
if (cbx2value != record.get('id') && cbx2value != record.get('id')) {
return true; // selected entry will be selected successfully
} else {
return false; // selected entry will not be selected
}
},
change: function ()
{
// Get the picker (list of items) of the other combobox and refresh it's template state
var cbx2picker = Ext.getCmp('combobox2').getPicker();
cbx2picker.refresh();
}
}
// Combobox 2
{
xtype: 'combo',
id: 'combobox2',
store: 'your_store',
tpl: template,
displayField: 'label',
valueField: 'id',
listeners: {
beforeSelect: function (combo, record, index, eOpts)
{
// Check if the selected value is already selected in combobox2
var cbx1value = !!Ext.getCmp('combobox1').getValue() ? Ext.getCmp('combobox1').getValue() : '';
if (cbx1value != record.get('id') && cbx1value != record.get('id')) {
return true; // selected entry will be selected successfully
} else {
return false; // selected entry will not be selected
}
},
change: function ()
{
// Get the picker (list of items) of the other combobox and refresh it's template state
var cbx1picker = Ext.getCmp('combobox1').getPicker();
cbx1picker.refresh();
}
}
It's not the ultimate solution, but for one of my projects it worked like a charm. I have simplified the example as good as possible to make the solution clearer.
You will need two stores, one for each combo box, both filled with the same data.
And then you will do:
combo1.on('select',function(combo, newVal) {
combo2.getStore().filterBy(function(rec){
return rec.get("value")!=newVal;
})
});

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'];
}
});
}

Resources