PDA

View Full Version : Unable to set any TextArea event listeners through defaults parameter



ImShogun
28 Jan 2010, 5:24 AM
Hello,

In the code below, I used defaults to set up enableKeyEvents to true and to add two listeners: change, which I dont like that much, because I dont like waiting for the blur event, and keydown, which is cool, except that both don't work on TextArea. Everything is fine for the TextFields. Would this be a bug with using the "defaults" parameter?

I've spend time trying to get an answer in the forums, including [2.1][FIXED] textArea and keyup event (http://www.extjs.com/forum/showthread.php?t=35404) and help:the textarea keyup event can't response (http://www.extjs.com/forum/showthread.php?t=46432), but I'm stuck!

I'm getting the fields list from the server, so here are two pieces of code: the layout, followed with some fields configuration.

Any help would be greatly appreciated!

The code to generate the form:



//DETAILS PANEL
dbeFormObj.CreateDetailsPanel = function(MyFormStructure,node_id){
//consoleLog(node_id);
MyDetailsPanel = new Ext.Panel({
id:'DetailsPanel',
xtype : 'form',
labelWidth:200,
padding:'5 5 5 5',
frame:false,
autoScroll : true,
title : 'Details',
iconCls : 'search_page',
items: [{
xtype: 'tabpanel',
//width:650,
width:'100%',
//height:550,
//height:'100%',
activeTab: 0,
items: [{
title: 'Main',
padding: '10 10 10 10',
labelWidth: 200,
layout: 'form',
autoScroll:false,
defaults:{
enableKeyEvents:true,
listeners: {
change: function(){
Ext.getCmp('DetailFormSaveButton').enable();
},
keydown: function(){
Ext.getCmp('DetailFormSaveButton').enable();
}
}
},
//items: [{"xtype":"textfield","fieldLabel":"Year","value":2007.0,"name":"CP_1"},{"xtype":"textfield","fieldLabel":"Annual programme ID","value":"SER-2007","width":200,"maxLength":25,"name":"CP_2"}]
items: MyFormStructure
//,buttons: [{ text: 'Login'},{text:'Cancel'}]
}]
}],
tbar:[
{
text:'Highlight this node',
iconCls:'back',
qtip:'Highlight this node in the Budget Tree',
listeners:{
click:function(){
var MyNode = MyTree.getNodeById(node_id);
var MyPath= MyNode.getPath();
MyTree.selectPath(MyPath);
}
}
},
{
id:'DetailFormSaveButton',
text:'Save changes',
iconCls:'save',
disabled:true,
listeners:{
click:function(){
dbeFormObj.SaveDetailsPanel();
}
}
}
]
});
return MyDetailsPanel;

};
The code for the fields (sample with textarea not getting events):



[{"xtype":"textfield","fieldLabel":"Project ID number","value":"07SER01\/1\/08","width":200,"maxLength":25,"name":"CP_8"},{"xtype":"htmleditor","fieldLabel":"Project description","value":"The overall objective of this project is to contribute to the establishment of a more transparent, client oriented and efficient Tax Administration, while maintaining and increasing the level of tax collection\nPurpose\nInstitutional capacity building of th","width":350,"name":"CP_9","height":150}]

Condor
28 Jan 2010, 5:55 AM
A TextArea with enableKeyEvents:true should work just fine, but a HtmlEditor (which you are using in your example) doesn't have a enableKeyEvents config option.

HtmlEditor uses an IFRAME for editing so relaying keyboard events requires a bit more work.

ImShogun
28 Jan 2010, 5:57 AM
I knew it, I knew it, I knew I was missing something big :-)

Thanks! I'll look around for the work I need to get this done :)