HOWTO: switch tabs on keypress [updated]

[tobiu]

hi together,

i hope someone will find this one useful.

when having multiple contentpanels / gridpanels, i like to switch them via the "left" and "right" arrow-butons (not sure how they are called in english).

first, we have to get a listener to the global-keypress-event:


Ext.EventManager.addListener(document, "keypress", LayoutClass.onKeypress);


then, we have to get the 2 needed buttons (function in the LayoutClass),
[update] + the esc-event. if you also have a basic dialog, remove the keylistener(27) there and use this one (because it also works when you click somewhere else and then press "esc" while die dialog is open). if you do not have a basic dialog, just use the else part of the esc-event.


onKeypress : function (e) {
var k = e.getKey();

if(k == e.LEFT) {
LayoutClass.focusPrevTab();
}
else if(k == e.RIGHT) {
LayoutClass.focusNextTab();
}
else if(k == e.ESC) {
if(LayoutClass.hideBasicDialog&& LayoutClass.hideBasicDialog.isVisible()) {
LayoutClass.hideBasicDialog();
} else {
LayoutClass.destroyActiveTab();
}
}
}

in my layout-class, i have add the following 2 functions too, [update] and 1 for the close-tab-event.



focusNextTab : function() {
var id = layout.getRegion('center').getTabs().getActiveTab().id;

for (var k=0; k < layout.getRegion('center').getTabs().getCount(); k++) {
if (k > 0 && layout.getRegion('center').getTabs().getTab(k-1).id == id) {
layout.getRegion('center').getTabs().getTab(k).activate();
break;
}
}
},

focusPrevTab : function() {
var id = layout.getRegion('center').getTabs().getActiveTab().id;
var count = layout.getRegion('center').getTabs().getCount() - 1;

for (var k = count; k >= 0; k--) {
if (k < count && layout.getRegion('center').getTabs().getTab(k+1).id == id) {
layout.getRegion('center').getTabs().getTab(k).activate();
break;
}
}
},

destroyActiveTab : function() {
if (layout.getRegion('center').getActivePanel()
&& layout.getRegion('center').getActivePanel().isClosable() == true) {

layout.getRegion('center').remove(layout.getRegion('center').getActivePanel());
}
}


this will change the next available tab, if it exists or close the panel, if you push "esc".



when using grids, here is another useful keypress-example:



var selModel = new Ext.grid.RowSelectionModel({singleSelect:false});

var grid = new Ext.grid.Grid(selModel: selModel,...);
grid.on('keypress', onKeypress, this);


then, we have to get the 2 needed buttons:



function onKeypress (e) {
var k = e.getKey();

if(e.getCharCode() == 97) { // button a
selModel.selectAll();
}
else if(e.getCharCode() == 113) { // button q
selModel.clearSelections();
}
}


this one selects all rows in a grid on "a" and deselects all rows on "q".
only working with single-select: false.


kind regards, tobiu

[tobiu]

i updated the top posting again.

now, active (and closeable) panels get destroyed by clicking the "esc" button.
this is case-sensitive: if you have a basic dialog open, it gets closed (hidden), if not the active contentpanel gets removed.


kind regards, tobiu

[ccquiles]

This sounds like just what I need... but I am new to ext and I am wondering where the generic layout class is located, or where you put your Layout Class. Thanks!

[tobiu]

hi ccquiles,

the first feedback after 380 readings *g*

for this example, i worked with a border-layout, but the generell possibility for changing tabs on keypress works for other tabpanels too (with a bit modification).


LayoutClass = function(){
var layout;
return {
firstInit : true,
lastActiveTab : 1,
slideOutDirTab : "l",

init : function(){

layout = new Ext.BorderLayout(document.body, {
north: {
split:true,
initialSize: 128,
minSize: 128,
maxSize: 250,
titlebar: true,
collapsible: true,
collapsedTitle: "myTitle",
animate: true
},...

this is the way i use the "LayoutClass".


kind regards, tobiu

[mohaaron]

Hello all,

I don't understand how to apply this to the code that I already have. I'm using a Viewport with layout border that has a nested nested formpanel with tabpanel.

I would like to allow the F Keys to be used for changing tabs on the tabpanel. Do I need to get a reference to the Viewport layout class to do this?



var viewport = new Ext.Viewport({
layout: 'border', // The border layout requires a center region.
items: [
toolbar, // north
leftPanel, // west
mainForm // center
]
});

[tobiu]

hi mohaaron,

this topic is quite old and requires the ext 1.x version.
since you are using a viewport with layout:border i guess, you are using 2.x or 3.0 ;)

in those versions, it should be easier to apply the behaviour, since every panel / tabPanel has a "keys"-config, where you can directly add the methods.

you can also use the mixedCollection with tabPanel.items.get(tabIndex) to get the wanted tab to activate.

kind regards, tobiu

[mohaaron]

Thank you for the reply.

Here is the solution I came up with using 3.0-rc2.



var map = new Ext.KeyMap(document, {
key: [Ext.EventObject.LEFT, Ext.EventObject.RIGHT],
fn: function(key, e) {
//console.log('key=' + key);

var tabPanel = Ext.getCmp('tabPanel');

var tabCount = tabPanel.items.length;

var tabId = parseInt(tabPanel.getActiveTab().id);
//console.log('tabId = ' + tabId);

var tabIndex = tabId;

if (key == Ext.EventObject.RIGHT) {
//console.log('RIGHT');
if (tabIndex == tabCount) // We're on the last tab, move forward to first tab.
tabIndex = 1;
else
tabIndex = tabId + 1;
}
else if (key == Ext.EventObject.LEFT) {
//console.log('LEFT');
if (tabIndex == 1) // We're on first tab, move back to last tab.
tabIndex = tabCount;
else
tabIndex = tabId - 1;
}

//console.log('tabIndex = ' + tabIndex);

tabPanel.setActiveTab(tabIndex);
}
,stopEvent: true
});