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'];
}
});
}
Related
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.
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
I'm trying to edit a combobox value. But what happens is when I click a grid cell the old value disappears I want to keep a the and also avoid the user to select the values form the combo box itself and not values other than those in the drop down
How can i achieve these two things.
{
text: 'Food Items',
xtype: 'gridcolumn',
dataIndex: 'food_lister',
flex: 1,
renderer: function (value) {
console.log()
if (Ext.isNumber(value)) {
var store = this.getEditor().getStore();
return store.findRecord('foodid', value).get('fooddescp');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "fooddescp",
valueField: "foodid",
queryMode: 'local',
mapperId: 'getfooddescrip',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('foodgrid[itemId=fooditemgrid]').getSelectionModel().selection.record.data.foodname.trim();
this.store.clearFilter();
//this.store.filter('call',call);
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}
Use editable : false in combo check the updated example
click here
Edit: As per your comment if you still want to use editable true and restric the value other than the store you have to handle it in cell editing event validateedit
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
validateedit: function( editor, context, eOpts ){
var store = context.column.getEditor().store,
record = context.record;
if(store.find('id',context.value) === -1){
context.cancel = true;
}
}
}
}
Above code is based on my example. Please check running example in my fiddle
I have a combo box and I want get id of first record from server by alert(combo.store.data[0].id); But it's not working
Here is my code
xtype: 'combo',
value: '0',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
......
,listeners: {
'afterrender': function(combo){
alert(combo.store.data[0].id);
}
}
How can i do that thanks.
Probably you are missing something.
combo.store.getAt(0).data.id
Try this.
Inside combobox listeners "afterrender" :
var getState = combo.getState(), //get current combobox state
comboState = parseFloat(getState.value) - 1,
comboStore = combo.store;
comboStore.on("load", function(s,rs) {
comboStore.each(function(record, key) {
if( key == comboState){
//console.log(record);
alert(record.data.id);
}
});
});
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
}