PDA

View Full Version : How to capture a key event from a form in MVC way?



frankpeng
22 Dec 2011, 7:21 AM
I can capture a key [Enter] event from a form (under view) in MVC as follows.



Ext.define('SC.view.case_search.AdvSearchPopup', {
extend: 'Ext.window.Window',
alias : 'widget.advsearchpopup',
id: 'advsearchpopup_id',
title : 'advance case search ',
autoShow: true,
width: 600,
height: 360,
defaults: {
margin: '5,5,0,5'
},
listeners: {
afterRender: function(thisForm, options){
this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter: function(a, b) { alert("aaa"); },
scope: this
});
}
},


initComponent: function() {
...



However, I wonder if this event needs to be coded under controller, such as the chuck below. It just doesn't work since it has a nested event "enter" within "afterRender". Any suggest to get it right? Thanks




Ext.define('SC.controller.Cases', {
extend: 'Ext.app.Controller',
views: [ ..., 'case_search.AdvSearchPopup' ],
init: function() {

this.control({

'advsearchpopup ': {
afterRender: function(thisForm, options){
this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter: function() { alert("446"); },
scope: this
});
}
});
},
...

mitchellsimoens
22 Dec 2011, 9:00 AM
There is no 'afterRender' event, it is 'afterrender'.

Also, please post in the appropriate forum, I have moved this to the Ext JS 4 Q&A forum

frankpeng
22 Dec 2011, 9:52 AM
I just tried. It worked for both 'afterRender' and 'afterrender' from listerners (which is a non-MVC way). I need to find a solution in MVC way. Thanks in advance.

mitchellsimoens
22 Dec 2011, 11:03 AM
does the afterrender listener fire in the controller?