Threaded View

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    70
    Vote Rating
    0
    Answers
    4
    gnube is on a distinguished road

      0  

    Default Answered: Problems with listeners and events (using MVC on 4.02)

    Answered: 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

  2. 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

Thread Participants: 1