ExtJS如何使用renderTo config将组件呈现给另一个特定容器

Question

I am learning ExtJS MVC

I want to click button then create a panel in specific container. But I am confuse about the renderTo config. I don't know how to render to right side container.

My codes as below. First I define two container in 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
  }]
 }

});

Button in view

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

And click event in controller

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()
    });
  }
});

Now it just can render to body. How to render it in right side container? Thanks a lot

Answer 1

You can use the add method to add to the items array of a panel or container .

For example:

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

and here is the full code for a more in-depth example:

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:[]
            }]
        });
    }
});

And a fiddle for demonstration of the working code