Problems with listeners and events (using MVC on 4.02)
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.
Code:
// 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.
Code:
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
using the app to listen for events
Well, I finally found this post on the forums which I am going to try - it uses the app as the listener to call functions
