CODEWITHSUNDEEP
javascriptextjs
Edward Tanguay
Edward Tanguay

Reputation: 193472

Why does this ExtJS code get the error "this.el is null"?

I want to simply be able to click a button and execute some ExtJS code for testing, but this ExtJS code gives me the error this.el is null. What do I have to do to get this code to work?

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>

Working Code:

Thanks for the pointer @Mchl, it now works with this code:

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

Upvotes: 2

Views: 10331

Answers (1)

Mchl
Mchl

Reputation: 62395

You're using a layout: 'border' which makes your viewport use Ext.layout.BorderLayout. In the documentation for this layout you'll find this note:

  • Any container using the BorderLayout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

Upvotes: 8

Related Questions