工作代码：

Question

我想简单地点击一个按钮并执行一些ExtJS代码进行测试，但是这个ExtJS代码给了我错误this.el is null。 如何才能使此代码正常工作？

main.js：

Ext.onReady(function() {

    var button = new Ext.Button('button-div', {
        text: 'hello',
        handler: function() {
            alert('pressed');
        }
    });

    viewport = new Ext.Viewport({
        layout: 'border',
        items: [ button ]
    });

    viewport.doLayout();

});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="ext/ext-all-debug.js">
        </script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>

    </body>
</html>

工作代码：

感谢指针@Mchl，现在可以使用此代码：

Ext.onReady(function() {

    var button = new Ext.Button({
        text: "Click this",
        handler: function() {
            alert('pressed');
        }
    });

    var regionContent = new Ext.Panel({
        region: 'center',
        padding:'10',
        autoScroll: true,
        items: [ button ]
    });

    viewport = new Ext.Viewport({
        layout: 'border',
        items: [ regionContent ]
    });

    viewport.doLayout();
});

Answer 1

您正在使用layout: 'border'，这会使您的视口使用Ext.layout.BorderLayout。在此布局的文档中，您将找到此注释：

使用BorderLayout 的任何容器都必须包含子项   region:'center'。中的子项目   中心区域将始终调整大小   填补未使用的剩余空间   由其他地区的布局。

为什么这个ExtJS代码得到错误“this.el为null”？

工作代码：

1 个答案: