I am using extjs 4.0.7. I want to disabled tab and Enter key event when user using Combobox. I have tried to use keyUp and KeyDown event. But I didn't get any alert for it.
Here is my code:
{
xtype: 'combo',
store: ds,
id:'UserBO_SelectComponentId',
displayField: 'displayName',
valueField: 'userId',
typeAhead: false,
hideLabel: true,
disabled: false,
hideTrigger:true,
multiSelect:true,
delimiter: ";",
anchor: '100%',
triggerAction: 'all',
listeners: {
change: function( comboField, newValue, oldValue, eOpts ){
selectUserCallBack2(newValue,'UserBO_SelectComponentId',comboField,oldValue);
},
select:function(comboField,oldValue){
testRec(comboField,oldValue)
},
keypress:function(comboField,e){
disabledKeysOnKeyup(comboField,e)
}
},
listConfig: {
loadingText: 'Searching...',
enableKeyEvents: true,
emptyText: 'No matching posts found.'
},
pageSize: 10
}
Can anyone please suggest what is the problem here?
The keyup, keydown and keypressed events only fire if enableKeyEvents is set to true. Default this is set to false, so you need to add enableKeyEvents:true to the combobox config. And then do special treatment for enter and tab key.
You don't need to listen to key events and tab into that. What you want to do is set autoSelect to false. It's true by default. When set to false the user has to manually highlight an item before pressing the enter or tab key to select it (unless the value of typeAhead were true), or use the mouse to select a value.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox-cfg-autoSelect
Related
For some reason fullcalendar doesnt add fc-h-event class to events in my "dayGridMonth" view:
which ends up looking bad:
(the second event)
here are my options:
this.calendarOptions = {
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
locale: gbrLocale,
initialView: "dayGridMonth",
headerToolbar: {
start: "",
center: "",
end: ""
},
selectable: true,
events: this.fetchEvents,
editable: true,
showNonCurrentDates: false,
eventResizableFromStart: true,
dragScroll: true,
dayMaxEvents: 2,
navLinks: true,
dateClick: this.openAddNewEvent,
eventClick: this.openEditEvent,
eventDrop: this.eventDrop,
eventResize: this.eventResize
};
Any idea how to add this class in this view, or can u see mistake in my options?
It should be a normal behaviour where full day event is highlighted while time range event is marked with circle dot.
Here is the Codesandbox example with 2 types of event.
https://codesandbox.io/s/zen-darkness-fyfrz?file=/src/components/Calendar.vue
I was looking for option:
eventDisplay: "block"
Documentation: https://fullcalendar.io/docs/eventDisplay
I am able to display radio buttons using bootbox prompt. But I am not getting the checked radio button by default. How to do that . Here is my code to displaying radio buttons.
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
I have added checked: true, and tried with checked : "checked" , but not sure these both not working . Any help would be greatly appreciated.
This is actually covered in the documentation, here. I've also answered this previously, but since I don't have a link to that answer at the moment, this is what you need to do:
bootbox.prompt({
title: "This is a prompt with a set of Radiobutton inputs!",
inputType: 'radio',
value: '1', /* value sets the initial checked item */
inputOptions: [
{
text: 'EU Format',
value: '1',
checked: true,
},
{
text: 'Standard Format',
value: '2',
}
],
callback: function (result) {
console.log(result);
}
});
The only difference between radiobuttons and checkboxes is that you can only set a single value with radios. NOTE THAT THE TYPES MUST MATCH. In your example, '1' would work, but 1 would not, since the former is a string, whereas the latter is a number. We don't do any explicit type coercion when checking the value attribute.
Since you're referencing the radio type, I assume you're using the 5.x version? If so, I have a work-in-progress update to the docs here, until I can push the 5.x version out. The old docs are still valid, but it (obviously?) doesn't document some of the new features.
sencha touch select field change event not firing if store has duplicate names
suppose my data looks like
options: [{
text: 'Sencha Touch',
value: 'extjs'
}, {
text: 'Sencha Touch',
value: 'senchatouch'
}, {
text: 'Sencha Animator',
value: 'animator'
}, {
text: 'Sencha Designer',
value: 'designer'
}], // options
for the above code the change event not fired for same text
help me?
change event only fires when the new value is actually different from the old value. Not just for select fields, but for all field.
I am using extjs 4.0.7. I have a requirement wherein I have two combo boxes in the edit mode of a grid and I need to change the data in the second based on the value selected in the first one.
I am using MVC architecture for extjs and a java code that returns json string to populate data in the combo boxes. The code for my first combo box is:
view file:
items: [{
id: 'country',
header: 'Countries',
field: {
xtype: 'combo',
store: [
["USA","USA"],
["India","India"],
],
editable: false,
allowBlank: false,
listeners: {
select: function(combo, records, eOpts){
contactTypeGrid = combo.getValue();
myGrid.fireEvent('LoadStateOnSelect');
}
}
}
},
{
id: 'states',
header: 'Sates',
dataIndex: 'states',
field: {
xtype: 'combo',
store: 'StateStore',
valueField: 'stateDesc',
displayField: 'stateText',
}
}, ....
]
controller:
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
stateStore.load();
},
However, when I run this code, the data in the second store changes in the background but a Loading mask continues to appear in front due to which I cannot select any value.
How should I resolve the issue of connditional data load? Any help will be much appreciated.
Have you tried clearing the selected value in the combobox before reloading the store? You could try calling the clearValue() method on the combo.
I have a temporary fix for this. However, I am still looking for a solution that is more stable and workable.
Solution:
Whenever changing the data in the dependant store you could expand the combo box which loads the new data correctly.
LoadStateOnSelect: function(){
contactTypeGrid = contactTypeGrid.toLowerCase();
var stateStore = this.getStateStoreStore();
stateStore.getProxy().url = "myURL.do";
stateStore.getProxy().extraParams.act = contactTypeGrid;
statesCombo.expand(); //Here I am assuming that "statesCombo" has a
//reference to the dependant combo box.
stateStore.load();
},
This might save somebody else's time however, In case somebody finds a more viable solution, please let me know as well.
carStore- any store for main combo
carModelStore - store, the content of which should be depended on selection in the carStore
Consider more general and useful example when data is getting from server.
var carModelStore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'car-model'],
root: 'rows'
}),
storeId: 'car-model-store',
proxy: new Ext.data.HttpProxy({
url: 'carmodeldataprovider.json?car-name=lamborghini'
}),
autoLoad: true
});
{ xtype: 'combo', name: 'car-name', fieldLabel: 'Car', mode: 'local', store: carStore, triggerAction: 'all',
listeners: {
select: function(combo, records, eOpts){
var carName = records.get('car-name');
var carModelStore = Ext.StoreMgr.lookup("car-model-store");
carModelStore.proxy.setUrl('carmodeldataprovider.json?car-name=' + carName, false);
carModelStore.reload();
}
}
}
Here's my combobox in my grid:
{
id: 'PotentialforInsourcingKV',
header: 'Potential for Insourcing',
width: 30,
sortable: true,
dataIndex: 'POTENTIAL_FOR_INSOURCING',
flex: 1,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['1', 'Yes'],
['0', 'No']
],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners:{
scope: this,
'select': function(combo, rec, idx){
onUpdateClick(combo, rec, idx)
}
}
}
},
the 'select' comes up with nothing? My grid is created by extending EXT.panel.Panel when I define the class. I'm using the cellEditing plugin. In the grid, selModel: 'cellediting' is set. What can I do?
Thanks in advance!
DS
Here you put the combobox in editor that's why now it will be controlled by cell editor. so you can validate your combo box value by following events of cell editor plugin
Events-->
beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )
Fires before cell editing is triggered. ...
edit( Ext.grid.plugin.Editing editor, Object e, Object options )
Fires after a cell is edited. ...
validateedit( Ext.grid.plugin.Editing editor, Object e, Object options )
Fires after a cell is edited, but before the value is set in the record. ...
& you can find it in more detail from here....
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.plugin.CellEditing