Whenever I choose an item from the combobox, the combobox goes up on the screen. It only disappear when I move on the second column or do anything. It is quite annoying. How do I make it fixed on the grid? Is this a bug? Here is my code:
{
header: "Description",
sortable: false,
width: 250,
renderTo: Ext.getBody(),
editor: new Ext.form.field.ComboBox( {
enableKeyEvents:true,
typeAhead: true,
typeAheadDelay: 100,
queryMode: 'local',
forceSelection: true,
selectOnTab: true,
queryDelay : 100,
store : aob_store_inventory,
valueField: 'InvDescription',
displayField: 'InvDescription',
triggerAction: 'all',
editable : true,
listeners: {
select: function(combo, record, index) {
store_aobdetails.data.items[aob_sel_rec].data.InvID = record[0].data.InvID;
store_aobdetails.commitChanges();
combo.up('grid').getView().refresh();
}
}
}),
dataIndex: 'InvDescription'
}
fixed it by removing the code:
combo.up('grid').getView().refresh();
Related
I have the following components of a form in Ext JS, these two components are combobox and need that when the first combobox (type_sector) is selected, then enable the second combobox (main_sector).
{
xtype: 'combobox',
name: 'type_sector',
fieldLabel: 'Setor',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
flex: 1,
margin: { left: 3 },
store: 'EconomicActivityType',
width: 80,
editable: false,
queryMode: 'local',
},
{
xtype: 'combobox',
name: 'main_sector',
fieldLabel: 'Principal',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
margin: { left: 3},
store: 'EconomicActivityType',
inputWidth: 200,
editable: true,
queryMode: 'local',
}
I want to build a function that if combobox value (type_sector) equals x per example, enable combobox (main_sector), otherwise it is hidden / disabled. How can I do this inside a form in Ext JS?
I'm trying to do it this way:
{
xtype: 'combobox',
name: 'type_sector',
fieldLabel: 'Setor',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
flex: 1,
margin: { left: 3 },
store: 'EconomicActivityType',
width: 80,
editable: false,
queryMode: 'local',
id: "type_sector_combo",
listeners:{select:{fn:function() {
if (this.getComponent('type_sector_combo').value == "sector"){
this.getComponent('main_sector_combo').disable = false;
}
}}}
},
{
xtype: 'combobox',
name: 'main_sector',
fieldLabel: 'Principal',
displayField: 'name',
valueField: 'id',
labelAlign: 'top',
margin: { left: 3},
store: 'EconomicActivityType',
inputWidth: 120,
editable: true,
queryMode: 'local',
id: "main_sector_combo",
disabled: true
}
Create listener on type_sector combo for select event https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#event-select then inside it use setDisabled method https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.ComboBox.html#placeholder-setDisabled to set state for main_sector combo
Try setting the properties forceSelection and selectOnTab to false
forceSelection:false,
selectOnTab: false
I'm a beginner on js and ExtJS 3.4, I'm trying to use Ext.form.ComboBoxin a Ext.window to show the list of js objects (layers).
The problem is when I create the window the first time and I click on the combobox trigger I get my layers list correctly, but when I remove or add a layer and I click again on the trigger the store don't update and I find the same list.
Can you please help me to find a solution to this problem, for example when I click on the trigger it will update and load the new list store ?
Any suggestion is welcome.
CODE SNIPPET
// The "ImageField" is an item witch is called on the return of the methode "createWindow" ...
createWindow: function() {
ImageField = new Ext.form.ComboBox(Ext.apply({
name: "Image_ref",
fieldLabel: "Image Input (Required)",
emptyText: "Select your Image",
xtype: 'combo',
forceSelection: true,
editable: true,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
valueField: 'value',
displayField: 'text',
labelWidth: 300
width: 250,
id: 'myCombo',
hideLabel: false,
lazyRender: false,
lazyInit: false,
mode: 'local',
triggerAction: 'all',
store: new Ext.data.SimpleStore({
autoLoad: true,
autoDestroy: true,
fields: ['text', 'value'],
data: layer_liste_WCS // is a liste of js objects
}),
listeners: {
beforequery: function(qe) {
// console.log(qe);
qe.cancel = true;
addComboxFieldItemsWCS(); // Run this methode to get "layer_liste_WCS" witch is liste of data
var actionComboBox = Ext.getCmp('myCombo');
.
.
.
.
.
.
// I don't know how to do to reload the store after runing the methode "addComboxFieldItemsWCS"
}
}
}, base));
return new Ext.Window({
closable: true,
resizable: false,
shadow: false,
closeAction: 'hide',
region: "center", //"north","south","east","west"
width: 480,
height: 190,
iconCls: 'wind_icon',
plain: true,
layout: 'border',
buttonAlign: 'right',
layout: 'fit',
listeners: {
show: function() {
this.el.setStyle('left', '');
this.el.setStyle('top', '');
}
},
items: [{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
width: 50,
height: 20,
items: [{ // we will declare 3 tabs
title: 'Datas Inputs',
closable: false,
iconCls: 'input_icon',
active: true,
items: [{
xtype: 'form',
autoWidth: true,
labelWidth: 185,
bodyStyle: "padding:10px;",
items: [
ImageField,
]
}]
}]
}],
});
},
I'm late for the answer but I take a chance.
Do you have an ajax call in addComboxFieldItemsWCS?
Put this code on your callback if you can:
Ext.getCmp('myCombo').getStore().loadData(layer_liste_WCS, false);
For your information, The false parameter is to replace existing data.
Hope this help.
I am new in ExtJS and now I am making an editable grid with a combox column. I am having a problem in displaying my chosen data from the combobox. May someone help me. Screenshot is provided below.
Link provided.. :))
My combobox code...
Data:
var farms = new Ext.data.ArrayStore({
fields: ['id', 'farms'],
data : [
['1', 'DVZ'],
['2', 'SSK'],
['3', 'LNA'],
['4', 'NSK']
]
});
Combobox..
header : 'Location',
width : 130,
fixed : true,
hideable : false,
dataIndex: 'farms',
editor : {xtype:'combo',
store: farms,
displayField:'farms',
valueField: 'id',
queryMode: 'local',
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
emptyText: 'Select location...',
autoload: true
}
it's might be that your dataindex value in grid config, not same like you value field in combobox config
for example, look at this config on "Responsible" field
columns: [
{ header: 'ID', dataIndex: 'id', width: 50, hidden: true, sortable: true },
{header: 'Responsible',
width: 175,
sortable: true,
renderer: title_respU_D1,
dataIndex: 'resp_user_name'
,editor: new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: app_responsibleStore,
mode: 'remote',
valueField: 'resp_user_name',
displayField: 'resp_user_name',
listClass: 'x-combo-list-small'
})
}
]
You may be missing some "config" in editor config of items in grid panel.
I hope you may missed typeAhead config.
Please refer below link of sencha example
http://docs.sencha.com/extjs/4.0.7/extjs-build/examples/grid/cell-editing.html
Thanks.
In the ExtJS 3.3.1, I tried to make comboBox to multi select , but it doesn't work.
Please help.
var mArray = new Array("ALL", "AAA", "BBB");
var mCombo = new Ext.form.ComboBox({ id: 'ID', fieldLabel: 'ID',
triggerAction: 'all',
height: 100, width: 163,
multiSelect: true,
store: mArray
});
Ext.getCmp('mCombo').setValue("ALL");
There isn't a config option like multiSelect in Ext.form.ComboBox.
To get desired functionality you either need to develop a multiselect combobox by your own or use one of existing alternatives, like Ext.ux.form.CheckboxCombo, Ext.ux.form.SuperBoxSelect and Ext.ux.form.LovCombo.
return new Ext.form.ComboBox({
fieldLabel: fieldLabel,
hiddenName: name,
store: store ,
valueField:'value',
displayField:'value',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select '+fieldLabel+' ...',
selectOnFocus:true,
allowBlank:allowBlank,
forceSelection : true,
disabled:disabled,
multiSelect:true,
width:200,
id:id,
listeners:{
change : function( frm, newValue, oldValue ) {
doRenderTL();
}
},
renderTo: Ext.get( renderTo )
});
I have a combo B that gets loaded by other combo A (triggered by 'select' listener)
once B is populated, I see all items but now from drop-down in Combo B,
I'm force to select the first item with mouse
I can select other item only by typing
Please help!!!!
code for Combo A
{
xtype: 'combo',
displayField: 'value',
emptyText: 'Please select A first',
fieldLabel: 'Combo A',
id: 'comboA',
maxHeight: 240,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
typeAheadDelay: 100,
valueField: 'id',
store: new Ext.data.JsonStore({
url: '/cgi-bin/server.cgi',
fields: ['id', 'name'],
baseParams: {
action: 'getAList'
},
autoLoad: true,
root: 'aList'
}),
listeners: {
'select': {
fn: function(){
var comboB = Ext.getCmp('comboB');
comboB.clearValue();
comboB.store.removeAll();
comboB.store.reload({
params: {
id: this.getValue()
}
})
}
}
}
}
Code for combo B:
{
xtype: 'combo',
displayField: 'item',
editable: true,
emptyText: 'Select a Combo A first',
fieldLabel: 'Combo B',
id: 'comboB',
lazyInit: true,
maxHeight: 240,
mode: 'local',
triggerAction: 'all',
typeAhead: true,
valueField: 'id',
width: 220,
store: new Ext.data.JsonStore({
url: '/cgi-bin/server.cgi',
root: 'bList',
autoLoad: false,
fields: ['id,', 'item'],
baseParams: {
action: 'getBList'
},
listeners: {
'beforeload': function(){
Ext.getCmp('comboB').disable();
},
'load': function(){
Ext.getCmp('comboB').enable();
}
}
})
}
Not sure what exactly is wrong here but I suspect this piece in your comboA is not getting fired as expected -
comboB.store.reload({
params: {
id: this.getValue()
}
})
So comboB is still disabled. when you click on the comboB trigger, it loads the store and the comboB's store's load listener is kicking in as expected to enable the combo.
Try putting some debug statements or stepping through the piece of code above.