PDA

View Full Version : key enter don't work in textarea



Jad
11 Jun 2012, 7:42 AM
Hello

This is my textarea


{
xtype: 'textareafield',
fieldLabel: New Note,
labelAlign: 'top',
name: 'note',
itemId: 'newNote',
rows: 5,
cols: 100,
disabled: !...
}


And when the Key Enter is pressed nothing happened (no new line)
I'm sure the bug is in my code, so any suggestion to find it ?

Thanks

scottmartin
11 Jun 2012, 9:29 AM
Would it have to do with the disabled: property?

Does this online example work:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.HtmlEditor

Scott.

Jad
11 Jun 2012, 11:00 PM
Yes it work fine

I disable the text area if the user don't have the right to add a note

Jad
12 Jun 2012, 1:47 AM
Someone have any idea ?

Richardh Rotterdam
12 Jun 2012, 2:14 AM
Using your code to render a textarea it seems to work fine
I placed "new Note" within quotes and ignored the disabled attribute leaving me with this code:



Ext.application({
name: 'AM',
appFolder: 'app',


launch: function() {


Ext.onReady(function() {


Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype: 'textareafield',
fieldLabel: 'New Note',
labelAlign: 'top',
name: 'note',
itemId: 'newNote',
rows: 5,
cols: 100
}]
});


});
}
});





The code you posted is that the actual code to render the textarea? Perhaps it might not be the textarea at all and it might be the parent or something else that conflicts with the enter key

Jad
12 Jun 2012, 2:38 AM
The textareafield is in a form.Panel which is in an other, may be that is the problem ?

Richardh Rotterdam
12 Jun 2012, 3:26 AM
The textareafield is in a form.Panel which is in an other
Do you mean you have a Ext.form.Panel inside a Ext.form.Panel? If so try to avoid that I did try that and it doesn't seem to cause an issue with pressing enter though.

Could you post the entire view your using?

Jad
12 Jun 2012, 3:56 AM
It's a little bit complicate because I've many files loaded dynamically

I have

Ext.form.Panel -> ( Ext.tab.Panel -> (Ext.panel.Panel, Ext.form.Panel, ..., Ext.form.Panel) )

Richardh Rotterdam
12 Jun 2012, 6:20 AM
Sounds to me like you need to scope down where the issue really is.

This is what helps me if I have a similar situation. I try to add the element to a simpeler component such as a window. This way you can find out if the textarea really is the issue. If it isn't try to add the form with it aswel from there on add more.

Example:



Ext.application({
name: 'AM',
// define the folder for the conrollers/models and views
appFolder: 'app',




launch: function() {
// your textarea object which might cause trouble
var yourTextArea = {
xtype: 'textareafield',
fieldLabel: 'New Note',
labelAlign: 'top',
name: 'note',
itemId: 'newNote',
rows: 5,
cols: 100
};

Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'TEST',
height: 200,
width: 400,
layout: 'fit',
items: yourTextArea
}).show();


});
}
});


Try adding more of your actual form as you go to see if that causes the enter issue too

Jad
12 Jun 2012, 7:12 AM
This is the code



Ext.define('Crm.application.note.tab.Detail', {
extend: 'Ext.form.Panel',


/**
* The constructor
* @param {integer} idReferrer The referrer id
* @param {integer} typeReferrer The referrer type
*/
constructor: function(idReferrer, typeReferrer, cfg) {
this._idReferrer = idReferrer;
this._typeReferrer = typeReferrer;
return this.callParent([cfg]);
},


initComponent : function() {
var me = this;


Ext.apply(me, {
border: 0,
items: [
{
xtype: 'container',
itemId: 'notes',
border: 0,
margin: '0 0 25 0'
},{
xtype: 'textareafield',
fieldLabel: 'New Note',
labelAlign: 'top',
name: 'note',
itemId: 'newNote',
rows: 5,
cols: 100,
disabled: !hasPermission('Crm', 'Note', 'create')
}
]
});


me.callParent(arguments);


me.notes = me.down('#notes');


me.addListener('afterrender', function () { if (me._idReferrer) { me.loadNotes(); }}, me, { single:true });
},


/**
* Load the notes
*/
loadNotes : function () {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
model: 'Crm.application.note.model.Detail',
filters: [{ property: 'idReferrer', value: me._idReferrer }, { property: 'typeReferrer', value: me._typeReferrer }],
listeners: {
load: function (treeStore, node, records, successful) {
console.log('::: load :::');


if (successful) {
me.overwrite = {};
me.responses = [];


var template = Ext.create('Ext.ux.skirtle.CTemplate', '<ul class="notesList">'+ me.listNotes(records, true) +'</ul>');


template.overwrite(me.notes.getEl(), me.overwrite);
}
me.doComponentLayout();
}
}
});


store.load();


me.loadRecord(new Crm.application.note.model.Detail({
idReferrer : me._idReferrer,
typeReferrer : me._typeReferrer,
userId : getSessionUser().getId()
}));
},


listNotes: function (notes, response) {
var me = this,
notesList = '';
Ext.each(notes, function (note) {
if (note.get('id') != 0) {
notesList += '<li>' + (note.get('note') == '' ? '' : (note.get('userName') + " : " + note.get('note')));
notesList += '<ul>';
if (note.hasChildNodes()) { notesList += me.listNotes(note.childNodes, false); }
if (response) {
var textarea = Ext.create('Ext.form.field.TextArea', { rows: 2, cols: 80, disabled: !Energee.getSecurityManager().hasPermission('Crm', 'Note', 'create') });
me.overwrite['textarea' + note.get('id')] = textarea;
me.responses.push({ textarea: textarea, parent: note.get('id') });
notesList += '<li>{textarea' + note.get('id') + '}</li>';
}
notesList += '</ul></li>';
}
});
return notesList;
},


/**
* Call to save the new note
*
* @param idReferrer
*/
save: function (idReferrer) {
var me = this;
if(me.getRecord()){
Crm.core.helper.Helper.updateRecord(me);


Ext.each(me.responses, function (response) {
if (response.textarea.value != '') {
var note = new Crm.application.note.model.Detail({
idReferrer : me._idReferrer,
typeReferrer : me._typeReferrer,
parent : response.parent,
note : response.textarea.value,
userId : getSessionUser().getId()
});
note.save({
success: function (savedRecord) {
me.loadNotes();
me.setLoading(false);
}, scope: me
});
}
});


if (me.getRecord().get('note') != '') {
me.getRecord().save({
success: function(savedRecord) {
me.loadNotes();
me.setLoading(false);
}, scope: me
});
}
}
}
});