EXTJs：添加子视图

Question

我正在尝试这个 sencha fiddle。如何显示子视图？

//CHILD

//Controller
Ext.define('MyApp.controller.child', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.child',
    init: function() {
        alert("Initializing Child");
    }
});



//View
Ext.define('MyApp.view.child', {
    extend: 'Ext.form.Panel',
    alias:'widget.child',
    controller: 'child',
    title: 'Alien',
    width: 200,
    html: '<p>Test Child!</p>',
    renderTo: Ext.getBody()

});

//----------

//PARENT 
//Controller
Ext.define('MyApp.controller.Whatever', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.Whatever',
    init: function() {
        alert("initializing parent");
    }
});



//View
Ext.define('MyApp.view.Whatever', {
    extend: 'Ext.form.Panel',
    alias:'widget.Whatever',
    controller: 'Whatever',
    title: 'Hello',
    xtype:'child',
    width: 200,

    renderTo: Ext.getBody()

});

//------------------------


Ext.application({
    name: 'MyApp',


    launch: function() {

        Ext.create('MyApp.view.Whatever');

    }
});

Answer 1

这是正确的方法

//CHILD

//Controller
Ext.define('MyApp.controller.child', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.child',
    init: function() {
        alert("Initializing Child");
    }
});



//View
Ext.define('MyApp.view.child', {
    extend: 'Ext.form.Panel',
    alias:'widget.child',
    controller: 'child',
    title: 'Alien',
    width: 200,
    html: '<p>Test Child!</p>',
    renderTo: Ext.getBody()

});

//----------

//PARENT 
//Controller
Ext.define('MyApp.controller.Whatever', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.Whatever',
    init: function() {
        alert("initializing parent");
    }
});



//View
Ext.define('MyApp.view.Whatever', {
    extend: 'Ext.form.Panel',
    alias:'widget.Whatever',
    controller: 'Whatever',
    title: 'Hello',
    items:[

        {
            xtype:'child'
        }
    ],

    width: 200,

    renderTo: Ext.getBody()

});

//------------------------


Ext.application({
    name: 'MyApp',


    launch: function() {

        Ext.create('MyApp.view.Whatever');

    }
});

EXTJs：添加子视图

EXTJs: Adding a child view

javascript

extjs

extjs5