5. Ext JS Tutorial - Panels

Last updated Apr 8th, 2021 | Page history | Improve this page | Report an issue

In this tutorial, we're going to see a bit more what Ext JS is all about by introducing panels. Panels can fill regions of the screen, and they are used as one of the building blocks when constructing applications or the MODX manager.

As always, we need to load up our trusty CSS and Javascript so that MODExt can work its magic:

<link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>

Simple Panel¶

<html>
    <title>Ext JS Panels</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            var myPanel = new Ext.Panel({
                renderTo : document.body,
                height   : 50,
                width    : 150,
                title    : 'Simple Panel',
                html     : 'This is my content',
                frame    : true
            });
        });

    </script>

    <body>
        <h1>Panels</h1>
        <div id="target_div"></div>
    </body>
</html>

RTFM¶

We'll point you once again to Sencha's original Ext JS documents. Remember that MODExt extends Ext JS version 3, so you'll want to refer to the appropriate source:

http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel

Take note of the various attributes that are available to the Panel object.