5. Ext JS Tutorial - Panels
Last updated Apr 8th, 2021 | Page history | Improve this page | Report an issue
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
Budget
$305 per month—let's make that $500!
Learn moreIn 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.
- Ext JS Tutorial - Message Boxes
- Ext JS Tutorial - Ajax Include
- Ext JS Tutorial - Animation
- Ext JS Tutorial - Manipulating Nodes
- Ext JS Tutorial - Panels
- Ext JS Tutoral - Advanced Grid
- 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
Budget
$305 per month—let's make that $500!
Learn more