Switching Tabs with Ext.TabPanels and Ext.KeyMap Keypress events
Posted on | March 2, 2008 |
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[i].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)
Comments
Leave a Reply