PDA

View Full Version : Problems with listeners and events (using MVC on 4.02)



gnube
15 Aug 2011, 2:42 AM
I've tried to setup a controller and view on my own for the last few days and failed. I am new to ExtJs and find the process of trying to come up with the solution helps me learn so I am posting as a last resort after trying for a few days (really).

I've setup a controller and can see render: messages using a few different selectors. Some work some don't. I can't capture either of the messages I have tried to create myself at all.


// A controller subclass in effect creates a new xtype holder for views and aliasExt.define('WIP.controller.EventForm', {
extend: 'Ext.app.Controller',


stores: [
],

models: [
],

refs: [
{
ref: 'refSelEventFormWindow',
selector: 'EventFormWindow'
},
{
ref: 'refSelviewport',
selector: 'viewport'
}
],

views: [
'EventForm.Window'
],

init: function() {
console.log('Initialized Login controller! This happens before the Application launch function is called');


this.control({
'viewport > *': { // NOTE: any panel or panel subclass will call this
resubmitFailurender: function( ){
console.log('viewport heard resubmitFailurender');
}
}
});
this.control({
'viewport > panel': { // NOTE: any panel or panel subclass will call this
render: this.onPanelRendered
}
});

this.control({ // ok
'viewport > *': {
render /*submitFailure*/: function( ){
console.log('viewport > * render : Listener in WIP.controller.EventForm heard it');
}
}
});

this.control({ // ok
'EventFormWindow > panel': {
render: function( ){
console.log('EventFormWindow > panel render: Listener in WIP.controller.EventForm heard it');
}
}
});

this.control({ //TOOD fail code
refSelViewportPanel: {
render: function( ){
console.log('loginForm render: Listener in WIP.controller.EventForm heard it');
}
}
});

this.control({ //TOOD fail code
'refSelEventFormWindow': {
render: function( ){
console.log('refSelEventFormWindow render: Listener in WIP.controller.EventForm heard it');
}
}
});

this.control({ //TOOD fail code
'refSelEventFormWindow > panel': {
render: function( ){
console.log('refSelEventFormWindow > panel render: Listener in WIP.controller.EventForm heard it');
}
}
});
this.control({ //TOOD fail code
'refSelviewport > panel': {
render: function( ){
console.log('refSel2 > panel render: Listener in WIP.controller.EventForm heard it');
}
}
});
},


onPanelRendered: function() { // ok
console.log('viewport > panel render: listener discovered that a panel was rendered');
}

});

My view is as follows - its a window which contains a form. The idea is to use it to setup a questionnaire window which I throw up first and then can react to and populate the viewport proper based on a the success/failure/results etc.


Ext.define('WIP.view.EventForm.Window', { extend: 'Ext.window.Window',
alias: 'widget.EventFormWindow',


title: 'Welcome Test',
//layout: 'fit',
autoShow: true,


initComponent: function() {
this.items = [{
xtype: 'form',
url: 'data.json',
waitMsg: 'Authenticating...',
width: 360,
labelWidth: 10,
layout: 'fit',
frame: true,
defaults: {
width: 320
},


items: [
new Ext.form.TextField({
name: "dummypassword",
emptyText: 'some text <Enter>',
fieldLabel: "Text",
allowBlank: false,


listeners: {
specialkey: function(field, e) {
if (e.getKey() == e.ENTER) {
this.up('form').doSubmit();
}
}
}
})],
buttons: [{
text: 'Submit',
handler: function() {
this.up('form').doSubmit();
}


}],

doSubmit: function() {
var form = this.getForm(); // get the basic form
form.addEvents('submitFailure','submitSuccess');
if (form.isValid()) { // make sure the form contains valid data before submitting
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
form.fireEvent('submitSuccess');//debugger;
},
failure: function(form, action) {
Ext.Msg.alert('failure', action.result.msg );
form.fireEvent('submitFailure'); //debugger;
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Validation failed', 'Please provide some input. (No event will fire)');
form.fireEvent('render'); //debugger;
}
}

}];


this.callParent(arguments);
}
});




If anyone can point me to a good guide for setting up events/listeners in 4.02 or can see where I am going wrong that would be great!

Thanks

gnube
16 Aug 2011, 1:22 AM
Well, I finally found this post (http://www.sencha.com/forum/showthread.php?135778-ExtJS-4-MVC-Architecture-and-Event-Bubbling) on the forums which I am going to try - it uses the app as the listener to call functions

buford
17 Aug 2011, 2:23 PM
I'm walking out the door so I only have a moment to toss you a couple of ideas:

First, try defining all of your selector actions inside of one this.control(). They way you're using it may work but you *might* be overwriting previous selector actions each time you call control().

Second thought: work through the MVC example that's in the framework documentation. When I first started working with the MVC stuff that example is what got me going.

I know MVC works at this point because my app has dozens of models, views and platoon of controllers.

HTH

gnube
19 Aug 2011, 11:46 PM
Thanks for the reply buford. I decided to go the route of adding the listener to the Ext.application, telling it to use a function in my MVC controller. The event is fired off from the view. I started off with the single 'this.control' block, they accumulated as I tested more and more selectors. More than one was being picked up so without spending any more time testing; I think that more than one is OK. If you have an code sample with custom evens in an MVC component set which uses events without the Ext.application being involved I would be interested in taking a look. It feels close to OK enough for me to keep using the app listener but, for some reason, I would be happier with the code if it was all contained in the MVC file set and the controller was the entity listening to it's view directly, relaying to whatever instantiated it.