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

Question

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

我想只需单击一个按钮并执行一些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();

});

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

工作守则:

感谢指针@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();
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mch*_*chl 7

你正在使用一个layout: 'border'使你的视口使用Ext.layout.BorderLayout.在此布局的文档中,您将找到此注释:

使用BorderLayout的任何容器都必须有子项 region:'center'.中心区域中的子项目将始终调整大小以填充布局中其他区域未使用的剩余空间.

归档时间：	15 年前
查看次数：	9035 次
最近记录：	15 年前