sencha touch 2视图id返回未定义

Question

我已经声明了如下所示的视图：

Ext.define('App.view.About', {
extend: 'Ext.Panel',
id: 'about',
xtype: 'aboutpanel', // used as reference from Main.js
config: {
            title: 'About',
            iconCls: 'icon-file',
            scrollable: true,
            styleHtmlContent: true,
            items: {
                docked: 'top',
                xtype: 'titlebar',
                title: 'About'
            },
            html: 'This page will contain basic information.'
        }
  });

我还声明了如下所示的控制器：

Ext.define('App.controller.About', {
extend : 'Ext.app.Controller',
  config : {
    refs    : {
     about : '#about'
    }
  },
  init : function () {
    var me = this;
    me.getAbout().setHtml('Hello'); // just for testing
  }             
});     

然而，在Chrome的开发工具中，我收到一个错误"无法调用未定义的方法"setHtml"。因此，据我所知，控制器没有通过id获得视图。我使用的是Sencha Touch 2.2.1。

请帮忙吗？提前感谢，

Answer 1

您将无法访问控制器的init()函数中的refs。要获得类似的功能，您可以在about面板上作为initialize侦听器执行代码：

Ext.define('App.controller.About', {
    extend : 'Ext.app.Controller',
    config : {
        refs    : {
            about : '#about'
        },
        control: {
            about: {
                initialize: 'initAbout'
            }
        }
    },
    initAbout: function () {
        var me = this;
        me.getAbout().setHtml('Hello'); // works now!
    }             
});

附带说明一下，在定义中为组件提供id是多余的。您应该在实例化组件时保留id（在这种情况下，您可能应该使用itemId而不是id）。