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'); 

    } 
});