PDA

View Full Version : Enter Key si not working inside text area in IE8 and IE9



arkarthickraja
2 Sep 2012, 8:48 AM
Hi,
I am trying to override the behaviour of the enter key event inside row edit grid text area.Enter key create a new line in mozilla in text area.where as in IE8 and IE9 it is not working.

I have tried with with keypress,keydown and specialKey event.please check the code snippet.

Ext.require([

'Ext.data.*',

'Ext.grid.*',

'Ext.form.*'
]);

Ext.onReady(
function() {

var enterKeyFlag=false;

var textAreaEdit=Ext.create(Ext.form.TextArea,{
enableKeyEvents:
true,
grow:
true,
listeners:{

//specialkey( Ext.Editor this, Ext.form.field.Field The, Ext.EventObject event, Object eOpts )
specialkey:
function(object,The, event,eOpts){
alert(
'inside specialkey press'+event.keyCode);

// e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,

// e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN

if (event.getKey() == event.ENTER) {
textAreaEdit.focus();

returnfalse;
}
},
keypress:
function(object, e, eOpts )
{
alert(
'inside key press'+e.keyCode);

if(e.keyCode == 13)
{
alert(
' enter key pressed ');
enterKeyFlag=
true;
textAreaEdit.focus();

returnfalse;
}

elseif(e.getKey() == e.ENTER) {

alert(
' else if enter key pressed ');
enterKeyFlag=
true;
textAreaEdit.focus();

returnfalse;
}

else
{
alert(
"inside true loop");

returntrue;
}
},
keydown:
function(object, e, eOpts )
{
alert(
'inside key down'+e.keyCode);

if(e.keyCode == 13)
{
alert(
' enter key pressed 111');
enterKeyFlag=
true;
textAreaEdit.focus();

returnfalse;
}

elseif(e.getKey() == e.ENTER) {

alert(
' else if enter key pressed ');
enterKeyFlag=
true;
textAreaEdit.focus();

returnfalse;
}

else
{
alert(
"inside true loop ***");

returntrue;
}
}
}
});
Ext.QuickTips.init();
Ext.create(
'Ext.data.Store', {
storeId:
'simpsonsStore',
fields:[
'name', 'email', 'change'],
data:{
'items':[
{
'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{
'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{
'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{
'name': 'Raja', "email":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "change":27 },
{
'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type:
'memory',
reader: {
type:
'json',
root:
'items'
}
}
});

var
rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});

Ext.create(
'Ext.grid.Panel', {
title:
'Simpsons',
clicksToEdit: 1,
plugins: [rowEditing],
store: Ext.data.StoreManager.lookup(
'simpsonsStore'),
listeners:
{
validateedit:
function()
{
alert(
'panel validate edit');

if(enterKeyFlag)
{
textAreaEdit.focus();

returnfalse;
}
},
specialkey:
function(object,The, event,eOpts){
alert(
'panel specialkey press'+event.keyCode);

// e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,

// e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN

if (event.getKey() == event.ENTER) {
textAreaEdit.focus();

returnfalse;
}
}

},
columns: [
{ header:
'Name', dataIndex: 'name' },

//{ header: 'Email', dataIndex: 'email',editor: { xtype: 'textarea', grow: true }, flex: 1,
{ header:
'Email', dataIndex: 'email',editor: textAreaEdit,
tdCls:
'wrapText',flex:1 },
{ header:
'Change', dataIndex: 'change'}
],
height: 500,
width: 800,

renderTo: Ext.getBody()

});
});

vietits
2 Sep 2012, 11:30 PM
Try this:


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
clicksToEdit: 1,
plugins: [rowEditing],
store: Ext.data.StoreManager.lookup('simpsonsStore'),


columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
editor: {
xtype: 'textarea',
listeners: {
inputEl: {
keydown: function(ev) {
ev.stopPropagation();
}
}
}
},
tdCls: 'wrapText',
flex:1
},{
header: 'Change',
dataIndex: 'change'
}],
height: 500,
width: 800,
renderTo: Ext.getBody()
});