PDA

View Full Version : On click of enter button inside the text area cursor not moving to new line Extjs 4



arkarthickraja
29 Aug 2012, 7:07 AM
Hi ,
I have Textarea inside row editing grid.
When click on the Enter button inside the text area cursor is not moving to new line , rather its coming out of editor. Is it possible to move the control to new line when user click on the enter button inside text area Grid.
If so, kindly guide me on this.

scottmartin
29 Aug 2012, 8:40 AM
In the examples I posted here:
http://www.sencha.com/forum/showthread.php?237681

I do not see this behavior. It does to the next line until I select outside of editor.

Do you have any overrides that are affecting this? KeyMap?

Scott.

arkarthickraja
29 Aug 2012, 9:40 AM
Hi Scott, I agree with you for cell editing grid it is working fine , where as for row editing grid it is not working. i have simulated the issue . kindly check it here .

Ext.onReady(
function(){

Ext.create(
'Ext.data.Store', {

storeId:
'simpsonsStore',

fields:[
'name', 'email', 'change'],

data:{
'items':[

{
'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },

{
'name': 'Bart', "email":"Text area Enter Issues checking in row editing grid click on the enter button inise text are aand check", "change":-20 },

{
'name': 'Homer', "email":"home@simpsons.com", "change":23 },

{
'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',

store: Ext.data.StoreManager.lookup(
'simpsonsStore'),

columns: [

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

{ header:
'Email', dataIndex: 'email', editor: { xtype: 'textarea', height: 100 }, flex: 1 },

{ header:
'Change', dataIndex: 'change' }
],
height: 400,
width: 600,
renderTo: Ext.getBody(),

plugins: [rowEditing]
});
});

scottmartin
29 Aug 2012, 9:52 AM
Err my mistake. I would say the row editor updating button is setup as the default button. You may have to override this behavior.

Scott.

arkarthickraja
31 Aug 2012, 10:44 AM
Hi Scott,
As you suggested , 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,9 it is not working.

I have tried with with keypress,keydown and specialKey eveent.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();


return false;

}

},

keypress:
function(object, e, eOpts )

{

alert(
'inside key press'+e.keyCode);


if(e.keyCode == 13)

{

alert(
' enter key pressed ');

enterKeyFlag=
true;

textAreaEdit.focus();


return false;

}


else if(e.getKey() == e.ENTER) {



alert(
' else if enter key pressed ');

enterKeyFlag=
true;

textAreaEdit.focus();


return false;

}


else

{

alert(
"inside true loop");


return true;

}

},

keydown:
function(object, e, eOpts )

{

alert(
'inside key down'+e.keyCode);


if(e.keyCode == 13)

{

alert(
' enter key pressed 111');

enterKeyFlag=
true;

textAreaEdit.focus();


return false;

}


else if(e.getKey() == e.ENTER) {



alert(
' else if enter key pressed ');

enterKeyFlag=
true;

textAreaEdit.focus();


return false;

}


else

{

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


return true;

}

}

}

});

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();


return false;

}

},

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();


return false;

}

}



},

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()


});

});