1. #1
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default Sliding Tabs - Google Chrome Style - Ext.ux.SlidingTabPanel

    Sliding Tabs - Google Chrome Style - Ext.ux.SlidingTabPanel


    Hi All,

    I finally got around to starting a blog and giving back to the community.

    Ext.ux.SlidingTabPanel, Version 1.0 - 1/14/2010

    This extension creates a standard TabPanel and alters it so that the user can re-order the tabs, similar to the Google Chrome Browser.
    • Works in IE 6+, FF, Webkit
    • Works in Ext JS 3.1, 3.0, 2.3 (these are all the versions of Ext JS I tested)

    License: GPL v3... I wish I could release it under the MIT but I am not sure if I can comply with the FLOSS requirements.

    You can demo it here.

    Download the source at the demo site.

    More extensions to come...
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That's very sexy!

    Can you make it a plugin of TabPanel rather than a subclass?

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Can I suggest that demo code be droppable into an examples directory, on anyone's machnie so

    Code:
    <html>
    	<head>
    		<title>Chrome Style Sliding Tabs</title>
    		<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    		<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     		<script type="text/javascript" src="../../ext-all.js"></script>
    		
    		<script type="text/javascript" src="slidingtabs.js"></script>
    		<script type="text/javascript" src="../ux/TabCloseMenu.js"></script>
    		
    		<script type="text/javascript">
    			
    			Ext.onReady(function(){
    				
    				window.loaded = true;
    				
    				var tabs = new Ext.ux.SlidingTabPanel({
    			        renderTo:'tabs',
    			        resizeTabs:true, // turn on tab resizing
    			        tabWidth:135,
    			        enableTabScroll:false,
    			        width:645,
    			        height:250,
                                    slideDuration: .15,
                                    defaults:{bodyStyle:'padding:10px;'},
    			        plugins: new Ext.ux.TabCloseMenu()
    			    });
    			
    			    // Tab generation code
    			    var index = 0;
    			    while(index < 4){
    			        addTab();
    			    }
    			    function addTab(){
    			        tabs.add({
    			            title: 'New Tab ' + (++index),
    			            html: 'Tab Body ' + (index) + '<br/><br/><div>Bogus Markup</div>',
    			            closable:true
    			        }).show();
    			    }
    			
    			    new Ext.Button({
    			        text: 'Add A New Tab',
    			        handler: addTab
    			    }).render(document.body, 'tabs');
    				
    			});
    			
    		</script>
    	</head>
    	<body> 
    		<div id="tabs" style="margin:15px 0;"></div> 
    	</body>
    </html>

  4. #4
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    Thanks Animal for the compliment and the suggestions.

    I should look into creating a plugin version, makes sense.

  5. #5
    Ext JS Premium Member veenvliet.morion's Avatar
    Join Date
    Oct 2009
    Location
    Netherlands
    Posts
    24
    Vote Rating
    0
    veenvliet.morion is on a distinguished road

      0  

    Default


    Looking sharp!!!

    One suggestion to make it more work like google chrome like explained here:
    http://www.theinvisibl.com/news/2009...google-chrome/

    The tabs don't move (get bigger) when a tab is closed, but when the mouse moves outside the tabbar area.

  6. #6
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      0  

    Default


    whohoo! that rocks!
    Thanks for sharing!!
    Programming today is a race between software engineers striving to build bigger and better Ń–diot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  7. #7
    Sencha - Community Support Team mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,053
    Vote Rating
    17
    mschwartz will become famous soon enough mschwartz will become famous soon enough

      0  

    Default


    Quite awesome.

    Extra credit if you go the whole 9 yards and make it so you can tear off the tab and drag it to your desktop!

    (I kid, I kid)

  8. #8
    Sencha User scipio's Avatar
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    scipio is on a distinguished road

      0  

    Default


    Thanks guys, the compliments are really appreciated.

    veenvliet.morion - Thanks for the link, I'll check that out.

    mschwartz - Could be done using adobe AIR, would be an immense pain in the arse though. Would be easier to design it so that a user could tear off a tab to a floated Ext.Panel in the browser. In fact, that is a good idea. Thanks.

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by scipio View Post
    mschwartz - Could be done using adobe AIR, would be an immense pain in the arse though. Would be easier to design it so that a user could tear off a tab to a floated Ext.Panel in the browser.
    Using AIR, you could have a tabpanel at the top (or anywhere) and when you tear off a tab you could open another AIR window.

  10. #10
    Ext User
    Join Date
    Jul 2007
    Posts
    24
    Vote Rating
    -1
    xiexueze has a little shameless behaviour in the past

      0  

    Default


    That is cool !! thanks for sharing !!

    I encounter some problems when i put tabpanel into portal ,the tabpane's DD come into collision with the portal's. I change the code like this:

    Code:
    handleMouseDown function: 
    
    if (this.clickValidator(e)) {
    	this.setStartPosition(); // Set the initial element position
    	this.b4MouseDown(e);
    	this.onMouseDown(e);
    	this.DDM.handleMouseDown(e, this);
    				
    	this.tabpanel.onStripMouseDown(e);//active the click tab
    	
    	this.DDM.stopEvent(e); // Must remove this event swallower for the tabpanel to work
    }
    
    endDrag function:
    
    Ext.dd.DDM.useCache = true;
    Ext.dd.DDM.mode = 0;//set the mode
    hope this is userful