I want to submit the form if Enter is pressed and stop the event if Shift + Enter is pressed. The callback for this has Ext.EventObject parameter which does not provide any way to check if shiftkey is pressed.
it has two methods .hasModifier and .isSpecialKey. Both returns boolean. There is no way to find if shiftkey is pressed. how do I trace it?
This is my textarea component:
{
region : 'center',
margins : '5 0 0 0',
xtype : 'textarea',
name : 'chatmessage',
enableKeyEvents: true,
listeners: {
keydown: function(textfield, evt, eOpts){
console.log(evt.getKey());
}
}
}
I tried evt.shiftKey. Its undefined.
This can be done with little trick with keydown and keyup events a flag.
listeners : {
keydown : function(tf, e, opt) {
if (e.getKey() == e.SHIFT) {
this.shiftKeyPressed = true; // a flag
return;
}
if (e.getKey() != e.ENTER && (this.shiftKeyPressed == undefined || (this.shiftKeyPressed == false))) {
// Submit form
e.stopEvent();
}
},
keyup : function(tf, e, eOpts) {
if (e.getKey() == e.SHIFT) {
this.shiftKeyPressed = false;
}
}
}
Why dont you use a keymap ( http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.KeyMap ) on your textarea? Can't test the code here but should be something like this:
var textArea= Ext.create('Ext.form.field.TextArea', {
region : 'center',
margins : '5 0 0 0',
xtype : 'textarea',
name : 'chatmessage',
enableKeyEvents: true
});
var map = new Ext.util.KeyMap({
target: textArea,
binding: [{
key: Ext.EventObject.ENTER,
fn: function(){ alert('Enter pressed!'); }
}, {
key: Ext.EventObject.ENTER,
shift:true,
fn: function(){ alert('Shift+ENTER pressed!'); }
}]
});
Related
For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.
The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!
There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;
I am working on Extjs3.4. I want to keymap ctrl+tab in my application. but when I try to use it, it opens my next browser tab. How can I solve it?
This is my code :-
var keyMap = new Ext.KeyMap(Ext.getDoc(), {
key: Ext.EventObject.TAB,//9
ctrl: true,
stopEvent : true,
fn: function () { console.log('it works'); },
scope: this
});
Please give some suggestion.
Try to put a listener in the respective field (text or whatever)
listeners: {
keydown: { //tab could be listened in keydown
element: 'el',
fn: function(e){
if(e.urKey && e.urAnotherKey)
alert('keydown, execute my action');
}
},
keypress: {
element: 'el',
fn: function(){
alert('keypress');
}
}
}
I write this code for submit on Enter
{
fieldLabel : 'Password',
name : 'j_password',
inputType : 'password',
allowBlank : false,
listeners : {
'render' : function(cmp) {
cmp.getEl().on('keypress', function(e) {
if (e.getKey() == e.ENTER) {
submitform();
}
});
}
}
}
What change do I need to do for shortcut keys Like Save(Ctrl + S),Paste(Ctrl +P), Open (Ctrl + O), Exit(Ctrl +X)?
You need to write appropriate handler to do the job using KeyMap.
Ext 4 code snippet may be as follows -
Ext.onReady(function () {
var map = new Ext.util.KeyMap(document,{
key: [VALUES-ASCII], // this works,
fn: function(){ alert('key was pressed.!'); }
}
);
});
This may Help
I think, You will solve your problem by this code
I Give many ways.
You choose suitable one from binding:[{}]
scope : this,
listeners : {
afterrender: function(window, options) {
this.keyNav = new Ext.util.KeyMap({
target: window.el,
binding: [{
key: [10,13],
fn: function(){
alert("Return was pressed");
}
}, {
key: "abc",
fn: function(){
alert('a, b or c was pressed');
}
}, {
key: "\t",
ctrl:true,
fn: function(){
submitform();//'Control + tab was pressed
}
}, {
key: "m",
ctrl:true,
fn: function(){
submitform();//'Control + m was pressed
}
}],
scope: this
});
}
}
I'm trying to add a listener to a Ext.form.Formpanel subelement Ext.form.BasicForm for the submit event and then reset the form via its .reset() method. In the doc at http://dev.sencha.com/deploy/touch/docs/?class=Ext.form.FormPanel it clearly states that:
submit : ( Ext.FormPanel this, Object result )
Fires upon successful (Ajax-based) form submission
But it somehow it won't really work for me.
This is my code:
var messInput = new Ext.form.FormPanel
({
fullscreen : true,
url : '/mess/',
standardSubmit : false,
listeners : {
el: {
submit: function(form, result) {
form.reset();
}
}
},
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
if i try it this way i get a
Uncaught TypeError: Object [object Object] has no method 'reset'
Can somebody explain what the problem is excatly here? do i need to call the parent Formpanel because i add the listener to the underlying el?
You are listening to basic js-event "submit" for the dom-element. You can't get (easily) sencha objects inside it. That's why Ext.form.FormPanel has beforeSubmit-event. The data is already collected so you can reset the form and process to ajax submit with return true;
form = new Ext.form.FormPanel({
fullscreen : true,
url : '/mess/',
listeners: {
beforesubmit: function(e, a) {
this.reset();
return true;
}
},
standardSubmit : false,
items: [
new Ext.form.Text ({
name : 'mess',
placeHolder: 'Text and #Tags',
listeners : {
keyup :function(field, event) {
var keyCode = event.browserEvent.keyCode;
if(keyCode == 51) {
console.log(event.browserEvent.keyCode);
}
}
}
})]
});
EDIT: This is the correct way, sorry about the last answer.
How to disable the delete button using if condition in Extjs for ex;i want to disable the button if it satifies the given if condition else remain enabled.
if(validAction(entityHash.get('entity.xyz'),actionHash.get('action.delete')))
This is the grid Delete button code.
Ext.reg("gridheaderbar-inActive", Ad.GridInActiveButton,{
xtype: 'tbspacer', width: 5
});
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
//text: 'Delete',
cls: 'ad-img-button',
width:61,
height:40,
iconCls: 'ad-btn-icon',
icon: '/webapp/resources/images/btn_del.png',
handler:function(){
statusChange(this.parentBar.parentGrid, 'Delete')
}
});
create actioncolumn and make custom renderer:
{
xtype: 'actioncolumn',
width: 38,
renderer: function (val, metadata, record) {
this.items[0].icon = '${CONTEXT_PATH}/images/' + record.get('fileType') + '.png';
this.items[0].disabled = !record.get('isDownloadActionEnable');
this.items[1].disabled = !record.get('isDeleteActionEnable');
metadata.style = 'cursor: pointer;';
return val;
},
items: [
{
icon: '${CONTEXT_PATH}/images/pdf.png', // Use a URL in the icon config
tooltip: 'Download',
handler: function (grid, rowIndex, colIndex) {
//handle
}
},
{
icon: '${CONTEXT_PATH}/images/delete.png', // Use a URL in the icon config
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
handle
}
}
]
}
in this example You see additionally how to change dynamically icon.
One way to solve it is to attach a unique ID to your delete button and bind a listener to the selectionchange event of your SelectionModel, whenever the selection changes you can check whatever you want and enable/disable the button as you see fit.
ie.
Ad.GridCampDeleteButton = Ext.extend(Ext.Toolbar.Button, {
id: 'btnDelete',
cls: 'ad-img-button',
...
});
and in your selectionmodel do something like this :
var sm = new Ext.grid.CheckboxSelectionModel({
...
,listeners: {
'selectionchange' : {
fn: function(sm) {
if (sm.hasSelection()) {
var selected = sm.getSelected();
if (selected.get('field') == value) {
Ext.getCmp('btnDelete').disable();
}
else {
Ext.getCmp('btnDelete').enable();
}
}
}
,scope: this
}
}
});