Jump to main content Jump to doc navigation

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.

  1. Ext JS Tutorial - Message Boxes
  2. Ext JS Tutorial - Ajax Include
  3. Ext JS Tutorial - Animation
  4. Ext JS Tutorial - Manipulating Nodes
  5. Ext JS Tutorial - Panels
  6. Ext JS Tutoral - Advanced Grid
  7. Ext JS Tutorial - Inside a CMP

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

  • modmore
  • STERC
  • Digital Penguin
  • Jens Wittmann – Gestaltung & Entwicklung
  • Fabian Christen
  • Dannevang Digital
  • Sepia River Studios
  • Chris Fickling
  • CrewMark
  • deJaya
  • Lefthandmedia
  • Murray Wood
  • eydolan
  • Following Sea
  • Anton Tarasov
  • Stéphane Jäggi
  • Raffy
  • Snow Creative
  • A. Moreno
  • Nick Clark
  • JT Skaggs
  • Helen
  • YJ
  • krisznet
  • Richard
  • Yanni

Budget

$305 per month—let's make that $500!

Learn more