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.