Navigating tabs using Navigation keys.

[pawanspace]

Hi All,

I am new to extjs. I have a requirement where I would like to navigate tabs using navigation keys. For example I am on the first tab and now when I will press right button on my key board it should navigate to the next tab. Let me know if any one can suggest me any solution.

Regards,
Pawan Chopra.

[Animal]

The right arrow?

But when you say "on" a tab, an HTML element which can hold focus must be focussed.

Eg: an <input> or an <a> or a <button>

But if it's an <input>, surely you want right arrow to work as the user expects?

So, rethink your requirements, then look at http://www.extjs.com/deploy/ext-3.0-...el&member=keys

But remember, the user must have focussed an item within that TabPanel. You can't just think that you are "on" a tab, and have a key work.

[pawanspace]

Thanks I am able to navigate tabs using keyMap. But if you will look at the second portion of code I am also having subtabs in some tabs. I am not able to navigate them as I am getting activeTab from the main tab and that active tab dos not have any method which can tell me about the sub tabs. Any idea on this?

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

var tabs = new Ext.TabPanel({
		id:'tabpanel',
	    	renderTo: 'toolbar',
	    	activeTab: 0,
	    	autoWidth:true,
	    	border:true,
	    	items: [
		            {		
		                id: 'listmanagement.json1',
						title: CW.tablabel.tab1
						,xtype: 'toolbar'
						,border: false
						//,style: 'background:gray;border:none;'
						,style: 'border:none;'
						,listeners: {activate: rlistlistemp},
	
						items: [	
								getDefaultSubTab(subTab1),                                                                        
								subscriberblacklistsep,
								getSubTab(subTab2),
								adminblacklistsep,
								getSubTab(subTab3),
								historyblacklistsep,
								getSubTab(subTab4),
								whitelistsep,
								getSubTab(subTab5)
							   ]
					},
					getTabWithoutSubTab(tab2),
					getTabWithoutSubTab(tab3),
					getTabWithoutSubTab(tab4),
					{
					    id: 'administration.json1',
						title: CW.tablabel.tab5,
						xtype: 'toolbar',
						border: false,
						//style: 'background:gray;border:none;',
						style: 'border:none;',
	       				listeners: {activate: ssettinglistemp},
						items: [	
									getDefaultSubTab(subTab6),
									applicationConfsep,
									getSubTab(subTab7),
									manageusersep,
									getSubTab(subTab8),
									managerolesep,
									getSubTab(subTab9)
								]
					  }
			       ]
	    });

Regards,
Pawan Chopra.