ExtJS 如何使用 renderTo 配置将组件渲染到另一个特定容器答案

【问题标题】：ExtJS how to use renderTo config to render a component to another specific containerExtJS 如何使用 renderTo 配置将组件渲染到另一个特定容器
【发布时间】：2015-08-04 07:43:10
【问题描述】：

我正在学习 ExtJS MVC

我想点击按钮然后在特定容器中创建一个面板。但我对 renderTo 配置感到困惑。我不知道如何渲染到右侧容器。

我的代码如下。首先我在 Viewport 中定义了两个容器

Ext.define('MyTest.view.Viewport', {
  extend: 'Ext.container.Viewport',
  layout: 'border',

  requires: [
      'MyTest.view.button.TestButton',
  ],

  items: {
  xtype: 'container',
  itemId: 'main',
  region: 'center',
  border: false,
  layout: {
      type: 'hbox',
      pack: 'start',
      align: 'stretch'
  },
  items: [{
      xtype: 'container',
      itemId: 'left',
      style: 'background-color: black;',
      flex: 1,
      items: [{
          xtype: 'testbtn'
      }]
  }, {
      xtype: 'container',
      itemId: 'right',
      flex: 1
  }]
 }

});

按钮在视图中

  Ext.define('MyTest.view.button.TestButton', {
  extend: 'Ext.button.Button',
  alias: 'widget.testbtn',

  initComponent: function() {
    var me = this;
    Ext.apply(this, {
      height: 100,
      width: 100
    });
    me.callParent(arguments);
  }
});

在控制器中点击事件

Ext.define('MyTest.controller.Button', {
    extend: 'Ext.app.Controller',
    views: ['MyTest.view.button.TestButton'],

  refs: [{
    ref: 'testbtn',
    selector: 'testbtn'
  }],

  init: function() {
    this.control({
      'testbtn': {
          click: this.test
      }
    });
  },

  test: function() {
    Ext.create('Ext.panel.Panel', {
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
  }
});

现在它可以渲染到正文了。如何在右侧容器中渲染它？非常感谢

【问题讨论】：

标签： javascript extjs model-view-controller extjs-mvc

【解决方案1】：

您可以使用add 方法将panel 或container 添加到items 数组中。

例如：

Ext.ComponentQuery.query('#westPanel')[0].add({ html:'Some New Component Here.' });

下面是更深入示例的完整代码：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel',{
            renderTo:Ext.getBody(),
            height:800,
            layout:'border',
            tbar:[{
                text:'Add Html To East Region',
                handler: function(btn){
                    Ext.ComponentQuery.query('#westPanel')[0].add({
                        html:'Oh, Hello.'
                    });
                }
            }],
            defaults:{
                xtype:'panel'
            },
            items:[{
                region:'center',
                html:'Center Panel'
            },{
                region:'west',
                width:400,
                itemId:'westPanel',
                items:[]
            }]
        });
    }
});

还有一个fiddle for demonstration 的工作代码

【讨论】：

感谢您的帮助。对我很有帮助