I have a Ext.form.DateField:
new Ext.form.DateField({
id: 'date_from',
format: 'd/m/Y',
editable: false,
listeners: {
change: function (t,n,o) {
console.log('dsd');
}
}
})
However unfortunately the change event does not seem to be executed.
I have also tried:
new Ext.form.DateField({
id: 'date_from',
format: 'd/m/Y',
editable: false,
change: function (t,n,o) {
console.log('dsd');
}
})
However also to no avail. Any advice appreciated.
Thanks
The change event only fires on blur. If you are trying to handle any date selection use the select event instead (in ExtJS 3.4).
And the first way is the correct way to add listeners.
you can change it into :
new Ext.form.DateField({
id: 'date_from',
format: 'd/m/Y',
editable: false,
listeners: {
update: {
fn:function(){
console.log('dsd');
}
}
}
})
If you are selecting using calendar icon then add select listener
if you are clearing datefield using backspace keys then add change listener
Related
I need spellcheck in an extjs textfield. A textarea doesn't work because I need it to only allow a user to enter a single line of input - no enter key. Any way to enable spellcheck for the textfield?
I found a way to get around the single line requirement and use a textarea, which by default uses spellcheck. To force the textarea to be a single line add this to your textarea:
xtype: 'textarea',
grow: true,
growMax: 32,
enableKeyEvents: true,
listeneters: {
keydown: 'disableNewLine'
}
And in your controller, add the function to disable the new line.
disableNewLine: function(textarea, e, eOpt) {
if(e.keyCode == 13) {
e.stopEvent();
}
}
This prevents the user from adding a new line to their input just like a textfield would, but utilizes spellcheck. Also, 32 is the default height of a textfield, so it looks the exact same. Just setting the height doesn't work, the default seems to override that.
You can add it after the component is rendered.
Also make sure the browser you are using supports spell check.
http://caniuse.com/#search=spellcheck
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"spellcheck": 'true'
});
}
}
}
see api
inputAttrTpl: 'autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"'
It works fine under safari!
This override worked fine for me with ExtJS6 & Chrome:
Ext.define('Ext.overrides.form.field.Text',{
override: 'Ext.form.field.Base',
/**
* Ensure all text fields have spell check disabled
*/
inputAttrTpl: [
'spellcheck=false'
],
constructor: function () {
this.callParent(arguments);
}
});
I'm using instances of a combobox for multiple user interfaces. So I need to reset combobox stores when user focuses on it. Combo's store is locally sorted; so I execute clearFilter() function of Ext.data.Store class - it works as it is expected except that typing query does not work anymore.
Here is my combobox configuration:
forceSelection: true,
autoSelect: false,
typeAhead: false,
triggerAction: 'all'
Store configuration:
autoLoad: false,
autoSync: false,
remoteSort: false,
proxy: {
type: 'ajax'
// other configs
}
Edit: fiddle
Note: Store of combobox used in fiddle is populated with static data when the original one uses an AJAX proxy
I think i solved your problem by looking at this post:
ExtJs: Search / Filter within a ComboBox
Adding a custom filter on each keystroke on the combobox seems to resolve your issue:
enableKeyEvents:true,
listeners: {
'keyup': function() {
this.getStore().clearFilter();
this.getStore().filter('name', this.getRawValue(), true, false);
},
'beforequery': function(queryEvent) {
queryEvent.combo.onLoad();
}
}
It is not beautiful, but i think it works. Take a look at this extended fiddle:
https://fiddle.sencha.com/#fiddle/teg
As I understand from your fiddle, you have trouble that implementing filter to different comboboxes. I think the problem you currently use same store for comboboxes. That's why you should also change the store for each combobox. Add this code to your fiddle.
combo1.getStore().filter('nationality', 'USA');
container.on('tabchange', function(tabpanel, newCard, oldCard, eOpts) {
combo2.getStore().clearFilter();
combo1.getStore().filter('nationality', 'USA');
if (combo2.getValue()) {
combo1.getStore().clearFilter();
combo1.getStore().filter('userId', combo2.getValue())
}
});
Btw, I put the filter before tabchange event because of static store. But, you might want to add the filter store listener if you use proxy(AJAX) store. Like this:
listeners: {
load: function(store, records) {
store.filter('nationality', 'USA');
}
}
Edit:
var store = combo1.getStore();
store.filter('nationality', 'USA');
container.on('tabchange', function(tabpanel, newCard, oldCard, eOpts) {
if (newCard.title == 'Panel 1') {
store.clearFilter();
store.filter('nationality', 'USA');
} else if (newCard.title == 'Panel 2') {
store.clearFilter();
// Or whatever filter because you have to change the store
// dynamically if you wanna use same store for different combos
}
});
Hope this helps. Good luck.
I have in my ExtJS 4.2.1 Application a grid with the following editable column:
text: 'Location',
dataIndex: 'LocationId',
width: 140,
renderer: function(value) {
var record = me.store.findRecord('LocationId', value);
return record.get('Description');
},
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
store: Ext.create('App.store.catalog.Location', {
autoLoad: true
}),
displayField: 'Description',
valueField: 'LocationId',
listConfig: {
width: 250,
loadingText: 'Searching...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<b>{Code}</b><br/>(<span style="font-size:0.8em;">{Description}</span>)';
}
}
}
The combo has a renderer to display the Description of the LocationId selected.
Then, my grid has the feature 'Ext.grid.plugin.CellEditing' so I can edit just that column cell.
The problem that I have is when I press the "Update" button, the combo display value returns to the original it used to have, even if the LocationId in the record has the right value.
This is my code that gets fired when the user press the "Update" button.
me.rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor, e) {
var record = e.record;
me.setLoading('Updating...');
App.util.Ajax.request({
noMask: true,
url: '/api/catalog/UpdateEmployeeLocation',
jsonData: record.getData(),
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
if (obj.success) {
// commit changes (no save just clear the dirty icon)
me.getStore().commitChanges();
}
},
callback: function() {
me.setLoading(false);
}
});
}
}
});
The record is saved correctly in my database but the combo display value is not updated with the description that corresponds to the LocationId. If I reload the store from server again then It shows correctly.
So, there is something wrong with the renderer in my column that is not updating the value after I update my record.
Any clue on how to get around this?
Thanks.
You are setting dataIndex as 'LocationId' but no where you are changing the 'LocationId', you are just changing description and updating it in rendered method. Since there no change in 'LocationId', store doesn't consider it as dirty field and hence rendered function is not getting called. One quick and dirty way could be instead of using 'LocationId', create another field in the model say 'LocationIdchangeTraker'. Use 'LocationIdchangeTraker' instead of 'LocationId' in data index. It doesn't not effect your view because you are changing the value in reneerer function. Now whenever you update the function change the value of 'LocationIdchangeTraker' as shown below.
record.set('LocationIdchangeTraker',Ext.getId());
Hello i have the following RowEditing plugin i use
ar rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
errorSummary:false,
onEnterKey: function(e) { console.log(e); },
listeners:{
'beforeedit':function(grid,eOpts){
},
'canceledit':function(grid, eOpts){
if(grid.grid.store.data.getAt(0).data.id == "new"){
grid.grid.store.removeAt(0);
}
},
'afteredit':function(editor, changes, record, rowIndex){
editor.grid.store.reload();
},
'validateedit': handleUpdate{{params.alias}}
}
});
But the enter action is still performed and no console log is performed... i tried to put it inside the listeners as well but no change...
here's my item in my grid
{
header: 'Description',
width: 160,
align: 'left',
dataIndex: 'description',
filters: {
type: 'string'
},
enableKeyEvents: true,
editor: {
xtype: 'textfield',
allowBlank: false,
listeners: {
keydown: {
element: 'el',
fn: function(el){
if (el.ENTER){
alert('test');
return false;
}
}
},
},
}
}
so my next try as to 'disable' the firing of the enter (or submitting the rowedit) inside the field itself. but a return false still submits the form, and a onEnterKey doesn't work there either... anyone has an idea what i am doing wrong?
I did find that onEnterKey is part of the parent Editing class but it doesn't say how i should call that..
First of all, onEnterKey is marked as private, so you shouldn't be overriding it, especially not upon instantiation. If you want to override class methods, you should do that by creating a new class which inherits from the class containing the methods:
Ext.define('My.grid.plugin.Editing', {
extends: 'Ext.grid.plugin.RowEditing',
onEnterKey: function() {
this.callParent(arguments);
// your code here
}
});
Regarding your problem, I suggest one of the following approaches:
A) If you really want to disable the ENTER key event only, you should do that on the editor field(s). Your attempt was close, but the event listener was not doing the right things yet:
editor: {
allowBlank: false,
listeners: {
keydown: function(e){
if (e.getKey() == e.ENTER){
e.stopEvent();
}
}
}
}
Note that with this approach the user will still be able to submit any change by just clicking the "Update" button of the row editing plugin.
B) If you just want to prevent the editing plugin from writing the changes to the store under certain conditions, you can also use the validateedit event on the editing plugin:
listeners: {
validateedit: function(editor, e) {
if (true) { // your condition here
return false;
}
}
}
This will also work, if the user clicks on the "Update" button.
I'm using ExtJS 3 and I need to enable/disable a specific text field when I select/de-select a checkbox, like in the example showed below:
{
fieldLabel: 'myCheckBox'
xtype: 'checkbox',
name: 'myCheckBox'
},{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
disabled: true
}
As I understand it I have to use a listener in 'myCheckBox' like this:
listeners: {
change: function() {
}
}
But I don't know what parameters to pass to my function and how to target 'myTextField' and .enable() .disable() it. Can you please help me? Thank you very much.
Solution based on answers (thank you):
listeners: {
change: function(cb, checked) {
Ext.getCmp('myTextField').setDisabled(!checked);
}
}
and added the id tag to the textfield component like this:
id: 'myTextField'
If you are not sure what to pass as a parameter than Ext.getCmp() gives you the component. It takes id of the component as a parameter. In your case you have to assign id to textfield and can get it on change event as Ext.getCmp('myTextField'). Where myTextField is an id of textfield. Name and Id of a component can be same.
listeners: {
change: function() {
Ext.getCmp('myTextField').disable();
//or
Ext.getCmp('myTextField').enable();
}
}
There are a few ways to reference myTextField. The easiest is probably to give the field a ref (note that this approach does not work in ExtJS 4, where you are better off with a component query):
{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
ref: '../myTextField'
disabled: true
}
Setting the ref will cause the textfield component to be referenced in a property of its owner or one of its ancestors. So then your listener can simply be something like this (the parameters passed to this function are listed in the doc):
change: function(cb, checked) {
me.myTextField.setDisabled(!checked);
}
You might need to tweak the ref path depending on your component hierarchy.
Example:
Using setDisabled API:
theStudentForm.findField('stud_name').setDisabled(true);
Using setOpacity API:
theStudentForm.findField('stud_name').labelEl.setOpacity(1);
Using readOnly API:
theStudentForm.findField('stud_name').setReadOnly(true);