Posts Tagged ‘Ext’
Ext Js and the Ext.TabPanel a tutorial
Hi,
In this post I aim to show you a little more about Ext JS then just the message box. I have played around with the Ext.TabPanel recently and I have documented my findings to hopefully help someone out there get on board with some of the features of it.
Firstly I’m assuming you have all the Ext JS files included in your page, I’m too lazy to cover that again… now in your HTML page add the following 4 divs.
<div id="site_content"> <div id="4" class="x-tab" title="additional div tab">this should be a paragraph but look at the class</div> </div> <div id="tab1" class="x-hide-display">This is tab one</div> <div id="tab2" class="x-hide-display">This is tab two</div>
Now a few notes on these divs. The div with id ‘site_content’ is that Tab container, e.g. It will be used to hold all the tabs. The div inside site_content is an autoTab. More on these later.
The additional 2 divs outside the site_content div will also be tabs.
So, now we add the Ext Js code to the mix, this is were all the HTML above comes into play. Add the following code either in the HEAD section of your document (if you do this wrap it in a call to Ext.onReady() ) or in a SCRIPT tag at the bottom of your page.
var tabs = new Ext.TabPanel({
renderTo: 'site_content',
activeTab : 0,
deferredRender: false,
autoTabs : true,
items : [{
title:'1st',
contentEl : 'tab1',
},
{
title: '2nd',
html : 'this is the html property',
},
{
title : '3rd',
autoLoad : ‘a_remote_page_on_your_server.php’,
}]
});
So to explain all of that. We have created a new Ext.TabPanel and we will be using the variable tabs to refer to it later.
In the constructor of the Ext.TabPanel we specify some configuration options in a config object ({option:value}).
The most important options here are ‘renderTo’, ‘activeTab’ and the ‘items’ collection.
‘renderTo’ is the div on your page that you specify as the tab panel container.
‘items’ is a collection of objects which will make up the tabs.
‘activeTab’ is the tab which will be shown when the tabs appear.
Simple stuff so far, check out your page to see if everything appears as it should.
Now just to quickly explain the defferedRender and autoTabs properties. These are used to grab any divs marked with the x-tab css class. As long as the x-tab div resides inside the site_content (TabPanel) div then this will be rendered as a tab. Specify a title attribute for the tab title.
It’s a cool feature autoTabs, but I feel it makes your code difficult to understand if you’ve made the tabs outside your container div. However if they’re all inside your container div then it’s cool.
Now the items collection
The tabs for a tab panel can be generated in many ways as I have illustrated you can create tabs inside your container, and set them up using auto tabs or you can create them outside your container div and specify them by their DOM id using the contentEl property when creating an item.
You can also have a tab NOT be a DOM element by specifying the html option. This creates a tab with the html content you give it. Its ok if you only want a little bit of text, anything more would be messy.
You can also get tab content from an AJAX call by using the autoLoad property and giving it a URL to load. This is my personal favorite method.
Autoload can also take an object of type Ext.Updater() which means you can specify loads of groovy options to display loading text and the like.
Ok done blogging for now… I will post again showing you how to switch tabs on key press and how to use the Ext.KeyMap class.
Ext.onready and Ext.MessageBox.alert
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ext</title>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript">
// any code that will execute after the HTML page has loaded
// has to be passed a function to execute.
Ext.onReady(function ()
{
/* this will be exectued on page_load */
alert("we're ready now");
});
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1 id="header_one">My Site Title</h1>
</div>
<div id="site_content">
<p>Hello welcome to my site.</p>
</div>
</div>
</body>
</html>
Here is a basic HTML page which is using the Ext library on its own (yeah big respect to my HTML’s) . So first things first, a lot of javascript code will throw an error if the element on the page cannot be found. For instance, we want to play with the h1 element before it is displayed on screen (i.e. the page hasn’t loaded yet) – This isn’t possible because the element doesn’t exist in the Document Object Model (DOM) yet.
So Ext has a really cool function called Ext.onReady(). Basically this waits for the entire DOM to load, just the DOM, not images or CSS and then executes whatever it is passed.
Ext.onReady(function ()
{
/* this will be exectued on page_load */
alert("we're ready now");
});
Here we have passed in a <a href=†http://simon.incutio.com/slides/2006/etech/javascript/js-reintroduction-notes.html#functionsâ€>anonymous function</a>. This is the function that will execute whenever the DOM is ready.
All we are doing is displaying an alert box. Very tricky, try and keep up 😉
The majority of you javascript code will go in a call to Ext.onReady() so become familiar with it.
Here’s another onReady() example, this time using an Ext MesageBox. I recommend reading the documentation on the Ext.MessageBox it’s got a heap of useful methods that replace the standard rather bland javascript message boxes.
<script type="text/javascript">
Ext.onReady(function ()
{
Ext.Msg.alert('Page Load', "The Page loaded and now we're here!");
});
</script>
ExtJS Javascript Library for Beginners! 