1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

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

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


    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.

    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';
    		}
    		
    		
    	}	
    	
    });
    Last edited by Condor; 18 Feb 2009 at 6:03 AM. Reason: Please post using [ CODE ] tags!

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    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:
    Code:
    var PanelMainMenu = new Ext.BoxComponent({
    	region:'north',
    	el:'north',
    	height:70
    });

  3. #3
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


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

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

  6. #6
    Ext User
    Join Date
    Dec 2008
    Posts
    4
    Vote Rating
    0
    Shahid Javed is on a distinguished road

      0  

    Default


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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar