view - 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。要获得类似的功能，您可以将代码作为面板initialize上的侦听器执行：about

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!
    }             
});

附带说明一下，在定义中为您的组件添加一个idin 是多余的。您应该在实例化组件时保留（无论如何id您应该使用itemId而不是在那种情况下）。id