Question

我正在尝试向面板添加按钮。首先，我创建面板，并将其渲染为 Ext.getBody（）。这似乎工作正常，但后来我想向该面板渲染一个按钮，它给出了这个错误：

未捕获的TypeError：无法读取属性＆＃39; dom＆＃39;为null

以下是代码：

Ext.onReady(function () {

    var p = Ext.create('Ext.Panel',{
        renderTo:Ext.getBody(),
        html:'myPanel'
    })


    Ext.create('Ext.Button', {
        text: 'Click me!!!!',
        renderTo: p,
        handler: function() {
            alert('You clicked the button!')
        }
    });
});

小提琴：

https://fiddle.sencha.com/#fiddle/694

Answer 1

了解组件和元素之间的区别非常重要。

组件是Ext.Component或其子类之一的实例。元素指的是DOM。

在您的情况下，renderTo配置需要一个元素，但您要将一个组件传递给它。

嵌套组件时，通常会使用容器。

由于Ext.Panel是一个容器，您需要做的就是添加按钮。您可以使用items配置执行此操作（正如您的问题＆评论中已经指出的那样）：

var p = Ext.create('Ext.Panel',{
    renderTo:Ext.getBody(),
    title:'myPanel',
    items: [
        Ext.create('Ext.Button', {
            text: 'Click me!!!!',
            handler: function() {
                alert('You clicked the button!');
            }
        })
    ]
});

或 - 如果您想要在之后添加按钮，请使用方法add或insert：

p.add(Ext.create('Ext.Button', { text: 'Click me!!!!', handler: function() { alert('You clicked the button!'); } }));

有用的文档资源：

Layouts & containers

Components

无法将元素/组件附加到Extjs面板

1 个答案: