Switching Tabs with Ext.TabPanels and Ext.KeyMap Keypress events

In an earlier post I did some bits with the Ext.TabPanel class. I recommend you have a read of that before checking out this post, unless you’re happy with Ext.TabPanel then I’ll show you how to switch tabs with a Ext.KeyMap class.

Ok so you tab panel is ready to rock.

You need a key map and to understand which keys map and what their codes are. Take a look here for some common key codes: http://unixpapa.com/js/key.html

If you read that you will notice that every key on your keyword has a number related to it.
Fortunately Ext Js makes it nice and easy for us to handle keyboard key press events through the Ext.KeyMap class.
I’m going to show you a basic key mapping now that just displays an alert box when a key is pressed.

var map = new Ext.KeyMap(document, {
key: ['abc'],
fn: function(e) {
alert('a, b or c pressed');
}
});

This code is pretty straight forward, it keeps an eye out for the user pressing the keys a b or c, whenever that happens the function or fn property of the map is fired. Try it out.
Oh and the e argument there is the character code in an integer format.
There are a couple of examples in the Ext JS API docs for the KeyMap class.

Switching the tabs around.
Ok moving on. This is the cool bit. Firstly we need to set up a KeyMap to establish when a user has used the cursor arrow keys to move tabs, wait, lets make that pressed ctrl and cursor arrow key.
Still that’s pretty simple with Ext.
Here is the KeyMap that we will need. You probably want to wrap this in a Ext.onReady() call.

var map = new Ext.KeyMap(document, {
key: [37, 39],
ctrl: true,
fn: switchTabs
});

There you go, a KeyMap applied to the entire document object to listen for the left cursor arrow (37) and the right cursor arrow (39) and the Ctrl key. When a user presses our key combination the switchTabs function will fire.

The cool thing with these key maps is that you can also use constants instead of the number of the keys. Take a look in the Ext.EventObject class this has a load of pre-defined constants that map to certain keys. We’ll change our code to use these constants rather then the numbers as lefts face facts, it’s not overtly clear what 37 and 39 mean to someone seeing the code for the first time, especially if its not commented.

So the new code now should look like this:

var map = new Ext.KeyMap(document, {
key: [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],
ctrl: true,
fn: switchTabs
});

So the switchTabs function, will have to find the active tab and either increment or decrement its id property by 1.

So all we need are a couple of methods from the TabPanel and we’re away.

Here is the code in full:

function switchTabs(e)
{
// note the items.items - no idea why
var items = tabs.items.items;

// grab the active tab
var active_tab = tabs.getActiveTab();

// grab the total number of tabs
var total_tabs = items.length;

// loop the tabs
for(i = 0 ; i < items.length; i++)
{
// find the active tab based on the id property.
if (active_tab.id == items&#91;i&#93;.id) {
// do we want to move left?
if (e == Ext.EventObject.LEFT)
{
// move left
var next = (i - 1)
if (next < 0) {
// we're at -1, set to last tab
next = (total_tabs - 1);
}
}
else
{
// move right
var next = (i + 1);
if (next >= total_tabs)
{
// we've gone 1 too many set to start position.
next = 0;
}
}
// set the tab and return there's no need to carry on
tabs.setActiveTab(items[next].id);
return;
}
}
}

Give it a try, it’s pretty straight forward, just increments/ decrements or sets the tab to the beginning or end giving the effect of looping through the tabs.

Go forth and Tab up your site :o)

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.