控制器无法获取视图的引用

controller not get a reference of a view

本文关键字：引用 视图 获取 控制器      更新时间：2023-09-26

我做了一个简单的MVC应用程序，有一个'app.js'

Ext.application({
name: 'ImpPdf',
extend: 'ImpPdf.Application',
autoCreateViewport: true
});

有一个application.js 

Ext.define('ImpPdf.Application', {
name: 'ImpPdf',
extend: 'Ext.app.Application',
views: [
    'Main'
],
controllers: [
    'Main'
],
stores: []
});

有一个'viewport.js'

Ext.define('ImpPdf.view.Viewport', {
extend: 'Ext.container.Viewport',
requires:[
    'Ext.layout.container.Fit',
    'ImpPdf.view.Main'
],
layout: {
    type: 'fit'
},
items: [{
    xtype: 'app-main'
}]
});

有一个控制器'Main.js'

Ext.define('ImpPdf.controller.Main', {
extend: 'Ext.app.Controller',
views: 'Main',
refs: [
    { ref: 'appMain', selector: 'appmain', xtype: 'app-main' }
],
init: function() {
    console.log('Main.Controle');
    console.log(this.getAppMain());
    this.control({
        'appmain tabpanel': {
            click: this.onTabChange
        }
    });
},
onTabChange: function(tabPanel, newCard, oldCard, eOpts) {
    console.log('tabchange');
}
});

有一个视图'Main.js'

Ext.define('ImpPdf.view.Main', {
extend: 'Ext.container.Container',
requires:[
    'Ext.tab.Panel',
    'Ext.layout.*',
    'Ext.ux.GroupTabPanel'
],
alias: 'widget.appmain',
xtype: 'app-main',
layout: {
    type: 'border'
},
defaults: {
    bodyBorde: false,
    split: true,
    bodyPadding: 0
},
items: [
    header,
    west,
    contentPanel
]
});

问题是，我无法在控制器中获得对视图的引用。控制台显示未定义。console.log (this.getAppMain ());

我需要得到一个tabpanel'来得到一个'tabchange'事件。

别名&是同义的:

alias: 'widget.appmain',
xtype: 'app-main',

它们应该是相同的，并且选择器应该只匹配一个

视图的xtype是app-main, ref应该是:

refs: [
    { ref: 'appMain', selector: 'app-main' }
]

ref创建的getter是getAppMain()

还要注意，不应该同时使用xtype和alias。以下是它们的区别:

xtype是对组件的引用。它被用来定义子组件。

alias是组件的配置。它定义了自己的xtype，可以在组件查询中作为选择器使用(就像ref一样)。

Ext.define('myForm', {
    alias: 'widget.myForm',
    items: [
        {xtype: 'button'},
        {xtype: 'textfield'}
    ]

可以替换alias: 'widget。myForm' by xtype: 'myForm'，它们在这个特殊情况下是同义词。两者都将做同样的事情，但它令人困惑，因为您将xtype用于两种完全不同的事情(引用组件并定义将被引用的xtype)。

resume: alias定义了xtype, ref的selector属性使用组件查询来选择getter返回的组件。

相关文章：