Sencha Touch 2.0 Controller refs attribute not wor

问题:

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!

回答1:

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.

回答2:

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'
}

回答3:

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