Question

我正在学习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()
    });
  }
});

现在它可以渲染到身体。如何在右侧容器中呈现它？非常感谢

Answer 1

您可以使用add方法添加到items或panel的{{1}}数组。

例如：

container

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

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

工作代码的fiddle for demonstration

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

1 个答案: