Question

这是控制器代码：

Ext.define('XXX.controller.XXX', {
    extend: 'Ext.app.Controller',
    config: {
        views: ['CustomView','CarouselView'],
        refs: {
            custom: "carouselview #customid"
        },
        control: {
            custom: {
                initialize : function() {
                    alert("it's loading")
                }
            }
        }
    },
    launch: function(){
        Ext.Viewport.add(Ext.create('XXX.view.CustomView'));
        console.log(this.getCustom())      // ——> This works, it is not undefined
    }
});

这是轮播视图代码：

Ext.define('XXX.view.CarouselView', {
    extend: 'Ext.Carousel',
    xtype: 'carouselview',

    defaults: {
        styleHtmlContent: true
    },

    config:{
        direction: 'horizontal',
        items: [
            {
                xtype: 'customview',
                itemId: 'customid'
            }
        ]
    }
});

现在它是customview：

Ext.define('XXX.view.CustomView', {
    extend: 'Ext.Panel',
    xtype: 'customview',
    config: {
        tpl:  XXX
    }
});

在控制器的启动功能中，它可以记录正确的值，但initialize事件无法触发。
如果我将引用更改为{ custom: "customview" }，则可以触发initialize事件。

Answer 1

更新：

刚想通你正在尝试初始化初始化时得到itemId的东西:)抱歉，花了我一些时间。

基本上，当你试图在控制器中监听时，fireEvent（'initialize'）已经过去了。

使用xtype初始化或简单地：

Ext.define('XXX.view.CustomView', {
    extend: 'Ext.Panel',
    xtype: 'customview',
    config: {
        tpl:  XXX
    },

    initialize: function() { // good way to use initialize inside the view, as it belongs to the view and there is not user input handled
    }
});

OR

Ext.define('XXX.controller.XXX', {
    extend: 'Ext.app.Controller',
    config: {
        views: ['CustomView','CarouselView'],
        refs: {
            custom: ".carouselview .customview" // --> HERE use this
        },
        control: {
            custom: {
                initialize : function() {
                    alert("it's loading") // Yeah, now you are getting here
                }
            }
        }
    },
    launch: function(){ // --> this will be the same as if you are placing it in app.js launch
        Ext.Viewport.add(Ext.create('XXX.view.CustomView')); // --> here the initialize happends and this.getCustom() does not yet exists
        console.log(this.getCustom())      // ——> here this.getCustom() exists
    }
});

Answer 2

恕我直言，你（以及有人在下面回答）误解了itemId配置的使用。

以下是id和itemId：

之间的区别

id是组件的全局标识符。它可以直接用作Ext.ComponentQuery类中的选择器，refs在场景后面使用它。因此，如果您需要"carouselview #customid"之类的内容，则必须使用id代替itemId。
itemId是组件派生自的类中的全局标识符。例如，假设您有Ext.Button itemId: "myCustomButton"，那么您可以通过此参考button#myCustomButton访问它（请注意，它们之间没有空格）。这样，Ext.ComponentQuery首先查找xtyped button的所有组件，然后找到具有该itemId的实例。

所以，如果你想使用一些字符串作为＆＃34;一流＆＃34;选择器，您将必须使用id。如果您想使用itemId，您可能希望始终在itemId之前包含其xtype。因此，有两种可能的解决方案：

第一个解决方案（仍使用itemId）：custom: "carouselview customview#customid"

第二个解决方案：保留您的参考号，但将#customid从itemId更改为id

希望这有帮助。

为什么refI to itemId无法触发Sencha Touch中的initialize事件？

2 个答案: