Sencha Touch 2.0 Controller refs attribute not working?

Question

i am wondering about the 'refs' attribute of Sencha Touch class 'Ext.app.Controller'. I saw a video tutorial where a simple contactForm was built. No i've tried to build a contact form for my app and i get an error: 'Uncaught TypeError: Object [object Object] has no method 'getContactForm''

Here's my controller

Ext.define('MyFirstApp.controller.Main', {
extend: 'Ext.app.Controller', 
views: ['Viewport', 'Home'],

refs: [
     {
         ref: 'contactForm',
         selector: '#contactForm'
     }
],

init: function() {
    this.control({
        'button[action=submitContact]': {
            tap: 'submitContactForm'
        }
    });
},

submitContactForm: function() {
    var form = this.getContactForm();
    form.submit({
        url: 'contact.php'
    });
}

});

I guess it's something wrong with the 'refs', in the video that guy said the "getContactForm" method will be created because of the "ref" attribute of "contactForm" but it doesn't. What am i doing wrong here?..Thanks for help!

score 2 · Answer 1 · answered Mar 09 '12 at 06:33

The refs attribute property changed from Sencha Touch 2.0 developer preview version to beta/final version. So, what you wrote were correct for dev preview but presently it just name value pair. For your case:

refs: {
   contactForm: '#contactForm'
}

score 1 · Answer 2 · answered Mar 08 '12 at 23:29

I agree with jeremygerrits, I can't be sure that's the correct syntax for defining refs.

Based on the documentation, I would rather do it like this:

Ext.define('MyFirstApp.controller.Main', {
    extend: 'Ext.app.Controller', 

    views: ['Viewport', 'Home'],

    config: {
        refs: {
            contactForm: '#contactForm'
        }
    }

    init: function() {
        this.control({
            'button[action=submitContact]': {
                tap: 'submitContactForm'
            }
        });
    },

    submitContactForm: function() {
        var form = this.getContactForm();
        form.submit({
            url: 'contact.php'
        });
    }
});

See also: http://docs.sencha.com/touch/2-0/#!/guide/controllers

score 0 · Accepted Answer · answered Mar 08 '12 at 19:11

It looks as though you may have the refs configured wrong. Here's a simple controller:

Ext.define('App.controller.Main', {
  extend: 'Ext.app.Controller',
  config: {
    refs: {
      main: 'mainpanel'
    }
  }
});

mainpanel is an xtype or could be a css selector and main will give you getMain() like what was talked about in the video.

Sencha Touch 2.0 Controller refs attribute not working?

3 Answers3

Linked