please help me.. i want to create new tabs using dropdown menu. but dropdonw menu i..

[Shahid Javed]

I'm trying to create a page using a border layout, and then adding three panels to the border layout's north panel, west and a tabPanel in center. I want to create new tabs at run time by clicking in right panel and from drop down menus. I am succeeded to create tabs from right panel. My drop down menus is on top(north) panel. Top menu is not visible outside the north menu. please anybody help me to solve this problem. here is the link for demo. http://202.163.69.61/javascript/ext-...tabs/tptut.php. When you mouse over menu items they are only visible inside that Panel not outside that panel.
Please help. This is really bogging me down.

here is the complete code.

Ext.onReady(function(){



// Menu containing actions
	var PanelMainMenu = new Ext.Panel(	
	{
		region:'north',
		contentEl:'north',
		border: false,		
		height:70,		
		layout:'accordion',
		layoutConfig:{
			animate:false
		}		
    });
	
    // Parent Panel to hold right menu
    var actionPanel = new Ext.Panel(	
	{
		region:'east',
		id:'west-panel',
		title:'My Tasks and Reminders',
		contentEl:'west',
		//split:true,
		width: 200,
		minSize: 175,		
		collapsible: true,
		margins:'0 0 0 3',
		layout:'accordion',
		layoutConfig:{
			animate:true
		}		
    });
 
    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
		enableTabScroll:true,
		margins:'0 0 0 0',
		activeTab:0,
		items:[{
			id:'tab1',
			contentEl:'tabs',
    		title: ' Home ',
    		closable:false,
    		autoScroll:true
		}]
    });
 
    // Configure viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[
				  	PanelMainMenu,
					tabPanel,
					actionPanel
				]
		   });

// Adds tab to center panel
    function addTab(tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
	    iconCls: 'tabs',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
	    closable:true
	}).show();
    }
 
    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,title, url) {
    	var tab = tabPanel.getItem(tabId);
    	if(tab){
    		tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(title,url);
    	}
    	tabPanel.setActiveTab(tab);
    }
 
    // Map link ids to functions
    var count = 0;
    var actions = {
    	'create' : function(){
			count ++;
    		addTab("New Tab",'newtabFrame.php');
    	},
    	'pos-link' : function(){

    		addTab("New Sale",'newsale.php');
    	}		,
    	'home-link' : function(){
    		// Toggle between sample pages
    		updateTab('tab1','Home','sample0.php');
    		
    	}
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }
 
    // This must come after the viewport setup, so the body has been initialized
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});	
	PanelMainMenu.body.on('mousedown', doAction, null, {delegate:'a'});	
	
	if(!Ext.getDom('hd')){
		return;
	}
	
	var activeMenu;
	
	function createMenu(name){
		var el = Ext.get(name+'-link');
		
		var tid = 0, menu, doc = Ext.getDoc();
		
		var handleOver = function(e, t){
			if( !e.within(menu)){
				hideMenu();
				
			if(menu){

			menu.hide();
				
				
				
			}		
			
			}	
		};
				
		var hideMenu = function(){
			if(menu){

				menu.hide();
				el.setStyle('text-decoration', '');
				doc.un('mouseover', handleOver);
				doc.un('mousedown', handleDown);
			
			}
		}
		
		var handleDown = function(e){
			if(!e.within(menu)){
				//hideMenu();
				//menu.show();				
			}
		}
		
		var showMenu = function(){
			clearTimeout(tid);
			tid = 0;
			
			if (!menu) {
				menu = new Ext.Layer({shadow:'sides',hideMode: 'display'}, name+'-menu');
				
			}
			
							

			
			
			if (!menu.isVisible()) 
			{
				menu.show();
				menu.alignTo(el, 'tl-bl?');
				menu.sync();
				el.setStyle('text-decoration', 'underline');
				doc.on('mouseover', handleOver, null, {buffer:200});
				doc.on('mousedown', handleDown);
				
			}
			
		}
		
		el.on('mouseover', function(e){
			if(!tid){
				tid = showMenu.defer(100);	
			}
		});
		
		el.on('mouseout', function(e){
			if(tid && !e.within(el, true)){
				clearTimeout(tid);
				tid = 0;				
			}
		});
	}
	
	createMenu('pos');
	createMenu('inventory');
	createMenu('reports');
	createMenu('manage');
	createMenu('newSale');
	createMenu('newOrderForm');
	createMenu('moreProductsServices');
	
	
	// expanders
	Ext.getBody().on('click', function(e, t)
									   {
		t = Ext.get(t);
		
		e.stopEvent();
		
		var bd = t.next('div.expandable-body');
		bd.enableDisplayMode();
		var bdi = bd.first();
		var expanded = bd.isVisible();
		
		if(expanded){
			bd.hide();
			
		}else{
			bdi.hide();
			bd.show();
			bdi.slideIn('l', {duration:.2, stopFx: true, easing:'easeOut'});	
		}
		
		t.update(!expanded ? 'Hide details' : 'Show details');
			
	}, null, {delegate:'a.expander'});
	
	var gs = Ext.get('gsearch-box');
	if(gs){
		gs.on('focus', function(){
			if(gs.getValue() == 'Search with google'){
				gs.dom.value = '';
				gs.up('div').addClass('gs-active');
			}
		});
		
		gs.on('blur', function(){
			if(gs.getValue() == ''){
				gs.dom.value = 'Search with google';
				gs.up('div').removeClass('gs-active');
			}
		});
		
		if(gs.getValue() == ''){
			gs.dom.value = 'Search with google';
		}
		
		
	}	
	
});

[Condor]

Why are you using a layout AND a contentEl (these don't work together)?

The CSS for Panel is causing your menu to be clipped. Why are you even using a Panel?

Simply use:

var PanelMainMenu = new Ext.BoxComponent({
	region:'north',
	el:'north',
	height:70
});

[Shahid Javed]

but if i use this code it can not create tab as now its doing. that's why i am using panel ...

[Shahid Javed]

If i use this code instead of panel

var PanelMainMenu = new Ext.BoxComponent({
region:'north',
el:'north',
height:70
});

then i cant call this function
actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});
........................................................................................................
this function is creating new tabs in tab panel.
can you plz guide me that how i can use this line of code if i create the layout using view port... actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});..

sorry i am new in extJs.

Thanks

[Condor]

If you are not using a Panel then there won't be a body element.

Use:

PanelMainMenu.el.on('mousedown', doAction, null, {delegate:'a'});

[Shahid Javed]

its working now....
Thanks... very very Thanks for you kind help.......