I have an ExtJS form.field.Date as below;
{
xtype: 'datefield',
name: 'X_Cut_Process_Completed_Date',
format: 'd M Y',
startDay: 1,
allowBlank: true,
editable: false,
listeners: {
specialkey: function(field, e){
if (e.getKey() == e.DELETE) {
field.setValue('');
}
}
}
}
I have been asked to implement an event that catches the Delete key while the datefield is being edited (with the associated datepicker open), that clears the value for the datefield and closes the datepicker. The existing specialkey listener only clears the value while the datefield is NOT being edited.
How do I implement a listener that closes a datefield's datepicker and clear the datefield's value simultaneously?
[UPDATE]
You can get the picker and hide it:
field.getPicker().hide()
I have tested it and it works. To test it for yoursef:
navigate to http://extjs.eu/software/form-field-icon-plugin/
in console type:
Ext.ComponentQuery.query('datefield')[0].on('specialkey', function(field, e){
if(e.getKey() === e.DELETE) {
field.getPicker().hide();
field.setValue('');
}
});
Now open the picker in the date field, type something and press delete. Both the field is cleared and the picker is hidden.
Related
I have an ExtJS check-tree ExtJS Check Tree that I am trying to add some control to based on items checked/unchecked. It doesn't seem to fire correctly though.
Here is a Fiddle Example
When checkbox 'A' is selected, I want to hide the textfield, 'testValue', which works, but then if I unselect checkbox 'A', I want to show the textfield, 'testValue', which does not work.
For this test I am merely looking to see if the selections.selected.length === 0. However, when I unselect any of the checkboxes, the listener does not seem to be firing, since the alert message is not getting triggered - plus, if I then try to reselect the check box again it still does not fire.
I would use a selection Model (as outlined below) to achieve this (since I know it works), but then this places checkboxes on all my tree items when I just want to have the leaf nodes with checkboxes.
selModel: {
type: 'checkboxmodel',
listeners: {
selectionchange: 'onCheckedNodesChange'
}
}
Any suggestions would be most welcome!
EDIT
Adding allowDeselect: true and a listener for select and deselect sort of worked (I updated the Fiddle to exhibit the behavior):
selModel: {
allowDeselect: true,
listeners: {
deselect: function(model, record, index) {
text = record.get('text');
alert(text);
},
select: function(model, record, index) {
text = record.get('text');
alert(text);
}
}
},
I want to make sure that when 'A' is selected, the textfield remains hidden, but if you select another item in the list and then deselect it, the textfield returns.
I am trying to use the getChecked() method alone with when selectionchange event occurs. However, this only seems to return data when I do a submit (for example, on the Get checked nodes control). Any suggestions would be most welcome. This should not be so difficult.
For tree panel we have checkchange event it is similar to the selectionchange event.
http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.tree.Panel-event-checkchange
checkchange( node, checked, eOpts )
Fires when a node with a checkbox's checked property changes
Parameters
node : Ext.data.TreeModel
The node who's checked property was changed.
checked : Boolean
The node's new checked state
eOpts : Object
The options object passed to Ext.util.Observable.addListener.
var fields = [
{
name: 'column'
},
{
name: 'leaf',
type: 'boolean'
},
{
name: 'checked',
type: 'boolean'
},
{
name: 'cls',
type: 'string',
defaultValue: 'x-tree-noicon'
},
];
this.dataModel = Ext.define('Filter-' + this.getId(), {
extend: 'Ext.data.Model',
fields: fields,
});
columns: [
{
xtype: 'treecolumn',
width: 200,
itemId: "filter",
dataIndex: 'column' ,
renderer: function (val, metaData, r) {
},
scope: this,
},
],
listeners: {
'checkchange': Ext.bind(function (node, checked,eOpts) {
},
scope: this
The checkboxes you are seeing are not part of the selection behaviour. Instead, they come from the checked configuration on the NodeInterface class.
Your tree panel is using the default selModel, which is row-based selection, with no deselect option. If you want the in-tree checks to control the selection, you'll need to configure that manually, probably by listening to change events from the store.
OTH, if all you care about is finding out which items are checked or not, you can use the getChecked() method on the TreePanel
I have grid with RowEditing plugin.
Editor has 2 columns: one with combobox and another with disabled textfield.
I need to change textfield value after changing the combobox value.
I have combobox listener:
listeners = {
select: function (combo, records) {
var editorRecord = myGrid.getPlugin('rowEditPlugin').editor.getRecord();
editorRecord.data["SomeCol"] = "SomeValue";
}
}
But value in the textfield does not refresh until another calling of roweditor.
I need just to set text value to the cell, without updating store. And also if I click cancel button of roweditor, I need cell value returning to old one.
Thanks for your time, all replies and all help.
You can change it using the selection model of the grid,something like this :
{
text: 'Type',
dataIndex: 'type',
editor: {
xtype: 'combo',
typeAhead: true,
selectOnTab: true,
displayField:"name",
listeners: {
select: function(combo, records) {
myGrid= this.up('grid');
var selectedModel = this.up('grid').getSelectionModel().getSelection()[0];
//selectedModel.set('dataIndexOfNextCol', "Success");
val = combo.getValue();
if(val == 'type1'){
Ext.getCmp('textFld').setValue("success");
}
else{
Ext.getCmp('textFld').setValue("failure");
}
}
},
{
text: 'Item',
dataIndex: 'item',
editor: {
xtype: 'textfield',
id: 'textFld'
}
}
You have to commit the changes on update.So you can call edit event listener,
listeners: {
edit: function(editor, e) {
e.record.commit();
}
},
For reference , have a look at this DEMO
I have a numberfield input which I want to lose focus when the user hits the enter key.
Here's the current config:
{
xtype: 'numberfield',
minValue: 0,
maxValue: 99999,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false,
enableKeyEvents: true,
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
f.blur();
}
}
}
The specialkey handler works, calling blur() as expected, but the only result is that the caret disappears from the input (indicating that the DOM text input element has been blurred). The field still has all the x-form-focus etc css classes, and examining the object shows that the private hasFocus property is still true.
Any suggestions?
I have tried calling f.onBlur() explicitly after the blur() call, but it made no difference.
(btw the field does not belong to a form so there is no form to submit.)
The fix. The issue is caused by a weird behavior in the Ext.form.field.Trigger class where they don't trigger 'triggerBlur()' when the regular 'blur()' function is called. Very interesting:
listeners: {
specialkey: function(f, e) {
if (e.getKey() == e.ENTER)
{
f.triggerBlur();
f.blur();
}
}
}
This works for me :
specialkey: function(field,events) {
if (events.getKey() == events.ENTER) {
var nextfld = field.nextSibling();
nextfld.focus(true,100);
}
}
specialkey - is a listener of component like textfield,textare,datefield etc,
events.getKey - gets the user keyboard input
events.ENTER - i used this for that will be triggered when "ENTER" in keyboard
field.nextSibling - field refers to current component, and nextSibling property of component to tell who will be the next component
lastly is the nextfld.focus to focus the next component
I have a grid with a CheckBoxColumn and RowEditor plugin that is configured with clicksToEdit: 1
How can I prevent the RowEditor to open when the CheckBoxColumn is clicked? Cause I am not able to select more than one row at a time.
RowEditor have the 'beforeedit' event. The second parameter of this event is a edit event object - e.
Edit event object have a property 'cancel' - set it to true to cancel the edit or return false from your handler.
So, we can just set it in 'true' or 'false' to disable or enable the RowEditor:
{
xtype: 'checkbox',
fieldLabel: 'Disable row Editor',
listeners: {
change: function(cb) {
var editor = cb.up('grid').editingPlugin;
editor.on({
beforeedit: function(plugin, e) {
e.cancel = cb.checked;
}
});
}
}
}
Please, see live example on jsfiddle: http://jsfiddle.net/p7Vzu/
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